代碼分享，不多說(shuō)奈泪，先來(lái)看效果疾棵！
未展開(kāi)時(shí)可以左右拖動(dòng)，展開(kāi)后為列表展示馆蠕，下面是代碼：
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');
}
})
以上代碼請(qǐng)自行引入jquery和清除li的默認(rèn)樣式！
