jquery之商城菜单

Posted wenxianfeng

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jquery之商城菜单相关的知识,希望对你有一定的参考价值。

实现效果:悬浮总菜单,显示分类菜单,移走隐藏总菜单,悬浮分类菜单,显示商品种类,移走隐藏商品种类和分类菜单,悬浮商品种类,显示商品种类和分类菜单,移走隐藏商品菜单和分类菜单。

代码如下:

技术图片
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>商城菜单</title>
 6     <style>
 7         .second{
 8             float: left;
 9         }
10         .three{
11             float: left;
12         }
13         .hide{
14             display: none;
15         }
16     </style>
17 </head>
18 <body>
19     <div class="first">
20             <strong>全部商品</strong>
21     </div>
22 
23     <div class="outer hide">
24 
25         <div class="second">
26                 <div menu-one="one">家电</div>
27                 <div menu-one="two">生鲜</div>
28         </div>
29         <div class="three">
30             <div class="item hide" menu-one-content="one">
31                 <div>手机</div>
32                 <div>电视</div>
33             </div>
34             <div class="item hide" menu-one-content="two">
35                 <div>带鱼</div>
36                 <div>螃蟹</div>
37             </div>
38         </div>
39 
40     </div>
41 <script src="jquery-1.8.2.js"></script>
42 <script>
43     $(function () {
44         $(‘.first‘).bind(‘mouseover‘,function () {
45             $(‘.second‘).parent().removeClass(‘hide‘)
46         });
47         $(‘.first‘).bind(‘mouseout‘,function () {
48             $(‘.second‘).parent().addClass(‘hide‘)
49         });
50 
51         $(‘.second‘).children().bind(‘mouseover‘,function () {
52             $(‘.second‘).parent().removeClass(‘hide‘);
53             var num = $(this).attr(‘menu-one‘);
54             $(‘.three‘).find(‘[menu-one-content="‘+num+‘"]‘).removeClass(‘hide‘)
55         });
56         $(‘.second‘).children().bind(‘mouseout‘,function () {
57             $(‘.second‘).parent().addClass(‘hide‘);
58             // var num = $(this).attr(‘menu-one‘);
59             // $(‘.three‘).find(‘[menu-one-content="‘+num+‘"]‘).addClass(‘hide‘)
60             $(‘.three‘).children().addClass(‘hide‘)
61         });
62 
63         $(‘.three‘).children().bind(‘mouseover‘,function () {
64             $(‘.second‘).parent().removeClass(‘hide‘);
65             $(this).removeClass(‘hide‘);
66         });
67         $(‘.three‘).children().bind(‘mouseout‘,function () {
68             $(‘.second‘).parent().addClass(‘hide‘);
69             $(this).addClass(‘hide‘);
70         });
71     })
72 </script>
73 </body>
74 </html>
View Code

 

以上是关于jquery之商城菜单的主要内容,如果未能解决你的问题,请参考以下文章

12个用得着的 JQuery 代码片段

20款jquery下拉导航菜单特效代码分享

商城动态菜单

HTML导航之下拉菜单方法3——JQuery下拉菜单

web前端开发JQuery常用实例代码片段(50个)

贡献一下多年珍藏的特效例子