Tạo menu cấp 2 chuyên nghiệp với html và css

Sử dụng html và css để tạo menu cấp 2 chuyên nghiệp để xây dựng website. Đâu tiền để tạo menu các bạn cần xây dựng form html trước, ở đây mình dùng thẻ ul và li để tạo danh sách.

<nav class="main-nav">
    <ul class="main-nav-ul">
        <li><a href="">Home</a></li>
        <li><a href="">Products<span class="sub-icon"></span></a>
            <ul>
                <li><a href="">Item 1</a></li>
                <li><a href="">Item 2</a></li>
                <li><a href="">Item 3</a></li>
                <li><a href="">Item 4</a></li>
            </ul>
        </li>        
        <li><a href="">Catalogs</a></li>
        <li><a href="">Contacs</a></li>
        <li><a href="">About</a></li>
    </ul>

</nav>

Ở trên mình có tạo các thẻ li có item 1 đến 4 nằm trong menu cha là products. Sau khi tạo xong trang html ta tiếp tục xây dụng css cho nó. Mình sẽ viết css từ trên xuống dưới. các bạn xem video và làm theo nhé.

Với css, mình sẽ reset css đơn giản là margin và padding về định dạng 0, sau đó đến thẻ và thẻ li

*{
            padding:0;
            margin:0;
        }
        a{
            text-decoration: none;

        }
        li{
            list-style: none;
        }

Tiếp theo đến css cho phần nav.

/*-- nav--*/
        .main-nav{
            width:250px;
            background: #808080;
        }
        .main-nav a{
            text-transform: uppercase;
            letter-spacing: .2em;
            color:#fff;
            display:block;
            padding:10px 0 10px 20px;
            border-bottom: 1px solid #993366;
        }
        .main-nav a:hover{
            background: #99D1D3;
        }

        .main-nav-ul ul {
            display:none;
        }
        .main-nav ul li:hover ul{
            display:block;
        }

        .main-nav-ul ul a:before{
            content:'\203A';
            margin-right:20px;
        }

        .main-nav .sub-icon:after {
            content: '\203A';
            float:right;
            margin-right: 20px;
            transform: rotate(90deg);
            -webkit-transform: rotate(90deg);
            -moz-transform: rotate(90deg);
        }

        .main-nav ul li:hover .sub-icon:after{
            content: '\2039';
        }

Rất nhanh và đơn giản phải không nào, các bạn đã có một menu cấp 2 có hiệu ứng dropdown rất đẹp cùng với icon nhìn rất chuyên nghiệp. Các bạn có thể sử dụng thêm css3 và jquery để làm menu sinh động và đẹp hơn. Toàn bộ code trong bài này nè ....chúc các bạn học tốt nhé.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>menu jquey html css</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        a{
            text-decoration: none;

        }
        li{
            list-style: none;
        }
        /*-- nav--*/
        .main-nav{
            width:250px;
            background: #808080;
        }
        .main-nav a{
            text-transform: uppercase;
            letter-spacing: .2em;
            color:#fff;
            display:block;
            padding:10px 0 10px 20px;
            border-bottom: 1px solid #993366;
        }
        .main-nav a:hover{
            background: #99D1D3;
        }

        .main-nav-ul ul {
            display:none;
        }
        .main-nav ul li:hover ul{
            display:block;
        }

        .main-nav-ul ul a:before{
            content:'\203A';
            margin-right:20px;
        }

        .main-nav .sub-icon:after {
            content: '\203A';
            float:right;
            margin-right: 20px;
            transform: rotate(90deg);
            -webkit-transform: rotate(90deg);
            -moz-transform: rotate(90deg);
        }

        .main-nav ul li:hover .sub-icon:after{
            content: '\2039';
        }
    </style>
</head>
<body>
<nav class="main-nav">
    <ul class="main-nav-ul">
        <li><a href="">Home</a></li>
        <li><a href="">Products<span class="sub-icon"></span></a>
            <ul>
                <li><a href="">Item 1</a></li>
                <li><a href="">Item 2</a></li>
                <li><a href="">Item 3</a></li>
                <li><a href="">Item 4</a></li>
            </ul>
        </li>        
        <li><a href="">Catalogs</a></li>
        <li><a href="">Contacs</a></li>
        <li><a href="">About</a></li>
    </ul>

</nav>
    
</body>
</html>

  • Tác giả: Admin
  • 02/07/2017
Bài viêt khác