当前位置: 首页 > 站长资讯 > 正文

css3与html5实现响应式导航栏效果

菡馨网 时间:2020-10-16 14:16:11 来源:菡馨资讯网

使用纯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;}}


澳洲留学体育管理 https://www.liuxue.com/lxnews/03075i4108/
------分隔线----------------------------
菡馨资讯网