html 响应式导航菜单

Posted 2021-05-11

$('.nav-toggle').click(function(){
  $('#nav').slideToggle();
});

// DESKTOP

    #nav,
    #nav li,
    #nav ul { list-style: none; margin: 0; padding: 0; }
    #nav { position: relative; z-index: 597; float: left; }
    #nav li { float: left; vertical-align: middle; zoom: 1; }
    #nav li:hover { position: relative; z-index: 599; cursor: default; }
    #nav ul { display:none; position: absolute; top: 100%; left: 0; z-index: 598; width: 200px; }
    #nav ul li {float: none;}
    #nav ul li a { text-transform: none; }
    #nav ul li a span { display: inline-block; }
    #nav ul ul {top: -4px;left: 100%;}
    #nav li:hover > ul {display:block;}

   .mobile { display: none;  }

// MOBILE

@media screen and (max-width: XXXpx) { 

    #nav { display: block; float: none; position: absolute;  }
    #nav li { float: none; width: 100%; }
    #nav li { display: block; }
    #nav li ul { display: block; position: static; width: 100%; }
    
   .nav-toggle.mobile { display: block;  }

}

<a href="#" class="icon-arrow-down mobile nav-toggle">asdf</a>
<ul id="nav">
    <li><a href="#">Learn</a>
        <ul>
            <li><a href="#">Child</a></li>
            <li><a href="#">Child</a></li>
            <li><a href="#">Child</a></li>
        </ul>
    </li>
    <li><a href="#">Apply</a></li>
    <li><a href="#">Donate</a></li>
    <li><a href="#">Events</a></li>
    <li><a href="#">Supporters</a></li>
    <li><a href="#">Media</a></li>
    <li><a href="#">Contact</a></li>
</ul><!-- END nav -->