标签：
html代码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>菜单选项卡</title>
<link rel="stylesheet" type="text/css" href="xd_menu.css">
<script src="jquery.min.js" type="text/javascript"></script>
<script src="xd_menu.js" type="text/javascript"></script>
<script>
$(function () {
var menuData = [
{ id : 1,pid : null,n : ‘菜单名称1‘,url : ‘#‘},
{ id : 2,pid : null,n : ‘菜单名称2‘,url : ‘#‘},
{ id : 3,pid : null,n : ‘菜单名称3‘,url : ‘#‘},
{ id : 4,pid : null,n : ‘菜单名称4‘,url : ‘#‘},
{ id : 5,pid : null,n : ‘菜单名称5‘,url : ‘#‘},
{ id : 6,pid :3,n : ‘菜单名称6‘,url : ‘#‘},
{ id : 7,pid : 3,n : ‘菜单名称7‘,url : ‘#‘},
{ id : 8,pid : 3,n : ‘菜单名称8‘,url : ‘#‘},
{ id : 9,pid :3,n : ‘菜单名称9‘,url : ‘#‘},
{ id : 10,pid :9,n : ‘菜单名称10‘,url : ‘#‘},
{ id : 11,pid : 9,n : ‘菜单名称11‘,url : ‘#‘},
{ id : 12,pid :9,n : ‘菜单名称12‘,url : ‘#‘},
{ id : 13,pid :9,n : ‘菜单名称13‘,url : ‘#‘},
{ id : 14,pid : 13,n : ‘菜单名称14‘,url : ‘#‘},
{ id : 15,pid :1,n : ‘菜单名称15‘,url : ‘#‘},
]
$("#xd_dy_menu1").menu();
$("#xd_dy_menu2").menu();
$("#xd_dy_menu3").menu({
type : 0,
data : menuData
});
})
</script>
</head>
<body><div class="xd_menu"> <!-- 第一个--> <div class="dy_menu1" id="xd_dy_menu1"> <ul class="dy_menu1_ul_1"> <li class="li_has_children"> <a href="#">一级菜单1</a>
<ul class="ve_menu">
<li><a href="#">二级菜单1</a></li>
<li><a href="#">二级菜单1</a></li>
<li><a href="#">二级菜单1</a></li>
<li><a href="#">二级菜单1</a></li>
<li><a href="#">二级菜单1</a></li>
</ul>
</li>
<li><a href="#">一级菜单2</a></li>
<li><a href="#">一级菜单3</a></li>
<li class="li_has_children">
<a href="#">一级菜单4</a>
<ul class="ve_menu">
<li><a href="#">二级菜单1</a></li>
<li><a href="#">二级菜单2</a></li>
<li class="li_has_children">
<a href="#">二级菜单3</a>
<ul class="ve_menu offset">
<li><a href="#">三级菜单1</a></li>
<li><a href="#">三级菜单2</a></li>
<li><a href="#">三级菜单3</a></li>
<li><a href="#">三级菜单4</a></li>
</ul>
</li>
<li><a href="#">二级菜单4</a></li>
</ul>
</li>
<li><a href="#">一级菜单5</a></li>
</ul>
</div>
<!-- 第二个-->
<div class="dy_menu1" id="xd_dy_menu2">
<ul class="dy_menu1_ul">
<li><a href="#">一级菜单1</a></li>
<li><a href="#">一级菜单2</a></li>
<li><a href="#">一级菜单3</a></li>
<li class="li_has_children">
<a href="#">一级菜单4</a>
<ul class="dy_menu1_ul">
<li><a href="#">二级菜单1</a></li>
<li><a href="#">二级菜单2</a></li>
<li class="li_has_children">
<a href="#">二级菜单3</a>
<ul class="dy_menu1_ul offset">
<li><a href="#">三级菜单1</a></li>
<li><a href="#">三级菜单2</a></li>
<li><a href="#">三级菜单3</a></li>
<li><a href="#">三级菜单4</a></li>
</ul>
</li>
<li><a href="#">二级菜单4</a></li>
</ul>
</li>
<li><a href="#">一级菜单5</a></li>
</ul>
</div>
<!-- 第三个-->
<div id="xd_dy_menu3" class="dy_menu1"></div>
</div>
</body>
</html>
JS代码
/**
* Created by maxiaodan on 2016/2/29.
*/
(function($){
$.fn.menu = function (options) {
if (typeof options != ‘undefined‘ && options.constructor === Array) options = {data:options};
var opts = $.extend({}, $.fn.menu.defaults,options);
var _tempMenuData = [];
function getLevel(id) {
var _level = 0;
var _o = getMenuData(id);
while (_o != null) {
_level ++;
_o = getMenuData(_o.pid);
}
return _level;
}
function getMenuData(id) {
for (var i=0;i<opts.data.length;i++) {
if (opts.data[i].id == id) {
return opts.data[i];
}
return null;
}
}
function getHtml (pid) {
var li_len = getData(pid);
if (li_len.length == 0) return null;
var _ul = $(‘<ul></ul>‘);
$.each(li_len, function (i,_d) {
var _children = getHtml(_d.id);
var _li = $(‘<li></li>‘).appendTo(_ul);
$(‘<a href="‘+_d.url+‘"></a>‘).html(_d.n).appendTo(_li);
if (_children != null) {
_li.addClass(‘li-has-children‘);
_children.appendTo(_li);
_li.bind({
mouseover : function(){
_children.show();
},
mouseout : function () {
_children.hide();
}
})
}
})
if ( pid == null && opts.type == 1 ) {
_ul.addClass(‘dy_menu1_ul_1‘);
} else {
var _level = getLevel(pid);
_level > 0 && _ul.hide();
_ul.addClass(‘dy_menu1_ul offset‘);
//if (_level > opts.type) _ul.addClass(‘offset‘);
}
return _ul;
}
function getData(pid) {
var _data = [];
_tempMenuData = $.grep(_tempMenuData, function (_d) {
if (_d.pid == pid) {
_data.push(_d);
return true;
}
return false;
},true);
return _data;
}
return this.each(function () {
var menu = $(this);
menu.addClass(‘dy_menu1‘);
if (opts.data != null && opts.data.length > 0) {
$.merge(_tempMenuData, opts.data);
menu.append(getHtml(null));
} else {
menu.find(‘.li_has_children‘).each(function () {
var self = $(this);
var se_ul = self.children(‘ul‘);
se_ul.hide();
self.bind({
mouseover: function () {
se_ul.show();
},
mouseout: function () {
se_ul.hide(); } }) }) } }) $.fn.menu.defaults = { type : 1, data : null } }})(jQuery);
css代码
*{padding: 0px;margin: 0px;}
li{list-style: none;}
a{text-decoration: none;color: #000;}
.xd_menu {width: 100%;height: auto;margin-top:50px;}
.dy_menu1 ul{width: 100%;height: 30px;line-height: 30px;}
.dy_menu1 ul li{text-align: center;font-size: 14px;color: #000;list-style: none;width: 100px;border:1px solid #dcdcdc;position: relative;}
#xd_dy_menu1 ul li{float: left;}
.dy_menu1 ul li a{display: inline-block;width:100%;height: 30px;color: #000;}
.dy_menu1 ul li a:hover{background: #777777;color: #fff;}
.dy_menu1 ul li.li_has_children{position: relative;}
.dy_menu1 ul li ul{position: absolute;display: none;z-index: 100;background: #fff;}
#xd_dy_menu1 ul li ul.offset {left:100px;top:-1px;}
#xd_dy_menu1 {margin-top:20px;}
#xd_dy_menu2 {margin-top: 50px;}
#xd_dy_menu2 ul li ul{left: 100px;top:-1px;}
#xd_dy_menu3 {margin-top:200px;margin-bottom: 100px;}
#xd_dy_menu3 ul li ul.offset {left:100px;top:-1px;}
注：此篇文章不是原著，感觉不错，分享出来
css代码css代码标签：
原文地址：http://www.cnblogs.com/maxiaodan/p/5228288.html
