1.slideMenu.jsp
<div class="allmenu">
<ul class="allwenu_ul">
<li>
<a href="javascript:void(0);" id="brand">BRAND COLLECTION</a>
<input id="zh_brand" type="hidden" value="品牌系列" />
<input id="en_brand" type="hidden" value="BRAND COLLECTION" />
<ul id="brand_ul">
<li><a href="javascript:void(0); " id="li1">BRAND LI</a>
<input id="zh_li1" type="hidden" value="品牌 子列表"/>
<input id="en_li1" type="hidden" value="BRAND LI"/>
</li>
<li><a href="javascript:void(0); " id="li7">BRAND LI</a>
<input id="zh_li7" type="hidden" value="品牌 子列表"/>
<input id="en_li7" type="hidden" value="BRAND LI"/>
</li>
</ul>
</li>
<li>
<a href="slideMenu2.jsp" id="meiwu">MEIWUXILIECOLLECTION</a>
<input id="zh_meiwu" type="hidden" value="美物系列" />
<input id="en_meiwu" type="hidden" value="MEIWUXILIE COLLECTION" />
<ul id="meiwu_ul">
<li><a href="javascript:void(0); " id="li2">MEIWU LI</a>
<input id="zh_li2" type="hidden" value="美物 子列表"/>
<input id="en_li2" type="hidden" value="MEIWU LI"/>
</li>
</ul>
</li>
<li>
<a href="javascript:void(0);" id="gaoji">GAODING COLLECTION</a>
<input id="zh_gaoji" type="hidden" value="高定系列" />
<input id="en_gaoji" type="hidden" value="GAODING COLLECTION" />
<ul>
<li><a href="javascript:void(0); " id="li3">GAOJI LI</a>
<input id="zh_li3" type="hidden" value="高级 子列表"/>
<input id="en_li3" type="hidden" value="GAOJI LI"/>
</li>
</ul>
</li>
</ul>
</div>
2.menu.css
ul li {
list-style-type: none;
}
.allmenu_ul {
width: 150px;
overflow-x: hidden;
}
.allmenu ul li a {
width: 150px;
color: grey;
font-size: 18px;
outline: 0;
text-decoration: none;
}
.allmenu ul li ul{
display: none;
}
3.menu.js
$(document).ready(function() {
/*$(".allmenu a").mouseover(function() {
$(this).html('品牌系列');
});
$(".allmenu a").mouseleave(function() {
$(this).html("BRAND COLLECTION");
});*/
$(".allmenu a").hover(
function(){
$(this).html($("#zh_"+this.id).val());
},function() {
$(this).html($("#en_"+this.id).val());
})
$("#brand").mousedown(function() {
if($("#brand_ul").css('display')=='block'){
$("#brand_ul").slideUp();
}else{
$("#brand_ul").slideDown();
}
})
//meiwu有链接地址
$("#meiwu").mousedown(function() {
if($("#meiwu_ul").css('display')=='block'){
$("#meiwu_ul").slideUp();
}else{
$("#meiwu_ul").slideDown();
}
})
if(location.href.indexOf('slideMenu2.jsp')>0){
$("#meiwu_ul").css({'display':'block'});
$("#meiwu").attr("href","javascript:void(0);");
$("#meiwu").css("color","#000000");
}
})
可以根据页面url设置样式
$().ready(function() {
var request = new Object();
request = getRequest();
})
// newarrival
if (request['tagIds'] == 2) {
$newarrival.css({'color' : '#000000'});
var $newArrivalUl = $("#newarrival_ul");
if ($newArrivalUl.css('display') == 'block') {
$newArrivalUl.css({
'display' : 'none'
});
$newarrival.attr("href", moshop.base
+ "/product/list.jhtml?tagIds=2");
} else {
$newarrival.attr("href", "javascript:;");
$newArrivalUl.css({
'display' : 'block'
});
}
}
/**
* 获取url参数方法
*/
function getRequest() {
var url = location.search; // 获取url中"?"符后的字串
var theRequest = new Object();
if (url.indexOf("?") != -1) {
var str = url.substr(1);
strs = str.split("&");
for (var i = 0; i < strs.length; i++) {
theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
}
}
return theRequest;
}