脉冲网
专业的破解软件资源搜集精品资源网

标签关键词

关于 自适应 的文章共有1条

学习

一个网站简单兼容简洁的自适应导航栏代码

阅读(155) 评论(0)

大家在网上经常看到很多网站都是用自适应的网站的导航栏,包括我们高网也是。博主百度了一下,折磨出这么一个方法然后将代码分享给大家。原理很简单,利用css的media,进行限制,在手机版访问的时候将导航栏进行隐藏,利用按钮点击进行显示导航。这是我自己折腾的一个超简单的自适应导航栏,整体思路也简单。首先是导航栏的html结构是这样的:<divclass="nav"><spanclass="nav-on"><i></i><i></i><i></i></span><ul><li><ahref="#">首页</a></li><li><ahref="#">栏目一</a></li><li><ahref="#">栏目二</a></li></ul></div>然后到js代码,需要jquery支持$(".nav-on").click(function(){$(".nav>ul").slideToggle();});尝试解释下:用css查询判断,在电脑端的时候导航栏是正常显示的,导航栏触发按钮”<spanclass="nav-on"></span>“则隐藏起来。当用户是用手机访问的时候,则把导航栏的<ul>做隐藏,然后用js操作点击导航栏触发按钮则显示整个<ul></ul>里面的内容。最后大概写一个css出来:.nav{line-height:50px;background:#0099cc;position:relative;}.navli{float:left;}.navlia{display:block;padding:020px;color:#fff;}.navspan.nav-on{display:none;width:20px;position:absolute;top:12px;right:12px;cursor:pointer;}.nav-oni{display:block;width:100%;height:5px;background:#fff;margin-bottom:5px;}/*手机端css代码*/@mediascreenand(max-width:768px){.navul{display:none;width:100%;}.navulli{width:100%;}.navspan.nav-on{display:block;}}如果需要css美化则需要根据自己的需求来做,本文只提供一个办法参考。

标签: 自适应