1.1应用程序滑动导航

说明：这个例子主要是为了实现导航山，只有两个选项。

1。适用于移动终端。

2个长度。滑块是选项内容的长度。

1.1.1。效果图




1.1.2。HTML








滑动导航



滑到岗位
滑到岗位







1.1.3。CSS





主体，div，{ {
保证金：0；
填充：0；
}
滑动{
显示块；
位置：固定；
上图：10px；
左：0px；
右：0px；
身高：60px；
背景：# f2f2f2；
溢出：高度；
}
ul.slid李{
显示：内联块；
宽度：49%；
身高：40px；
边距：10px；
浮点数：左；
文本对齐：中心；
溢出：隐藏；

}
ul.slid李：第一个孩子{
右：红色边框1px solid；
}
Ul.slid Li {
显示：内联块；
宽度：120px；
文字装饰：无；
身高：37px；
行高：37px；
Color: #898989;
溢出：隐藏；
}
Ul.slid Li：悬停{
颜色：红色；
}
# navline {
身高：2px；
背景颜色：红色；
位置：绝对；
底部：7px；
宽度：0px；
左：0px；
显示：无；
溢出：隐藏；
}



1.1.4。jQuery



$（函数（）{（））
NavSlid（）；
}）；
滑动导航
无功navslid =函数（）{（）
无功在线=美元（# navline）；
VaR LIA =（' ul.slid Li '）$；
初始化块
Nline.css（{
宽度：lia.width（），
左：parseInt（）lia.position（左）
}）；
$（ul.slid Li），Mouseenter（函数（）{（）{
显示/滑块
如果（nline.css（显示器）= =不关）{
Nline.show（）；
}；
移动滑块
Nline.stop（），动画（{
宽度：$（这个）。Width（），
左：parseInt（$（this）。位置（左）。）
}，300）；
}）；
}；