<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jQuery侧边弹出二级菜单 - 网页模板</title>
<style type="text/css">
ul{margin:0;padding:0;list-style-type:none;}
a{text-decoration:none;}
/* mod-menu */
.mold_open_hover,.mold_open{display:inline-block;width:10px;height:6px;margin-left:10px;position:relative;top:-2px;}
.mold_open{background-position:0 -6px;}
.mold_open_hover{background-position:0 0;}
.mod-menu{position:relative;z-index:1000;left:-1px;margin-left:100px;}
.menu-cont-list a:hover{text-decoration:underline;}
.mod-menu .menu-item{width:220px;border-top:solid 1px #d59bb2;border-bottom:solid 2px #d59bb2;position:relative;z-index:22;}
.mod-menu .menu-item li{height:47px;line-height:47px;background:#feebf3;border-top:solid 1px #f0bfd3;}
.mod-menu .menu-item li.mouse-bg{background:url(../image/mouse-menu-bg.jpg) no-repeat #fff;position:relative;z-index:22;margin-right:-4px;}
.mod-menu .menu-item a{color:#c81d61;font-size:16px;padding-left:33px;display:block;height:45px;border-top:solid 1px #f1f2f7;}
.mod-menu .menu-item a:hover{ text-decoration:none;}
.mod-menu .menu-cont{position:absolute;left:220px;top:1px;background:#fff;width:573px;border:solid 1px #F0BFD3;box-shadow:2px 0 10px rgba(210,33,103,0.25);z-index:20;}
.mod-menu .menu-cont-list{padding:0 30px;}
.mod-menu .menu-cont-list li{border-bottom:dotted 1px #f0bfd3;padding:10px 0;}
.mod-menu .menu-cont-list li:last-child{border-bottom:none;}
.mod-menu .menu-cont-list h3{font-size:14px;font-weight:700;}
.mod-menu .menu-cont-list h3 a{color:#222;}
.mod-menu .menu-list-link a{color:#666;line-height:24px;}
.mod-menu .menu-list-link .long-string{color:#ccc;font-size:12px;padding:0 10px;}
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var mod_menu=$(".mod-menu");//导航模块区
var menu=function(){
var menuItem=$(".menu-item li");//选择导航列表
menuItem.each(function(){
var _index=$(this).index();//获取当前选择菜单列表的索引
$(this).mouseenter(function(){
var y = $(this).position().top+1;//获取当前鼠标滑过的列表的顶部坐标
$(".menu-cont").show();
$(".menu-cont").css("top",y);//需要显示的对应索引内容
$(this).addClass("mouse-bg").siblings().removeClass("mouse-bg");
$(".menu-cont>div").eq(_index).show().siblings().hide();
});
});/*导航菜单菜单*/
$(".mod-menu").mouseleave(function(){
$(".menu-cont").hide();
menuItem.removeClass("mouse-bg");
})
}//展开二级菜单
menu();//执行展开二级菜单函
});
</script>
</head>
<body>
<div class="mod-menu">
<ul class="menu-item">
<li><a href="http://www.moobnn.com/">Wedding</a></li>
<li><a href="http://www.moobnn.com/">Occasion Dresses</a></li>
<li><a href="http://www.moobnn.com/">Women's Clothing</a></li>
<li><a href="http://www.moobnn.com/">Women's Shoes</a></li>
<li><a href="http://www.moobnn.com/">Accessories</a></li>
<li><a href="http://www.moobnn.com/">Beauty & Health</a></li>
</ul><!--一级菜单列表-->
<div class="menu-cont" style="display:none;top:241px;">
<div class="menu-cont-list" style="display:none;">
<ul>
<li>
<h3><a href="http://www.moobnn.com/">Wedding Dresses</a></h3>
<div class="menu-list-link"></div>
</li>
<li>
<h3><a href="http://www.moobnn.com/">Bridesmaid Dresses</a></h3>
<div class="menu-list-link"></div>
</li>
<li>
<h3><a href="http://www.moobnn.com/">Wedding Party Dresses</a></h3>
<div class="menu-list-link">
<a href="http://www.moobnn.com/">Mother of the Brides Dresses</a>
<span class="long-string">|</span>
<a href="http://www.moobnn.com/">Flower Girl Dresses</a>
<span class="long-string">|</span>
<a href="http://www.moobnn.com/">Wedding Guest Dresses</a>
</div>
</li>
<li>
<h3><a href="http://www.moobnn.com/">Wedding Accessories</a></h3>
<div class="menu-list-link">
<a href="http://www.moobnn.com/">Fabric Swatch</a>
<span class="long-string">|</span>
<a href="http://www.moobnn.com/">Bridal Lingerie</a>
<span class="long-string">|</span>
<a href="http://www.moobnn.com/">Wedding Veils</a>
<span class="long-string">|</span>
<a href="http://www.moobnn.com/">Wedding Gloves</a>
<span class="long-string">|</span>
<a href="http://www.moobnn.com/">Wedding Shawls</a>
<span class="long-string">|</span>
<a href="http://www.moobnn.com/">Wedding Flowers</a>
<span class="long-string">|</span>
<a href="http://www.moobnn.com/">Wedding Petticoats</a>
</div>
</li>
</ul>
</div>
<div class="menu-cont-list" style="display:none;">
<ul>
<li>
<h3><a href="http://www.moobnn.com/">Prom Dresses</a></h3>
<div class="menu-list-link"></div>
</li>
<li>
<h3><a href="http://www.moobnn.com/">Military Ball Dresses</a></h3>
<div class="menu-list-link"></div>
</li>
<li>
<h3><a href="http://www.moobnn.com/">Evening Dresses</a></h3>
<div class="menu-list-link"></div>
</li>
<li>
<h3><a href="http://www.moobnn.com/">Cocktail Dresses</a></h3>
<div class="menu-list-link"></div>
</li>
<li>
<h3><a href="http://www.moobnn.com/">Ball Gowns</a></h3>
<div class="menu-list-link"></div>
</li>
<li>
<h3><a href="http://www.moobnn.com/">Homecoming Dresses</a></h3>
<div class="menu-list-link"></div>
</li>
<li>
<h3><a href="http://www.moobnn.com/">Little Black Dresses </a></h3>
<div class="menu-list-link"></div>
</li>
<li>
<h3><a href="http://www.moobnn.com/">Quinceanera Dresses</a></h3>
<div class="menu-list-link"></div>
</li>
</ul>
</div>
<div class="menu-cont-list" style="display:none;">
<ul>
<li>
<h3><a href="http://www.moobnn.com/">Dresses</a></h3>
<div class="menu-list-link"></div>
</li>
<li>
<h3><a href="http://www.moobnn.com/">Clubwear</a></h3>
<div class="menu-list-link"></div>
</li>
<li>
<h3><a href="http://www.moobnn.com/">Leggings</a></h3>
<div class="menu-list-link"></div>
</li>
<li>
<h3><a href="http://www.moobnn.com/">Lingeries</a></h3>
<div class="menu-list-link">
<a href="http://www.moobnn.com/">Bras</a>
<span class="long-string">|</span>
<a href="http://www.moobnn.com/">Babydolls</a>
<span class="long-string">|</span>
<a href="http://www.moobnn.com/">Teddies</a>
<span class="long-string">|</span>
<a href="http://www.moobnn.com/">Panties</a>
<span class="long-string">|</span>
<a href="http://www.moobnn.com/">Hosiery</a>
</div>
</li>
<li>
<h3><a href="http://www.moobnn.com/">Bustiers & Corsets</a></h3>
<div class="menu-list-link"></div>
</li>
<li>
<h3><a href="http://www.moobnn.com/">Costumes</a></h3>
<div class="menu-list-link">
<a href="http://www.moobnn.com/">Sexy Costumes</a>
<span class="long-string">|</span>
<a href="http://www.moobnn.com/">Christmas Costumes</a>
<span class="long-string">|</span>
<a href="http://www.moobnn.com/">Halloween Costumes</a>
<span class="long-string">|</span>
<a href="http://www.moobnn.com/">Halloween Accessories</a>
<span class="long-string">|</span>
<a href="http://www.moobnn.com/">Zentai</a>
</div>
</li>
<li>
<h3><a href="http://www.moobnn.com/">Swimwear</a></h3>
<div class="menu-list-link"></div>
</li>
<li>
<h3><a href="http://www.moobnn.com/">Activewear</a></h3>
<div class="me
jQuery侧边弹出二级菜单.zip
版权申诉
50 浏览量
2022-11-20
22:07:29
上传
评论
收藏 58KB ZIP 举报
jQuery侧边弹出二级菜单.zip （3个子文件） 
jQuery侧边弹出二级菜单 
jQuery侧边弹出二级菜单.jpg 36KB jiaoben1561 
index.html 10KB js 
jquery.min.js 93KB资源评论
芝麻粒儿
- 粉丝: 6w+
- 资源: 2万+
最新资源
- python开心麻花影视作品分析程序+源码.zip
- pythonExcel数据分析师程序+源码.zip
- PlatformUI.jar 支持RCP控件环境插件
- VB+ACCESS大型机房学生上机管理系统(源代码+系统).zip
- 基于BP神经网络的回归分析，基于优化动量因子的BP神经网络，基于优化学习率的BP神经网络，基于优化隐藏层神经元的bp神经网络
- python读取excel数据Python-file-reading-master.zip
- STC15单片机串口2使用程序例子
- 读取日志的excel生成周报 用python3开发weekplan-master.zip
- python 读取excel数据导入dbimport-data-master.zip
- K折交叉验证BP神经网络，多输入多输出BP神经网络（代码完整，数据齐全）
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
