纯Css实现的垂直导航条(CSS Vertical Navigation)

纯Css实现的垂直导航条(CSS Vertical Navigation)

有的时候,我们看到很酷的垂直导航条并带有滑动效果或折叠效果,惊叹人家的效果,

但是一看源码,我有点失望,这些效果十有八九是用JavaScript或者用JavaScript Framework实现的。

有的时候我们,我们的网站再考虑性能上和重构的时候,就得考虑一下,是否有更好的解决方案。

其实有些不太复杂的效果用Css是可以实现的。
CSS Vertical Navigation是一种简单的方式来显示一些提示信息为您的垂直导航。


我不会浪费您的任何时间与介绍,让我们看一下正确的代码。

HTML Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
<ul class="sidenav">
<li>
<a href="#">Home
<span>关注WEB前端技术;重视WEB标准。</span>	</a>	</li>
<li>
<a href="#">Blog
<span>关注WEB前端技术;重视WEB标准。我关注的技术有css,xhtml,JavaScript框架,GoF,,Ajax,RIA,jQuery,JavaWeb,ASP,Python,PythonWeb,RichFaces,ExtJS </span>	</a>	</li>
<li>
<a href="#">Tutorials
<span>为你提供教程 </span>
</a>
</li>
</ul>

我们用CSS样式的作一个垂直导航清单。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
ul.sidenav {
	font-size: 1.2em;
	float: left;
	width: 200px;
	margin: 0;
	padding: 0;
	list-style: none;
	background: #005094;
	border-bottom: 1px solid #3373a9;
	border-top: 1px solid #003867;
}
ul.sidenav li a{
	display: block;
	color: #fff;
	text-decoration: none;
	width: 155px;
	padding: 10px 10px 10px 35px;
	background: url(sidenav_a.gif) no-repeat 5px 7px;
	border-top: 1px solid #3373a9;
	border-bottom: 1px solid #003867;
}

那么,我们现在增加隐藏/显示效果,徘徊。

1
2
3
4
5
6
7
8
9
10
ul.sidenav li a:hover {
	background: #003867 url(sidenav_a.gif) no-repeat 5px 7px;
	border-top: 1px solid #1a4c76;
}
ul.sidenav li span{	display: none; }
ul.sidenav li a:hover span {
	display: block;
	font-size: 0.8em;
	padding: 10px 0;
}

演示:
http://blog.moocss.com/Project/CSS-HTML/dem05/CSS Vertical Navigation/index.htm

站点统计