<!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;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.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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; Massagers</a></h3>
                    <div class="menu-list-link"></div>
                </li>
                <li>
                    <h3><a href="http://www.xwcms.net/">Health &amp; Fitness</a></h3>
                    <div class="menu-list-link"></div>
                </li>
            </ul>
        </div>
        
    </div>

</div>

</body>
</html>

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

jQuery制作右侧边垂直二级导航菜单的更多相关文章

  1. 一款jquery编写图文下拉二级导航菜单特效

    一款jquery编写图文下拉二级导航菜单特效,效果非常简洁大气,很不错的一款jquery导航菜单特效. 这款jquery特效适用于很多的个人和门户网站. 适用浏览器:IE8.360.FireFox.C ...

  2. jQuery垂直二级导航菜单代码

    http://www.sucaihuo.com/js/395.html 分享一个简单的垂直二级菜单导航.   HTML <div id="my_menu" class=&qu ...

  3. 用jQuery制作仿网易云课堂导航菜单效果

    最近做项目,用到类似的效果. 效果图如下: 直接上代码: HTML: <!DOCTYPE html> <html lang="en"> <head&g ...

  4. 基于jQuery垂直多级导航菜单代码

    基于jQuery垂直多级导航菜单代码是一款黑色风格的jQuery竖直导航菜单特效下载.效果图如下: 在线预览   源码下载 实现的代码. html代码: <ul class="ce&q ...

  5. 一款基于jquery和css3的响应式二级导航菜单

    今天给大家分享一款基于jquery和css3的响应式二级导航菜单,这款导航是传统的基于顶部,鼠标经过的时候显示二级导航,还采用了当前流行的响应式设计.效果图如下: 在线预览   源码下载 实现的代码. ...

  6. jQuery&HTML&CSS3实现垂直手风琴折叠菜单方法讲解

    在网页制作中我们常常需要折叠式的菜单,在折叠菜单中,手风琴特效的菜单是非常受欢迎,下面就讲解使用jQuery+HTML+CSS3实现垂直手风琴折叠菜单的方法. jQuery实现垂直手风琴折叠菜单示例代 ...

  7. jQuery - 制作点击显示二级菜单效果

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  8. jQuery/CSS3类似阿里巴巴的商品导航菜单实现教程

    有两天没发表文章了,今天来说说利用jQuery和CSS3制作一款类似阿里巴巴左侧商品菜单导航,这款菜单看起来非常大气,可以展示非常多的产品类目,如果你在设计电子商务网站,不妨可以拿来参考,一下是效果图 ...

  9. 使用jQuery开发iOS风格的页面导航菜单

    在线演示1 本地下载     申请达人,去除赞助商链接 iOS风格的操作系统和导航方式现在越来越流行,在今天的jQuery教程中,我们将介绍如何生成一个iphone风格的菜单导航. HTML代码 我们 ...

随机推荐

  1. ERP和MES破冰之路 [普实MES升级中国“智”造]

    题记:早在2007年,普实就提出AIO一体化产品概念,全力打造ERP的资源闭环,并取得了良好的市场效应.如今,在制造业的智能生产需求下,生产制造执行系统(MES)成功推向市场. MES是什么? 制造执 ...

  2. 1574: [Usaco2009 Jan]地震损坏Damage

    1574: [Usaco2009 Jan]地震损坏Damage Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 425  Solved: 232[Subm ...

  3. Java 集合的理解(持续更新......)

    一.集合的由来 通常,我们的程序需要根据程序运行时才知道创建多少个对象.但若非程序运行,程序开发阶段,我们根本不知道到底需要多少个数量的对象,甚至不知道它的准确类型.为了满足这些常规的编程需要,我们要 ...

  4. Ajax写分页查询(实现不刷新页面)

    获取数据库中大量的信息显示在页面上,必然要使用到分页查询: 若不使用Ajax,而是用其他的方法,肯定是要刷新页面的,用户体检很不好, 所以最好使用Ajax的方法写分页查询: 1.先来找一张数据很多的表 ...

  5. linux 私房菜 CH5 笔记

    知识点 linux 大小写敏感 接口的切换 [Ctrl] + [Alt] + [F1] ~ [F6] :文字接口登入 tty1 ~ tty6 终端机: [Ctrl] + [Alt] + [F7] :图 ...

  6. 千呼万呼使出来Gogland (jetBrains发布的golang IDE)

    由于之前一直在用PyCharm在开发, 已经习惯了这个IDE. 转golang开发后一直没找到合适的debug功能的IDE,忽然听说jetBrains发布测试版golang IDE: Gogland带 ...

  7. 2017-3-17 SQL server 数据库 视图,事务,备份还原,分离附加

    1.视图:只能查看,不能增删改不能有重复列 create view 名字as查询语句 2.事务:保证流程的完整执行 begin tran --开始事务监控 被监控的代码 ... ...if @@ERR ...

  8. X-Scan使用教程

    下载X-Scan扫描器,解压缩,双击Xscan_gui.exe即可运行,不需要安装.X-Scan采用多线程的方式,对指定主机或者网段进行扫描. 其扫描功能(插件)有: 开放服务:扫描TCP端口状态,根 ...

  9. iOS开发之Quartz2D

    1.         Quartz2D概述及作用 Quartz2D的API是纯C语言的,Quartz2D的API来自于Core Graphics框架. 数据类型和函数基本都以CG作为前缀,比如: CG ...

  10. CentOS 安装 clamav

    1.配置yum源 # cd /etc/yum.repos.d/ # vi dag.repo写入下列内容 #Dag RPM Repository Start[dag]name=Dag RPM Repos ...