首页 > 代码库 > 一款由css3和jquery实现的响应式设计导航
一款由css3和jquery实现的响应式设计导航
2014年响应式设计成为设计主流。今天要给大家带来一款由css3和jquery实现的响应式设计导航。当显示器为pc时，导航为横条。当客户端为移动端时，呈现坚形导航。我们一起看下效果图：
在线预览 源码下载
实现的代码。
html代码：
<header> <nav id=‘cssmenu‘> <div class="logo"> <a href="index.html">Responsive </a> </div> <div id="head-mobile"> </div> <div class="button"> </div> <ul> <li class=‘active‘><a href=‘#‘>HOME</a></li> <li><a href=‘#‘>ABOUT</a></li> <li><a href=‘#‘>PRODUCTS</a> <ul> <li><a href=‘#‘>Product 1</a> <ul> <li><a href=‘#‘>Sub Product</a></li> <li><a href=‘#‘>Sub Product</a></li> </ul> </li> <li><a href=‘#‘>Product 2</a> <ul> <li><a href=‘#‘>Sub Product</a></li> <li><a href=‘#‘>Sub Product</a></li> </ul> </li> </ul> </li> <li><a href=‘#‘>BIO</a></li> <li><a href=‘#‘>VIDEO</a></li> <li><a href=‘#‘>GALLERY</a></li> <li><a href=‘#‘>CONTACT</a></li> </ul> </nav> </header> <section style=‘padding-top: 20px; font: bold 44px arial; color: #68D800; width: 970px; margin: auto;‘> Responsive CSS3 Menu<br />Dropdown + Submenus<br /> Width Toggle Animation <script src="/scripts/2bc/_gg_970_90.js" type="text/javascript"></script></section>
css3代码：
* { margin: 0; padding: 0; text-decoration: none; } body { background: #555; } header { position: relative; width: 100%; background: #333; } .logo { position: relative; z-index: 123; padding: 10px; font: 18px verdana; color: #6DDB07; float: left; width: 15%; } .logo a { color: #6DDB07; } nav { position: relative; width: 980px; margin: 0 auto; } #cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a, #cssmenu #head-mobile { border: 0; list-style: none; line-height: 1; display: block; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #cssmenu:after, #cssmenu > ul:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } #cssmenu #head-mobile { display: none; } #cssmenu { font-family: sans-serif; background: #333; } #cssmenu > ul > li { float: left; } #cssmenu > ul > li > a { padding: 17px; font-size: 12px; letter-spacing: 1px; text-decoration: none; color: #ddd; font-weight: 700; } #cssmenu > ul > li:hover > a, #cssmenu ul li.active a { color: #fff; } #cssmenu ul li.active:hover { background: #448D00; } #cssmenu > ul > li:hover, #cssmenu ul li.active { background: #448D00; -webkit-transition: background .3s ease; -ms-transition: background .3s ease; transition: background .3s ease; } #cssmenu > ul > li.has-sub > a { padding-right: 30px; } #cssmenu > ul > li.has-sub > a:after { position: absolute; top: 22px; right: 11px; width: 8px; height: 2px; display: block; background: #ddd; content: ‘‘; } #cssmenu > ul > li.has-sub > a:before { position: absolute; top: 19px; right: 14px; display: block; width: 2px; height: 8px; background: #ddd; content: ‘‘; -webkit-transition: all .25s ease; -ms-transition: all .25s ease; transition: all .25s ease; } #cssmenu > ul > li.has-sub:hover > a:before { top: 23px; height: 0; } #cssmenu ul ul { position: absolute; left: -9999px; } #cssmenu ul ul li { height: 0; -webkit-transition: all .25s ease; -ms-transition: all .25s ease; transition: all .25s ease; } #cssmenu ul ul li:hover { } #cssmenu li:hover > ul { left: auto; } #cssmenu li:hover > ul > li { height: 35px; } #cssmenu ul ul ul { margin-left: 100%; top: 0; } #cssmenu ul ul li a { border-bottom: 1px solid rgba(150,150,150,0.15); padding: 11px 15px; width: 170px; font-size: 12px; text-decoration: none; color: #ddd; font-weight: 400; background: #333; } #cssmenu ul ul li:last-child > a, #cssmenu ul ul li.last-item > a { border-bottom: 0; } #cssmenu ul ul li:hover > a, #cssmenu ul ul li a:hover { color: #fff; } #cssmenu ul ul li.has-sub > a:after { position: absolute; top: 16px; right: 11px; width: 8px; height: 2px; display: block; background: #ddd; content: ‘‘; } #cssmenu ul ul li.has-sub > a:before { position: absolute; top: 13px; right: 14px; display: block; width: 2px; height: 8px; background: #ddd; content: ‘‘; -webkit-transition: all .25s ease; -ms-transition: all .25s ease; transition: all .25s ease; } #cssmenu ul ul > li.has-sub:hover > a:before { top: 17px; height: 0; } #cssmenu ul ul li.has-sub > a:hover, #cssmenu ul li.has-sub ul li.has-sub ul li > a:hover { background: #363636; } @media screen and (max-width: 468px) { .logo { position: absolute; top: 0; left: 0; width: 100%; height: 46px; text-align: center; padding: 10px 0 0 0; float: none; } .logo2 { display: none; } nav { width: 100%; } #cssmenu { width: 100%; } #cssmenu ul { width: 100%; display: none; } #cssmenu ul li { width: 100%; border-top: 1px solid #444; } #cssmenu ul li:hover { background: #363636; -webkit-transition: none; -ms-transition: none; transition: none; } #cssmenu ul ul li, #cssmenu li:hover > ul > li { height: auto; } #cssmenu ul li a, #cssmenu ul ul li a { width: 100%; border-bottom: 0; } #cssmenu > ul > li { float: none; } #cssmenu ul ul li a { padding-left: 25px; } #cssmenu ul ul li a { background: #333 !important; } #cssmenu ul ul li a:hover { background: #363636 !important; } #cssmenu ul ul ul li a { padding-left: 35px; } #cssmenu ul ul li a { color: #ddd; background: none; } #cssmenu ul ul li:hover > a, #cssmenu ul ul li.active > a { color: #fff; } #cssmenu ul ul, #cssmenu ul ul ul { position: relative; left: 0; width: 100%; margin: 0; text-align: left; } #cssmenu > ul > li.has-sub > a:after, #cssmenu > ul > li.has-sub > a:before, #cssmenu ul ul > li.has-sub > a:after, #cssmenu ul ul > li.has-sub > a:before { display: none; } #cssmenu #head-mobile { display: block; padding: 23px; color: #ddd; font-size: 12px; font-weight: 700; } .button { width: 55px; height: 46px; position: absolute; right: 0; top: 0; cursor: pointer; z-index: 12399994; } .button:after { position: absolute; top: 22px; right: 20px; display: block; height: 4px; width: 20px; border-top: 2px solid #dddddd; border-bottom: 2px solid #dddddd; content: ‘‘; } .button:before { -webkit-transition: all .3s ease; -ms-transition: all .3s ease; transition: all .3s ease; position: absolute; top: 16px; right: 20px; display: block; height: 2px; width: 20px; background: #ddd; content: ‘‘; } .button.menu-opened:after { -webkit-transition: all .3s ease; -ms-transition: all .3s ease; transition: all .3s ease; top: 23px; border: 0; height: 2px; width: 19px; background: #fff; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .button.menu-opened:before { top: 23px; background: #fff; width: 19px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } #cssmenu .submenu-button { position: absolute; z-index: 99; right: 0; top: 0; display: block; border-left: 1px solid #444; height: 46px; width: 46px; cursor: pointer; } #cssmenu .submenu-button.submenu-opened { background: #262626; } #cssmenu ul ul .submenu-button { height: 34px; width: 34px; } #cssmenu .submenu-button:after { position: absolute; top: 22px; right: 19px; width: 8px; height: 2px; display: block; background: #ddd; content: ‘‘; } #cssmenu ul ul .submenu-button:after { top: 15px; right: 13px; } #cssmenu .submenu-button.submenu-opened:after { background: #fff; } #cssmenu .submenu-button:before { position: absolute; top: 19px; right: 22px; display: block; width: 2px; height: 8px; background: #ddd; content: ‘‘; } #cssmenu ul ul .submenu-button:before { top: 12px; right: 16px; } #cssmenu .submenu-button.submenu-opened:before { display: none; } }
js代码：
(function ($) { $.fn.menumaker = function (options) { var cssmenu = $(this), settings = $.extend({ format: "dropdown", sticky: false }, options); return this.each(function () { $(this).find(".button").on(‘click‘, function () { $(this).toggleClass(‘menu-opened‘); var mainmenu = $(this).next(‘ul‘); if (mainmenu.hasClass(‘open‘)) { mainmenu.slideToggle().removeClass(‘open‘); } else { mainmenu.slideToggle().addClass(‘open‘); if (settings.format === "dropdown") { mainmenu.find(‘ul‘).show(); } } }); cssmenu.find(‘li ul‘).parent().addClass(‘has-sub‘); multiTg = function () { cssmenu.find(".has-sub").prepend(‘<span class="submenu-button"></span>‘); cssmenu.find(‘.submenu-button‘).on(‘click‘, function () { $(this).toggleClass(‘submenu-opened‘); if ($(this).siblings(‘ul‘).hasClass(‘open‘)) { $(this).siblings(‘ul‘).removeClass(‘open‘).slideToggle(); } else { $(this).siblings(‘ul‘).addClass(‘open‘).slideToggle(); } }); }; if (settings.format === ‘multitoggle‘) multiTg(); else cssmenu.addClass(‘dropdown‘); if (settings.sticky === true) cssmenu.css(‘position‘, ‘fixed‘); resizeFix = function () { if ($(window).width() > 468) { cssmenu.find(‘ul‘).show(); } if ($(window).width() <= 468) { cssmenu.find(‘ul‘).hide().removeClass(‘open‘); } }; resizeFix(); return $(window).on(‘resize‘, resizeFix); }); }; })(jQuery); (function ($) { $(document).ready(function () { $("#cssmenu").menumaker({ format: "multitoggle" }); }); })(jQuery); //@ sourceURL=pen.js
注：本文爱编程原创文章，转载请注明原文地址：http://www.w2bc.com/Article/7223
一款由css3和jquery实现的响应式设计导航
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。