初学,求高手修改下拉菜单一段js代码及CSS
菜单原来是下拉菜单,现在要修改成上拉式的菜单,向上弹出的,方向向上。
11.rar
(1.68 KB)
模版文件一:tpl_dropdownmenu.htm
<!-start->
<link href="images/dropdownmenu/{#tempcolor#}.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="{#CP#}js/dropdownmenu.js"></script>
<div class="dropdownmenu">
<!-start->
<!-menu->
<div id="dorpmenu_{#n#}" class="dorpmenu">
<a href="{#menuurl#}" class="dorpmenu">{#menu#}</a>
</div>
<div id="subdorpmenu_{#n#}" class="subdorpmenu">
{#smenustr#}
</div>
<!-menu->
<!-list->
<li id="dropmenuli_{#id#}" ><a href="{#menuurl#}" class="subdropmenu">{#menu#}</a></li>
<!-list->
<!-end->
</div>
<!-end->
CSS文件:A.css
.dropdownmenu{
clear:both;
margin:0;
white-space:nowrap;
overflow:hidden;
width:100%;
height:28px;
color:#fff;
background-color:#2266aa;
}
.dorpmenu{
float:left;
width:100px;
color:#fff;
border-left:1px solid #6796c4;
line-height:28px;
text-align:center;
margin-left:-1px;
}
a.dorpmenu:link,a.dorpmenu:visited,a.dorpmenu:active {
color: #fff;
display:block;
text-decoration: none;
line-height:28px;
}
a.dorpmenu:hover {
color: #fff;
text-decoration: none;
background-color:#477fb9;
line-height:28px;
}
div.subdorpmenu{
display:none;
position:absolute;
}
div.subdorpmenu ul{
background-color:#2266aa;
border:1px #6796c4 solid;
border-top:0px;
width:99px;
}
div.subdorpmenu ul.firstdrop{
width:98px;
}
div.subdorpmenu li{
padding:0px;
list-style-type:none;
text-align:center;
line-height:28px;
height:28px;
border-top:1px #6796c4 solid;
}
div.subdorpmenu li.current{
height:28px;
background-color:#477fb9;
}
div.subdorpmenu a,a.subdorpmenu:link,a.subdropmenu:visited,a.subdorpmenu:active{
display:block;
color: #fff;
text-decoration: none;
font:12px/28px Arial;
}
a.subdorpmenu:hover {
display:block;
color: #fff;
text-decoration: none;
font:12px/28px Arial;
}
JS文件:dropdownmenu.js
<!--
//下拉菜单
$(document).ready(function() {
var getObj = $('div.dorpmenu');
getObj.each(function(id) {
var obj = this.id;
var n=parseInt(obj.substr(9));
$("#"+obj).mouseover(function () {
if($("div#subdorpmenu_"+n)[0].style.display!="block"){
$("div.subdorpmenu").hide();
}
$("div#subdorpmenu_"+n)[0].style.top=$("#"+obj)[0].offsetTop+$("#"+obj)[0].offsetHeight+"px";
$("div#subdorpmenu_"+n).show();
if(id==0){
$("div#subdorpmenu_"+n).find("ul")[0].className="firstdrop";
$("div#subdorpmenu_"+n)[0].style.left=$("#"+obj)[0].offsetLeft+1 + "px";
}else{
$("div#subdorpmenu_"+n)[0].style.left=$("#"+obj)[0].offsetLeft + "px";
}
$("div#subdorpmenu_"+n).find("li").mouseout(function () {
this.className="";
});
$("div#subdorpmenu_"+n).find("li").mouseover(function () {
this.className="current";
$("div.subdorpmenu").hide();
$("div#subdorpmenu_"+n).show();
});
});
$("#"+obj).mouseout(function () {
//$("div.subdorpmenu").hide(); //ie6不兼容
});
});
$("body").click(function () {
$("div.subdorpmenu").hide();
});
});
-->