TẠO MENU NGANG CÓ MENU CON XỔ XUỐNG MỘT CẤP (Kiểu 3)

Nếu bạn chưa thoả mãn với 2 kiểu menu ngang xổ xuống một cấp (kiểu 1: Xem TẠI ĐÂY, kiểu 2: Xem TẠI ĐÂY.), các bạn có thể sử dụng menu ngang kiểu 3 này.
Với thủ thuật này, khi rê chuột vào một mục bất kỳ trên thanh menu sẽ có một menu con xổ dọc xuống "khá mướt" và khi bạn rê chuột vào thì menu con sẽ đổi màu "khá đẹp".

Mời bạn bấm vào Xem thử phía dưới để trải nghiệm nha. 

Thủ thuật này chỉ áp dụng cho các Blog sử dụng giao diện V2 (giao diện được tải trên mạng về), còn nếu áp dụng cho các giao diện mặc định của Blogspot thì bạn phải kéo tiện ích này nằm sát trên khu vực bài đăng thì menu con mới xổ xuống được...

Xem thử

Bạn chỉ cần đăng nhập vào Blog > Chọn Thiết kế > Thêm tiện ích HTML (đối với các bạn đang sử dụng giao diện blogspot mới thì đăng nhập vào Blog > Chọn Bố cục > Thêm tiện ích HTML) rồi dán đoạn code phía dưới vào.

