首页 > 代码库 > css3和jquery实现的可折叠导航菜单(适合手机网页)
css3和jquery实现的可折叠导航菜单(适合手机网页)
之前为大家介绍了好几款css3导航，今天为大家在介绍的是一款适合放在手机网页的导航菜单。点击列表图标以下拉式的形式显示菜单，单击关闭，动画关闭。效果相当不错。效果图如下：
在线预览 源码下载
这个实例由css3和依赖于jquery插件。下面是实现代码
html代码：
<nav class="nav" role="navigation" style="height: 195px;"> <ul class="nav-items"> <li><a target=_blank href="http://www.w2bc.com">Home</a></li> <li><a target=_blank href="http://www.w2bc.com">About</a></li> <li><a target=_blank href="http://www.w2bc.com">Clients</a></li> <li><a target=_blank href="http://www.w2bc.com">Contact Us</a></li> </ul> </nav> <header style="-webkit-transform: translate3d(0px, 195px, 0px);"> <button class="menu-button-target active" data-ic-class="button-trigger"> <span class="menu-button"></span> </button> Example Header</header> <section> <article> </article> <article> </article> <article> </article> <article> </article> <article> </article> </section>
css3代码：
* { box-sizing: border-box; } body { font-family: "HelveticaNeue-Light" , "Helvetica Neue Light" , "Helvetica Neue" , Helvetica, Arial, "Lucida Grande" , sans-serif; font-weight: 300; } nav { position: fixed; -webkit-transform: translate3d(0, 0, 0); left: 0; transition: all 0.4s ease; width: 100%; background: #34495e; height: 0; overflow: hidden; transition-delay: 0.25s; } .active nav { transition-delay: 0s; } nav ul { width: 95%; margin: 0 auto; } nav ul li { padding: 5px; border-bottom: 1px solid white; } nav ul li:nth-child(1) a { transition-delay: 0.1s; } nav ul li:nth-child(2) a { transition-delay: 0.15s; } nav ul li:nth-child(3) a { transition-delay: 0.2s; } nav ul li:nth-child(4) a { transition-delay: 0.25s; } nav ul li:last-child { border: none; } nav ul li a { transition: all 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955); position: relative; display: block; text-decoration: none; color: white; font-size: 18px; padding: 10px; -webkit-transform: translate3d(100px, 0, 0); opacity: 0; } .active nav ul li a { -webkit-transform: translateX(0); opacity: 1; } header { transition: all 0.4s ease; -webkit-transform: translate3d(0, 0, 0); left: 0; width: 100%; position: fixed; background: #27ae60; color: white; padding: 20px; text-align: center; font-size: 20px; transition-delay: 0.25s; } .active header { transition-delay: .08s; } section { background: #f5f5f5; padding-top: 80px; } article { background: white; height: 500px; width: 95%; border-radius: 3px; margin: 0 auto 20px auto; border: 1px solid #e4e4e4; } .menu-button-target { background: transparent; border: none; outline: none; cursor: pointer; position: absolute; z-index: 200; left: 10px; height: 50px; top: 50%; margin-top: -23px; webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .menu-button-target.active .menu-button { transition: background .2s ease; background-color: transparent; } .menu-button-target.active .menu-button:before, .menu-button-target.active .menu-button:after { transition: top .3s ease, -webkit-transform .3s .2s ease; } .menu-button-target.active .menu-button:before { top: 0; -webkit-transform: rotate(45deg); } .menu-button-target.active .menu-button:after { top: 0; -webkit-transform: rotate(-45deg); } .menu-button { position: relative; top: 50%; left: 0; display: block; width: 40px; height: 4px; margin-top: -2px; background-color: white; border-radius: 10px; transition: background .2s .2s; } .menu-button:before, .menu-button:after { content: ""; display: block; position: absolute; width: 100%; height: 100%; left: 0; background-color: white; transition: top .3s .2s ease, -webkit-transform .3s ease; border-radius: 10px; -webkit-transform-origin: 50% 50%; } .menu-button:before { top: -10px; -webkit-transform: rotate(0deg); } .menu-button:after { top: 10px; -webkit-transform: rotate(0deg); }
js代码：
var $menuTrigger = $(‘[data-ic-class="button-trigger"]‘), $menuOverlay = $(‘[data-ic-class="overlay"]‘), $menuItem = $(‘.menu-item‘), activeClass = ‘active‘, $nav = $(‘nav‘), $navULHeight = $(‘.nav-items‘).outerHeight(), navOpen = false, $header = $(‘header‘); var isTouch = false; if ($(‘html‘).hasClass(‘touch‘)) { isTouch = true; } function menuFunction() { $menuTrigger.toggleClass(activeClass); if (!navOpen) { $nav.height($navULHeight); navOpen = true; $(‘body‘).addClass(‘active‘); $header.css(‘transform‘, ‘translate3d(0, ‘ + $navULHeight + ‘px, 0)‘); } else { $nav.height(0); $header.css(‘transform‘, ‘translate3d(0, 0, 0)‘); navOpen = false; $(‘body‘).removeClass(‘active‘); } } if (isTouch) { $menuTrigger.on(‘touchstart‘, function () { menuFunction(); }); } if (!isTouch) { $menuTrigger.on(‘click‘, function () { menuFunction(); }); }
注：本文爱编程原创文章，转载请注明原文地址：http://www.w2bc.com/Article/5377
css3和jquery实现的可折叠导航菜单(适合手机网页)
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。