关于移动端导航栏滑动的小技巧

html-css023

关于移动端导航栏滑动的小技巧,第1张

css3之前,我能想到的大概是在nav上绑定touchstart、touchmove、touchend事件,然后获取位置,并写判断设置最大移动距离。

这里css提供了一个相当简单的方法,overflow-x:scroll,这个会为溢出的nav设置一个滚动条,但移动端是不需要这个滚动条的,所以这里还有另外一个伪类

这里写一下关于这个滑动条的其他伪类选择,可以设置其样式:

滚动条宽 长,滚动条整体部分,其中的属性有width,height,background,border等

滚动条的滑轨背景颜色,可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果。

滑块颜色

滚动条两端的按钮。可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果。

 横向滚动条和纵向滚动条相交处尖角的颜色

通过写相应css样式来实现

我这里有个样式可以参考下

这样的很多的

可以找个网站看下相应的样式

#nav

{margin:0

0

8px

0

background:noneposition:relative

top:0px

left:310pxpadding:0}

#nav

.content

{padding:0overflow:hiddenbackground:none}

#nav

li

{float:leftpadding:0

10pxfont-size:12pxheight:47pxline-height:60pxposition:relative}

#nav

.on

{background:none

display:block}

#nav

li,#nav

a,

#nav

a:visited,

.nav_text{

color:#000}

#nav

a:hover,

#nav

.on

a,

#nav

.on

a:visited,

#nav

.on

a:hover{

color:#000}

.nav_text{

line-height:25px}