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

代码如下：

 <!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配置

    1.nginx配置文件 2.配置访问域名 #京淘商品管理系统 server { listen 80; server_name manage.jt.com; location / { proxy_pas ...

  2. 使用TheFolderSpy监控文件夹的变化-邮件通知

    一.概述 当我们的文档或者代码文件发布在公网.共享文件夹中,其他用户具备访问或修改的权限时,就存在文档被覆盖或删除的分享.另外一个典型的场景,发布在Web服务器上的网页文件,在网站版本不更新的时间,服 ...

  3. MySQL--运维内参中的binlog_summary脚本

    #!/bin/bash ##===================================================## ## 脚本出自<MySQL运维内参> ##===== ...

  4. 591. Tag Validator

    Given a string representing a code snippet, you need to implement a tag validator to parse the code ...

  5. [CocoaPods]终端方式加载第三方库

    终端方式集成第三方库 1.打开终端,转到当前工程所在的文件夹. 方式一: [访达]->[服务]->[系统偏好设置] ->勾选[新建位于文件夹位置的终端标签 ]和[新建位于文件夹位置的 ...

  6. vuex的module的简单实用方法

    当我们的项目越来越大的时候,我们就开始使用vuex来管理我们的项目的状态.但是如果vuex的状态多了呢,这个时候module就登场了.看了一下官方的文档,很详细,但是没有demo让初学者很头疼.那我就 ...

  7. C语言函数部分

    一.变量的作用域 1.概念:变量起作用的范围. 2.局部变量与全局变量: ①局部变量: 概念:在函数内部或某个控制块的内部定义的变量(理解“局部”) 作用域:函数内部 作用:增强了函数模块的独立性 ② ...

  8. .NET FileUpLoad上传文件

    一.上传扫描件到服务器,自定义创建文件夹(如果存在该文件夹,则无需创建),并判断格式以及文件大小进行保存: 首先创建一个保存按钮事件: protected void btnSave_Click(obj ...

  9. oracle新建用户并授权步凑

    #首先创建表空间.存放路径.设置表空间大小 create tablespace tbs_ams datafile '+DATA/pdorcl1/datafile/ams1.dbf' size 1024 ...

  10. 边缘化搭建 DotNet Core 2.1 自动化构建和部署环境(下)

    写在前面 本篇文章是上一篇边缘化搭建 DotNet Core 2.1 自动化发布和部署(上)的后续操作,本文主要讲解如何开启Docker Remote API,开启Remote API后的权限安全问题 ...