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);
});
};