澳门新濠影汇登录[官方网站]

澳门新濠影汇登录,professional供给集团官网网站制作,网站策划,建网站效劳

用CSS3策划响应式导航菜单

日期:2013-09-06 点击:

About使用响应式策划来创建一个手机导航栏,之上我曾经写过一个教程。Now我发现了一种新的方式,可以不使用JavaScript来实现响应式菜单。它完全使用整洁和语义化的HTML5标记,而且菜单可以居左、居中和居右对齐。不像上面一个教程中需要点击来展开,这个菜单可以在hover时展开,对用户更为友好。它也包含一个指示器来显示当上激活的菜单项。这种方式可以work于一切的移动和桌面浏览器中,甚至包括IE。
演示
  倾向
  这个教程的倾向是向您找子 救绾伟岩桓錾衔赖牧斜聿说ピ诟〉钠聊簧献晃缮煺沟牟说ァ
  这种方式对于下图这种有很多链接的导航来说非常有用。您可以把一切的按钮转换为一个幽雅的伸展条。
  HTML代码
下面是导航的HTML代码。<nav>标签用于创建伸展条,包含绝对定位的css属性。我会在稍下解释这一点,current类表示当上激活的菜单链接。
1
2
3
4
5
6
7
8
9
<nav class="nav">
<ul>
<li class="current"><a href="#">Portfolio</a></li>
<li><a href="#">Illustration</a></li>
<li><a href="#">Web Design</a></li>
<li><a href="#">Print Media</a></li>
<li><a href="#">Graphic Design</a></li>
</ul>
</nav>
 


  CSS
  导航的CSS样式(桌面视图)非常easy,以是我不打算介绍细节。请care我为导航的<li>圆素指定了display:inline-block来取代float:left。这样吾们可以通过为<ul>圆素设定text-align属性来把握菜单按钮居左、居中或者居右对齐。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
/* 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: #000;
}
.nav .current a {
background: #999;
color: #fff;
border-radius: 5px;
}
 


  居中与居右对齐
  像上面所提到的一样,您可以使用text-align属性更改按钮的对其方式。
1
2
3
4
5
6
7
8
9
/* right nav */
.nav.right ul {
text-align: right;
}

/* center nav */
.nav.center ul {
text-align: center;
}
 


IE支持
IE8或更早的版本不支持HTML5的<nav>标签和媒介查问(MediaQuery)。吾们需要引用css3-mediaqueries.js(或者respond.js)和html5shim.js来供给支持。如果您不打算使用html5shim.js,可以把<nav>标签用<div>代替。
1
2
3
4
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/files/css3-mediaqueries.js"></script>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
 


  响应式策划
  Now是最有意思的部分-使用媒介查问创建响应式菜单。如果您对响应式策划不了解,可以看看我之上About响应式策划和媒介查问的文章。
  在600像素的节点上,我将导航圆素设置为相对定位,以是我能把顶部的<ul>菜单列表样式替换为绝对定位。通过设定display:none我隐藏一切的<li>圆素,但是保留了当上激活的<li>项。然下当鼠标hover在导航栏上时,我将一切的<li>圆素设置为display:block(这会产生伸展列表)。我添加了一个勾选图标在当上栏目上来找子 炯せ钭刺6杂诰又泻途佑叶云氲牟说ィ褂胮osition的left和right属性来定位<ul>列表。可以按照演示来查看最终结果。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
@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/icon-menu.png) no-repeat 10px11px;
border-radius: 5px;
box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.nav li {
display: none; /* hide all <li> items */
margin: 0;
}
.nav .current {
display: block; /* show only current <li> item */
}
.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(/blog/qianduankaifa/images/icon-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;
}

}
 


  译自:http://webdesignerwall.com/tutorials/css-responsive-navigation-menu



Tag:

推荐消息

最新消息

LATEST NEWS

填写您的网站建造需求给吾们。

*请认真填写需求信息,吾们会在24钟点内与您取得联系。

澳门新濠影汇登录

professional供给深圳集团官网网站建造、定制策划

深圳市龙华新区

东边牛逼商用大楼3066

电话:0755-2868 4353

邮箱:service@sz-qibang.com

  • 深圳网站建造 | 网站建造案例 | 网站建造分享 | 深圳网站建造集团官网 | 网站建造报价咨询 | 深圳网站建造集团官网联系方式

    Copyright ?2019 澳门新濠影汇登录 版权一切 广ICP备13054229号-1 网站地图 会帐方式

XML 地图 | Sitemap 地图