jQuery制作右侧边垂直二级导航菜单

<!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=UTF-8" />
<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;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{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;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.xwcms.net/">Wedding</a></li>
       <li><a href="http://www.xwcms.net/">Occasion Dresses</a></li>
       <li><a href="http://www.xwcms.net/">Women's Clothing</a></li>
       <li><a href="http://www.xwcms.net/">Women's Shoes</a></li>
       <li><a href="http://www.xwcms.net/">Accessories</a></li>
       <li><a href="http://www.xwcms.net/">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.xwcms.net/">Wedding Dresses</a></h3>
                   <div class="menu-list-link"></div>
               </li>
               <li>
                   <h3><a href="http://www.xwcms.net/">Bridesmaid Dresses</a></h3>
                   <div class="menu-list-link"></div>
               </li>
               <li>
                   <h3><a href="http://www.xwcms.net/">Wedding Party Dresses</a></h3>
                   <div class="menu-list-link">
                       <a href="http://www.xwcms.net/">Mother of the Brides Dresses</a>
                       <span class="long-string">|</span>
                       <a href="http://www.xwcms.net/">Flower Girl Dresses</a>
                       <span class="long-string">|</span>
                       <a href="http://www.xwcms.net/">Wedding Guest Dresses</a>
                   </div>
               </li>
               <li>
                   <h3><a href="http://www.xwcms.net/">Wedding Accessories</a></h3>
                   <div class="menu-list-link">
                       <a href="http://www.xwcms.net/">Fabric Swatch</a>
                       <span class="long-string">|</span>
                       <a href="http://www.xwcms.net/">Bridal Lingerie</a>
                       <span class="long-string">|</span>
                       <a href="http://www.xwcms.net/">Wedding Veils</a>
                       <span class="long-string">|</span>
                       <a href="http://www.xwcms.net/">Wedding Gloves</a>
                       <span class="long-string">|</span>
                       <a href="http://www.xwcms.net/">Wedding Shawls</a>
                       <span class="long-string">|</span>
                       <a href="http://www.xwcms.net/">Wedding Flowers</a>
                       <span class="long-string">|</span>
                       <a href="http://www.xwcms.net/">Wedding Petticoats</a>
                   </div>
               </li>
           </ul>
       </div>

       <div class="menu-cont-list" style="display:none;">
           <ul>
               <li>
                   <h3><a href="http://www.xwcms.net/">Prom Dresses</a></h3>
                   <div class="menu-list-link"></div>
               </li>
               <li>
                   <h3><a href="http://www.xwcms.net/">Military Ball Dresses</a></h3>
                   <div class="menu-list-link"></div>
               </li>
               <li>
                   <h3><a href="http://www.xwcms.net/">Evening Dresses</a></h3>
                   <div class="menu-list-link"></div>
               </li>
               <li>
                   <h3><a href="http://www.xwcms.net/">Cocktail Dresses</a></h3>
                   <div class="menu-list-link"></div>
               </li>
               <li>
                   <h3><a href="http://www.xwcms.net/">Ball Gowns</a></h3>
                   <div class="menu-list-link"></div>
               </li>
               <li>
                   <h3><a href="http://www.xwcms.net/">Homecoming Dresses</a></h3>
                   <div class="menu-list-link"></div>
               </li>
               <li>
                   <h3><a href="http://www.xwcms.net/">Little Black Dresses </a></h3>
                   <div class="menu-list-link"></div>
               </li>
               <li>
                   <h3><a href="http://www.xwcms.net/">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.xwcms.net/">Dresses</a></h3>
                   <div class="menu-list-link"></div>
               </li>
               <li>
                   <h3><a href="http://www.xwcms.net/">Clubwear</a></h3>
                   <div class="menu-list-link"></div>
               </li>
               <li>
                   <h3><a href="http://www.xwcms.net/">Leggings</a></h3>
                   <div class="menu-list-link"></div>
               </li>
               <li>
                   <h3><a href="http://www.xwcms.net/">Lingeries</a></h3>
                   <div class="menu-list-link">
                       <a href="http://www.xwcms.net/">Bras</a>
                       <span class="long-string">|</span>
                       <a href="http://www.xwcms.net/">Babydolls</a>
                       <span class="long-string">|</span>
                       <a href="http://www.xwcms.net/">Teddies</a>
                       <span class="long-string">|</span>
                       <a href="http://www.xwcms.net/">Panties</a>
                       <span class="long-string">|</span>
                       <a href="http://www.xwcms.net/">Hosiery</a>
                   </div>
               </li>
               <li>
                   <h3><a href="http://www.xwcms.net/">Bustiers & Corsets</a></h3>
                   <div class="menu-list-link"></div>
               </li>
               <li>
                   <h3><a href="http://www.xwcms.net/">Costumes</a></h3>
                   <div class="menu-list-link">
                       <a href="http://www.xwcms.net/">Sexy Costumes</a>
                       <span class="long-string">|</span>
                       <a href="http://www.xwcms.net/">Christmas Costumes</a>
                       <span class="long-string">|</span>
                       <a href="http://www.xwcms.net/">Halloween Costumes</a>
                       <span class="long-string">|</span>
                       <a href="http://www.xwcms.net/">Halloween Accessories</a>
                       <span class="long-string">|</span>
                       <a href="http://www.xwcms.net/">Zentai</a>
                   </div>
               </li>
               <li>
                   <h3><a href="http://www.xwcms.net/">Swimwear</a></h3>
                   <div class="menu-list-link"></div>
               </li>
               <li>
                   <h3><a href="http://www.xwcms.net/">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.xwcms.net/">Heels</a></h3>
                   <div class="menu-list-link"></div>
               </li>
               <li>
                   <h3><a href="http://www.xwcms.net/">Pumps</a></h3>
                   <div class="menu-list-link"></div>
               </li>
               <li>
                   <h3><a href="http://www.xwcms.net/">Dance Shoes</a></h3>
                   <div class="menu-list-link"></div>
               </li>
               <li>
                   <h3><a href="http://www.xwcms.net/">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.xwcms.net/">Evening Bags</a></h3>
                   <div class="menu-list-link"></div>
               </li>
               <li>
                   <h3><a href="http://www.xwcms.net/">Hats & Scarves</a></h3>
                   <div class="menu-list-link">
                       <a href="http://www.xwcms.net/">Womens Hats</a>
                       <span class="long-string">|</span>
                       <a href="http://www.xwcms.net/">Womens Scarves</a>
                   </div>
               </li>
               <li>
                   <h3><a href="http://www.xwcms.net/">Jewelry</a></h3>
                   <div class="menu-list-link">
                       <a href="http://www.xwcms.net/">Earrings</a>
                       <span class="long-string">|</span>
                       <a href="http://www.xwcms.net/">Necklaces</a>
                       <span class="long-string">|</span>
                       <a href="http://www.xwcms.net/">Rings</a>
                   </div>
               </li>
               <li>
                   <h3><a href="http://www.xwcms.net/">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.xwcms.net/">Wigs & Hair extensions</a></h3>
                   <div class="menu-list-link"></div>
               </li>
               <li>
                   <h3><a href="http://www.xwcms.net/">Fascinators</a></h3>
                   <div class="menu-list-link"></div>
               </li>
               <li>
                   <h3><a href="http://www.xwcms.net/">Makeup Tools</a></h3>
                   <div class="menu-list-link"></div>
               </li>
               <li>
                   <h3><a href="http://www.xwcms.net/">Spas & Massagers</a></h3>
                   <div class="menu-list-link"></div>
               </li>
               <li>
                   <h3><a href="http://www.xwcms.net/">Health & Fitness</a></h3>
                   <div class="menu-list-link"></div>
               </li>
           </ul>
       </div>

   </div>

</div>

</body>
</html>

jquery还不太会写。在看别人写好的demo。希望有所收获

相关阅读:
Linux下pip3安装问题
客户信息维护jsp
Java开发环境搭建
软件开发一般步骤
PM
需求分析
结对编程
GUI
spring boot 整合cfx,axis2创建webservice客户端
webserver 返回json 如何去掉 <string xmlns="http://tempuri.org/">

原文地址：https://www.cnblogs.com/lightinblack/p/3650919.html