Welcome, Old Sport!

无脚本纯CSS打造的导航条

by ilikecss ON 2013/02/22 4566

无脚本纯CSS打造的导航条Hello,实例教程又来啦,最近想搞点CSS的例子更符合一下我的域名,让搜索引擎友好点。在导航上用脚本有点大材小用,而现在只需要CSS3就可以实现的多种效果,这样我们网页的大小又可以减少了。目前本人不需要非常炫目的导航效果,只需要能够让用户一目了然这是导航,我想这也是以后网站导航的发展趋势吧,OK直接开始文章吧。

Step1. 创建HTML

<nav id="main-nav">
    <ul>
    <li id="nav-1" class="current">
    <a data-description="my website" href="http://ilikecss.com">Home</a>
    </li>
    <li id="nav-2">
    <a data-description="about me" href="http://ilikecss.com/about/">About</a>
    </li>
    <li id="nav-3">
    <a data-description="my works" href="http://ilikecss.com/portfolio/">Portfolio</a>
    </li>
    <li id="nav-4">
    <a data-description="graphic works" href="http://ilikecss.com/graphic/">Graphic</a>
    </li>
    <li id="nav-5">
    <a data-description="more tutorials" href="http://blog.ilikecss.com/">Articles</a>
    </li>
    </ul>
</nav><!--! end of navi -->

Step2. 创建CSS

#main-nav > ul {
    clear:both;
}
#main-nav li {
    float: left;
    list-style: none outside none;
    margin: 0;
    position: relative;
}
#main-nav a {
    border-bottom: 1px solid transparent;
    border-top: 6px solid transparent;
    color: #3A3A3A;
    display: block;
    font-family: 'Open Sans','Lucida Sans Unicode','Lucida Grande',sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: -0.08px;
    padding: 26px 20px 40px;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    z-index: 98;
}
#main-nav a:after {
    color: #AEAEAE;
    content: attr(data-description);
    display: block;
    font-size: 11px;
    font-style: italic;
    font-weight: 400;
    line-height: 0;
    margin: 3px 0 -3px;
    text-align: center;
    text-transform: lowercase;
}
#main-nav a:hover, #main-nav .hover > a, #main-nav .current > a{
    background:#F1F1F1;
    border-bottom-color: #F15A23;
    border-top-color: #F15A23;
    color: #F15A23;
}
#main-nav .current:after {
    background: #F15A23;
    bottom: -2.5px;
    content: "";
    display: block;
    height: 5px;
    left: 50%;
    margin: 0 0 0 -2.5px;
    position: absolute;
    transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
    width: 5px;
}
#main-nav ul ul a:hover, #main-nav ul ul .hover > a, #main-nav ul ul .current > a #main-nav ul ul .current > a:hover, #nav-1 ul ul > a, #nav-1 ul ul > a:hover, #nav-2 ul ul > a, #nav-2 ul ul > a, #nav-2 ul ul > a:hover, #nav-2 ul ul > a:hover, #nav-2 ul ul > a, #nav-2 ul ul > a:hover, . #nav-3 ul ul > a, #nav-3 ul ul > a:hover, #nav-5 ul ul > a, #nav-5 ul ul > a:hover {
    background:#F15A23;
    color: #FFFFFF;
}
#main-nav ul ul ul {
    left: 200px !important;
    top: 0 !important;
}

喜欢这款导航的朋友请下载使用吧(CSS3 Navigation No Javascript.zip),记住class="current"是默认状态,跳到其他页面请在相应的li里添加这个class

2条评论
  1. #1

    金刚禅狮子吼说道:

    咦,最近好多教程,不走文艺感性路线了么?




TOP