专注活动,软件,教程分享-总之就是网络那些事。投稿送1~5元现金奖励
QQ等级加速升级平台 优惠购物 内部优惠券 内部优惠券
安卓免费购物 安卓免费购物 安卓免费购物 免费领取腾讯大王卡 免费领取腾讯大王卡
支付宝扫码领红包 支付宝扫码领红包 支付宝扫码领红包 支付宝扫码领红包
天天在这够彩赚大钱 E世博网址 人人都有微信 大连上门按摩
淘宝优惠券 11选5缩水软件超强版 娱乐城网站建设_娱乐城网制作 神途发布网 飞讯接码平台 低至7分

网站首页 网站源码 正文

网站简单兼容自适应导航栏代码

admin 2018-10-15 网站源码 10172 ℃ 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美化则需要根据自己的需求来做,本文只提供一个办法参考。


Tags:网页代码

< 线报之家宣 > 1、本站名称:线报之家 牢记网址:https://www.xianbaozhijia.cn
2、站长QQ:
954258559 QQ群5群:199675856
3、用户投稿仅代表用户个人观点,并不代表本站赞同其观点和对其真实性负责。
4、请勿相信资源内部广告,如相信资源内部广告被欺骗、诈骗等均与本站无关,本站不负任何责任。
5、本站资源大多存储在蓝奏和百度网盘,如发现链接失效,可评论反馈,我们会第一时间更新。

本文暂时没有评论,来添加一个吧(●'◡'●)


欢迎 发表评论:

搜索
最近发表
标签列表
«   2019年6月   »
12
3456789
10111213141516
17181920212223
24252627282930
文章归档