DIV+CSS设计实例:超酷的竖排导航栏

ABOUT THE CODE
Some lists within the Listamatic site had to be modified so that they could work on Listamatic’s simple list model. When in doubt, use the external resource first, or at least compare both models to see which one suits your needs. 

以下是引用片段:
<div id=”navcontainer”>
<ul id=”navlist”>
<li id=”active”><a href=”#” id=”current”>Item one</a>
<ul id=”subnavlist”>
<li id=”subactive”><a href=”#” id=”subcurrent”>Subitem one</a></li>
<li><a href=”#”>Subitem two</a></li>
<li><a href=”#”>Subitem three</a></li>
<li><a href=”#”>Subitem four</a></li>
</ul>

</li>
<li><a href=”#”>Item two</a></li>
<li><a href=”#”>Item three</a></li>
<li><a href=”#”>Item four</a></li>
</ul>
</div>

CSS:
以下是引用片段:
#navcontainer { margin-left: 30px; }

#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-family: verdana, arial, Helvetica, sans-serif;
}

#navcontainer li { margin: 0; }

#navcontainer a
{
display: block;
padding: 5px 10px;
width: 140px;
color: #000;
background-color: #ADC1AD;
text-decoration: none;
border-top: 1px solid #fff;
border-left: 1px solid #fff;
border-bottom: 1px solid #333;
border-right: 1px solid #333;
font-weight: bold;
font-size: .8em;
background-image: url(images/vertical06.jpg);
background-repeat: no-repeat;
background-position: 0 0;
}

#navcontainer a:hover
{
color: #000;
background-color: #889E88;
text-decoration: none;
border-top: 1px solid #333;
border-left: 1px solid #333;
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
background-image: url(images/vertical06a.jpg);
background-repeat: no-repeat;
background-position: 0 0;
}

#navcontainer ul ul li { margin: 0; }

#navcontainer ul ul a
{
display: block;
padding: 5px 5px 5px 30px;
width: 125px;
color: #000;
background-color: #C5D8C5;
text-decoration: none;
font-weight: normal;
}

#navcontainer ul ul a:hover
{
color: #000;
background-color: #889E88;
text-decoration: none;
}

 

 

随机文章:

1、Discuz常用sql语句
https://www.onexin.net/discuz-common-sql-statements/

2、[个人潜能6B]成功的条件:习惯的力量
https://www.onexin.net/personal-potentials-6b-the-conditions-for-success-the-power-of-habit/

3、如何提高网站的PageRank值?
https://www.onexin.net/how-to-improve-the-sites-pagerank-values/

4、CentOS 5 上的 MRTG 图形化的流量分析报表快速入门
https://www.onexin.net/mrtg-on-centos-5-graphical-traffic-analysis-report-getting-started/

5、jQuery 2.0将移除对IE6/7/8的支持,1.8、1.9与2.0特性概览
https://www.onexin.net/jquery-2-0-removes-support-of-ie678-1-8-1-9-and-2-0-features-overview/

转载请注明出处:https://www.onexin.net/div-css-design-examples-cool-vertical-navigation-bar/

Leave a Reply

Your email address will not be published. Required fields are marked *