之前分享了很多纯css的导航菜单,今天介绍一款基于jquery和css3的响应式二级导航菜单,这款导航是传统的基于顶部,鼠标经过的时候显示二级导航,还采用了当前流行的响应式设计。需要的朋友可以参考下
之前分享了很多纯css的导航菜单,今天给大家分享一款基于jquery和css3的响应式二级导航菜单,这款导航是传统的基于顶部,鼠标经过的时候显示二级导航,还采用了当前流行的响应式设计。效果图如下:
实现的代码。
html代码:
XML/HTML Code复制内容到剪贴板
- <div id="header">
- <div class="logo">
- <a href="#">Responsive Nav</a>
- </div>
- <nav>
- <form class="search" action="search.php">
- <input name="q" placeholder="Search..." type="search">
- </form>
- <ul>
- <li><a href="">Home</a> </li>
- <li><a href="">About</a>
- <ul class="mega-dropdown">
- <li class="row">
- <ul class="mega-col">
- <li><a href="#">About</a></li>
- <li><a href="#">About</a></li>
- <li><a href="#">Contact</a></li>
- <li><a href="#">Contact</a></li