实列教程 一款基于jquery和css3的响应式二级导航菜单
之前分享了很多,今天给大家分享一款基于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>
- </ul>
- <ul class="mega-col">
- <li><a href="#">help</a></li>
- <li><a href="#">pricing</a></li>
- <li><a href="#">team</a></li>
- <li><a href="#">services</a></li>
- </ul>
- <ul class="mega-col">
- <li><a href="#">coming soon</a></li>
- <li><a href="#">404 error</a></li>
- <li><a href="#">search</a></li>
- <li><a href="#">author page</a></li>
- </ul>
- <ul class="mega-col">
- <li><a href="#">full width</a></li>
- <li><a href="#">right column</a></li>
- <li><a href="#">left column</a></li>
- <li><a href="#">maintenance</a></li>
- </ul>
- </li>
- </ul>
- </li>
- <li class="dropdown"><a href="">contact</a>
- <ul>
- <li><a href="#">about version</a></li>
- <li><a href="#">about version</a></li>
- <li><a href="#">contact us</a></li>
- <li><a href="#">contact us</a></li>
- </ul>
- </li>
- <li><a href="">portfolio</a> </li>
- <li><a href="">team</a> </li>
- </ul>
- </nav>
- </div>
css3代码:
js代码:
javascript code复制内容到剪贴板
- $('#header').prepend('<div id="menu-icon"><span class="first"></span><span class="second"></span><span class="third"></span></div>');
- $('#menu-icon').on('click', function () {
- window.cp.stopexecutionontimeout(1);
- $('nav').slidetoggle();
- $(this).toggleclass('active');
- });
以上就是基于jquery和css3的响应式二级导航菜单,谢谢阅读,希望能帮到大家,请继续关注移动技术网,我们会努力分享更多优秀的文章。
如对本文有疑问,
点击进行留言回复!!
相关文章:
-
-
CSS基础及用法
前言对于一个网页来说,css是网页的门面,对于一个前端初学者来说,css更是他们必经之路,通过这篇文章我就来带大...
[阅读全文]
-
-
-
-
-
-
-
-
-
网友评论