js实现的常用的左侧导航效果_javascript技巧

常用的左侧导航效果，JS简单，为提高导航性能而生，各位可以 参考应用。

效果展示：
 
HTML:

复制代码 代码如下:

<!--左侧菜单-->
<div class="menu">
<ul class="menu_list">
<li class="even">
<p class="menu_title bgfs"><a href="#" target="_blank">服饰箱包</a></p>
<p class="menu_sort">
<a href="#" target="_blank">女装</a><a href="#" target="_blank">男装</a><a href="#" target="_blank">童装</a><a href="#" target="_blank">包包</a><br/>
<a href="#" target="_blank">鞋</a><a href="#" target="_blank">饰品</a>
</p>
</li>
<li class="odd">
<p class="menu_title bgjs"><a href="#" target="_blank">酒水饮料</a></p>
<p class="menu_sort">
<a href="#" target="_blank">女装</a><a href="#" target="_blank">男装</a><a href="#" target="_blank">童装</a><a href="#" target="_blank">包包</a><br/>
<a href="#" target="_blank">鞋</a><a href="#" target="_blank">饰品</a>
</p>
</li>
<li class="even">
<p class="menu_title bgjj"><a href="#" target="_blank">居家建材</a></p>
<p class="menu_sort">
<a href="#" target="_blank">女装</a><a href="#" target="_blank">男装</a><a href="#" target="_blank">童装</a><a href="#" target="_blank">包包</a><br/>
<a href="#" target="_blank">鞋</a><a href="#" target="_blank">饰品</a>
</p>
</li>
<li class="odd">
<p class="menu_title bgcy"><a href="#" target="_blank">餐饮娱乐</a></p>
<p class="menu_sort">
<a href="#" target="_blank">女装</a><a href="#" target="_blank">男装</a><a href="#" target="_blank">童装</a><a href="#" target="_blank">包包</a><br/>
<a href="#" target="_blank">鞋</a><a href="#" target="_blank">饰品</a>
</p>
</li>
<li class="even">
<p class="menu_title bgmr"><a href="#" target="_blank">美容保健</a></p>
<p class="menu_sort">
<a href="#" target="_blank">女装</a><a href="#" target="_blank">男装</a><a href="#" target="_blank">童装</a><a href="#" target="_blank">包包</a><br/>
<a href="#" target="_blank">鞋</a><a href="#" target="_blank">饰品</a>
</p>
</li>
<li class="odd">
<p class="menu_title bgjy"><a href="#" target="_blank">教育培训</a></p>
<p class="menu_sort">
<a href="#" target="_blank">女装</a><a href="#" target="_blank">男装</a><a href="#" target="_blank">童装</a><a href="#" target="_blank">包包</a>
</p>
</li>
<li class="even">
<p class="menu_title bggyp"><a href="#" target="_blank">工业品</a></p>
<p class="menu_sort">
<a href="#" target="_blank">女装</a><a href="#" target="_blank">男装</a><a href="#" target="_blank">童装</a><a href="#" target="_blank">包包</a>
</p>
</li>
<li class="odd">
<p class="menu_title bgxqt"><a href="#" target="_blank">新奇特</a></p>
<p class="menu_sort">
<a href="#" target="_blank">女装</a><a href="#" target="_blank">男装</a><a href="#" target="_blank">童装</a><a href="#" target="_blank">包包</a><br/>
<a href="#" target="_blank">鞋</a><a href="#" target="_blank">饰品</a>
</p>
</li>
</ul>

<div class="menu_box hide">
<div class="menu_cont hide">

<div class="menu_cont01">
<span class="menu_title_video">项目视频</span>
<div class="menu_video">
<ul>
<li><a href="#" target="_blank"><img src="images/ad/home_53.gif" /></a></li>
<li><a href="#" target="_blank"><img src="images/ad/home_53.gif" /></a></li>
<li><a href="#" target="_blank"><img src="images/ad/home_53.gif" /></a></li>
<li><a href="#" target="_blank"><img src="images/ad/home_53.gif" /></a></li>
<li><a href="#" target="_blank"><img src="images/ad/home_53.gif" /></a></li>
</ul>
</div>
<div class="scroll_menu">
<span class="prev_menu" href="#"></span>
<span class="next_menu" href="#"></span>
<div class="roolbox_menu">
<div class="scroll_list_menu">
<ul>
<li>
<p class="ad_logo ad_fs01">
<a href="#" target="_blank"><img src="images/ad/home_88.jpg" alt="项目名" /></a>
</p>
<p class="ad_logo">
<span class="ad_fs02">
<a href="#" target="_blank"><img src="images/ad/home_88.jpg" alt="项目名" /></a>
</span>
<span class="ad_fs03">
<a href="#" target="_blank"><img src="images/ad/home_88.jpg" alt="项目名" /></a>
</span>

