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

代码如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>商城菜单</title>

     <style>

         .second{

             float: left;

         }

         .three{

             float: left;

         }

         .hide{

             display: none;

         }

     </style>

 </head>

 <body>

     <div class="first">

             <strong>全部商品</strong>

     </div>

     <div class="outer hide">

         <div class="second">

                 <div menu-one="one">家电</div>

                 <div menu-one="two">生鲜</div>

         </div>

         <div class="three">

             <div class="item hide" menu-one-content="one">

                 <div>手机</div>

                 <div>电视</div>

             </div>

             <div class="item hide" menu-one-content="two">

                 <div>带鱼</div>

                 <div>螃蟹</div>

             </div>

         </div>

     </div>

 <script src="jquery-1.8.2.js"></script>

 <script>

     $(function () {

         $('.first').bind('mouseover',function () {

             $('.second').parent().removeClass('hide')

         });

         $('.first').bind('mouseout',function () {

             $('.second').parent().addClass('hide')

         });

         $('.second').children().bind('mouseover',function () {

             $('.second').parent().removeClass('hide');

             var num = $(this).attr('menu-one');

             $('.three').find('[menu-one-content="'+num+'"]').removeClass('hide')

         });

         $('.second').children().bind('mouseout',function () {

             $('.second').parent().addClass('hide');

             // var num = $(this).attr('menu-one');

             // $('.three').find('[menu-one-content="'+num+'"]').addClass('hide')

             $('.three').children().addClass('hide')

         });

         $('.three').children().bind('mouseover',function () {

             $('.second').parent().removeClass('hide');

             $(this).removeClass('hide');

         });

         $('.three').children().bind('mouseout',function () {

             $('.second').parent().addClass('hide');

             $(this).addClass('hide');

         });

     })

 </script>

 </body>

 </html>

jquery之商城菜单的更多相关文章

  1. 可控制导航下拉方向的jQuery下拉菜单代码

    效果:http://hovertree.com/texiao/nav/1/ 代码如下: <!DOCTYPE html> <html> <head> <meta ...

  2. jQuery Wheel 环形菜单插件5种效果演示

    很酷的菜单-jQuery Wheel 环形菜单插件5种效果演示在线预览 下载地址 实例代码 <div class="container"> <!-- Top Na ...

  3. 11款样式新颖的 jQuery/CSS3 网页菜单

    今天为大家准备了11款样式风格挺不错的jQuery/CSS3网页菜单,主要包括面包屑菜单.下拉菜单.Tab菜单等,喜欢的朋友赶紧收藏,一起来看看这些菜单. 1.jQuery / CSS3多功能下拉菜单 ...

  4. jquery 展开折叠菜单

    jquery 展开折叠菜单 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <ht ...

  5. 炫酷实用的jQuery插件 涵盖菜单、按钮、图片

    新的一周开始了,今天我们要为大家分享一些全新的jQuery插件和HTML5/CSS3应用,这些jQuery插件不仅非常炫酷,而且还挺实用,这次的分享包含jQuery菜单.CSS3按钮已经多种图片特效, ...

  6. jQuery弹性滑动导航菜单实现思路及代码

    <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" /> <meta na ...

  7. 打造简易可扩展的jQuery/CSS3 Tab菜单

    原文:打造简易可扩展的jQuery/CSS3 Tab菜单 今天我们利用jQuery和CSS3来打造一款简易而且扩展性强的Tab菜单,这款Tab菜单在切换时也有滑块的效果,先来看看效果图: 由与Tab菜 ...

  8. 简单jQuery 实现手风琴菜单

    简单jQuery 实现手风琴菜单 css代码 如下: *{ margin: 0; padding: 0; } #accordion{ width: 500px; } #accordion>div ...

  9. 近20个绚丽实用的jQuery/CSS3侧边栏菜单（转载）

    http://developer.51cto.com/art/201510/493530.htm 近20个绚丽实用的jQuery/CSS3侧边栏菜单 jQuery作为一款主流的JavaScript前端 ...

随机推荐

  1. Nginx 教程

    开源版:http://nginx.org 商业版:http://nginx.com 阿里Tengine OpenResty开源版.商业版 视频教程:哔哩哔哩 菜鸟教程:nginx安装 1.初识 Nig ...

  2. samba服务配置（二）

    需求: 某公司销售部门提出一个文件共享需求,要求部门共享目录有三个,第一个共享目录所有销售部门人员都具有可读可写权限: 第二个共享目录所有销售人员只读权限,经理级别的销售人员具有可读可写权限:第三个共 ...

  3. vi显示中文乱码

    问题:vi/vim 编辑ANSI文本时,中文会显示乱码! 解决方法:修改vi/vim配置文件,添加如下红色并加粗的部分! vi    配置文件路径:/etc/vircvim 配置文件路径:/etc/v ...

  4. [ZJOI2019]语言

    树链剖分入门题吧 一个非常直观的想法是使用树剖将一条链拆成\(log^2n\)个矩形,套用矩形面积并算法即可得到一个垃圾的3个log过不去算法 为了得到一个两个log的做法,我们观察一下拆出来的矩形的 ...

  5. 1.html基础标签:文本+链接+图片

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. a标签嵌套a标签在实际项目开发中遇到的坑

    大家都知道HTML的嵌套规范,其中一个规范是块元素嵌套行内元素,块元素嵌套块元素,行内元素嵌套行内元素,行内元素不能嵌套块元素. 其中需要注意的是行内元素嵌套行内元素,a标签虽然是行内元素,但是a标签 ...

  7. Nginx 负载均衡与反向代理

    通过设置权重来轮询 weight server 192.168.1.62  weight=5 server 192.168.63 weight=1 ip_hash 第3方均衡策略 fair url_h ...

  8. 【金三银四跳槽季】Java工程师如何在1个月内做好面试准备？

    目录 一.写在前面 二.技术广度的快速准备 三.技术深度的快速准备 四.基础功底的快速准备 五.下篇预告 一.写在前面 春节长假转眼已过,即将迎来的是一年一度的金三银四跳槽季. 假如你准备在金三银四跳 ...

  9. [视频]K8飞刀--WinRAR远程代码执行漏洞利用视频

    [视频]K8飞刀--WinRAR远程代码执行漏洞利用视频 链接:https://pan.baidu.com/s/17_0kgNsDejJS0hvgLiMD7A 提取码:zkc2

  10. 测试工具之RobotFramework界面基本功能使用

    安装好RobotFramework后,直接在运行或者命令行中执行ride.py即可启动RF 启动完成后的界面如下: 界面很简洁,然后我们开始点击file并创建project: 接下来右键project ...