▀▄▀▄▀▄▀▄▀▄▀▄ Các bài đăng mới ▀▄▀▄▀▄▀▄▀▄▀
    Kenh sctv1 Kenh sctv1 Kenh sctv1
    Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1
    Kenh sctv1 Kenh sctv5 Kenh HTV2 Kenh SCTV16




Xem truyền hình trực tuyến (Click here)

MENU DỌC XỔ XUỐNG CÁC MENU CON (Kiểu 1)

Để đáp ứng lời yêu cầu của các bạn, bắt đầu từ bài này mình sẽ lần lượt chia sẻ đến các bạn một số mẫu MENU DỌC XỔ XUỐNG CÁC MENU CON.
Với thủ thuật này, trên blog các bạn sẽ có một menu dọc khá đẹp, khi rê chuột vào mỗi menu sẽ có một bản tóm tắt giới thiệu về menu này. Khi bạn bấm chuột vào menu sẽ xuất hiện một số menu con phía dưới, bấm lần nữa thì menu này sẽ rút gọn lên... Bạn bấm vào Xem thử phía dưới để thấy rõ thủ thuật menu dọc này.



Xem thử menu


Thủ thuật này cũng khá đơn giản, bạn đăng nhập vào Blog > Chọn Thiết kế > Thêm tiện ích HTML rồi dán tất cả các đoạn code vào.


<script type="text/javascript" src="http://dl.dropbox.com/u/66348944/dunghennessy/menudoc-menucon/jquery.min.js"></script>

<script type="text/javascript" src="http://dl.dropbox.com/u/66348944/dunghennessy/menudoc-menucon/ddaccordion.js">



</script>

<script type="text/javascript">

//Initialize Arrow Side Menu:
ddaccordion.init({
            headerclass: "menuheaders", //Shared CSS class name of headers group
            contentclass: "menucontents", //Shared CSS class name of contents group
            revealtype: "clickgo", //Reveal content when user clicks or onmouseover the header? Valid value: "click", or "mouseover"
            mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
            collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
            defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc]. [] denotes no content.
            onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
            animatedefault: false, //Should contents open by default be animated into view?
            persiststate: true, //persist state of opened contents within browser session?
            toggleclass: ["unselected", "selected"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
            togglehtml: ["none", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
            animatespeed: 500, //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
            oninit:function(expandedindices){ //custom code to run when headers have initalized
                        //do nothing
            },
            onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
                        //do nothing
            }
})

</script>

<style type="text/css">

.arrowsidemenu{
            width: 250px; /*width of menu*/
            border-style: solid solid none solid;
            border-color: #94AA74;
            border-size: 1px;
            border-width: 1px;
}
           
