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代码
时间： 2024-10-13 21:30:46