先上演示地址:
https://www.jq22.com/demo/jQueryHdNav201710101934/
演示地址中因為效果比較多,引用的JS多,實際我們簡化一下,可以先引入JQ
然后再引入另外兩個JS:
<script type="text/javascript" src="js/iscroll.js"></script> <script type="text/javascript" src="js/navbarscroll.js"></script> <script type="text/javascript"> $(function(){ $('#wrapper03').navbarscroll(); }); </script>
寫DIV+CSS導航調(diào)用:
<div class="wrapper03" id="wrapper03"> <div class="scroller"> <ul class="clearfix"> <li class="nav-item {hmcms:if(0=='{sort:scode}')}active{/pboot:if}"> <a class="nav-link " href="{pboot:sitepath}/" >首頁</a> </li> {hmcms:nav num=30 parent=0} <li class="nav-item {hmcms:if('[nav:scode]'=='{sort:tcode}')}active{/pboot:if}"> <a class="nav-link " href="[nav:link]">[nav:name]</a> </li> {/hmcms:nav} </ul> </div> </div>
這樣就可能 實現(xiàn)非常好用的移動端左右滑動的導航效果了。