.arrowsidemenu div a{ /*header bar links*/
            font: bold 12px Verdana, Arial, Helvetica, sans-serif;
            display: block;
            background: transparent url(http://1.bp.blogspot.com/-lY8cWarkLfM/T40JT3ydKxI/AAAAAAAAXyg/vOUW4-uqPSs/s1600/arrowgreen.gif) 100% 0;
  height: 24px; /*Set to height of bg image-padding within link (ie: 32px - 4px - 4px)*/
            padding: 4px 0 4px 10px;
            line-height: 24px; /*Set line-height of bg image-padding within link (ie: 32px - 4px - 4px)*/
            text-decoration: none;
}
           
.arrowsidemenu div a:link, .arrowsidemenu div a:visited{
            color: #26370A;
}

.arrowsidemenu div a:hover{
            background-position: 100% -32px;
}

.arrowsidemenu div.unselected a{ /*header that's currently not selected*/
            color: #6F3700;
}

           
.arrowsidemenu div.selected a{ /*header that's currently selected*/
            color: blue;
            background-position: 100% -64px !important;
}

.arrowsidemenu ul{
            list-style-type: none;
            margin: 0;
            padding: 0;
}

.arrowsidemenu ul li{
            border-bottom: 1px solid #a1c67b;
}


.arrowsidemenu ul li a{ /*sub menu links*/
            display: block;
            font: normal 12px Verdana, Arial, Helvetica, sans-serif;
            text-decoration: none;
            color: black;
            padding: 5px 0;
            padding-left: 10px;
            border-left: 10px double #a1c67b;
}

.arrowsidemenu ul li a:hover{
            background: #d5e5c1;
}

</style>



<div class="arrowsidemenu">

<div><a href="http://www.dunghennessy.blogspot.com" title="Home">● TRANG CHỦ</a></div>
<div class="menuheaders"><a href="#" title="Nhập dòng mô tả giới thiệu về menu cha tại đây">▼ Tên menu cha</a></div>
            <ul class="menucontents">
            <li><a href="#">Tên menu con 1</a></li>
            <li><a href="#">Tên menu con 2</a></li>
            <li><a href="#">Tên menu con 3</a></li>
            <li><a href="#">Tên menu con 4</a></li>
            <li><a href="#">Tên menu con 5</a></li>
            <li><a href="#">Tên menu con 6</a></li>
            <li><a href="#">Tên menu con 7</a></li>
            <li><a href="#">Tên menu con 8</a></li>
            </ul>
<div class="menuheaders"><a href="#" title="Nhập dòng mô tả giới thiệu về menu cha tại đây">▼ Tên menu cha</a></div>
            <ul class="menucontents">
            <li><a href="#">Tên menu con 1</a></li>
            <li><a href="#">Tên menu con 2</a></li>
            <li><a href="#">Tên menu con 3</a></li>
            <li><a href="#">Tên menu con 4</a></li>
            <li><a href="#">Tên menu con 5</a></li>
            <li><a href="#">Tên menu con 6</a></li>
            </ul>
<div class="menuheaders"><a href="#" title="Nhập dòng mô tả giới thiệu về menu cha tại đây">▼ Tên menu cha</a></div>
            <ul class="menucontents">
            <li><a href="#">Tên menu con 1</a></li>
            <li><a href="#">Tên menu con 2</a></li>
            <li><a href="#">Tên menu con 3</a></li>
            </ul>
<div class="menuheaders"><a href="#" title="Nhập dòng mô tả giới thiệu về menu cha tại đây">▼ Tên menu cha</a></div>
            <ul class="menucontents">
            <li><a href="#">Tên menu con 1</a></li>
            <li><a href="#">Tên menu con 2</a></li>
            <li><a href="#">Tên menu con 3</a></li>
            <li><a href="#">Tên menu con 4</a></li>
            <li><a href="#">Tên menu con 5</a></li>
            <li><a href="#">Tên menu con 6</a></li>
            <li><a href="#">Tên menu con 7</a></li>
            <li><a href="#">Tên menu con 8</a></li>
            </ul>
</div>


Bây giờ, bạn thay đổi các Tên menu cha và con, thay dấu "#" là các đường link mà mình muốn liên kết đến, thêm dòng giới thiệu menu ở mục "title=", bạn cũng có thể thay đổi chiều rộng của menu ở mục Width, thay đổi màu nền của menu ở các mục background và bấm Lưu lại là xong.
Mở rộng thêm:
Nếu bạn muốn thêm menu con nữa thì copy dòng lệnh này:
<li><a href="#">Tên menu con </a></li> 
và dán tiếp theo phía dưới ở mỗi menu cha.

Còn muốn thêm một menu cha thì copy đoạn code này:
<div class="menuheaders"><a href="#" title="Nhập dòng mô tả giới thiệu về menu cha tại đây">▼ Tên menu cha</a></div>
    <ul class="menucontents">
    <li><a href="#">Tên menu con 1</a></li>
    <li><a href="#">Tên menu con 2</a></li>
    <li><a href="#">Tên menu con 3</a></li>
    </ul>
Dán tiếp theo trên thẻ đóng </div> cuối cùng...

Chúc các bạn thành công!!!

▀▄▀▄▀▄ dunghennessy.blogspot.com ▄▀▄▀▄▀

32 nhận xét:

GiaRo nói...

Anh đả nhận được email của em , kể cả vài chai bia ...hứa , he he. Thôi thì tạm gác chuyện đó qua bên - cái vụ menu dọc nầy quá tuyệt hảo à nha, làm cho "Bác gà mẩu giáo"giaro nhìn thấy muốn hoa cả mắt luôn ! thủ thuật nầy rất hay và cần thiết vì nó là "cái xương sống" của blog, lại được trình bày theo kiểu 'hiện đại'. Chúc mừng ông chủ của blog , mong rằng Bạn có thật nhiều sức khỏe để 'phục vụ' cho quí bà con cô bác khắp nơi, để blog của mọi người thêm phần 'lộng lẩy,sang trọng'. À mà nhớ ăn cơm nhiều nhiều nha , giaro anh thấy body của Addmin hơi bị 'Mỏng' mà thấy hơi bị rầu...he he...GR

dungheineken nói...

Cám ơn Ann đã ghé tham quan và gởi lại những lời chúc tặng rất có ý nghĩa cho em.
Em cũng muốn "ăn" nhiều chút để "body" dày tí nhưng vẫn "ăn" không được nhiều, không biết bị gì nữa đây.
Em còn vài mẫu menu dọc cũng khá đẹp, để từ từ em "post" để anh tham khảo tiếp.
Chúc Anh luôn vui, khoẻ!!!

Phạm Văn Phương nói...

Sao mình làm menu2 mà nó không cuộn lên gì hết bạn ơi!nó sổ tất cả ra thôi.Mong banjhwowngs dẫn bổ sung giúp với!Mình rất thích kiểu Menu mà bạn làm thật đó nhưng sao làm không được theo ý muốn!

dungheineken nói...

Bạn thử làm lại xem sao, nếu không được chắc là do code menu này bị xung đột với code nào trên Blog của bạn rồi, bạn có thể cho mình địa chỉ blog của bạn để mình vào xem rồi có hướng khắc phục cho bạn.

Phạm Văn Phương nói...

Lần này thì mình làm được rồi!Cảm ơn bạn rất nhiều đã quan tâm!Mình rất thích trang blog của bạn!Cảm ơn vì đã mang đến nhiều thông tin và tiện ích thật thú vị!

dungheineken nói...

Mình cũng cám ơn bạn đã ghé tham quan và ủng hộ dunghennessy

thanhhuong-K1 nói...

Cám ơn bạn rất nhiều vì đã chia sẻ. Bài viết của bạn rất hay. Chúc bạn luôn bình an và nhiều niềm vui.

dungheineken nói...

Mình cũng cám ơn bạn đã ghé tham quan và ủng hộ dunghennessy

gia dinh nói...

Mình xài mẫu Template dow mạng về có 1 slider bar ở chính giữa, vẫn hoạt động ok , nhưng khi cho tiện ích này vào thì menu chạy mà slider bar ko chạy , mình nghĩ nó đụng code rùi , có cách nào khác phục ko Dũng !!!

dungheineken nói...

Xin lỗi bạn, không thể khắc phục được vì mỗi tiện ích đều có code riêng của nó, bạn chỉ có thể chọn lựa một trong 2 tiện ích nào cần thiết thì giữ lại cho blog mình mà thôi

GX - An Lộc nói...

Dũng ơi sao khi click vào menu cha chính ( cha ) để xổ con xuống nó bị giật về đầu trang vậy vào blog mình xem thử !

dungheineken nói...

Đúng vậy, khuyết điểm của menu này nó bị như vậy, mình đã và đang tìm hiểu để khắc phục "nó"
Xin lỗi bạn vì sự bất tiện này. Khi nào khắc phục được mình sẽ sửa lại lỗi và báo cho bạn nha

Đức Trần nói...

Anh dũng ơi em muốn menu cha chỉ là cái tiêu đề thôi không đi dến một liên kết nào thì phải làm thế nào ạ

dungheineken nói...

Thì em không cần gắn link liên kết cho nó (để nguyên dấu #)

Yen Macthi nói...

Lam phien ban qua.Cho m hoi 1 chut nha.Sao m cop doan code nay ve sua ma k thay no xo xuong ma chi thay no hien dai xuog khog nhu demo cua ban la sao vay ban?ban co the cho m biet dc k?

Yen Macthi nói...

Co j ban mail cho m nhe.Thank!

Dung PHAM HOANG nói...

Bạn copy chắc còn sót đó, làm lại thử xem nha

Yen Macthi nói...

Ban ah.Mih thu di thu lai rui ma van k dc?Mih de nguyen cai code cua ban cug vay?Khi mih kich vao menu cha k thay no thu lai mih k bit la tai sao nua.Ban xem rui giup m nha.

Dung PHAM HOANG nói...

Đó là do code menu này đã bị xung đột với một code tiện ích nào đó đã có trên Blog của bạn rồi....vì vậy nó không chuyển động được bạn à...

Yen Macthi nói...

Nhug sao mih cho vao phan kiem tra code tren trang cua ban ma no cug co chay dau?Bạn xem gium mih dc k?

Yen Macthi nói...

Mih rat thich code mennu nay.Ban giup m nhe.

Dung PHAM HOANG nói...

Cám ơn bạn đã phát hiện ra lỗi, mình đã chỉnh sửa lại rồi đó, bạn bấm vào XEM THỬ MENU phía trên để tham khảo nha

Yen Macthi nói...

Ban ah.That ngai vi lam phien ban.Ban co the gui cho mih xin cai code ma ban da sua vao dia chi mail cua mih dc k?M cop cai code ban chia se o tren blog thu cug k thay dc ban a.M rat thich cai code nay.Ban giup mih nhe.Thank ban nhieu.

Dung PHAM HOANG nói...

Xin lỗi bạn, code ở trên là chuẩn lắm rồi (mình đã thử nghiệm ở một vài blog vẫn chạy bình thường), nếu của bạn không chạy là do code này đã bị xung đột với một code nào đó ở blog của bạn rồi...
Xin lỗi vì không giúp gi được cho bạn

Yen Macthi nói...

Ban ah mih co the lam phien ban not 1 lan nay nua dc k?Ban gui dung cho mih cai code ma ban lam demo1 do dc k?Ban lam on jiup m nha.Thank

Dung PHAM HOANG nói...

Địa chỉ mail là gì??? Mình sẽ gởi cho bạn

Yen Macthi nói...

Dia chi mail cua mih la yenlinhhd@gmail.com.Bạn jup mih nha.Thank!

Dung PHAM HOANG nói...

Ok, mình đã gởi code menu qua mail cho bạn Yến Macthi rồi đó, bạn vào mail lấy nha

Yen Macthi nói...

Mih nhan dc rui.Mih thu no chay rui.Cam on ban nhieu nha.

Dung PHAM HOANG nói...

Oh...không có chi, chuyện nhỏ mà bạn Machi...
Mình cũng cám ơn bạn đã ghé tham quan ủng hộ dunghennessy

Phất Đặng nói...

Cam on ad bai viet rat hay, minh da lam va thanh cong .

Đông Dương nói...

CHÀO BẠN. MÌNH SỬ DỤNG MENU NÀY NHƯNG CLICK VÀO THƯ MỤC CHA KO CÓ HIỆN MENU CON ( LÚC TRƯỚC THÌ CÓ, XÀI THỜI GIAN THÌ BỊ LỖI NHƯ VẬY ). WEBSITE MÌNH LÀ http://www.thietbituoitudong.com/ . BẠN XEM VÀ CHỈ MÌNH KHẮC PHỤC LỖI . THANKS

Đăng nhận xét

 
Powered by by: Blogger