jQuery网站三级下拉菜单特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery网站三级下拉菜单特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="en">
<head>
<!-- title and meta -->
<meta charset="gb2312" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>jQuery网站三级下拉菜单</title>
<!-- css -->
<link href='http://fonts.googleapis.com/css?family=Ubuntu:300,400,700,400italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/base.css" />
<link rel="stylesheet" href="css/style.css" />
<!-- js -->
<script src="js/jquery-1.9.1.min.js"></script>
<script>
    $(document).ready(function() {
        $( '.dropdown' ).hover(
            function(){
                $(this).children('.sub-menu').slideDown(200);
            },
            function(){
                $(this).children('.sub-menu').slideUp(200);
            }
        );
    }); // end ready
</script>
</head>
<body>
<div id="wrapper">
<header>
    <div id="title" class="content">
        <h1>Slide Down Menu</h1>
    </div>
</header>
<nav>
    <ul class="content clearfix">
        <li><a href="#">Nav 1</a></li>
        <li><a href="#">Nav 2</a></li>
        <li class="dropdown">
            <a href="#">Nav 3</a>
            <ul class="sub-menu">
                <li><a href="#">Nav 3.1</a></li>
                <li><a href="#">Nav 3.2</a></li>
                <li><a href="#">Nav 3.3</a></li>
                <li class="dropdown">
                    <a href="#">Nav 3.4</a>
                    <ul class="sub-menu">
                        <li><a href="#">Nav 3.4.1</a></li>
                        <li class="dropdown">
                            <a href="#">Nav 3.4.2</a>
                            <ul class="sub-menu">
                                <li><a href="#">Nav 3.4.2.1</a></li>
                                <li><a href="#">Nav 3.4.2.2</a></li>
                                <li><a href="#">Nav 3.4.2.3</a></li>
                                <li><a href="#">Nav 3.4.2.4</a></li>
                                <li><a href="#">Nav 3.4.2.5</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Nav 3.4.3</a></li>
                        <li><a href="#">Nav 3.4.4</a></li>
                        <li><a href="#">Nav 3.4.5</a></li>
                    </ul>
                </li>
                <li><a href="#">Nav 3.5</a></li>
            </ul>
        </li>
        <li><a href="#">Nav 4</a></li>
        <li><a href="#">Nav 5</a></li>
    </ul>
</nav>

<div id="main">
    <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam;</p>
    </div>
</div>
<footer>
</footer>
</div>
</body>
</html>

CSS代码(base.css):

/* =Reset default browser CSS. Based on work by Eric Meyer:http://meyerweb.com/eric/tools/css/reset/index.html-------------------------------------------------------------- */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{background:transparent;border:0;margin:0;padding:0;vertical-align:baseline;}
body{line-height:1;}
h1,h2,h3,h4,h5,h6{clear:both;font-weight:normal;}
ol,ul{list-style:none;}
blockquote{quotes:none;}
blockquote:before,blockquote:after{content:'';content:none;}
del{text-decoration:line-through;}
/* tables still need 'cellspacing="0"' in the markup */
table{border-collapse:collapse;border-spacing:0;}
a img{border:none;}
/* =Global-------------------------------------------------------------- */
*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
body{background-color:rgb(50,50,50);color:rgb(50,50,50);font-family:'Ubuntu',sans-serif;font-weight:300;font-size:16px;line-height:1.5;}
/* Headings */
h1,h2,h3,h4,h5,h6{line-height:1;font-weight:300;}
a{text-decoration:none;color:rgb(100,150,200);}
a:hover{color:rgb(50,50,50);}
/* =Template-------------------------------------------------------------- */
#wrapper{width:100%;margin:0 auto;}
#main{background-color:#fff;padding:30px 0;}
.content{width:80%;max-width:1000px;margin:0 auto;}
/* =Top Bar-------------------------------------------------------------- */
#top-bar{background-color:rgb(100,150,200);}
#top-bar a{color:#fff;font-size:14px;text-transform:uppercase;display:inline-block;margin:0;padding:10px;}
#top-bar a:hover{background-color:rgb(150,200,250);}
span.all-labs,span.back-to-tutorial{display:block;width:50%;}
span.all-labs{float:left;text-align:left;}
span.back-to-tutorial{float:right;text-align:right;}
/* =Header-------------------------------------------------------------- */
header{padding:30px 0;}
#title{width:100%;text-align:center;}
#title h1{color:#fff;font-size:30px;margin-bottom:10px;}
#title h2{color:rgb(200,200,200);font-size:20px;}
/* =Footer-------------------------------------------------------------- */
footer{}
/* =Extras-------------------------------------------------------------- */
.clearfix:after{visibility:hidden;display:block;content:"";clear:both;height:0;}

CSS代码(style.css):

/* =Styles for the lab-------------------------------------------------------------- */
#wrapper{min-width:1000px;}
nav{background-color:rgb(255,100,100);padding:10px 0;}
nav ul{list-style-type:none;margin:0;padding:0;}
nav ul li{display:inline-block;position:relative;}
/* sub navigation */
nav li ul{background-color:rgb(225,75,75);position:absolute;left:0;top:40px;/* make this equal to the line-height of the links (specified below) */
 width:200px;}
nav li li{position:relative;margin:0;display:block;}
nav li li ul{position:absolute;top:0;left:200px;/* make this equal to the width of the sub nav above */
 margin:0;}
/* style all links */
nav a{line-height:40px;padding:0 12px;margin:0 12px;}
nav a{color:#fff;text-decoration:none;display:block;}
nav a:hover,nav a:focus,nav a:active{color:rgb(50,50,50);}
/* style sub level links */
nav li li a{border-bottom:solid 1px rgb(200,50,50);margin:0 10px;padding:0;}
nav li li:last-child a{border-bottom:none;}
/* hide sub menu links */
ul.sub-menu{display:none;}
/* show arrows for dropdowns */
nav li.dropdown > a{background-image:url('../img/arrow-down.png');background-position:right 20px;background-repeat:no-repeat;}
nav li li.dropdown > a{background-image:url('../img/arrow-right.png');background-position:right 16px;background-repeat:no-repeat;}

附件:下载该文件资源,减少时间成本(增值服务)