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

代码如下:

 <!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. iowait过高处理

    网管告警: 告警主机:YiDHLWJKFZ-js-app- 主机IP:192.168.***.*** 告警项目:system.cpu.util[,iowait] 告警时间: :: 告警等级:Warni ...

  2. Android-Java-子类实例化过程(内存图)

    案例一: package android.java.oop15; // 描述Person对象 class Person { // 构造方法就算不写 默认有一个隐式的无参构造方法:public Pers ...

  3. Python+Excel+Unittest+HTMLTestRunner实现数据驱动接口自动化测试(二)

    因为小白,这2天研究了好久才算是搞好.先附上一个测试完成后邮件的截图: 上一篇有提到: unittest中实际运行了一个接口的很多条用例,而报告中只会有一条记录.这是因为unittest test c ...

  4. Linux - 利用systemctl命令管理服务

    systemctl命令是系统服务管理器指令,融合了service和chkconfig的功能,可以查看和设置服务. 这里以docker服务为例. 利用systemctl命令管理 显示服务状态:syste ...

  5. Liferay7 BPM门户开发之5: Activiti和Spring集成

    参考文档: https://github.com/jbarrez/spring-boot-with-activiti-examplehttps://github.com/sxyx2008/spring ...

  6. python 旋转数组 多种解题思路

    leetcode 题目描述:给定一个数组,将数组中的元素向右移动 k 个位置,其中 k 是非负数. 尽可能想出更多的解决方案,至少有三种不同的方法可以解决这个问题. 要求使用空间复杂度为 O(1) 的 ...

  7. Fillder Script语法

    官方的Fiddler Script使用文档 http://docs.telerik.com/fiddler/KnowledgeBase/FiddlerScript/ModifyRequestOrRes ...

  8. mysql 开发进阶篇系列 37 工具篇 perror (错误代码查看工具)与总结

    一.  perror 错误代码查看工具   在mysql 的使用过程中,可能会出现各种各样的error.这些error有些是由于操作系统引起的,比如文件或者目录不存在等等,使用perror的作用就是解 ...

  9. 从零开始学 Web 之 Ajax(四)接口文档,验证用户名唯一性案例

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  10. IT人如何打造个性化的个人网站(在线简历)

    前言 众所周知,IT行业人员在求职时,如果拥有自己的技术博客和个人网站多少是可以加些分的,因为这也是IT人的技术证明之一.内容丰富的技术博客就不必多少了,往往技术博客大神市场上多是供不应求的,而且技术 ...