免VIP看全网影视 免VIP看全网影视 超值爆款淘宝天猫省钱优惠券疯抢领取 免VIP看全网影视 广告位招租
超值爆款淘宝天猫省钱优惠券疯抢领取 超值爆款淘宝天猫省钱优惠券疯抢领取 超值爆款淘宝天猫省钱优惠券疯抢领取 超值爆款淘宝天猫省钱优惠券疯抢领取 超值爆款淘宝天猫省钱优惠券疯抢领取
文字广告位50/月 文字广告位50/月 文字广告位50/月 文字广告位50/月 文字广告位50/月
文字广告位50/月 文字广告位50/月 文字广告位50/月 文字广告位50/月 文字广告位50/月
文字广告位50/月 文字广告位50/月 文字广告位50/月 文字广告位50/月 文字广告位50/月
| 如何在幻影博客投稿? | 点击加入幻影博客交流群 | 本站所有广告商均已承诺投放的内容诚信可靠,如果被骗请点击:联系809666838举报 | 广告位价格说明 | 友联申请说明 |

教你怎么做自适应导航栏

大家经常看到自适应的网站的导航栏是自适应的。

我那天也百度了一下,然后将代码分享给大家。

原理很简单,利用css的media,进行限制,在手机版访问的时候将导航栏进行隐藏,利用按钮点击进行显示导航。

首先是 导航栏的HTML代码,利用ul li 做的

<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 代码 

.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;}
}

分享到:更多

相关推荐:

发表评论

游客 表情
送你一朵小花花~

网友评论(0)