css3与html5实现响应式导航菜单(导航栏)效果分享
发布时间:2014-02-12 09:39:49 作者:佚名 我要评论
使用纯CSS来实现的一个响应式导航菜单,我们使用的是HTML5+CSS3技术,当浏览器窗口变小或者使用手机浏览器访问的时候,原本横条菜单会收缩成一个下拉菜单,当鼠标滑向菜单时下拉展示全部菜单
此方法可以应用到有特别多的链接菜单项目中,特别在移动项目中,它可以将所有菜单转换成一个按钮式的下拉菜单。
HTML
示例中有一个导航菜单的html结构,元素<nav>用来定位导航菜单,.current表示当前活动的导航项。
复制代码
代码如下:<ul>
<li class="current"><a href="#">首页</a></li>
<li><a href="#">客户服务</a></li>
<li><a href="#">产品展示</a></li>
<li><a href="#">经典案例</a></li>
<li><a href="#">联系我们</a></li>
</ul>
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时,我们把<nav>设置成relative相对定位,把<ul>设置成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制作简单侧边导航栏,效果简单大方,需要的朋友可以从参考下2016-02-25
- 本篇文章给大家分享基于html和CSS3制作酷炫的导航栏,效果非常美观,需要的朋友可以从参考下2015-09-23
- 下拉导航栏想必大家并不陌生吧,在之前或许都是使用js或jquey之类的脚本来实现的,而如今,使用纯css也可以实现了,下面是成功制作的示例,大家可以参考下2014-03-26
- 这篇文章主要介绍了CSS3的一个简单导航栏实现,无需用到JavaScript,文章最后附有demo,需要的朋友可以参考下2015-08-03
- 这篇文章主要为大家介绍了两个纯CSS 面包屑导航栏实现代码,内容比较简单,不会的朋友可以进来看一下,其中HTML代码实现非常简单,需要的朋友可以参考下2014-10-11
- 这篇文章主要介绍了基于html+css 实现简易导航栏功能,主要就是css(级联样式表)对html的内容做格式化。具体内容详情大家跟随小编一起通过本文学习吧2021-04-07
最新评论