之前为大家介绍了好几款css3导航，今天为大家在介绍的是一款适合放在手机网页的导航菜单。点击列表图标以下拉式的形式显示菜单，单击关闭，动画关闭。效果相当不错。效果图如下：
在线预览源码下载
这个实例由css3和依赖于jquery插件。下面是实现代码
html代码：
<nav class="nav" role="navigation" style="height: 195px;"><ul class="nav-items"><li><a target=_blank href="http://***">Home</a></li><li><a target=_blank href="http://***">About</a></li><li><a target=_blank href="http://***">Clients</a></li><li><a target=_blank href="http://***">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://***/Article/5377
