Tạo Menu Ngang Có Menu Sổ Xuống Một Cấp Kiểu 2

Chuyên mục bạn có thể xem thêm ... BENNY HINN TỔNG HỢP NHIỀU BÀI VIẾT BILLY GRAHAM BÀI THUỐC CHỮA BỆNH CHUYỆN HAY Ý ĐẸP CHẮP CÁNH CHO TÂM HỒN BAY CAO CÁC LỄ TRONG HỘI THÁNH CÂY THUỐC DAVID YONGGI CHO GIA ĐÌNH BỀN VỮNG GIÁO LÝ TIN LÀNH HÔN NHÂN BỀN VỮNG HÔN NHÂN- GIA ĐÌNH HẦU VIỆC CHÚA HỌC- SUY NGẪM KINH THÁNH CỦA TÔI... JOHN BEVERE JOYCE MERYER KARAFUN KARAOKE KENETH E.HAGIN KHOA HỌC HIỆN ĐẠI KHOA HỌC- NIỀM TIN NGÀY TẬN THẾ NGƯỜI MẸ NICK VUJICIC NUÔI DƯỠNG TÂM LINH NỀN TẢNG HÔN NHÂN PHIM ẢNH KHIÊU DÂM PHỎNG VẤN QUAN HỆ TÌNH DỤC RICK WARREN SÁCH ONLINE CƠ ĐỐC SÁCH ONLINE ĐỜI SỐNG SẮC ĐẸP SỨC KHỎE THIẾU NHI THÁNH CA THƯ VIỆN THỦ THUẬT MÁY TÍNH TRẦN THÁI SƠN TÀ GIÁO TÌNH DỤC TÌNH YÊU ĐẠO VÀ ĐỜI ĐỌC SÁCH Danh mục sách trong THƯ VIỆN ... Thêm Phước Hạnh Trong Tài Chính (4 bài) Bài giảng của Mục sư Đoàn Văn Miêng 95 luận điểm của Martin Luther (2 bài) Chúa Tái Lâm (1 bài) Sống trong những ngày sau rốt (2 bài) Gây dựng Hội Thánh mới (2 bài) Tẩy sạch để phấn hưng (7 bài) Nguyên tắc giải nghĩa Kinh Thánh(2 bài) Con trai của sự yên ủi (1 bài) Thánh kinh thông lãm Cựu ước (39 bài) Ms Trần Thái Sơn 100 Bài học KT của Alban Douglas Cách kinh doanh của người Do Thái (3 bài)

TẠO MENU NGANG CÓ MENU SỔ XUỐNG MỘT CẤP 

Tạo menu ngang có menu sổ xuống một cấp

Thủ Thuật- Tạo menu ngang có menu sổ xuống một cấp kiểu 2

     Tạo menu ngang có menu sổ xuống một cấp là một trong những bước khiến trang bogger của bạn nên 'tầm vóc'. Tạo menu ngang có menu sổ xuống một cấp cũng rất đơn giản trong các cách tạo menu. Tạo menu ngang có menu sổ xuống một cấp khá rất đơn giản nhưng cũng nhiều lách cách. Bạn hãy kiên trì thì sẽ tạo được Tạo menu ngang có menu sổ xuống một cấp.  Lần trước Thủ Thuật đã chia sẻ bài viết Tạo menu ngang có menu sổ xuống một cấp dạng 1.  Dường như cách tạo menu ngang có menu sổ xuống một cấp dạng 1 đó làm hơi cầu kì. Hôm nay, Thủ Thuật hướng dẫn bạn tạo menu ngang có menu sổ xuống một cấp dạng 2 RẤT ĐƠN GIẢN. Trang tạo menu ngang có menu sổ xuống một cấp này mà tôi chia sẻ cho bạn chỉ cần Thêm Tiện Ích HTML là xong.  Thủ Thuật tạo menu ngang có menu sổ xuống một cấp chúc bạn thành công. Hướng dẫn cách Tạo menu ngang có menu sổ xuống một cấp như sau.

TẠO MENU NGANG CÓ MENU SỔ XUỐNG MỘT CẤP

Tạo menu ngang có menu sổ xuống một cấp

DEMO đã sử dụng code tạo menu ngang có menu sổ xuống một cấp:

Cách tạo menu ngang có menu sổ xuống một cấp

- Đăng nhập Blogger
- Thêm Tiện Ích HTML/ Javascipt - Hướng dẫn thêm tiện ích tại đây
- Dán code tạo menu ngang có menu sổ xuống một cấp vào khung code:

<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://hoithanhkienbai.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 

Bạn hãy chỉnh sửa code tạo menu ngang có menu sổ xuống một cấp sao cho phù hợp với trang blogger của mình nhé.

TẠO MENU NGANG CÓ MENU SỔ XUỐNG MỘT CẤP

Thủ Thuật code tạo menu ngang có menu sổ xuống một cấp lần nữa chúc bạn thành công!

 Tạo menu ngang có menu sổ xuống một cấp

Mọi đóng góp về bài vở xin liên hệ tới chúng tôi qua email: luaphucamhp@yahoo.com

Trang Hoithanhkienbai Blog: Một trang chia sẻ cho bạn về niềm tin nơi Thượng Đế trong Đức Chúa Giê-xu Christ: Tin tức, dưỡng linh, đời sống, hôn nhân, vvv..