自定义下拉菜单
标签 ul>li
<!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>无标题文档</title>
<style>
@charset "utf-8";
html,body,h1,h2,h3,h4,h5,div,p,ul,li,dl,dt,dd,label,input,button,header,footer,artical{padding:0; margin:0; border:0;-webkit-tap-highlight-color:rgba(0,0,0,0);}
ul{list-style:none;}
input,img{border:0;}
:focus {outline: 0;}
html,body{width:100%;height:100%;}
ul.search_more{font-family: "宋体";font-size:12px;color:#333;}
ul.search_more>li {position:relative;float:left;height:20px;border:1px solid #ddd;padding-right:10px;margin-right:13px;}
ul.search_more>li>span{display:block;color:#333;line-height:20px;padding-left:5px;padding-right:20px;
background:url("http://s0.ifengimg.com/2016/01/14/2cb48958a87e0cf4b7ea696b648544db.png") no-repeat right 7px;
cursor:pointer;
}
ul.search_more>li>dl{position:absolute;top:20px;left:-1px;zoom:1;z-index:997;border:1px solid #ddd;background-color:#fff;padding:5px 0;display:none;}
ul.search_more>li>dl>dd{line-height:25px;width:100%;white-space:nowrap;}
ul.search_more>li>dl a{padding-left:5px;padding-right:5px;display:block;color:#333;text-decoration:none;}
ul.search_more>li>dl a:hover{color:#f54343;cursor:pointer;text-decoration:none;}
ul.search_more:after,ul.search_more>li>dl:after{content:"";display:"table";clear:both;zoom:1;}
</style>
</head>
<body>
<ul class="search_more">
<li>
<span>装修不限</span>
<dl>
<dd><a href="">装修不限1</a></dd>
<dd><a href="">装修不限2</a></dd>
<dd><a href="">装修不限3</a></dd>
<dd><a href="">装修不限4</a></dd>
<dd><a href="">装修不限5</a></dd>
<dd><a href="">装修不限6</a></dd>
</dl>
</li>
<li>
<span>装修不限</span>
<dl>
<dd><a href="">装修不限1</a></dd>
<dd><a href="">装修不限2</a></dd>
<dd><a href="">装修不限3</a></dd>
<dd><a href="">装修不限4</a></dd>
<dd><a href="">装修不限5</a></dd>
<dd><a href="">装修不限6</a></dd>
</dl>
</li>
<li>
<span>装修不限</span>
<dl>
<dd><a href="">装修不限1装修不限1</a></dd>
<dd><a href="">装修不限2</a></dd>
<dd><a href="">装修不限3</a></dd>
<dd><a href="">装修不限4</a></dd>
<dd><a target="_blank" href="">装修不限5</a></dd>
<dd><a target="_blank" href="">装修不限6</a></dd>
</dl>
</li>
</ul>
<script type="text/javascript" src="http://s0.ifengimg.com/static/js/jquery-1.7.2.min_c4de8813.js"></script>
<script>
$(document).ready(function(){
$.fn.showMenu = function() {
return this.each(function() {
var me = $(this);
var lis = me.find("li");
var as = lis.find("a");
bind(); //事件绑定
function bind() {
lis.on({
"click":function(){
var $dl=$(this).find("dl");
$dl.is(":hidden")?$dl.show():$dl.hide();
var $dlMore=$(this).siblings().find("dl");
$dlMore.is(":visible") && $dlMore.hide();
}
});
as.on({
"click":function(e){
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue=false;
}
var $li=$(this).closest('li');
$li.find("span").html($(this).text());
}
});
$(document).click(function(event) {
var $dl=$(".search_more>li dl");
if($dl.is(":visible") && $(event.target).parent().parent().attr("class")!= "search_more"){
$dl.hide();
}
})
}
})
};
$('.search_more').showMenu();
});
/*
var Haorooms= function(el, opt) {
this.$element = el,
this.defaults = {
'color': 'red',
'fontSize': '12px',
'textDecoration':'none'
},
this.options = $.extend({}, this.defaults, opt)
};
//定义haorooms的方法
Haorooms.prototype = {
changecss: function() {
return this.$element.css({
'color': this.options.color,
'fontSize': this.options.fontSize,
'textDecoration': this.options.textDecoration
});
}
};
$.fn.myPlugin = function(options) {
//创建haorooms的实体
var haorooms= new Haorooms(this, options);
//调用其方法
return haorooms.changecss();
};
$(function() {
$('a').myPlugin({
'color': '#2C9929',
'fontSize': '20px'
});
});
*/
</script>
</body>
</html>
标签 div
<!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>无标题文档</title>
<style>
@charset "utf-8";
html,body,h1,h2,h3,h4,h5,div,p,ul,li,dl,dt,dd,label,input,button,header,footer,artical{padding:0; margin:0; border:0;-webkit-tap-highlight-color:rgba(0,0,0,0);}
ul{list-style:none;}
input,img{border:0;}
:focus {outline: 0;}
html,body{width:100%;height:100%;}
.search_more{position:relative;float:left;height:20px;border:1px solid #ddd;padding-right:10px;margin-right:13px;font-family: "宋体";font-size:12px;color:#333;}
.search_more>span{display:block;color:#333;line-height:20px;padding-left:5px;padding-right:20px;
background:url("http://s0.ifengimg.com/2016/01/14/2cb48958a87e0cf4b7ea696b648544db.png") no-repeat right 7px;
cursor:pointer;
}
.search_more>ul{position:absolute;top:20px;left:-1px;zoom:1;z-index:997;border:1px solid #ddd;background-color:#fff;padding:5px 0;display:none;}
.search_more>ul>li{line-height:25px;width:100%;white-space:nowrap;padding-left:5px;padding-right:5px;}
.search_more>ul>li:hover{color:#f54343;cursor:pointer;text-decoration:none;}
</style>
<script type="text/javascript" src="http://s0.ifengimg.com/static/js/jquery-1.7.2.min_c4de8813.js"></script>
</head>
<body>
<div class="search_more">
<span>装修不限</span>
<ul>
<li>装修不限1装修不限1装修不限1</li>
<li>装修不限2</li>
<li>装修不限3</li>
<li>装修不限4</li>
<li>装修不限5</li>
<li>装修不限6</li>
</ul>
</div>
<div class="search_more">
<span>装修不限</span>
<ul>
<li>装修不限1</li>
<li>装修不限2</li>
<li>装修不限3</li>
<li>装修不限4</li>
<li>装修不限5</li>
<li>装修不限6</li>
</ul>
</div>
<div class="search_more">
<span>装修不限</span>
<ul>
<li>装修不限1</li>
<li>装修不限2</li>
<li>装修不限3</li>
<li>装修不限4</li>
<li>装修不限5</li>
<li>装修不限6</li>
</ul>
</div>
<script>
$(document).ready(function(){
$.fn.showMenu = function() {
return this.each(function() {
var me = $(this);
var span = me.find("span");
var ul = me.find("ul");
var lis = ul.find("li");
var className=me.attr('class');
bind(); //事件绑定
function bind() {
me.on({
"click":function(){
$('.'+className+'>ul').is(":visible") && $('.'+className+'>ul').hide();
ul.is(":hidden")?ul.show():ul.hide();
}
});
lis.on({
"click":function(){
span.html($(this).text());
}
});
$(document).click(function(event) {
var $ul=$(".search_more>ul");
if($ul.is(":visible") && $(event.target).parent().attr("class")!= "search_more"){
$ul.hide();
}
})
}
})
};
$('.search_more').showMenu();
});
</script>
</body>
</html>
浙公网安备 33010602011771号