jQuery实现展示全部导航的导航栏

代码分享，不多说，先来看效果！

未展开时可以左右拖动，展开后为列表展示，下面是代码：

CSS:

body,html{ width: 540px; font-family: "Hiragino Sans GB", Helvetica, Arial, sans-serif; font-size: 16px; color: #606060; margin: 0 auto; }

a{ color: #606060; }

a:link { text-decoration: none; background:none; }

a:visited { text-decoration: none; background:none; }

a:hover { text-decoration: none; background:none; }

a:active {

text-decoration: none;

-webkit-tap-highlight-color: transparent;

-moz-tap-highlight-color: transparent;

-ms-tap-highlight-color: transparent;

-o-tap-highlight-color: transparent;

tap-highlight-color: transparent;

}

#wrap{ width: 100%; height: 100%; position: relative;}

/*更新样式↓*/

.nav{ width: 100%; height: 50px;}

.nav .show{ width: 460px; height: 100%; position: relative;}

.nav .navList{ width: 100%; height: 100%; overflow-x: scroll; position: absolute; top: 0; left: 0; z-index: 10; background: #fff; transition: 0.4s; -webkit-transition: 0.4s; -moz-transition: 0.4s; -o-transition: 0.4s;}

.nav .navLeft{ width: 30px; height: 100%; position: absolute; z-index: 11; top: 0; left: 0; background: -webkit-linear-gradient(right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));}

.nav .navRight{ width: 30px; height: 100%; position: absolute; z-index: 11; top: 0; right: -1px; background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));}

.nav .navTitle{ line-height: 50px; font-size: 24px; text-indent: 2em;}

.nav .navList ul{ height: 100%; white-space:nowrap;}

.nav .navList ol{ width: 87px; height: 100%; display: inline-block; _display: inline; zoom: 1;}

.nav .navList ol a{ width: 87px; height: 100%; text-align: center; line-height: 50px; color: #5e5d5d; font-size: 23px; display: block;}

.nav.expanded .navList{ display: block; width: 540px; height:auto; top: 50px; z-index: 15; transition-duration: 0.4s;}

.nav.expanded .navList ul{ white-space:normal; width: 100%; height: 100%; padding: 10px 0;}

.nav.expanded .navList ol{ width: 20%; height: 66px; padding: 15px 10px;}

.nav.expanded .navList ol a{ width: 100%; text-align: center; line-height: 66px; border: 1px solid #DCDEE3; border-radius: 30%;}

.nav .btn{ width: 80px; height: 50px; text-align: center;}

.nav .btn img{ width: 36px; height: 22px; margin-top: 14px;}

HTML:

（代码无法直接粘贴上来，用图片展示！）

JS:

$('.nav .btn').on('touchstart',function(){

$('.nav').toggleClass('expanded');

var str = $(this).find('img').attr('src').split('bordered_');

if(str[1] == 'down.png'){

$(this).find('img').attr('src',str[0]+'bordered_up.png');

}else if(str[1] == 'up.png'){

$(this).find('img').attr('src',str[0]+'bordered_down.png');

}

})

以上代码请自行引入jquery和清除li的默认样式！