wap横向滑动菜单iscroll.js

1.百度下载iscroll.js

2.html菜单页面部分参考如下：

<style>

.nav{ overflow: hidden;padding:0 10px; height:47px; line-height:47px; background:#39A4DC;  position:relative; z-index:1;min-width:800px;  }
    .nav a{ color:#fff;  }
    .nav .nLi{ float:left;  position:relative; display:inline;  }
    .nav .nLi h3{ float:left;  }
    .nav .nLi h3 a{ display:block; padding:0 10px; font-size:17px; font-weight:bold;  }
    .nav .sub{ display:none; width:100px; left:0; top:34px;  position:absolute; background:#4E4E4E;  line-height:26px; padding:5px 0;  }
    .nav .sub li{ zoom:1; }
    .nav .sub a{ display:block; padding:0 10px; }
    .nav .sub a:hover{ background:#6d6d6d; color:#fff;  }
    .nav .on h3 a{ /*background:#4E4E4E;*/ color:#fff;   }

</style>

<script type="text/javascript" src="__ROOT__/Public/plugin/iscroll.js"></script>

<div id="headernav" style="width:100%;overflow-x: auto;">
    <ul id="nav" class="nav clearfix">
        <?php
$menuslist = session('menuslist');
for($i=0;$i<count($menuslist);$i++){
    echo '<li class="nLi"><h3><a href='.$menuslist[$i]['url'].' target="_self">'.$menuslist[$i]['title'].'</a></h3></li>';
        }
        ?>

        <li class="nLi">
            <h3><a href="admin.php" target="_self">退出</a></h3>
        </li>
    </ul>
</div>

<script type="text/javascript">
    window.addEventListener('load',function(){
                $ul = document.getElementById('nav'),
                liArray = $ul.querySelectorAll('li'),
                liNum = liArray.length;
        $ul.style.width = (liArray[0].clientWidth + 10)*7 +"px";
        var Scroll = new iScroll('headernav',{hScrollbar:false, vScrollbar:true});
    });
</script>

3.完成。横向滑动时不会出现横向滚动条。