html5+js 实现手机触屏版导航菜单切换

sharembweb 17次浏览

摘要:这是一款基于html5实现的适用于手机端点击弹出导航菜单效果源码,点击右上角的菜单按钮可下滑弹出相应的导航菜单,过度效果平滑自然。是一款非常实用的手机端导航效果代码。建议使用支持html5与css3效果较好的火狐或谷歌等浏览器预览本源码。

<!DOCTYPE HTML>
<html> 
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=10,IE=9,IE=8,ie=7">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">    
	<style> 
		body{overflow-x: hidden;margin: 0;background:green;margin-top: 0;}
		ol, ul {margin: 0;padding: 0;list-style: none;}
		
		#mobile_nav{position:fixed;top:0;right:0;display:none;width:100%}
		#mobile_nav div{width:100%;height:40px;color:#fff;text-align:right;font-size:18px;line-height:40px;margin-top:5px}
		#mobile_nav div.open{width:100%;background:rgba(1,1,1,.8);text-align:right}
		#mobile_nav ul{display:none;padding-bottom:40px;width:100%;background:rgba(1,1,1,.8)}
		#mobile_nav li{display:block;overflow:hidden;height:40px;vertical-align:top;text-align:center;font-size:16px;line-height:40px}
		#mobile_nav a, #mobile_nav a:hover{color:#fff}
		#mobile_nav .navicon{margin-right:10px}
		.navicon{position:relative;display:inline-block;width:30px;height:5px;background-color:#eee}
		.navicon:after,.navicon:before{position:absolute;display:block;width:30px;height:5px;background:#eee;content:'';-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:margin,-webkit-transform;transition-property:margin,-webkit-transform;transition-property:margin,transform;transition-property:margin,transform,-webkit-transform}
		.navicon:before{margin-top:-10px}
		.navicon:after{margin-top:10px}
		#mobile_nav div.open .navicon{background:rgba(1,1,1,.8)}
		#mobile_nav div.open .navicon:before{margin-top:0;-webkit-transform:rotate(45deg);transform:rotate(45deg)}
		#mobile_nav div.open .navicon:after{margin-top:0;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}
		#mobile_nav div.open .navicon:after,#mobile_nav div.open .navicon:before{position:absolute;display:block;width:30px;height:5px;background:#eee;content:'';-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:margin,-webkit-transform;transition-property:margin,-webkit-transform;transition-property:margin,transform;transition-property:margin,transform,-webkit-transform}
		@media screen and (max-width:640px){
		#mobile_nav{z-index:99999;display:block;margin-bottom:30px}
		.pages {margin-left:5px}
		.pages .pageinfo{display:none}
		}
    </style>
</head>
  
<body>  
    <header class="header" style="height: 52px;">
      <div class="navbar">  
        <div id="mobile_nav">
            <div class="nav_box"><span class="navicon"></span></div>
            <ul class="nav_ul">
             
        <li><a href="/" title="网站首页">网站首页</a></li>
        <li><a href="/asptophp/" title="在线ASP转PHP">在线ASP转PHP</a></li>
        <li><a href="/fangzhan/" title="在线仿站">在线仿站</a></li>
        <li><a href="/mobandown/" title="模板下载">模板下载</a></li>
        <li><a href="/originalTutorials/" title="原创教程">原创教程</a></li>
        <li><a href="/about/" title="关于">关于</a></li> 
                    
            </ul>
        </div>	
       </div>
    </header>  
    <script> 
        window.onload = function (){
            var nav_box = document.getElementsByClassName("nav_box")[0];
            var ul = document.getElementsByClassName("nav_ul")[0];
            nav_box.onclick = function (){
                var style = ul.style;
                style.display = style.display == "block" ? "none" : "block";
                nav_box.className = style.display == "block" ? "open" : ""
            }
        }
    
    </script>
</body>
</html>

本文版权归作者所有,转摘请注明作者和出处!
作者:云祥孙
首发:http://sharembweb.com

随机内容

表情

共2条评论
  • 网友评论:

    赞一个

    2020-07-24 16:26:24 回复

  • 网友评论:

    学习了

    2020-07-24 16:26:24 回复

友情链接