jquery之商城菜单
实现效果：悬浮总菜单，显示分类菜单，移走隐藏总菜单，悬浮分类菜单，显示商品种类，移走隐藏商品种类和分类菜单，悬浮商品种类，显示商品种类和分类菜单，移走隐藏商品菜单和分类菜单。
代码如下：
<!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之商城菜单的更多相关文章
- 可控制导航下拉方向的jQuery下拉菜单代码
效果:http://hovertree.com/texiao/nav/1/ 代码如下: <!DOCTYPE html> <html> <head> <meta ...
- jQuery Wheel 环形菜单插件5种效果演示
很酷的菜单-jQuery Wheel 环形菜单插件5种效果演示在线预览 下载地址 实例代码 <div class="container"> <!-- Top Na ...
- 11款样式新颖的 jQuery/CSS3 网页菜单
今天为大家准备了11款样式风格挺不错的jQuery/CSS3网页菜单,主要包括面包屑菜单.下拉菜单.Tab菜单等,喜欢的朋友赶紧收藏,一起来看看这些菜单. 1.jQuery / CSS3多功能下拉菜单 ...
- jquery 展开折叠菜单
jquery 展开折叠菜单 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <ht ...
- 炫酷实用的jQuery插件 涵盖菜单、按钮、图片
新的一周开始了,今天我们要为大家分享一些全新的jQuery插件和HTML5/CSS3应用,这些jQuery插件不仅非常炫酷,而且还挺实用,这次的分享包含jQuery菜单.CSS3按钮已经多种图片特效, ...
- jQuery弹性滑动导航菜单实现思路及代码
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" /> <meta na ...
- 打造简易可扩展的jQuery/CSS3 Tab菜单
原文:打造简易可扩展的jQuery/CSS3 Tab菜单 今天我们利用jQuery和CSS3来打造一款简易而且扩展性强的Tab菜单,这款Tab菜单在切换时也有滑块的效果,先来看看效果图: 由与Tab菜 ...
- 简单jQuery 实现手风琴菜单
简单jQuery 实现手风琴菜单 css代码 如下: *{ margin: 0; padding: 0; } #accordion{ width: 500px; } #accordion>div ...
- 近20个绚丽实用的jQuery/CSS3侧边栏菜单（转载）
http://developer.51cto.com/art/201510/493530.htm 近20个绚丽实用的jQuery/CSS3侧边栏菜单 jQuery作为一款主流的JavaScript前端 ...
随机推荐
- 1.SpringMVC入门
创建一个web工程 导入jar 配置web.xml 在web.xml配置前端控制器:DispatcherServlet <?xml version="1.0" encodin ...
- 突然 不能f**q
ss 突然访问不了,于是去查看ip是否被f,发现国outer 国inner 都通,不知道什么情况,后来把 系统代理模式 改为全局,发觉可以,又把他改为 pac模式,正常了. 记录一 ...
- i==1 && resolve()
for( var i=100000 ; i>0 ; i-- ){ i==1 && resolve() } var dd = 988889;console.log(`${dd}`) ...
- Swift5 语言指南(三) 快速之旅
传统表明,新语言中的第一个程序应在屏幕上打印“Hello,world!”字样.在Swift中,这可以在一行中完成: print("Hello, world!") // Prints ...
- Shell-2--输入输出重定向
自己写一下吧,免得又忘了,被人问到,被鄙视 0 表示标准输入, 1 表示标准输出 , 2 表示标准错误输出 一个 > 表示已覆盖的方式把命令的正确执行重定向到文件 两个 >> 表示是 ...
- numpy中array和asarray的区别
array和asarray都可以将结构数据转化为ndarray,但是主要区别就是当数据源是ndarray时,array仍然会copy出一个副本,占用新的内存,但asarray不会. 举例说明: imp ...
- Ubuntu 16.04 python和OpenCV安装
Ubuntu 16.04 python和OpenCV安装:最进在做深度学习和计算机视觉的有关内容,因此要在python中用到opencv.我的电脑装的是Ubuntu 16.04,python 2.7和 ...
- Linux - 快速进入目录的方法
cd命令技巧 直接进入用户的home目录: cd ~ 进入上一个目录: cd - 进入当前目录的上一层目录: cd .. 进入当前目录的上两层目录: cd ../.. 其他常用方法 利用tab键,自动 ...
- mysql常用function
前言: 本文主要是参考mysql官方文档,并加上自己的测试用例,来加深自己对mysql函数的理解,也借此平台与大家分享,如有不妥和错误之处欢迎读者评论,我会及时改正,愿与大家一起学习进步. 概述: 所 ...
- 【sping揭秘】17、@Around，@Introduction
package cn.cutter.start.bean; import org.apache.commons.logging.Log; import org.apache.commons.loggi ...