以下是 jQuery ReSmenu下拉菜单特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>jQuery ReSmenu下拉菜单</title>
<link rel="stylesheet" type="text/css" media="all" href="css/style.css" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/jquery.resmenu.js"></script>
<script>
$(window).ready(function () {
$('#menu1').ReSmenu();
$('#menu2').ReSmenu({ maxWidth: 720 });
$('#menu3').ReSmenu({ textBefore: 'Choose:' });
$('#menu4').ReSmenu({ selectOption: 'Choose:' });
});
</script>
</head>
<body>
<div class="container">
<h1>jQuery ReSmenu <span>v0.1.0</span></h1>
<h2>Some examples</h2>
<!-- Menu 1 -->
<span class="title">Example A - No options</span>
<div class="menu_container">
<ul class="toresponsive" id="menu1">
<li><a href="/">Home</a></li>
<li class="current-menu-item"><a href="http://13141618.taobao.com/">Link</a></li>
<li>
<a href="">Submenu no url</a>
<ul>
<li>
<a href="#">Submenu with #</a>
<ul>
<li><a href="http://13141618.taobao.com/">Link</a></li>
</ul>
</li>
<li><a href="http://13141618.taobao.com/">Link</a></li>
</ul>
</li>
<li>
<a href="http://13141618.taobao.com/">Submenu with url</a>
<ul>
<li><a href="http://13141618.taobao.com/">Link</a></li>
<li>
<a>Submenu no href</a>
<ul>
<li><a href="http://13141618.taobao.com/">Link</a></li>
<li><a href="http://13141618.taobao.com/">Link</a></li>
<li><a href="">Link no url</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<pre>$('#menu1').ReSmenu();</pre>
<!-- Menu 2 -->
<span class="title">Example B - Collapse at 720px wide</span>
<div class="menu_container">
<ul class="toresponsive" id="menu2">
<li><a href="/">Home</a></li>
<li class="current-menu-item"><a href="http://13141618.taobao.com/">Link</a></li>
<li>
<a href="">Submenu no url</a>
<ul>
<li>
<a href="#">Submenu with #</a>
<ul>
<li><a href="http://13141618.taobao.com/">Link</a></li>
</ul>
</li>
<li><a href="http://13141618.taobao.com/">Link</a></li>
</ul>
</li>
<li>
<a href="http://13141618.taobao.com/">Submenu with url</a>
<ul>
<li><a href="http://13141618.taobao.com/">Link</a></li>
<li>
<a>Submenu no href</a>
<ul>
<li><a href="http://13141618.taobao.com/">Link</a></li>
<li><a href="http://13141618.taobao.com/">Link</a></li>
<li><a href="">Link no url</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<pre>$('#menu2').ReSmenu({
maxWidth: 720
});</pre>
<!-- Menu 3 -->
<span class="title">Example C - Menu with label</span>
<div class="menu_container nofull">
<ul class="toresponsive" id="menu3">
<li><a href="/">Home</a></li>
<li class="current-menu-item"><a href="http://13141618.taobao.com/">Link</a></li>
<li>
<a href="">Submenu no url</a>
<ul>
<li>
<a href="#">Submenu with #</a>
<ul>
<li><a href="http://13141618.taobao.com/">Link</a></li>
</ul>
</li>
<li><a href="http://13141618.taobao.com/">Link</a></li>
</ul>
</li>
<li>
<a href="http://13141618.taobao.com/">Submenu with url</a>
<ul>
<li><a href="http://13141618.taobao.com/">Link</a></li>
<li>
<a>Submenu no href</a>
<ul>
<li><a href="http://13141618.taobao.com/">Link</a></li>
<li><a href="http://13141618.taobao.com/">Link</a></li>
<li><a href="">Link no url</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<pre>$('#menu3').ReSmenu({
textBefore: 'Choose:'
});</pre>
<!-- Menu 4 -->
<span class="title">Example D - Menu with first option</span>
<p class="note">The active li won't be highlighted</p>
<div class="menu_container">
<ul class="toresponsive" id="menu4">
<li><a href="/">Home</a></li>
<li class="current-menu-item"><a href="http://13141618.taobao.com/">Link</a></li>
<li>
<a href="">Submenu no url</a>
<ul>
<li>
<a href="#">Submenu with #</a>
<ul>
<li><a href="http://13141618.taobao.com/">Link</a></li>
</ul>
</li>
<li><a href="http://13141618.taobao.com/">Link</a></li>
</ul>
</li>
<li>
<a href="http://13141618.taobao.com/">Submenu with url</a>
<ul>
<li><a href="http://13141618.taobao.com/">Link</a></li>
<li>
<a>Submenu no href</a>
<ul>
<li><a href="http://13141618.taobao.com/">Link</a></li>
<li><a href="http://13141618.taobao.com/">Link</a></li>
<li><a href="">Link no url</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<pre>$('#menu4').ReSmenu({
selectOption: 'Choose:'
});</pre>
<h2>Some css</h2>
<p><strong>ReSmenu</strong> runs out of the box but if you want to style your select to better fit the container you can take advantage of the short css style taken from twitter bootstrap:</p>
<pre>.responsive_menu select {
display: block;
width: 100%;
height: 36px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857;
color: rgb(85, 85, 85);
vertical-align: middle;
background-color: rgb(255, 255, 255);
background-image: none;
border: none;
}</pre>
</div>
</body>
</html>
JS代码(jquery.resmenu.min.js):
/*! ReSmenu v0.1 by Alessandro Benoit */
(function(e,t,n){
e.fn.ReSmenu=function(r){
function o(t,n,r){
r=typeof r!=="undefined"?r:"";
e(t).children("li").each(function(){
var t=e(this).children("a").attr("href");
if(typeof t==="undefined"||t===false||t=="#"||t.length==0){
t=""}
e("<option/>",{
value:t,html:r+e(this).children("a").text(),disabled:!t?true:false,selected:e(this).hasClass(s.activeClass)&&!s.selectOption?true:false}
).appendTo(n);
if(e(this).children("ul").length>0){
o(e(this).children("ul"),n,r+"
")}
}
)}
function u(n,r){
var i=e("<div/>",{
"class":s.menuClass}
).appendTo(e(n).parent());
var u=e("<select/>",{
id:s.selectId+r}
).appendTo(i);
e(u).bind("change",function(){
if(e(this).val().length>0){
t.location.href=e(this).val()}
}
);
if(s.textBefore){
e("<label/>",{
html:s.textBefore,"for":s.selectId+r}
).prependTo(i)}
if(s.selectOption){
e("<option/>",{
text:s.selectOption,value:""}
).appendTo(u)}
o(e(n),u);
return i}
var s=e.extend({
menuClass:"responsive_menu",selectId:"resmenu",textBefore:false,selectOption:false,activeClass:"current-menu-item",maxWidth:480}
,r);
this.each(function(){
function a(){
if(e(t).width()>parseInt(s.maxWidth)){
e(r).show();
if(o){
e(o).hide()}
}
else{
e(r).hide();
if(o){
e(o).show()}
else{
o=u(r,n)}
}
}
var r=e(this),o;
n++;
a();
e(t).resize(function(){
a()}
)}
)}
}
)(jQuery,this,0)CSS代码(style.css):
a{text-decoration:none;color:#4988C6;}
p{color:#444;}
h1 span{color:#ddd;font-size:26px;}
body{font-family:"Helvetica Neue";}
.container{margin:0 auto;width:90%;padding:0 5% 20px 5%;max-width:960px;}
.menu_container{display:block;padding:0 10px;margin:10px 0;background:#fff;border:1px solid #eee;height:36px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.075);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.075);box-shadow:0 2px 2px rgba(0,0,0,0.075);}
.menu_container a{text-decoration:none;color:#333;font-weight:800;font-size:12px;display:block;height:36px;line-height:36px;padding:0 15px;}
.menu_container ul{margin:0;padding:0;list-style:none;}
.menu_container ul li.current-menu-item{background-color:#ddd;}
.menu_container > ul > li{display:block;float:left;position:relative;}
.menu_container ul li:hover{background:#f6f6f6;}
.menu_container > ul > li > ul{background-color:#fff;position:absolute;display:none;border:1px solid #eee;top:100%;width:140px;}
.menu_container > ul > li:hover > ul{display:block;}
.menu_container > ul > li > ul > li{position:relative;}
.menu_container > ul > li > ul > li > ul{display:none;position:absolute;left:100%;top:0;border:1px solid #eee;width:140px;}
.menu_container > ul > li > ul > li:hover > ul{display:block;background-color:#fff;}
.menu_container > ul > li > ul > li > ul > li{}
.content{clear:both;}
.title{font-weight:800;font-size:12px;text-transform:uppercase;}
pre{background-color:#fafafa;padding:20px;overflow:auto;border:1px solid #f1f1f1;color:#000;}
.responsive_menu select{display:block;width:100%;height:36px;padding:6px 12px;font-size:14px;line-height:1.42857;color:rgb(85,85,85);vertical-align:middle;background-color:rgb(255,255,255);background-image:none;border:none;}
.nofull select{width:auto;}
label{float:left;line-height:36px;font-weight:800;font-size:12px;}
.note{color:#999;font-size:14px;}
.download_button{padding:15px 0;background:#F2F2F2;display:block;margin:30px auto;width:100%;max-width:200px;text-align:center;color:#4988C6;text-decoration:none;font-weight:800;font-size:12px;border-bottom:3px solid #ddd;}
.download_button:active{position:relative;top:3px;border-bottom:0;}
.download_button:hover{background-color:#eaeaea;}
分享到QQ
分享到微博
微信扫一扫
