以下是 jQuery图文下拉菜单特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery</title>
<link href="css/megamenu.css" rel="stylesheet">
<style>html, body{height:100%}body{background: #fff url(img/back.png) repeat;margin: 0;padding: 0;}.content{margin: 50px 50px 700px 50px;}.megamenu{margin: 0 0 0 0;}.megamenu > li.grid .megapanel .row [class*="col"]{background: #ccc !important;}.megamenu h4{margin-top: 0;}.megamenu .adress{}.megamenu .adress label{float: left;width: 100%;margin-bottom: 2px;}</style>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/megamenu.js"></script>
<script>$(document).ready(function(){$(".megamenu").megamenu();});</script>
</head>
<body>
<div class="content">
<ul class="megamenu skyblue">
<li class="active"><a href="#">Home</a></li>
<li class="grid"><a href="#">Grid</a><div class="megapanel">
<div class="row">
<div class="col1">
</div>
<div class="col1">
</div>
<div class="col1">
</div>
<div class="col1">
</div>
<div class="col1">
</div>
<div class="col1">
</div>
</div>
<div class="row">
<div class="col2">
</div>
<div class="col1">
</div>
<div class="col1">
</div>
<div class="col1">
</div>
<div class="col1">
</div>
</div>
<div class="row">
<div class="col3">
</div>
<div class="col1">
</div>
<div class="col1">
</div>
<div class="col1">
</div>
</div>
<div class="row">
<div class="col4">
</div>
<div class="col1">
</div>
<div class="col1">
</div>
</div>
<div class="row">
<div class="col5">
</div>
<div class="col1">
</div>
</div>
<div class="row">
<div class="col6">
</div>
</div>
<div class="row">
<div class="col3">
</div>
<div class="col3">
</div>
</div>
<div class="row">
<div class="col2">
</div>
<div class="col1">
</div>
<div class="col1">
</div>
<div class="col2">
</div>
</div>
<div class="row">
<div class="col1">
</div>
<div class="col4">
</div>
<div class="col1">
</div>
</div>
<div class="row">
<div class="col4">
</div>
<div class="col2">
</div>
</div>
<div class="row">
<div class="col2">
</div>
<div class="col3">
</div>
<div class="col1">
</div>
</div>
</div>
</li>
<li><a href="#">Images</a><div class="megapanel">
<div class="row">
<div class="col1">
<img src="img/1.jpg" title="image" /></div>
<div class="col1">
<img src="img/2.jpg" title="image" /></div>
<div class="col1">
<img src="img/3.jpg" title="image" /></div>
<div class="col1">
<img src="img/4.jpg" title="image" /></div>
<div class="col1">
<img src="img/5.jpg" title="image" /></div>
<div class="col1">
<img src="img/6.jpg" title="image" /></div>
</div>
<div class="row">
<div class="col1">
<img src="img/7.jpg" title="image" /></div>
<div class="col1">
<img src="img/8.jpg" title="image" /></div>
<div class="col1">
<img src="img/9.jpg" title="image" /></div>
<div class="col1">
<img src="img/10.jpg" title="image" /></div>
<div class="col1">
<img src="img/11.jpg" title="image" /></div>
<div class="col1">
<img src="img/12.jpg" title="image" /></div>
</div>
<div class="row">
<div class="col1">
<img src="img/13.jpg" title="image" /></div>
<div class="col1">
<img src="img/14.jpg" title="image" /></div>
<div class="col1">
<img src="img/15.jpg" title="image" /></div>
<div class="col1">
<img src="img/16.jpg" title="image" /></div>
<div class="col1">
<img src="img/17.jpg" title="image" /></div>
<div class="col1">
<img src="img/18.jpg" title="image" /></div>
</div>
</div>
</li>
<li><a href="#">Dropdown</a><ul class="dropdown">
<li><a href="#">Dropdown item</a></li>
<li><a href="#">Dropdown item</a></li>
<li><a href="#">Dropdown item</a><ul class="dropdown">
<li><a href="#">Dropdown item</a></li>
<li><a href="#">Dropdown item</a></li>
<li><a href="#">Dropdown item</a><ul class="dropdown">
<li><a href="#">Dropdown item</a></li>
<li><a href="#">Dropdown item</a></li>
<li><a href="#">Dropdown item</a></li>
<li><a href="#">Dropdown item</a></li>
</ul>
</li>
<li><a href="#">Dropdown item</a></li>
</ul>
</li>
<li><a href="#">Dropdown item</a></li>
</ul>
</li>
<li><a href="#">Contact</a><div class="megapanel">
<div class="row">
<div class="col3">
<form class="contact">
<label for="name">Name</label><input id="name" type="text" /><label for="email">E-mail</label><input id="email" type="text" /><label for="message">Message</label><textarea rows="8" id="message"></textarea><input type="submit" value="Send" /></form>
</div>
<div class="col3">
<h4>Contact info</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur commodo velit at eros feugiat ullamcorper sed sit
amet velit. Cras in mattis nulla, quis vehicula tellus. Donec
non ultricies tellus. Praesent venenatis, purus et aliquet sodales.</p>
<p>Augue velit semper turpis, id vehicula augue lacus nec lorem.
Proin ultricies risus vel mauris placerat ultricies. Curabitur
bibendum vulputate mi sed tincidunt. Aenean eu risus a ipsum
auctor mattis. Proin sagittis eget lorem sit amet vehicula.
Curabitur bibendum vulputate mi sed tincidunt.</p>
<div class="adress">
<label><strong>Megamenu Inc.</strong></label><label>Level
123, 123 Elizabeth St, Melbourne</label><label>Victoria
1234</label><label>Australia</label><label>Phone: (012)
345 6789</label><label><a href="#">megamenu@megamenu.com</a></label></div>
</div>
</div>
</div>
</li>
<li class="right"><a href="#">Right</a></li>
</ul>
</div>
</body>
</html>
JS代码(megamenu.js):
$.fn.megamenu=function(e){
function r(){
$(".megamenu").find("li,a").unbind();
if(window.innerWidth<=768){
o();
s();
if(n==0){
$(".megamenu > li:not(.showhide)").hide(0)}
}
else{
u();
i()}
}
function i(){
$(".megamenu li").bind("mouseover",function(){
$(this).children(".dropdown,.megapanel").stop().fadeIn(t.interval)}
).bind("mouseleave",function(){
$(this).children(".dropdown,.megapanel").stop().fadeOut(t.interval)}
)}
function s(){
$(".megamenu > li > a").bind("click",function(e){
if($(this).siblings(".dropdown,.megapanel").css("display")=="none"){
$(this).siblings(".dropdown,.megapanel").slideDown(t.interval);
$(this).siblings(".dropdown").find("ul").slideDown(t.interval);
n=1}
else{
$(this).siblings(".dropdown,.megapanel").slideUp(t.interval)}
}
)}
function o(){
$(".megamenu > li.showhide").show(0);
$(".megamenu > li.showhide").bind("click",function(){
if($(".megamenu > li").is(":hidden")){
$(".megamenu > li").slideDown(300)}
else{
$(".megamenu > li:not(.showhide)").slideUp(300);
$(".megamenu > li.showhide").show(0)}
}
)}
function u(){
$(".megamenu > li").show(0);
$(".megamenu > li.showhide").hide(0)}
var t={
interval:250}
;
var n=0;
$(".megamenu").prepend("<li class='showhide'><span class='title'>MENU</span><span class='icon1'></span><span class='icon2'></span></li>");
r();
$(window).resize(function(){
r()}
)}
CSS代码(megamenu.css):
.megamenu{margin:0;padding:0;width:100%;list-style:none;display:inline-block;position:relative;font-family:Calibri,Arial;font-size:15px;border:solid 1px #ccc}
.megamenu li{float:left;display:inline}
.megamenu>li>a{float:left;padding:20px 30px 20px 30px;color:#555;font-weight:200;text-decoration:none;text-transform:uppercase;transition:color .4s ease-in-out;-moz-transition:color .4s ease-in-out;-webkit-transition:color .4s ease-in-out;-o-transition:color .4s ease-in-out}
.megamenu>li:hover>a,.megamenu>li.active>a{background:#dbdbdb}
.megamenu>li.right{float:right}
.megamenu .dropdown,.megamenu .dropdown li .dropdown{list-style:none;margin:0;padding:0;display:none;position:absolute;z-index:999;width:160px;border:solid 1px rgba(0,0,0,0.1);background:#fff}
.megamenu .dropdown{top:59px}
.megamenu .dropdown li .dropdown{left:160px;top:inherit}
.megamenu .dropdown li{clear:both;width:100%;border-bottom:solid 1px rgba(0,0,0,0.1)}
.megamenu .dropdown li:last-child{border-bottom:0}
.megamenu .dropdown li a{float:left;width:100%;padding:10px 25px;text-decoration:none;display:block;border:0 none;font-size:14px;color:#444;background:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;transition:color .4s ease-in-out;-moz-transition:color .4s ease-in-out;-webkit-transition:color .4s ease-in-out;-o-transition:color .4s ease-in-out}
.megamenu .dropdown li:hover>a{background:#dbdbdb}
.megamenu>li>.megapanel{position:absolute;display:none;background:#fff;width:100.2%;top:58px;left:-1px;z-index:99;padding:20px 30px 20px;border:solid 1px #ccc;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.megamenu .megapanel ul{margin:0;padding:0}
.megamenu .megapanel img{width:100%;border:solid 1px #dedede;cursor:pointer;-webkit-transition:border .3s linear;-moz-transition:border .3s linear;-o-transition:border .3s linear;transition:border .3s linear}
.megamenu .megapanel img:hover{border:solid 1px #777}
.megamenu form.contact input,.megamenu form.contact textarea{font-family:Calibri,Arial;font-size:16px;color:#444;outline:0}
.megamenu form.contact input[type="text"],.megamenu form.contact textarea{width:100%;margin-bottom:20px;padding:5px 10px;border:solid 1px #dedede;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-transition:border .3s linear;-moz-transition:border .3s linear;-o-transition:border .3s linear;transition:border .3s linear}
.megamenu form.contact input[type="text"]{height:40px}
.megamenu form.contact input[type="text"]:focus,.megamenu form.contact textarea:focus{border:solid 1px #999}
.megamenu form.contact input[type="submit"]{width:100px;height:35px;border:0;color:#fff;cursor:pointer;background:#999}
.megapanel .row{width:100%;margin-top:15px}
.megapanel .row:first-child{margin-top:0}
.megapanel .row:before,.megapanel .row:after{display:table;content:"";line-height:0}
.megapanel .row:after{clear:both}
.megapanel .row .col1,.megapanel .row .col2,.megapanel .row .col3,.megapanel .row .col4,.megapanel .row .col5,.megapanel .row .col6{display:block;width:100%;min-height:20px;float:left;margin-left:2.127659574468085%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.megapanel .row [class*="col"]:first-child{margin-left:0}
.megapanel .row .col1{width:14.893617021276595%}
.megapanel .row .col2{width:31.914893617021278%}
.megapanel .row .col3{width:48.93617021276595%}
.megapanel .row .col4{width:65.95744680851064%}
.megapanel .row .col5{width:82.97872340425532%}
.megapanel .row .col6{width:100%}
.megamenu>li.showhide{display:none;width:100%;height:50px;cursor:pointer;color:#555;border-bottom:solid 1px rgba(0,0,0,0.1);background:#eee;background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VlZWVlZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkYmRiZGIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);background:-moz-linear-gradient(top,#eee 0,#dbdbdb 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#eee),color-stop(100%,#dbdbdb));background:-webkit-linear-gradient(top,#eee 0,#dbdbdb 100%);background:-o-linear-gradient(top,#eee 0,#dbdbdb 100%);background:-ms-linear-gradient(top,#eee 0,#dbdbdb 100%);background:linear-gradient(to bottom,#eee 0,#dbdbdb 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee',endColorstr='#dbdbdb',GradientType=0)}
.megamenu>li.showhide span.title{margin:15px 0 0 25px;float:left}
.megamenu>li.showhide span.icon1:after{position:absolute;content:"";right:25px;top:15px;height:3px;width:25px;font-size:50px;border-top:3px solid #fff;border-bottom:3px solid #fff;z-index:1}
.megamenu>li.showhide span.icon2:after{position:absolute;content:"";right:25px;top:27px;height:3px;width:25px;font-size:50px;border-top:3px solid #fff;border-bottom:3px solid #fff;z-index:1}
.skyblue,.skyblue>li.showhide{background:#0194be;background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAxOTRiZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMTg2YWIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);background:-moz-linear-gradient(top,#0194be 0,#0186ab 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#0194be),color-stop(100%,#0186ab));background:-webkit-linear-gradient(top,#0194be 0,#0186ab 100%);background:-o-linear-gradient(top,#0194be 0,#0186ab 100%);background:-ms-linear-gradient(top,#0194be 0,#0186ab 100%);background:linear-gradient(to bottom,#0194be 0,#0186ab 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0194be',endColorstr='#0186ab',GradientType=0)}
.skyblue li>a,.skyblue>li.showhide span{color:#fff}
.skyblue>li:hover>a,.skyblue>li.active>a,.skyblue .dropdown li:hover>a{color:#fff;background:#0180a3}
.skyblue .megapanel img:hover,.skyblue form.contact input[type="text"]:focus,.skyblue form.contact textarea:focus{border:solid 1px #0194be}
.skyblue form.contact input[type="submit"]{background:#0194be}
@media(max-width:768px){.megamenu>li{display:block;width:100%;border-bottom:solid 1px rgba(0,0,0,0.1);box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}
.megamenu>li:hover,.megamenu>li.active{border-top:0}
.megamenu>li>a{padding:15px 25px}
.megamenu>li:hover>a,.megamenu>li.active>a{padding:15px 25px}
.megamenu a{width:100%;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}
.megamenu .dropdown,.megamenu .dropdown li .dropdown{width:100%;display:none;left:0;border-left:0;position:static;border:0;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}
.megamenu .dropdown li{background:#fff!important;border:0}
.megamenu .dropdown>li>a{padding-left:40px!important}
.megamenu>li>.megapanel{position:static;margin-top:50px}
.megapanel .row [class*="col"]{float:none;display:block;width:100%;margin-left:0;margin-top:15px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.megapanel .row:first-child [class*="col"]:first-child{margin-top:0}
.megapanel .row{margin-top:0}
.black{background:#222}
}
分享到QQ
分享到微博
微信扫一扫