<style>
    #mbt-menu, #mbt-menu ul {

    margin: 0;

    padding: 0;

    list-style: none;

    }

    #mbt-menu {

    width: 913px; /* Độ rộng của toàn bộ thanh menu */

    margin: 0px auto ;

    border: 1px solid #222;

    background-color: #111;

    background-image: -moz-linear-gradient(#444, #111);

    background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));

    background-image: -webkit-linear-gradient(#444, #111);

    background-image: -o-linear-gradient(#444, #111);

    background-image: -ms-linear-gradient(#444, #111);

    background-image: linear-gradient(#444, #111);

    -moz-border-radius: 6px;

    -webkit-border-radius: 6px;

    border-radius: 6px;

    -moz-box-shadow: 0 1px 1px #777;

    -webkit-box-shadow: 0 1px 1px #777;

    box-shadow: 0 1px 1px #777;

    }

    #mbt-menu:before,

    #mbt-menu:after {

    content: "";

    display: table;

    }

    #mbt-menu:after {

    clear: both;

    }

    #mbt-menu {

    zoom:1;

    }

    #mbt-menu li {

    float: left;

    border-right: 1px solid #222;

    -moz-box-shadow: 1px 0 0 #444;

    -webkit-box-shadow: 1px 0 0 #444;

    box-shadow: 1px 0 0 #444;

    position: relative;

    }

    #mbt-menu a {

    float: left;

    padding: 12px 28px;

    color: #999;

    text-transform: uppercase;

    font: bold 12,5px Arial, Helvetica;

    text-decoration: none;

    text-shadow: 0 1px 0 #000;

    }

    #mbt-menu li:hover > a {

    color: #fafafa;

    }

    *html #mbt-menu li a:hover { /* IE6 only */

    color: #fafafa;

    }

    #mbt-menu ul {

    margin: 20px 0 0 0;

    _margin: 0; /*IE6 only*/

    opacity: 0;

    visibility: hidden;

    position: absolute;

    top: 38px;

    left: 0;

    z-index: 9999;

    background: #444;

    background: -moz-linear-gradient(#444, #111);

    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));

    background: -webkit-linear-gradient(#444, #111);

    background: -o-linear-gradient(#444, #111);

    background: -ms-linear-gradient(#444, #111);

    background: linear-gradient(#444, #111);

    -moz-box-shadow: 0 -1px rgba(255,255,255,.3);

    -webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);

    box-shadow: 0 -1px 0 rgba(255,255,255,.3);

    -moz-border-radius: 3px;

    -webkit-border-radius: 3px;

    border-radius: 3px;

    -webkit-transition: all .2s ease-in-out;

    -moz-transition: all .2s ease-in-out;

    -ms-transition: all .2s ease-in-out;

    -o-transition: all .2s ease-in-out;

    transition: all .2s ease-in-out;

    }

    #mbt-menu li:hover > ul {

    opacity: 1;

    visibility: visible;

    margin: 0;

    }

    #mbt-menu ul ul {

    top: 0;

    left: 150px;

    margin: 0 0 0 20px;

    _margin: 0; /*IE6 only*/

    -moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);

    -webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);

    box-shadow: -1px 0 0 rgba(255,255,255,.3);

    }

    #mbt-menu ul li {

    float: none;

    display: block;

    border: 0;

    _line-height: 0; /*IE6 only*/

    -moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;

    -webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;

    box-shadow: 0 1px 0 #111, 0 2px 0 #666;

    }

    #mbt-menu ul li:last-child {

    -moz-box-shadow: none;

    -webkit-box-shadow: none;

    box-shadow: none;

    }

    #mbt-menu ul a {

    padding: 10px;

    width: 170px; /* Độ rộng của menu con */

    _height: 10px; /*IE6 only*/

    display: block;

    white-space: nowrap;

    float: none;

    text-transform: none;

    }

    #mbt-menu ul a:hover {

    background-color: #0186ba;

    background-image: -moz-linear-gradient(#04acec, #0186ba);

    background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));

    background-image: -webkit-linear-gradient(#04acec, #0186ba);

    background-image: -o-linear-gradient(#04acec, #0186ba);

    background-image: -ms-linear-gradient(#04acec, #0186ba);

    background-image: linear-gradient(#04acec, #0186ba);

    }

    #mbt-menu ul li:first-child > a {

    -moz-border-radius: 3px 3px 0 0;

    -webkit-border-radius: 3px 3px 0 0;

    border-radius: 3px 3px 0 0;

    }

    #mbt-menu ul li:first-child > a:after {

    content: '';

    position: absolute;

    left: 40px;

    top: -6px;

    border-left: 6px solid transparent;

    border-right: 6px solid transparent;

    border-bottom: 6px solid #444;

    }

    #mbt-menu ul ul li:first-child a:after {

    left: -6px;

    top: 50%;

    margin-top: -6px;

    border-left: 0;

    border-bottom: 6px solid transparent;

    border-top: 6px solid transparent;

    border-right: 6px solid #3b3b3b;

    }

    #mbt-menu ul li:first-child a:hover:after {

    border-bottom-color: #04acec;

    }

    #mbt-menu ul ul li:first-child a:hover:after {

    border-right-color: #0299d3;

    border-bottom-color: transparent;

    }

    #mbt-menu ul li:last-child > a {

    -moz-border-radius: 0 0 3px 3px;

    -webkit-border-radius: 0 0 3px 3px;

    border-radius: 0 0 3px 3px;

    }


    </style>


    <ul id="mbt-menu">
    <li><a href="http://dungheineken.blogspot.com/">Trang chủ</a></li>
    <li>
    <a href="#">Tên menu chính</a>
    <ul>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>

    </ul>
    </li>

   <li>
    <a href="#">Tên menu chính</a>
    <ul>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>

    </ul>
    </li>

   <li>
    <a href="#">Tên menu chính</a>
    <ul>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>

    </ul>
    </li>
<li>
    <a href="#">Tên menu chính</a>
    <ul>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    </ul>
    </li>

<li>
   <a href="#">Tên menu chính</a>
    <ul>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    </ul>
    </li>



    </ul>

Bây giờ, bạn cần thay đổi các dòng lệnh màu đỏ (bao gồm kích thước menu chính, kích thước menu con, tiêu đề và đường link liên kết # của menu), cuối cùng bấm Lưu lại là xong.

Mở rộng thêm:
* Muốn thêm 1 menu chính nữa thì copy dòng code này.

<li>
    <a href="#">Tên menu chính</a>
    <ul>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>

    </ul>
    </li>

Dán phía trên thẻ đóng </ul> cuối cùng

(Code của menu này được sưu tầm từ một trang Web nước ngoài, tôi đã chỉnh sửa lại đôi chút để phù hợp hơn...).

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

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

Người đăng: dunghennessy vào lúc 14:44