一句话使用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{
		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');

3.再把鼠标移上去看看

sNav的设置

设置原按钮样式

原按钮的样式设置，取决于对ul下的a和li的设置。需要设置好浮动、元素宽度、高度、填充、背景、行高等属性

.example2 { height:60px; margin: 20px auto; width:1059px; }

.example2 > a { font-size:20px; list-style: none; float:left;  text-decoration: none;
		position: relative; font-weight:bold; overflow: hidden; }

.example2 > a li { background:rgb(0, 216, 224); padding:0px 30px; text-align: center;
		color:white; height: 60px; line-height:60px; }

设置hover时按钮的样式

设置hover时滑入的按钮样式，只需要为设置a下的span添加样式，通常只需要设置背景颜色和文字大小颜色

.example2 > a span { background:#FFB739; text-align: center; color: white; }

设置特殊的移入文字效果

如果你不想让移入效果一成不变，你可以通过这个方法，自定义设置移入元素内的文字

example2.setText({
	"1":"abc",
	"4":"hehe"
});

设置效果预览

example1.setText({
	"0":"下载(3.2k)",
	"1":"这是啥",
	"2":"去逛逛"
});