首页 > 代码库 > 一款基于jquery和css3的响应式二级导航菜单
一款基于jquery和css3的响应式二级导航菜单
今天给大家分享一款基于jquery和css3的响应式二级导航菜单，这款导航是传统的基于顶部，鼠标经过的时候显示二级导航，还采用了当前流行的响应式设计。效果图如下：
在线预览 源码下载
实现的代码。
html代码：
<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代码：
*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; } body { background: #bdc3c7; line-height: 1.5; font-family: sans-serif; text-transform: uppercase; font-size: 16px; color: #fff; } a { text-decoration: none; color: #fff; } #header { background: #1E262D; width: 100%; position: relative; } #header:after { content: ""; clear: both; display: block; } .search { float: right; padding: 30px; } input { border: none; padding: 10px; border-radius: 20px; } .logo { float: left; padding: 26px 0 26px; } .logo a { font-size: 28px; display: block; padding: 0 0 0 20px; } nav { float: right; } nav > ul { float: left; position: relative; } nav li { list-style: none; float: left; } nav .dropdown { position: relative; } nav li a { float: left; padding: 35px; } nav li a:hover { background: #2C3E50; } nav li ul { display: none; } nav li:hover ul { display: inline; } nav li li { float: none; } nav .dropdown ul { position: absolute; left: 0; top: 100%; background: #fff; padding: 20px 0; border-bottom: 3px solid #34495e; } nav .dropdown li { white-space: nowrap; } nav .dropdown li a { padding: 10px 35px; font-size: 13px; min-width: 200px; } nav .mega-dropdown { width: 100%; position: absolute; top: 100%; left: 0; background: #fff; overflow: hidden; padding: 20px 35px; border-bottom: 3px solid #34495e; } nav li li a { float: none; color: #333; display: block; padding: 8px 10px; border-radius: 3px; font-size: 13px; } nav li li a:hover { background: #bdc3c7; background: #FAFBFB; } .mega-col { width: 25%; float: left; } #menu-icon { position: absolute; right: 0; top: 50%; margin-top: -12px; margin-right: 30px; display: none; } #menu-icon span { border: 2px solid #fff; width: 30px; margin-bottom: 5px; display: block; -webkit-transition: all .2s; transition: all .1s; } @media only screen and (max-width: 1170px) { nav > ul > li > a { padding: 35px 15px; } } @media only screen and (min-width: 960px) { nav { display: block !important; } } @media only screen and (max-width: 959px) { nav { display: none; width: 100%; clear: both; float: none; max-height: 400px; overflow-y: scroll; } #menu-icon { display: inline; top: 45px; cursor: pointer; } #menu-icon.active .first { transform: rotate(45deg); -webkit-transform: rotate(45deg); margin-top: 10px; } #menu-icon.active .second { transform: rotate(135deg); -webkit-transform: rotate(135deg); position: relative; top: -9px; } #menu-icon.active .third { display: none; } .search { float: none; } .search input { width: 100%; } nav { padding: 10px; } nav ul { float: none; } nav li { float: none; } nav ul li a { float: none; padding: 8px; display: block; } #header nav ul ul { display: block; position: static; background: none; border: none; padding: 0; } #header nav a { color: #fff; padding: 8px; } #header nav a:hover { background: #fff; color: #333; border-radius: 3px; } #header nav ul li li a:before { content: "- "; } .mega-col { width: 100%; } }
js代码：
$(‘#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‘); }); //@ sourceURL=pen.js
注：本文爱编程原创文章，转载请注明原文地址：http://www.w2bc.com/Article/10569
一款基于jquery和css3的响应式二级导航菜单
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。