状态输出导航栏html,css3与html5实现响应式导航菜单(导航栏)效果分享
此方法可以应用到有特别多的链接菜单项目中,特别在移动项目中,它可以将所有菜单转换成一个按钮式的下拉菜单。
HTML
示例中有一个导航菜单的html结构,元素用来定位导航菜单,.current表示当前活动的导航项。
复制代码代码如下:
- 首页
- 客户服务
- 产品展示
- 经典案例
- 联系我们
CSS
首先我们要给菜单nav相对定位,我们在.nav li中使用display: inline-block代替float:left,这样一来我们可以使用text-align 来对nav菜单进行左中右对齐设置。
复制代码代码如下:
.nav {
position: relative;
margin: 20px 0;
}
.nav ul {
margin: 0;
padding: 0;
}
.nav li {
margin: 0 5px 10px 0;
padding: 0;
list-style: none;
display: inline-block;
}
.nav a {
padding: 3px 12px;
text-decoration: none;
color: #999;
line-height: 100%;
}
.nav a:hover {
color: #d0d0d0;
}
.nav .current a {
background: #999;
color: #fff;
border-radius: 5px;
}
使用text-align对菜单进行右对齐和居中对齐。
/* right nav */
.nav.right ul {
text-align: right;
}
/* center nav */
.nav.center ul {
text-align: center;
}
接下来我们来做响应式设计,我们使用CSS3的media query来实现。当浏览器窗口宽度小于600px时,我们把设置成relative相对定位,把
- 设置成absolute绝对定位,并且display:none隐藏所有li元素,这个时候导航菜单变成一个固定大小的按钮。当鼠标滑向nav元素时,菜单下拉展开,设置所有li的样式display: block,具体请看代码:
复制代码代码如下:
@media screen and (max-width: 600px) {
.nav {
position: relative;
min-height: 40px;
}
.nav ul {
width: 180px;
padding: 5px 0;
position: absolute;
top: 0;
left: 0;
border: solid 1px #aaa;
background: #fff url(images/menu.png) no-repeat 10px 11px;
border-radius: 5px;
box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.nav li {
display: none; /* hide all items */
margin: 0;
}
.nav .current {
display: block; /* show only currentitem */
}
.nav a {
display: block;
padding: 5px 5px 5px 32px;
text-align: left;
}
.nav .current a {
background: none;
color: #666;
}
/* on nav hover */
.nav ul:hover {
background-image: none;
}
.nav ul:hover li {
display: block;
margin: 0 0 5px;
}
.nav ul:hover .current {
background: url(images/check.png) no-repeat 10px 7px;
}
/* right nav */
.nav.right ul {
left: auto;
right: 0;
}
/* center nav */
.nav.center ul {
left: 50%;
margin-left: -90px;
}
}
状态输出导航栏html,css3与html5实现响应式导航菜单(导航栏)效果分享相关推荐
- 【前端代码实例】使用HTML5+CSS3+JavaScript制作一个响应式的后台管理系统~带侧边导航栏仪表盘功能
bilibili在线视频演示地址: [前端代码实例]使用HTML5+CSS3+JavaScript制作一个响应式的后台管理系统~带侧边导航栏仪表盘功能 效果图: 完整代码: <!DOCTYPE ...
- html5响应式导航条,10个响应式设计的导航菜单源码-附教程
10个响应式设计的导航菜单源码-附教程 Sponsor 在2013年里,响应式Web设计将会开始普及,我们应该学习这些新技术,尤其作为网页设计师和前端开发人员,学习CSS3样式表和HTML5是必不可少 ...
- html纵向固定导航菜单代码,jQuery和css3响应式垂直固定导航菜单插件
这是一款非常实用的jQuery和css3响应式垂直固定导航菜单插件.当你的页面上有很多的内容,用户需要花费大量的时间才能找到他们想要的内容.这个垂直固定导航菜单插件能够为页面提供一个内容预览,使用户能 ...
- 动态导航多级下拉菜单 html,css3实现的多级渐变下拉菜单导航效果代码
本文实例讲述了css3实现的多级渐变下拉菜单导航效果代码.分享给大家供大家参考.具体如下: 这是一款基于css3实现的下拉菜单导航,是非常漂亮的动画菜单,而且是多级菜单的形式,测试时发现可支持5级,估 ...
- 响应式多级菜单 侧边菜单栏_大菜单,小屏幕:响应式,多级导航
响应式多级菜单 侧边菜单栏 如果您曾经在响应式网站上工作,那么毫无疑问,您必须解决这个新兴领域中最棘手的问题之一:导航. 对于简单的导航,解决方案可以很简单. 但是,如果您要处理的事情比较复杂,可能有 ...
- html怎么做成响应式的,怎么用html5完成响应式布局?
怎么用html5完成响应式布局?以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧! 怎么用5完成响应式布局? 步骤1 建立空 ...
- CSS3: Media Query实现响应式Web设计
十一长假已然过去了一大半.今天倒真是晴朗的不行,向窗外望去几乎可以看到阳光穿过凉爽的空气一缕缕洒落下来的样子.自从不再是学生,对每年的几次 长假就无比珍惜,想方设法让每一天都尽量过的饱满一些:夜里闭上 ...
- CSS3 Media Query实现响应式Web设计(针对不同移动设备宽度)
如 今的屏幕分辨率,小至320px(iPhone),大到2560px甚至更高(大显示器),变化范围极大.除了使用传统的台式机,用户会越来越多的通过手 机.上网本.iPad一类的平板设备来浏览页面.这种 ...
- java响应式网页设计_基于HTML5的响应式网站的设计与实现(论文).docx
毕业论文 基于HTML5的响应式网站的设计与实现 摘 要 随着网络的发展和普及,各类建站技术的更新与运用,现在搭建一个网站的时间和成本越来越低,使得企业官方网站得到了极大的发展.从早期简单的网页展示, ...
最新文章
- php限制ip访问次数 并发_[转]nginx限制某个IP同一时间段的访问次数
- OpenCV—矩阵数据类型转换cv::convertTo
- 请求数据分析 xpath语法 与lxml库
- 【超详细教程】使用Windows Live Writer 2012和Office Word 2013 发布文章到博客园全面总结...
- 数字图像处理技术详解程序_大学专业详解系列135——数字媒体技术(工学学士)...
- python中斐波那契数列_斐波那契数列–在Python,JavaScript,C ++,Java和Swift中进行了解释...
- Android功耗优化(7)---如何分析wakelock(wakeup source)持锁问题
- G - Ice_cream's world I (并查集)
- 17. 维基百科的高性能架构设计分析
- 山西阳泉中考计算机科目,阳泉中考信息技术考试
- 分布式协议与算法(一)Paxos 算法
- 网络协议、socket、webSocket
- 解决post请求跨域请求第三方服务器
- Python 学习笔记 英语默写软件
- Python matplotlib label设置斜体字符
- 如何用计算机巧记英语词汇,小学英语单词巧记法
- python之matplotlib 3.2.1之spines不显示右侧和顶端的坐标轴
- linux操作系统的分类及解释
- R语言程序包下载地址:CRAN Packages
- Rest-Assured实战 REST API之使用 Rest-Assured验证报文内容
热门文章
- 【kaggle入门题一】Titanic: Machine Learning from Disaster
- java多线程笔记补充之线程的生命周期
- sdut 活动选择问题
- c# MEF框架(四 见证奇迹的时刻之实战应用)
- osg布告板技术(Billboard)
- 阿里巴巴超大规模 Kubernetes 基础设施运维体系介绍
- 云原生时代业务架构的变革:从单体迈向Serverless
- 以“术”彰“道”,用匠心做技术—对话阿里云MVP刘洪峰
- 一小时快速搭建基于阿里云容器服务-Kubernetes的Web应用
- Istio 在阿里云容器服务的部署及流量治理实践