常用的左侧导航效果
JS简单
为提高导航性能而生
各位可以 参考应用
效果展示
HTML:
复制代码 代码如下:
<!左侧菜单>
<div class=menu>
<ul class=menu_list>
<li class=even>
<p class=menu_title bgfs><a # target=_blank>服饰箱包</a></p>
<p class=menu_sort>
<a # target=_blank>女装</a><a # target=_blank>男装</a><a # target=_blank>童装</a><a # target=_blank>包包</a><br/>
<a # target=_blank>鞋</a><a # target=_blank>饰品</a>
</p>
</li>
<li class=odd>
<p class=menu_title bgjs><a # target=_blank>酒水饮料</a></p>
<p class=menu_sort>
<a # target=_blank>女装</a><a # target=_blank>男装</a><a # target=_blank>童装</a><a # target=_blank>包包</a><br/>
<a # target=_blank>鞋</a><a # target=_blank>饰品</a>
</p>
</li>
<li class=even>
<p class=menu_title bgjj><a # target=_blank>居家建材</a></p>
<p class=menu_sort>
<a # target=_blank>女装</a><a # target=_blank>男装</a><a # target=_blank>童装</a><a # target=_blank>包包</a><br/>
<a # target=_blank>鞋</a><a # target=_blank>饰品</a>
</p>
</li>
<li class=odd>
<p class=menu_title bgcy><a # target=_blank>餐饮娱乐</a></p>
<p class=menu_sort>
<a # target=_blank>女装</a><a # target=_blank>男装</a><a # target=_blank>童装</a><a # target=_blank>包包</a><br/>
<a # target=_blank>鞋</a><a # target=_blank>饰品</a>
</p>
</li>
<li class=even>
<p class=menu_title bgmr><a # target=_blank>美容保健</a></p>
<p class=menu_sort>
<a # target=_blank>女装</a><a # target=_blank>男装</a><a # target=_blank>童装</a><a # target=_blank>包包</a><br/>
<a # target=_blank>鞋</a><a # target=_blank>饰品</a>
</p>
</li>
<li class=odd>
<p class=menu_title bgjy><a # target=_blank>教育培训</a></p>
<p class=menu_sort>
<a # target=_blank>女装</a><a # target=_blank>男装</a><a # target=_blank>童装</a><a # target=_blank>包包</a>
</p>
</li>
<li class=even>
<p class=menu_title bggyp><a # target=_blank>工业品</a></p>
<p class=menu_sort>
<a # target=_blank>女装</a><a # target=_blank>男装</a><a # target=_blank>童装</a><a # target=_blank>包包</a>
</p>
</li>
<li class=odd>
<p class=menu_title bgxqt><a # target=_blank>新奇特</a></p>
<p class=menu_sort>
<a # target=_blank>女装</a><a # target=_blank>男装</a><a # target=_blank>童装</a><a # target=_blank>包包</a><br/>
<a # target=_blank>鞋</a><a # target=_blank>饰品</a>
</p>
</li>
</ul>
<div class=menu_box hide>
<div class=menu_cont hide>
<div class=menu_cont>
<span class=menu_title_video>项目视频</span>
<div class=menu_video>
<ul>
<li><a # target=_blank><img src=images/ad/home_gif /></a></li>
<li><a # target=_blank><img src=images/ad/home_gif /></a></li>
<li><a # target=_blank><img src=images/ad/home_gif /></a></li>
<li><a # target=_blank><img src=images/ad/home_gif /></a></li>
<li><a # target=_blank><img src=images/ad/home_gif /></a></li>
</ul>
</div>
<div class=scroll_menu>
<span class=prev_menu #></span>
<span class=next_menu #></span>
<div class=roolbox_menu>
<div class=scroll_list_menu>
<ul>
<li>
<p class=ad_logo ad_fs>
<a # target=_blank><img src=images/ad/home_jpg alt=项目名 /></a>
</p>
<p class=ad_logo>
<span class=ad_fs>
<a # target=_blank><img src=images/ad/home_jpg alt=项目名 /></a>
</span>
<span class=ad_fs>
<a # target=_blank><img src=images/ad/home_jpg alt=项目名 /></a>
</span>
</p>
<p class=ad_logo ad_fs>
<a # target=_blank><img src=images/ad/home_jpg alt=项目名/></a>
</p>
<p class=ad_logo>
<span class=ad_fs>
<a # target=_blank><img src=images/ad/home_jpg alt=项目名/></a>
</span>
<span class=ad_fs>
<a # target=_blank><img src=images/ad/home_jpg alt=项目名/></a>
</span>
</p>
<p class=ad_logo>
<span class=ad_fs>
<a # target=_blank><img src=images/ad/home_jpg alt=项目名/></a>
</span>
<span class=ad_fs>
<a # target=_blank><img src=images/ad/home_jpg alt=项目名/></a>
</span>
</p>
</li>
<li>
<p class=ad_logo ad_fs>
<a # target=_blank><img src=images/ad/home_jpg alt=项目名 /></a>
</p>
<p class=ad_logo>
<span class=ad_fs>
<a # target=_blank><img src=images/ad/home_jpg alt=项目名 /></a>
</span>
<span class=ad_fs>
<a # target=_blank><img src=images/ad/home_jpg alt=项目名 /></a>
</span>
</p>
<p class=ad_logo ad_fs>
<a # target=_blank><img src=images/ad/home_jpg alt=项目名/></a>
</p>
<p class=ad_logo>
<span class=ad_fs>
<a # target=_blank><img src=images/ad/home_jpg alt=项目名/></a>
</span>
<span class=ad_fs>
<a # target=_blank><img src=images/ad/home_jpg alt=项目名/></a>
</span>
</p>
<p class=ad_logo>
<span class=ad_fs>
<a # target=_blank><img src=images/ad/home_jpg alt=项目名/></a>
</span>
<span class=ad_fs>
<a # target=_blank><img src=images/ad/home_jpg alt=项目名/></a>
</span>
</p>
</li>
</ul>
</div>
</div>
</div>
<div class=menupic_fsxb><img src=images/pic_fsxbpng /></div>
</div>
</div>
<div class=menu_cont hide></div>
<div class=menu_cont hide></div>
<div class=menu_cont hide></div>
<div class=menu_cont hide></div>
<div class=menu_cont hide></div>
<div class=menu_cont hide></div>
<div class=menu_cont hide></div>
</div>
</div>
<!中间项目展示>
JS
复制代码 代码如下:
$(nu_list li)mouseenter(function(){
$(nu_box)show();
var nav_index = $(nu_list li)index(this);
$(nu_cont)eq(nav_index)show()//滑动菜单对应当前内容
siblings()hide();
}) ;
$(nu)mouseleave(function(){
$(nu_box)hide();
}) ;
