java动态加载菜单栏_导航菜单特效-动态加载导航菜单

————————————————————

var arr = [];    //定义数据数组变量

//为菜单指定数据，包含了名字和URL

arr[0] = [{name:'菜单1',url:'#'},{name:'菜单11',url:'#'}];

arr[1] = [{name:'菜单2',url:'#'}];

arr[2] = [{name:'菜单3',url:'#'},{name:'菜单31',url:'#'},{name:'菜单32',url:'#'}];

//在jquery的加载回调函数里操作

$(function(){

//定义菜单的html内容，以ul打头

var html = '

• ';

//根据数组变量的长度，开始串联第一级菜单

for(var i=0;i

html += '

菜单'+(i+1)+'';

}

html += '

';

//第一级菜单组合完成

//开始组合二级菜单

html += '

';

//使用两次循环开始串联第二级菜单

for(var i=0;i

var a = arr[i];

html += '

• ';//使用sub_menu的ul

for(var j=0;j

var item = a[j];            //得到数据

//拼接字符

html += '

'+item['name']+'';

}

html += '';                //完成ul

}

html += '

';                    //完成全部的菜单html

$('body').append(html);                //挂接在body里

//开始指定菜单的功能

var menus = $('.menu a');        //得到菜单下所有的链接

for(var i=0;i

var m = menus[i];            //得到当前的链接

$(m).mouseover(function(){    //为菜单链接定义onmouover事件

//得到当前鼠标移入的菜单项的下标

var index = $('.menu a').index(this);

$('.sub_menu').hide();    //把所有的二级菜单隐藏

$('.sub_menu').eq(index).show();//显示当前下标的菜单项

//并且计算出这个菜单项应该处于的定位位置

$('.sub_menu').eq(index).css('margin-left',(100*index)+'px');

});

}

});

——————————————————————————

.menu{

list-style: none;

width: 300px;

margin: 10px auto 0;

padding:0;

}

.menu li{

float:left;

width:98px;

border:1px solid black;

}

.menu a{

color:black;

width:100%;

}

.menu a:hover{

background-color:pink;

}

.clearfix:after {

visibility: hidden;

display: block;

font-size: 0;

content: " ";

clear: both;

height: 0;

}

.sub_menu{

border:1px solid black;

width: 100px;

padding:0;

display: none;

margin:0;

float:left;

}

.sub_div{

width: 305px;

margin: 0 auto;

}

————————————————————————————————

————————————————————————————