子枫辅助网是全网最火爆最大的辅助网,每天更新原创辅助资源。请记住本站唯一域名:www.wuaif.com
长期合作广告!!!
网站简单兼容自适应导航栏代码
自学教程 2019-02-28 09:33:23 618 0
大家在网上经常看到很多网站都是用自适应的网站的导航栏,包括我们也是
小编百度了一下,折腾出这么一个方法然后将代码
原理很简单,利用css的media,进行限制,在手机版访问的时候将导航栏进行隐藏,利用按钮点击进行显示导航
这是我自己折腾的一个超简单的自适应导航栏,整体思路也简单
首先是导航栏的html结构是这样的:
<div class="nav">
   <span class="nav-on"><i></i><i></i><i></i></span>
   <ul>
       <li><a href="#">首页</a></li>
       <li><a href="#">栏目一</a></li>
       <li><a href="#">栏目二</a></li>
   </ul>
</div>​
然后到js代码,需要jquery支持:
$(".nav-on").click(function(){
   $(".nav>ul").slideToggle();
});​
尝试解释下:用css查询判断,在电脑端的时候导航栏是正常显示的,导航栏触发按钮
<span class="nav-on"></span>​
则隐藏起来
当用户是用手机访问的时候,则把导航栏的<ul>做隐藏,然后用js操作点击导航栏触发按钮则显示整个<ul></ul>里面的内容
最后大概写一个css出来:
.nav{line-height:50px;background: #0099cc;position: relative;}
.nav li{float:left;}
.nav li a{display:block;padding:0 20px;color:#fff;}
.nav span.nav-on{display:none;width:20px;position: absolute;top:12px;right:12px;cursor: pointer;}
.nav-on i{display:block;width:100%;height:5px;background:#fff;margin-bottom:5px;}
/*手机端css代码*/
@media screen and (max-width:768px){
.nav ul{display:none;width:100%;}
.nav ul li{width:100%;}
.nav span.nav-on{display:block;}
}​
如果需要css美化则需要根据自己的需求来做,本文只提供一个办法参考
文章说明
本文标签:
免责声明:
本站提供的一切软件、教程和游戏辅助仅限用于娱乐和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络收集,版权争议与本站无关。您必须在下载后的24个小时之内从您的设备中彻底删除。如果您喜欢该程序,请支持正版,购买注册,得到更好的正版服务。如有侵权请邮件与我们联系处理。敬请谅解!
评论留言

昵称

个人资料
个人资料
一个热衷于网站制作的小小程序员。
  • 文章1871
  • 评论262
  • 微语7
日历
二零二零年06月
1234567
891011121314
15161718192021
22232425262728
2930