Cách tạo menu dọc đa cấp bằng CSS

Menu của website thường xuất hiện với 2 dạng đó là menu ngang và menu dọc. Về cấu trúc HTML thì không có gì khác nhau là mấy. Nhưng sự khác biệt là do mã CSS.

Bạn hãy tham khảo lại bài Hướng dẫn tạo menu Dropdown bằng CSS chi tiết để so sánh điểm khác nhau với menu dọc là như thế nào nhé.

Bước đầu tiên bao giờ cũng vậy mình sẽ viết mã HTML trước:

<nav id="menu">
        <ul class="main-menu">
            <li><a href="#">Wordpress</a>
                <ul>
                    <li><a href="#">item</a></li>
                    <li><a href="#">item</a></li>
                    <li><a href="#">item</a></li>
                    <li><a href="#">item</a></li>
                    <li><a href="#">item</a></li>
                    <li><a href="#">item</a></li>
                </ul>
            </li>

            <li><a href="#">HTML</a>
                <ul>
                    <li><a href="#">item</a></li>
                    <li><a href="#">item</a></li>
                    <li><a href="#">item</a></li>
                    <li><a href="#">item</a></li>
                    <li><a href="#">item</a></li>
                </ul></li>

            <li><a href="#">CSS</a>
                <ul>
                    <li><a href="#">item</a></li>
                    <li><a href="#">item</a></li>
                    <li><a href="#">item</a></li>
                    <li><a href="#">item</a></li>
                </ul></li>

            <li><a href="#">JavaScript</a>
                <ul>
                    <li><a href="#">item</a></li>
                    <li><a href="#">item</a></li>
                    <li><a href="#">item</a></li>
                    <li><a href="#">item</a></li>
                </ul>
            </li>
        </ul>
    </nav>

menu-doc-css

Tiếp theo mình sẽ viết mã CSS để làm cho menu trông đẹp hơn.

p, ul, li, div, nav{
padding:0;
margin:0;
}
#menu {
    overflow: auto;
    position:relative;
    z-index:2;
}
/* Thêm màu background */
.main-menu {
   background-color: #0c8fff;
   min-width: 210px;
   float: left;
}
#menu ul {
   list-style-type:none;
}
#menu ul li a {
   padding:10px 15px;
   display:block;
   color:#fff;
   text-decoration:none;
}
#menu ul li a:hover {
   background-color:#007ee9;
}

Thêm tiếp mã Css cho menu ở cấp 2

#menu ul li:hover > ul {
    left: 200px;
}

#menu ul li > ul {
    position: absolute;
    background-color: #333;
    top: 0;
    left: -200px;
    min-width: 210px;
    z-index: -1;
    height: 100%;
}

#menu ul li > ul li a:hover {
    background-color:#2e2e2e;
}

Với đoạn mã này đầu tiên sẽ dùng position: absolute để cho phần tử trôi nổi, tiếp theo dùng top: 0; left: -200px để cố định vị trí so với menu cấp 1.

Để cho cấp 2 hiện ra thì dùng thuộc tính hover và đặt left: 200px lúc này nó sẽ tạo ra khoảng cách với cấp 1 là 200px.

menu-doc-css-1

Để cho menu trượt được bên trái website thì bạn sẽ thêm vào #menu {position: fixed}.

Với kiểu menu đã cấp trượt dọc này không phức tạp lắm phải không. Điều quan trọng là bạn phải sử dụng thành thạo position để căn chỉnh hợp lý là được.

Cùng chủ đề

Chuyên mục:
Tag:

Bình luận!

Xin lưu ý rằng tất cả các bình luận đều được kiểm duyệt theo chính sách bảo mật và tất cả các liên kết đều là nofollow. KHÔNG sử dụng từ khóa trong trường tên. Hãy để lại một cuộc trò chuyện cá nhân và ý nghĩa. *