首页 | 7055 | 1189 | 3824 | 添加收藏 上一个 下一个
精美简洁悬停滑动效果导航条

sNav


这是一个简单的原生JavaScript插件,它可以用作导航栏,也可以作为按钮组,搭好结构后,只需要一些十分简单的设置即可让你的导航栏炫酷起来(兼容IE8及以上),简单好用。
一句话使用sNav


1.导入sNav.js


<script src="somewhere/js/sNav.js > </script>

2.将结构搭好


<ul class="example1">
<a href="#"> <li>HOME</li> </a>
<a href="#"> <li>COMMUNITY</li> </a>
<a href="#"> <li>MUSIC</li> </a>
<a href="#"> <li>PHOTOGRAPHY</li> </a>
<a href="#"> <li>NEWS</li> </a>
<a href="#"> <li>MESSAGE</li> </a>
<a href="#"> <li>NOTICE</li> </a>
</ul>

.sNav{height:60px; margin: 20px auto; width:1059px;}
.sNav>a{font-size:20px; list-style: none; float:left; text-decoration: none; position: relative; font-weight:bold; overflow: hidden;}
.sNav>a li{background:rgb(0, 216, 224); padding:0px 30px; text-align: center; color:white; height: 60px; line-height:60px;}
.sNav>a span{background:#FFB739; text-align: center; color: white;}

3.只需执行这条语句


var example1 = new sNav('example1');

4.再把鼠标移上去看看


效果出现啦!!