以下是 jQuery侧边弹出二级菜单特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!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.baidu.com/">Wedding</a></li>
<li><a href="http://www.baidu.com/">Occasion Dresses</a></li>
<li><a href="http://www.baidu.com/">Women's Clothing</a></li>
<li><a href="http://www.baidu.com/">Women's Shoes</a></li>
<li><a href="http://www.baidu.com/">Accessories</a></li>
<li><a href="http://www.baidu.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.baidu.com/">Wedding Dresses</a></h3>
<div class="menu-list-link"></div>
</li>
<li>
<h3><a href="http://www.baidu.com/">Bridesmaid Dresses</a></h3>
<div class="menu-list-link"></div>
</li>
<li>
<h3><a href="http://www.baidu.com/">Wedding Party Dresses</a></h3>
<div class="menu-list-link">
<a href="http://www.baidu.com/">Mother of the Brides Dresses</a>
<span class="long-string">|</span>
<a href="http://www.baidu.com/">Flower Girl Dresses</a>
<span class="long-string">|</span>
<a href="http://www.baidu.com/">Wedding Guest Dresses</a>
</div>
</li>
<li>
<h3><a href="http://www.baidu.com/">Wedding Accessories</a></h3>
<div class="menu-list-link">
<a href="http://www.baidu.com/">Fabric Swatch</a>
<span class="long-string">|</span>
<a href="http://www.baidu.com/">Bridal Lingerie</a>
<span class="long-string">|</span>
<a href="http://www.baidu.com/">Wedding Veils</a>
<span class="long-string">|</span>
<a href="http://www.baidu.com/">Wedding Gloves</a>
<span class="long-string">|</span>
<a href="http://www.baidu.com/">Wedding Shawls</a>
<span class="long-string">|</span>
<a href="http://www.baidu.com/">Wedding Flowers</a>
<span class="long-string">|</span>
<a href="http://www.baidu.com/">Wedding Petticoats</a>
</div>
</li>
</ul>
</div>
<div class="menu-cont-list" style="display:none;">
<ul>
<li>
<h3><a href="http://www.baidu.com/">Prom Dresses</a></h3>
<div class="menu-list-link"></div>
</li>
<li>
<h3><a href="http://www.baidu.com/">Military Ball Dresses</a></h3>
<div class="menu-list-link"></div>
</li>
<li>
<h3><a href="http://www.baidu.com/">Evening Dresses</a></h3>
<div class="menu-list-link"></div>
</li>
<li>
<h3><a href="http://www.baidu.com/">Cocktail Dresses</a></h3>
<div class="menu-list-link"></div>
</li>
<li>
<h3><a href="http://www.baidu.com/">Ball Gowns</a></h3>
<div class="menu-list-link"></div>
</li>
<li>
<h3><a href="http://www.baidu.com/">Homecoming Dresses</a></h3>
<div class="menu-list-link"></div>
</li>
<li>
<h3><a href="http://www.baidu.com/">Little Black Dresses </a></h3>
<div class="menu-list-link"></div>
</li>
<li>
<h3><a href="http://www.baidu.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.baidu.com/">Dresses</a></h3>
<div class="menu-list-link"></div>
</li>
<li>
<h3><a href="http://www.baidu.com/">Clubwear</a></h3>
<div class="menu-list-link"></div>
</li>
<li>
<h3><a href="http://www.baidu.com/">Leggings</a></h3>
<div class="menu-list-link"></div>
</li>
<li>
<h3><a href="http://www.baidu.com/">Lingeries</a></h3>
<div class="menu-list-link">
<a href="http://www.baidu.com/">Bras</a>
<span class="long-string">|</span>
<a href="http://www.baidu.com/">Babydolls</a>
<span class="long-string">|</span>
<a href="http://www.baidu.com/">Teddies</a>
<span class="long-string">|</span>
<a href="http://www.baidu.com/">Panties</a>
<span class="long-string">|</span>
<a href="http://www.baidu.com/">Hosiery</a>
</div>
</li>
<li>
<h3><a href="http://www.baidu.com/">Bustiers & Corsets</a></h3>
<div class="menu-list-link"></div>
</li>
<li>
<h3><a href="http://www.baidu.com/">Costumes</a></h3>
<div class="menu-list-link">
<a href="http://www.baidu.com/">Sexy Costumes</a>
<span class="long-string">|</span>
<a href="http://www.baidu.com/">Christmas Costumes</a>
<span class="long-string">|</span>
<a href="http://www.baidu.com/">Halloween Costumes</a>
<span class="long-string">|</span>
<a href="http://www.baidu.com/">Halloween Accessories</a>
<span class="long-string">|</span>
<a href="http://www.baidu.com/">Zentai</a>
</div>
</li>
<li>
<h3><a href="http://www.baidu.com/">Swimwear</a></h3>
<div class="menu-list-link"></div>
</li>
<li>
<h3><a href="http://www.baidu.com/">Activewear</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.baidu.com/">Heels</a></h3>
<div class="menu-list-link"></div>
</li>
<li>
<h3><a href="http://www.baidu.com/">Pumps</a></h3>
<div class="menu-list-link"></div>
</li>
<li>
<h3><a href="http://www.baidu.com/">Dance Shoes</a></h3>
<div class="menu-list-link"></div>
</li>
<li>
<h3><a href="http://www.baidu.com/">Boots</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.baidu.com/">Evening Bags</a></h3>
<div class="menu-list-link"></div>
</li>
<li>
<h3><a href="http://www.baidu.com/">Hats & Scarves</a></h3>
<div class="menu-list-link">
<a href="http://www.baidu.com/">Womens Hats</a>
<span class="long-string">|</span>
<a href="http://www.baidu.com/">Womens Scarves</a>
</div>
</li>
<li>
<h3><a href="http://www.baidu.com/">Jewelry</a></h3>
<div class="menu-list-link">
<a href="http://www.baidu.com/">Earrings</a>
<span class="long-string">|</span>
<a href="http://www.baidu.com/">Necklaces</a>
<span class="long-string">|</span>
<a href="http://www.baidu.com/">Rings</a>
</div>
</li>
<li>
<h3><a href="http://www.baidu.com/">Watches</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.baidu.com/">Wigs & Hair extensions</a></h3>
<div class="menu-list-link"></div>
</li>
<li>
<h3><a href="http://www.baidu.com/">Fascinators</a></h3>
<div class="menu-list-link"></div>
</li>
<li>
<h3><a href="http://www.baidu.com/">Makeup Tools</a></h3>
<div class="menu-list-link"></div>
</li>
<li>
<h3><a href="http://www.baidu.com/">Spas & Massagers</a></h3>
<div class="menu-list-link"></div>
</li>
<li>
<h3><a href="http://www.baidu.com/">Health & Fitness</a></h3>
<div class="menu-list-link"></div>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
分享到QQ
分享到微博
微信扫一扫
