策略：数据库就一张表，前端查询出所有的可显示的菜单，在前端进行循环展示。

1，数据库表的设计

CREATE TABLEsys_menu (

idINT NOT NULLAUTO_INCREMENT,

nameVARCHAR(64) NOT NULL,

urlVARCHAR(255),

pidINT NOT NULL DEFAULT 0,

isLeafTINYINT NOT NULL DEFAULT 1COMMENT'0表示不是叶子，1表示是叶子',

statusTINYINT NOT NULL DEFAULT 1COMMENT'0表示禁用，1表示启用',

seqTINYINT NOT NULL DEFAULT 0COMMENT'同级中的顺序，0-n，从上到下',PRIMARY KEY(id)

);

把菜单当作一个多叉树，root节点为虚拟节点，id为0。第一层节点表示一级菜单，以此类推。其中，isLeaf表示该菜单是不是叶子节点。

简单的填充数据如下所示：

2，查询所有菜单的接口(略，简单的sql查询)

需要过滤status=0，也就是禁用的菜单。

3，前端展示

3.1 html代码和css样式

body中就是如下简单的代码

css样式(从网上随便找的)

a{text-decoration:none;

}ul, li{list-style:none;margin:0;padding:0;

}

/*定义菜单*/.Menue li{background:#111;color:#fff;height:30px;line-height:30px;position:relative;float:left;margin-right:5px;width:100px;text-align:center;font-family:Arial, Helvetica, sans-serif;

}.Menue li a{color:#fff;font-size:14px;display:block;

}

/*下拉菜单样式*/ul.sub_menu{position:absolute;width:100px;display:none;z-index:999;

}.Menue li ul.sub_menu li{background:none;color:#555;font-size:12px;border-bottom:1px #333 solid;position:relative;width:100px;height:30px;

}.Menue li ul.sub_menu li.last{border-bottom:none;

}

/*js会对最后一个li添加该class，去掉border-bottom效果*/.Menue li ul.sub_menu li a{background:#222;color:#888;display:block;height:30px;

}.Menue li ul.sub_menu li a:hover, .Menue li ul.sub_menu li a.now{background:#f90;color:#fff;

}.Menue li.now, .Menue li.current{background:#f60;color:#fff;

}

/*如果有下拉菜单添加的class*/.hasmenu{background:url(arrow.png) no-repeat right;padding-right:15px;

}

/*主导航箭头向下*/.Menue li a.hasmenu{background:url(arrow.png) no-repeat right;padding-right:15px;background-position:right -30px;

}

/*下拉菜单箭头向右*/.Menue li ul.sub_menu li a.hasmenu{background:#222 url(arrow.png) no-repeat right top;

}.Menue li ul.sub_menu li a.hasmenu:hover{background:#f90 url(arrow.png) no-repeat right top;color:#fff;

}

3.2 jquery ajax获取所有的菜单数据

$.ajax({

type:"GET",

url:"/menu/getMenus.do",

dataType:"json",

success:function(result) {if (result.status > 0) {//获取到菜单数据，进行展示

//1,展示顶级菜单

var list =result.body;vari;for (i = 0; i < list.length; i++) {//console.log(typeof list[i].url == 'undefined');//如果url不存在，则为undefined，应该用typeof判断

}//$(".Menue").html("");

$(".Menue").html(showFirstLevelMenu(list));

console.log(showFirstLevelMenu(list))//在菜单全部显示后，增加hover件事

addHover();

}else{

alert(result.message);

}

},

error:function() {

alert("服务器故障，请刷新或稍后重试!");

}

})

当获取到数据后，将数据拼装成节点html数据，设置到class=Menu的ul中。然后对动态添加的html代码段加上hover事件

$(".Menue").html(showFirstLevelMenu(list));

//在菜单全部显示后，增加hover事件

addHover();

3.3 递归拼接

使用递归调用实现拼接子菜单

functionshowFirstLevelMenu(list) {//class = Menu_li

//遍历list找到

var menu = "";var subList = newArray();vari;for (i = 0; i < list.length; i++) {if (list[i].pid == 0) {

subList.push(list[i]);

}

}

subList.sort(function(a, b) {return a.seq - b.seq;//从小到大排序

});

alert(subList.length)for (i = 0; i < subList.length; i++) {

menu+= '

' + showSubMenu(list, subList[i]) + '';

}returnmenu;

}functionshowSubMenu(list, menuInfo) {//class = sub_menu

var menu = '' + menuInfo.name + '';if (menuInfo.isLeaf == 0) {//有子菜单

var subList = newArray();vari;for (i = 0; i < list.length; i++) {if (list[i].pid ==menuInfo.id) {

subList.push(list[i]);

}

}if (subList.length != 0) {

subList.sort(function(a, b) {return a.seq - b.seq;//从小到大排序

});

menu+= '

• ';for (i = 0; i < subList.length; i++) {

menu+= '

' + showSubMenu(list, subList[i]) + '';

}

menu+= '

';

}

}returnmenu;

}

3.4 hover事件(网上粘贴的)

functionaddHover() {//为导航设置默认高亮 与本菜单无关

$("ul.Menue li.Menue_li:eq(0)").addClass("current")/*jquery menu 开始*/

//为子菜单的最后一个li添加样式，适合为li添加下划线时去除最后一个的下划线

$(".sub_menu").find("li:last-child").addClass("last")//遍历全部li，判断是否包含子菜单，如果包含则为其添加箭头指示状态

$(".Menue li").each(function() {if ($(this).find("ul").length != 0) {

$(this).find("a:first").addClass("hasmenu")

}

})//$(".Menue li").hover(function() {

$(this).addClass("now");var menu = $(this);

menu.find("ul.sub_menu:first").show();

},function() {

$(this).removeClass("now");

$(this).find("ul.sub_menu:first").hide();

});var submenu = $(".sub_menu").find(".sub_menu")

submenu.css({left:"100px", top: "0px"})

$(".sub_menu li").hover(function() {

$(this).find("a:first").addClass("now")

$(this).find("ul:first").show();

},function() {

$(this).find("a:first").removeClass("now")

$(this).find("ul:first").hide()

});/*jquery menu 结束*/}

3.5 最终页面显示结果

=====>>

=====>>