</p>
<p class="ad_logo ad_fs04">
<a href="#" target="_blank"><img src="images/ad/home_88.jpg" alt="项目名"/></a>
</p>
<p class="ad_logo">
<span class="ad_fs02">
<a href="#" target="_blank"><img src="images/ad/home_88.jpg" alt="项目名"/></a>
</span>
<span class="ad_fs03">
<a href="#" target="_blank"><img src="images/ad/home_88.jpg" alt="项目名"/></a>
</span>

</p>
<p class="ad_logo">
<span class="ad_fs05">
<a href="#" target="_blank"><img src="images/ad/home_88.jpg" alt="项目名"/></a>
</span>
<span class="ad_fs06">
<a href="#" target="_blank"><img src="images/ad/home_88.jpg" alt="项目名"/></a>
</span>

</p>
</li>
<li>
<p class="ad_logo ad_fs01">
<a href="#" target="_blank"><img src="images/ad/home_88.jpg" alt="项目名" /></a>
</p>
<p class="ad_logo">
<span class="ad_fs02">
<a href="#" target="_blank"><img src="images/ad/home_88.jpg" alt="项目名" /></a>
</span>
<span class="ad_fs03">
<a href="#" target="_blank"><img src="images/ad/home_88.jpg" alt="项目名" /></a>
</span>

</p>
<p class="ad_logo ad_fs04">
<a href="#" target="_blank"><img src="images/ad/home_88.jpg" alt="项目名"/></a>
</p>
<p class="ad_logo">
<span class="ad_fs02">
<a href="#" target="_blank"><img src="images/ad/home_88.jpg" alt="项目名"/></a>
</span>
<span class="ad_fs03">
<a href="#" target="_blank"><img src="images/ad/home_88.jpg" alt="项目名"/></a>
</span>

</p>
<p class="ad_logo">
<span class="ad_fs05">
<a href="#" target="_blank"><img src="images/ad/home_88.jpg" alt="项目名"/></a>
</span>
<span class="ad_fs06">
<a href="#" target="_blank"><img src="images/ad/home_88.jpg" alt="项目名"/></a>
</span>

</p>
</li>
</ul>
</div>
</div>
</div>

<div class="menupic_fsxb"><img src="images/pic_fsxb.png" /></div>
</div>

</div>
<div class="menu_cont hide">2</div>
<div class="menu_cont hide">3</div>
<div class="menu_cont hide">4</div>
<div class="menu_cont hide">5</div>
<div class="menu_cont hide">6</div>
<div class="menu_cont hide">7</div>
<div class="menu_cont hide">8</div>
</div>
</div>
<!--中间项目展示-->

JS：

复制代码 代码如下:

$(".menu_list li").mouseenter(function(){
$(".menu_box").show();
var nav_index = $(".menu_list li").index(this);
$(".menu_cont").eq(nav_index).show()//滑动菜单对应当前内容
.siblings().hide();
}) ;
$(".menu").mouseleave(function(){

$(".menu_box").hide();
}) ;

时间： 2024-04-05 08:48:08

js实现的常用的左侧导航效果_javascript技巧的相关文章

JS实现网页顶部向下滑出的全国城市切换导航效果_javascript技巧

本文实例讲述了JS实现网页顶部向下滑出的全国城市切换导航效果.分享给大家供大家参考.具体如下: 这是一款JS版网页顶部向下滑出的城市切换导航,仿sohu团购网页顶部的城市导航切换,从顶部向下滑出,方便在其他城市之间切换.使用了sohu网原版的一个JS封装插件来实现,目前只是为了演示,所以全国城市不全,使用者自己添加吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-web-scroll-city-cha-style-codes/ 具体代码

