冰之雪博�?/title> <meta name="keywords" content="网站制作,博客,个人博客,个人网站,网站建设,网站模板" /> <meta name="description" content="如何建立个人网站制作_企业网站建设方案_独立个人博客模板源码程序下载哪个比较好_SEO排名技术建站cms系统制作企业网站个人网站价格_个人博客网站制作视频教学快速建�? /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="/skin/css/base.css" rel="stylesheet"> <link href="/skin/css/m.css" rel="stylesheet"> <script src="/skin/js/jquery-1.8.3.min.js" ></script> <script src="/skin/js/comm.js"></script>  <script type="text/javascript" src="/skin/js/ajax.js"></script> <link href="/skin/css/shCoreDefault.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="/skin/js/shCore.js"></script> <script type="text/javascript"> SyntaxHighlighter.all(); </script>  <script language="javascript" type="text/javascript" src="/include/dedeajax2.js"></script> <script language="javascript" type="text/javascript"> </script> </head> <body>   <header id="header"> <div class="navbox"> <h2 id="mnavh"><span class="navicon"></span></h2> <div class="logo"><a href="/">冰之�?| <font class="font16">排名技术建站，让你对手追赶</font></a></div> <nav> <ul id="starlist"> <li><a href="/" title="首页">网站首页</a></li> <li class="menu"><a href="/a/gerenbokemoban/" target="_blank">热点资讯</a> <ul class="sub"> <li><a href="/a/gerenbokemoban/gerenwangzhanmoban/" target="_blank">时尚盛典</a></li> <li><a href="/a/gerenbokemoban/diguocmsmoban/" target="_blank">娱乐生活</a></li> </ul> <span></span></li> <li class="menu"><a href="/a/gerenwangzhanmoban/" target="_blank">博客网站制作</a> <ul class="sub"> <li><a href="/a/gerenwangzhanmoban/xindebiji/" target="_blank">心得笔记</a></li> <li><a href="/a/gerenwangzhanmoban/CSS3_Html5/" target="_blank">CSS3|Html5</a></li> <li><a href="/a/gerenwangzhanmoban/wangzhanjianshejiaocheng/" target="_blank">网站建设教程</a></li> <li><a href="/a/gerenwangzhanmoban/tuijiangongju/" target="_blank">推荐工具</a></li> </ul> <span></span></li> <li class="menu"><a href="/a/qiyewangzhanjianshe/" target="_blank">企业网站建设</a> <ul class="sub"> <li><a href="/a/qiyewangzhanjianshe/qiyewangzhanmoban/" target="_blank">企业网站模板</a></li> <li><a href="/a/qiyewangzhanjianshe/qiyewangzhanzhizuo/" target="_blank">企业网站制作</a></li> </ul> <span></span></li> <li class="menu"><a href="/a/wangyeshejixinde/" target="_blank">网页设计心得</a> <ul class="sub"> <li><a href="/a/wangyeshejixinde/bokeriji/" target="_blank">博客日记</a></li> <li><a href="/a/wangyeshejixinde/chengxurensheng/" target="_blank">程序人生</a></li> </ul> <span></span></li> <li><a href="/a/youxiugerenboke/" target="_blank">时装搭配</a></li> <li><a href="/a/guanyuwo/" target="_blank">关于�?/a></li> </ul> </nav> <div class="searchico"></div> </div> </header>    <article>  <div class="lbox"> <div class="content_box whitebg"> <h2 class="htitle"><span class="con_nav">您现在的位置是：<a href='http://www.bingzhixue.top/'>主页</a> > <a href='/a/gerenwangzhanmoban/'>博客网站制作</a> > <a href='/a/gerenwangzhanmoban/CSS3_Html5/'>CSS3|Html5</a> > > </span></h2> <h1 class="con_tilte">用js+css3来写一个手机栏目导�?/h1> <p class="bloginfo"><i class="avatar"><img src="/skin/img/avatar.jpg"></i><span>admin </span><span>2019-04-03</span><span>【网站建设教程�?/span><span><script src=""></script>人已围观</span></p> <p class="con_info"><b>简�?/b>有些站长说想做一个手机适应的网�?但是导航太难�?如果要使用框架的�?代码非常�?冗余.再用dreamwear打开,那直接就不响应了.我一直都喜欢用简单的代码...</p> <div class="con_text"> <span style="margin: 0px; padding: 0px; color: rgb(51, 51, 51); font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif; font-size: 18px;"><span style="margin: 0px; padding: 0px; font-family: 微软雅黑;">有些站长说想做一个手机适应的网�?但是导航太难�?如果要使用框架的�?代码非常�?冗余.再用dreamwear打开,那直接就不响应了.我一直都喜欢用简单的代码来实�?js,css3利用的好,同样可以做出好看实用的导�?关键是代码极�?现在我把步骤分享出来</span></span><br style="margin: 0px; padding: 0px; color: rgb(51, 51, 51); font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif; font-size: 15px;" /> <br style="margin: 0px; padding: 0px; color: rgb(51, 51, 51); font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif; font-size: 15px;" /> <span style="margin: 0px; padding: 0px; color: rgb(51, 51, 51); font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif; font-size: 14px;"><span style="margin: 0px; padding: 0px; font-family: 宋体;"><img alt="" src="https://www.yangqq.com/d/file/jstt/css3/2018-03-14/acb2bc61c9dac93b05bb28a302fe9125.jpg" style="margin: auto; padding: 0px; border: 0px; display: block; max-width: 100%; height: auto !important;" /><br style="margin: 0px; padding: 0px;" /> <br style="margin: 0px; padding: 0px;" /> 展开�?<br style="margin: 0px; padding: 0px;" /> <img alt="" src="https://www.yangqq.com/d/file/jstt/css3/2018-03-14/16860bbd3a76dbb2a37edcfc02368a92.png" style="margin: auto; padding: 0px; border: 0px; display: block; max-width: 100%; height: auto !important;" /><br style="margin: 0px; padding: 0px;" /> 效果演示请缩小你的浏览器比例,或者直接用手机访问.<br style="margin: 0px; padding: 0px;" /> <br style="margin: 0px; padding: 0px;" /> 思路是这样的:<br style="margin: 0px; padding: 0px;" /> 两个导航,一个用于手机端显示,一个用于电脑端显示.自适应的css代码,当media screen width�?80px,则显示mnav,隐藏PC端的nav样式.<br style="margin: 0px; padding: 0px;" /> 按钮的动�?默认隐藏,动作点击后出�? 可以�?times;图标,或者css直接来写. 虽然用图片来比较简�?也不费事,但是css能实现就别用图片�?用css来实现吧.<br style="margin: 0px; padding: 0px;" /> <br style="margin: 0px; padding: 0px;" /> Html:</span></span> <div style="margin: 0px; padding: 5px 10px; color: rgb(51, 51, 51); font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif; font-size: 15px; background: rgb(238, 238, 238); border: 1px solid rgb(204, 204, 204);"> <p style="margin: 15px 0px; padding: 0px;"> <br style="margin: 0px; padding: 0px;" /> <span style="margin: 0px; padding: 0px; font-size: 14px;"><span style="margin: 0px; padding: 0px; font-family: 宋体;"><span style="margin: 0px; padding: 0px; color: rgb(0, 0, 0);"><div id="mnav"><br style="margin: 0px; padding: 0px;" /> <h2><span class="navicon"></span></h2><br style="margin: 0px; padding: 0px;" /> <ul><br style="margin: 0px; padding: 0px;" /> <li><a href="/">网站首页</a></li><br style="margin: 0px; padding: 0px;" /> <li><a href="/">关于�?lt;/a></li><br style="margin: 0px; padding: 0px;" /> <li><a href="/">模板分享</a></li><br style="margin: 0px; padding: 0px;" /> <li><a href="/">学无止境</a></li><br style="margin: 0px; padding: 0px;" /> <li><a href="/">慢生�?lt;/a></li><br style="margin: 0px; padding: 0px;" /> <li><a href="/">博客导航</a></li><br style="margin: 0px; padding: 0px;" /> <li><a href="/">留言</a></li><br style="margin: 0px; padding: 0px;" /> </ul><br style="margin: 0px; padding: 0px;" /> </div></span></span></span></p> </div> <br style="margin: 0px; padding: 0px; color: rgb(51, 51, 51); font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif; font-size: 15px;" /> <span style="margin: 0px; padding: 0px; color: rgb(51, 51, 51); font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif; font-size: 14px;"><span style="margin: 0px; padding: 0px; font-family: 宋体;">CSS:</span></span> <div style="margin: 0px; padding: 5px 10px; color: rgb(51, 51, 51); font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif; font-size: 15px; background: rgb(238, 238, 238); border: 1px solid rgb(204, 204, 204);"> <span style="margin: 0px; padding: 0px; font-size: 14px;"><span style="margin: 0px; padding: 0px; font-family: 宋体;"><span style="margin: 0px; padding: 0px; color: rgb(0, 0, 0);">#mnav { display: none; width: 100%; position: fixed; top: 0; right: 0; }<br style="margin: 0px; padding: 0px;" /> #mnav h2 { text-align: right; color: #fff; font-size: 18px; height: 40px; line-height: 40px; padding-left: 10px; width: 100% }<br style="margin: 0px; padding: 0px;" /> #mnav h2.open { text-align: right; background: rgba(1,1,1,0.8); width: 100%; }<br style="margin: 0px; padding: 0px;" /> #mnav ul { display: none; background: rgba(1,1,1,0.8); width: 100%; padding-bottom:40px} <br style="margin: 0px; padding: 0px;" /> #mnav li { height: 40px; line-height: 40px; vertical-align: top; font-size: 16px; display: block; overflow: hidden; text-align: center }<br style="margin: 0px; padding: 0px;" /> #mnav a:hover { color: #fff;}<br style="margin: 0px; padding: 0px;" /> /* 默认= */<br style="margin: 0px; padding: 0px;" /> #mnav h2 .navicon { margin-right: 15px; }<br style="margin: 0px; padding: 0px;" /> .navicon { display: inline-block; position: relative; width: 30px; height: 5px; background-color: #FFFFFF; }<br style="margin: 0px; padding: 0px;" /> .navicon:before, .navicon:after { content: ''; display: block; width: 30px; height: 5px; position: absolute; background: #FFFFFF; -webkit-transition-property: margin, -webkit-transform; transition-property: margin, -webkit-transform; transition-property: margin, transform; transition-property: margin, transform, -webkit-transform; -webkit-transition-duration: 300ms; transition-duration: 300ms; }<br style="margin: 0px; padding: 0px;" /> .navicon:before { margin-top: -10px; }<br style="margin: 0px; padding: 0px;" /> .navicon:after { margin-top: 10px; }<br style="margin: 0px; padding: 0px;" /> /* 展开后导航栏�?*/<br style="margin: 0px; padding: 0px;" /> #mnav h2.open .navicon { background: rgba(1,1,1,0.8) }/* 使用背景色隐藏中间的红线 */<br style="margin: 0px; padding: 0px;" /> #mnav h2.open .navicon:before { margin-top: 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); }<br style="margin: 0px; padding: 0px;" /> #mnav h2.open .navicon:after { margin-top: 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }<br style="margin: 0px; padding: 0px;" /> #mnav h2.open .navicon:before, #mnav h2.open .navicon:after { content: ''; display: block; width: 30px; height: 5px; position: absolute; background: #FFFFFF; -webkit-transition-property: margin, -webkit-transform; transition-property: margin, -webkit-transform; transition-property: margin, transform; transition-property: margin, transform, -webkit-transform; -webkit-transition-duration: 300ms; transition-duration: 300ms; }<br style="margin: 0px; padding: 0px;" /> <br style="margin: 0px; padding: 0px;" /> @media screen and (max-width: 480px) {<br style="margin: 0px; padding: 0px;" /> nav { display: none }<br style="margin: 0px; padding: 0px;" /> #mnav { display: block; z-index: 99999; margin-bottom: 30px }<br style="margin: 0px; padding: 0px;" /> <br style="margin: 0px; padding: 0px;" /> }</span></span></span></div> <br style="margin: 0px; padding: 0px; color: rgb(51, 51, 51); font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif; font-size: 15px;" /> <span style="margin: 0px; padding: 0px; color: rgb(51, 51, 51); font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif; font-size: 14px;"><span style="margin: 0px; padding: 0px; font-family: 宋体;">JS:</span></span> <div style="margin: 0px; padding: 5px 10px; color: rgb(51, 51, 51); font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif; font-size: 15px; background: rgb(238, 238, 238); border: 1px solid rgb(204, 204, 204);"> <span style="margin: 0px; padding: 0px; font-size: 14px;"><span style="margin: 0px; padding: 0px; font-family: 宋体;"><span style="margin: 0px; padding: 0px; color: rgb(0, 0, 0);"><script><br style="margin: 0px; padding: 0px;" /> window.onload = function ()<br style="margin: 0px; padding: 0px;" /> {<br style="margin: 0px; padding: 0px;" /> var oH2 = document.getElementsByTagName("h2")[0];<br style="margin: 0px; padding: 0px;" /> var oUl = document.getElementsByTagName("ul")[0];<br style="margin: 0px; padding: 0px;" /> oH2.onclick = function ()<br style="margin: 0px; padding: 0px;" /> {<br style="margin: 0px; padding: 0px;" /> var style = oUl.style;<br style="margin: 0px; padding: 0px;" /> style.display = style.display == "block" ? "none" : "block";<br style="margin: 0px; padding: 0px;" /> oH2.className = style.display == "block" ? "open" : ""<br style="margin: 0px; padding: 0px;" /> }<br style="margin: 0px; padding: 0px;" /> }<br style="margin: 0px; padding: 0px;" /> </script></span></span></span></div> <div class="share"><img src="/skin/img/wxgzh.jpg"> <p>扫描关注冰之雪微信公众号，第一时间获取网站模板更新动�?/p> <p>本文地址�?a href="/" target="_blank">http://www.bingzhixue98.com</a></p> </div> <p><span class="diggit"> <a href="" onclick="javascript:postDigg('good',11)"> 很赞哦！ </a>(0 <script language="javascript" type="text/javascript">getDigg(11);</script> )</span></p> <div class="nextinfo"> <p>上一篇：上一篇：<a href='/a/gerenwangzhanmoban/CSS3_Html5/10.html'>十条设计原则教你学会如何设计网页布局!</a> </p> <p>下一篇：下一篇：<a href='/a/gerenwangzhanmoban/CSS3_Html5/12.html'>6条网页设计配色原�?让你秒变配色高手</a> </p> </div> </div> </div> <div class="ad whitebg"><a href='/'> <img src='/skin/img/8793672fca8dae2ce093aa46546f8e22.jpg'> </a></div> <div class="whitebg"> <h2 class="htitle">相关文章</h2> <ul class="otherlink"> </ul> </div>  </div>   <div class="whitebg paihang"> <h2 class="htitle">点击排行</h2> <ul> </ul> </div> <div class="whitebg tuijian"> <h2 class="htitle">本栏推荐</h2> <ul> </ul> </div> <div class="ad whitebg imgscale"> <ul> <a href='/' target=_blank><img src='/skin/img/9b68673aa2d35ee182119945eb2ef498.png'></a> </ul> </div> <div class="whitebg cloud"> <h2 class="htitle">标签�?/h2> <ul> <a href="/a/TAGsxinxi/wangzhanjianshe/" target="_blank">网站建设</a> <a href="/a/TAGsxinxi/qiyemenhuwangzhan/" target="_blank">企业门户网站</a> <a href="/a/TAGsxinxi/baojia/" target="_blank">报价</a> <a href="/a/TAGsxinxi/qiyewangzhanzhizuo/" target="_blank">企业网站制作</a> <a href="/a/TAGsxinxi/jiage/" target="_blank">价格</a> <a href="/a/TAGsxinxi/gerenwangzhanjianshe/" target="_blank">个人网站建设</a> <a href="/a/TAGsxinxi/qiyewangzhanjianshejiage/" target="_blank">企业网站建设价格</a> <a href="/a/TAGsxinxi/qiyewangzhanpaiming/" target="_blank">企业网站排名</a> <a href="/a/TAGsxinxi/wangzhanzhizuojiage/" target="_blank">网站制作价格</a> <a href="/a/TAGsxinxi/wangzhanjiansheduoshaoqian/" target="_blank">网站建设多少�?/a> <a href="/a/TAGsxinxi/qiyewangzhanjiansheqiyewangzhanjianshe/" target="_blank">企业网站建设企业网站建设价格</a> <a href="/a/TAGsxinxi/dingwei/" target="_blank">定位</a> <a href="/a/TAGsxinxi/duoshaoqian/" target="_blank">多少�?/a> <a href="/a/TAGsxinxi/qiyewangzhanjianshe/" target="_blank">企业网站建设</a> <a href="/a/TAGsxinxi/mobanjianzhan/" target="_blank">模板建站</a> <a href="/a/TAGsxinxi/SEOyouhua/" target="_blank">SEO优化</a> <a href="/a/TAGsxinxi/hunqing/" target="_blank">婚庆</a> </ul> </div> <div class="whitebg wenzi"> <h2 class="htitle">猜你喜欢</h2> <ul> <li><a target="_blank" href="/a/gerenwangzhanmoban/CSS3_Html5/12.html">6条网页设计配色原�?让你秒变�?/a></li> <li><a target="_blank" href="/a/gerenwangzhanmoban/CSS3_Html5/10.html">十条设计原则教你学会如何设计�?/a></li> <li><a target="_blank" href="/a/gerenwangzhanmoban/CSS3_Html5/28.html">三步实现滚动条触动css动画效果</a></li> <li><a target="_blank" href="/a/gerenwangzhanmoban/CSS3_Html5/9.html">别让这些闹心的套路，毁了你的�?/a></li> <li><a target="_blank" href="/a/gerenwangzhanmoban/CSS3_Html5/29.html">学习用css3画博客网站logo图标</a></li> <li><a target="_blank" href="/a/gerenwangzhanmoban/CSS3_Html5/8.html">网页中图片属性固定宽度，如何�?/a></li> <li><a target="_blank" href="/a/gerenwangzhanmoban/CSS3_Html5/11.html">用js+css3来写一个手机栏目导�?/a></li> </ul> </div> <div class="ad whitebg imgscale"> <ul> <a href='/' target=_blank><img src='/skin/img/9b643a3237daadb5f5e6d08964afe571.jpg'></a> </ul> </div>  </div> </article>  <footer> <div class="box"> <div class="wxbox"> <ul> <li><img src="/skin/img/wx.png"><span>微信公众�?/span></li> <li><img src="/skin/img/wx.png"><span>我的微信</span></li> </ul> </div> <div class="endnav"> <p><b>站点声明�?/b></p> <p>1、本站个人博客模板，均为冰之雪本人设计，个人可以使用，但是未经许可不得用于任何商业目的�?/p> <p>2、所有文章未经授权禁止转载、摘编、复制或建立镜像，如有违反，追究法律责任。举报邮箱：<a href="/" target="_blank">396585662@qq.com</a></p> <a href=http://www.dedecms.com target='_blank'>Power by DedeCms</a> <p>Copyright © <a href="/" target="_blank">www.bingzhixue.top</a> All Rights Reserved. 备案号：<a href="http://beian.miit.gov.cn/" target="_blank">ICP备案号：湘ICP�?9011697号�?</a> <a href="/" target="_blank">网络营销推广</a></p> </div> </div> <a href="#"> <div class="top"></div> </a> </footer> <!--左浮�?-> <div class="kf"> <h2><span id="closed"></span>客服在线</h2> <ul> <li><a href="tencent://Message/?Uin=396585662&websiteName=q-zone.qq.com&Menu=yes" target="_blank" class="qqservice_list_link">QQ客服</a></li> </ul> <ul class="kfdh"> <p class="kftext">客服微信扫码</p> <p class="kfnum"><img src="/skin/img/wx.png"></p> </ul> <p class="kftext">服务时间</p> <p class="kftime">周一至周�?9:00-21:00</p> </div> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?f655f558c510211e38805f6b586e6b15"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </body> </html>