Trang chủ » Thủ thuật - Phần mềm » Hướng dẫn tạo menu đa cấp sử dụng HTML và CSS

Thủ thuật - Phần mềm

Hướng dẫn tạo menu đa cấp sử dụng HTML và CSS

06/08/2022

Cách tạo menu đa cấp sử dụng HTML và CSS

Menu đa cấp được sử dụng rất nhiều trong các website, nó mang lại sự tiện lợi cho việc hiển thị các hệ thống có đa danh mục. Trong bài viết này Softvietdesign.com hướng dẫn các bạn tạo menu đa cấp bằng HTML CSS một cách tiện lợi dễ hiễu nhất nhé.

Cấu trúc thư mục

--style.css

--images-background

--index.html

Nội dung code HTML


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Menu đa cấp sử dụng HTML và CSS</title>
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
</head>
<body>
    <div class="box-menu">
        <ul>
            <li class="active"><a href="/"><i class="fa fa-home" aria-hidden="true"></i> Trang chủ</a></li>
            <li><a href="/"><i class="fa fa-user" aria-hidden="true"></i> Giới thiệu <i class="fa fa-angle-down" aria-hidden="true"></i></a>
                <div class="box-submenu">
                    <ul>
                        <li><a href="/">Về chúng tôi</a></li>
                        <li><a href="/">Đội ngũ nhân viên</a></li>
                        <li><a href="/">Tầm nhìn - Sứ mệnh</a></li>
                    </ul>
                </div>
            </li>
            <li><a href="/"><i class="fa fa-server" aria-hidden="true"></i> Chuyên mục <i class="fa fa-angle-down" aria-hidden="true"></i></a>
                <div class="box-submenu">
                    <ul>
                        <li><a href="/">Thiết kế giao diện website</a></li>
                        <li><a href="/">Phát triển dự án</a></li>
                        <li><a href="/">Lập trình Website</a></li>
                    </ul>
                </div>
            </li>
            <li><a href="/"><i class="fa fa-clone" aria-hidden="true"></i> Dịch vụ <i class="fa fa-angle-down" aria-hidden="true"></i></a>
                <div class="box-submenu">
                    <ul>
                        <li class="submenu-hover"><a href="/">Thiết kế website trọn gói </a><i class="fa fa-angle-right" aria-hidden="true"></i>
                            <div class="box-submenu-2">
                                <ul>
                                    <li><a href="/">Laravel</a></li>
                                    <li><a href="/">ASP.NET(C#)</a></li>
                                    <li><a href="/">Wordpress</a></li>
                                    <li><a href="/">Java</a></li>
                                </ul>
                            </div>
                        </li>
                        <li class="submenu-hover"><a href="/">App</a><i class="fa fa-angle-right" aria-hidden="true"></i>
                            <div class="box-submenu-2">
                                <ul>
                                    <li><a href="/">Android App</a></li>
                                    <li><a href="/">iOS App</a></li>
                                    <li><a href="/">Unity App</a></li>
                                    <li><a href="/">Android App</a></li>
                                    <li><a href="/">iOS App</a></li>
                                    <li><a href="/">Unity App</a></li>
                                </ul>
                            </div>
                        </li>
                        <li><a href="/">Tên miền</a></li>
                        <li><a href="/">Hosting</a></li>
                        <li><a href="/">Wordpress</a></li>
                    </ul>
                </div>
            </li>
            <li><a href="/"><i class="fa fa-inr" aria-hidden="true"></i> Bảng giá</a></li>
            <li><a href="/"><i class="fa fa-apple" aria-hidden="true"></i> Ứng dụng</a>
                
            </li>
            <li><a href="/"><i class="fa fa-users" aria-hidden="true"></i> Khách hàng</a></li>
            <li><a href="/"><i class="fa fa-phone" aria-hidden="true"></i> Liên hệ</a></li>
        </ul>
    </div>
</body>
</html>

Nội dung Code CSS của menu đa cấp

 

	body{
    margin: 0;padding: 0;
    background: url(imager_4_53459_700.jpg) no-repeat top left;
    background-size: cover;
    font-family: sans-serif;
    overflow: hidden;
}

*{
    box-sizing: border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing: border-box;
}

.box-menu{ 
    background-color: #0B1CA9;
    text-align: center;
 }
 .box-menu ul{ 
    display: inline-flex;
    list-style: none;
    color: #fff;
 }
 .box-menu ul li{ 
    width: 170px;
    margin: 5px;
    padding: 15px;
 }

 .box-menu ul li a{ 
    color: #fff;
    text-decoration: none;
 }
.active,.box-menu ul li:hover{ 
    background:#3406D1;
    border-radius: 3px;
}
.box-menu .fa{ 
    margin-right: 5px;
 }

 .box-submenu{
     display: none;
 }
 .box-menu ul li:hover .box-submenu{
    display: block;
    position: absolute;
    background: #0B2FD2;
    margin-top: 15px;
    margin-left: -15px;
}
.box-menu ul li:hover .box-submenu ul{
    display: block;
    margin: 0px;padding: 0px;
}
.box-menu ul li:hover .box-submenu ul li{
    width: 220px;
    text-align: left;
    border-bottom: dotted 1px #fff;
    background: transparent;
    border-radius: 0;
    padding: 15px;
    margin: 10px;
}
.box-menu ul li:hover .box-submenu ul li:last-child{
    border-bottom: none;
}
.box-menu ul li:hover .box-submenu ul li a:hover{
    color: yellowgreen;
}
.fa-angle-right{
    float: right;
}
.box-submenu-2{
    display: none;
}
.submenu-hover:hover .box-submenu-2{
    display: block;
    position: absolute;
    margin-top: -44px;
    margin-left: 210px;
    background: #0733F6;
}

Các bạn có thể tải code về tham khảo ở link bên dưới nhé.

mũi tên

Click để tải về code DropdownMenu

 

 

Bài viết liên quan


Trong bài viết này mình sẽ hướng dẫn bạn cách cài đặt để dùng được Office trên Mac vĩnh viễn. Vì thế các tính năng đều đầy đủ không thiếu gì cả. Bạn yên tâm tải và cài đặt nhé.

 

0988 542 856
0988 542 856