子导航溢出部分css3点击位移
原理是通过点击后判断index然后得出位移数
$(".menu-dj li").click(function() {
var s=$('.menu-dj').width();//当前导航的宽度
var b=$(this).width();//当前li的宽度
var size=$(".menu-dj li").size();//li个数
var index=$(this).index();//当前点击的li
var allw=b*size;//总宽度
var weiyi=b*(index-1);//需要位移的宽度
if(b*size>s && index>0 && (weiyi+s)<allw){//判断是否溢出和是否最后部分
$(".menu-dj").transform("translate3d(" + -weiyi + "px, 0px, 0px)")
}
})然后css部分！
ul{
display: box; /* OLD - Android 4.4- */
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
li{
-webkit-flex-shrink: 0;
-moz-flex-shrink: 0;
-ms-flex-shrink: 0;
-webkit-flex-shrink: 0;
flex-shrink: 0;
}
li固定宽度或者padding都行！