先上演示地址:
https://www.jq22.com/demo/jQueryHdNav201710101934/
演示地址中因?yàn)樾Ч容^多,引用的JS多,實(shí)際我們簡(jiǎn)化一下,可以先引入JQ
然后再引入另外兩個(gè)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導(dǎo)航調(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}/" >首頁(yè)</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>這樣就可能 實(shí)現(xiàn)非常好用的移動(dòng)端左右滑動(dòng)的導(dǎo)航效果了。
有關(guān)我們服務(wù)的更多信息,請(qǐng)聯(lián)系項(xiàng)目經(jīng)理
15899750475 楊先生