html自适应导航栏怎么写,网站简单兼容简洁的自适应导航栏代码

大家在网上经常看到很多网站都是用自适应的网站的导航栏，包括我们高网也是。

小高百度了一下，折磨出这么一个方法然后将代码分享给大家。

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

这是我自己折腾的一个超简单的自适应导航栏，整体思路也简单。

首先是导航栏的html结构是这样的：

首页
栏目一
栏目二

然后到js代码，需要jquery 支持

$(".nav-on").click(function(){

$(".nav>ul").slideToggle();

});

尝试解释下：用css查询判断，在电脑端的时候导航栏是正常显示的，导航栏触发按钮”“则隐藏起来。

当用户是用手机访问的时候，则把导航栏的

做隐藏，然后用js操作点击导航栏触发按钮则显示整个

最后大概写一个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美化则需要根据自己的需求来做，本文只提供一个办法参考。

html自适应导航栏怎么写,网站简单兼容简洁的自适应导航栏代码相关推荐

基于面向对象来写一个简单的贪吃蛇小游戏（代码可直接用）
分析一下用到的对象(这个案例的地图过于简单,可以不用创建为对象) 食物对象(food) 蛇对象(snake) 游戏对象(game) 1.food对象属性 :x, y, ...
java响应式导航栏原理_一个简单的响应式导航栏
背景导航对于一个网站重要性,不言而喻.网站上导航一般都置于网站的顶端,每一个导航项都直接详细的列出来,但如果需要去适配移动端的话这样简单粗暴的方法就不大可行了,因为受移动端屏幕宽度所限,在电脑端完美 ...
小白教程——Windows下用PHP写一个简单的登录注册页面（二）
哈喽,看到这里希望小伙伴们都把wampserver环境安装好了,如果还没有安装或创建数据表就移步去看我上一篇文章吧.OK~接下我们将进入代码实现部分,首先我们需要一个文本编辑器,可以是电脑自带的not ...
vue、Menu 导航菜单、Menu属性事件、vue Menu 全部导航菜单、vue Menu 全部属性事件
vue.Menu 导航菜单.Menu属性事件.vue Menu 全部导航菜单.vue Menu 全部属性事件设计规则何时使用代码演示顶部导航内嵌菜单缩起内嵌菜单只展开当前父级菜单垂直菜 ...
怎么做网络推广浅析网站如何设置导航栏可以使网站优化更好？
网站导航就像是网站的"地图"一样,为用户们提供更好地浏览体验,为他们更好地指路,提高访客的好感度.众所周知,网站常见的导航可分为顶部导航.底部导航.面包屑导航三大类型.今天怎么做网 ...
御用导航提示页面_UI网站导航设计知识与五个知识案例
导航设计是网站的基石.它确定了至关重要的指标,例如转化率和跳出率,页面停留时间,点击量,并且通常是决定您的访问者拥有良好体验并以比您所说的"用户流量"更快退出网站的决定性因素. 但 ...
docsify - 生成文档网站简单使用教程
1. docsify介绍 docsify 是一个动态生成文档网站的工具.不同于 GitBook.Hexo 的地方是它不会生成将 .md 转成 .html 文件,所有转换工作都是在运行时进行. 这将非常 ...
教你用响应式设计的H5网站模板，快速实现自适应
对企业来说,自适应网站开发周期比较长,要想短时间内拥有一个自适应网站,最好的方法就是借助自助建站工具自行搭建.做自适应网站,我们离不开的是响应式设计的网站模板,选好一套网站模板后,怎么快速把模板网站改 ...
web网页设计实例作业：鲜花商城网站主题——浪漫红色大气自适应网上鲜花店网页设计(16页) HTML+CSS+JavaScript
HTML5期末大作业:鲜花商城网站主题--浪漫红色大气自适应网上鲜花店网页设计(16页) HTML+CSS+JavaScript 期末作业HTML代码学生网页课程设计期末作业下载 web网页设计制作 ...

html自适应导航栏怎么写,网站简单兼容简洁的自适应导航栏代码

html自适应导航栏怎么写,网站简单兼容简洁的自适应导航栏代码相关推荐

最新文章

热门文章