JS利用cookie记忆当前位置的防刷新导航效果_javascript技巧

本文实例讲述了JS利用cookie记忆当前位置的防刷新导航效果.分享给大家供大家参考.具体如下: 这里演示利用cookie记忆当前位置的防刷新导航条,主要向大家展示如何在Js中使用Cookies技术,用好了Cookies,会使你的Js技术更上一层楼.这个菜单就感觉不错,当你鼠标点击之后,重新刷新页面后它仍然是保留在原位置,好像带有记忆功能. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-cookie-nav-pos-menu-demo/

JS+CSS实现的日本门户网站经典选项卡导航效果_javascript技巧

本文实例讲述了JS+CSS实现的日本门户网站经典选项卡导航效果.分享给大家供大家参考.具体如下: 这里介绍的是来自日本门户网站的一款CSS+JavaScript选项卡导航菜单,银灰色风格,看来日本人和中国人的审美是接近的,都喜欢这种风格,如果你要用的话,直接拷贝代码部分到你的网页中,注意你需要修改编码才行,日本的编码和中国可是不一样哦,只要把文字改为中国的就行了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-japan-web-

JS+CSS实现滑动切换tab菜单效果_javascript技巧

本文实例讲述了JS+CSS实现滑动切换tab菜单效果.分享给大家供大家参考.具体如下: 这是风格简单的一款JS+CSS滑动门特效代码,当鼠标滑过菜单的时候,二级菜单自动切换,鼠标不需要点击,滑动门效果是个比较流行的网页菜单效果,在网上经常可看到这种菜单的身影.本菜单在火狐.IE8.Chrome下测试通过,代码兼容性还可以,自己用的化再美化一下风格. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-move-cha-tab-menu-

JS+CSS3制作炫酷的弹窗效果_javascript技巧

昨天在家看电视时,退出的时候发现了一个弹窗效果,整个背景模糊,觉得这样的效果好炫,要比纯色加透明度高大上好多,连续试了几个界面,最终确定效果由css实现的,于是今天一大早来到公司便赶紧搜索了一下,虽然兼容性奇差,但是一个css属性就可以搞定.瞬间感觉自己知道的真是太少了~~        首先回忆一下弹窗的实现,一般我们分为两层,弹出窗口层(popus)和遮罩层(mask),通常情况下我习惯就这两元素全部设成fixed定位,具体和absolute区别一试便知.对于mask层自不用多少,我们如下给

js实现的彩色方块飞舞奇幻效果_javascript技巧

本文实例讲述了js实现的彩色方块飞舞奇幻效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <title>demo</title> <style type="text/css"> body { margin:0; padding:0; } ul { list-style:none; margin:0; padding:0; } li

js实现可折叠展开的手风琴菜单效果_javascript技巧

本文实例讲述了js实现可折叠展开的手风琴菜单效果.分享给大家供大家参考.具体如下: 这是一款可折叠展开的菜单,手风琴菜单,运用CSS与JavaScript技术实现的合拢与伸展的网页菜单,代码简洁,来自老外的代码作品,希望大家喜欢. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-hidden-show-sfq-style-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XH

移动端H5开发 Turn.js实现很棒的翻书效果_javascript技巧

最近CTO给我分配了一个移动端H5开发的任务,主要功能是需要实现翻书效果,我听过主要需求后,当时是呀!!!接下来自己尝试使用 fullPage.js和Swiper来实现翻书效果,结果效果都不是非常的理想,后来想起自己曾经做过PC版的翻书效果,当时使用的是Turn.js ,查过其相关API后,整个人突然豁然开朗呀,使用Turn.js 完全可以解决当前我接手这个项目的所有需求呀.现在将个人的学习总结如下,若有不正确的地方,欢迎读者给与批评指正! Turn.js的官方网址: http://www.tu

JS实现超简单的鼠标拖动效果_javascript技巧

本文实例讲述了JS实现超简单的鼠标拖动效果.分享给大家供大家参考,具体如下: 这里使用尽可能短的JavaScript代码写一个JS拖动,函数本身287个字符...如果不是考虑兼容性和变量封装,还可以更短点. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-s-drug-demo/ 具体代码如下: <title>尽可能短的写一个JS拖动</title> <body> <div id="demo&quo