这是一个简单的原生JavaScript插件，它可以用作导航栏，也可以作为按钮组，搭好结构后，只需要一些十分简单的设置即可让你的导航栏炫酷起来（兼容IE8及以上），简单好用，快来下载用起来吧。

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{
    background: rgb(0, 216, 224);
    height: 60px;
    padding: 0;
    margin: 0 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;
    display: block;
}

3.只需执行这条语句

var example1 = new sNav('example1');