注册 登录
编程论坛 JavaScript论坛

初学,求高手修改下拉菜单一段js代码及CSS

zlbpaul 发布于 2010-11-24 23:04, 736 次点击
只有本站会员才能查看附件,请 登录

菜单原来是下拉菜单,现在要修改成上拉式的菜单,向上弹出的,方向向上。
只有本站会员才能查看附件,请 登录

模版文件一: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();
    });


});

-->
2 回复
#2
sclorg2010-11-25 17:09
$("div#subdorpmenu_"+n)[0].style.top=$("#"+obj)[0].offsetTop+$("#"+obj)[0].offsetHeight+"px";
---->
$("div#subdorpmenu_"+n)[0].style.bottom=$("#"+obj)[0].offsetBottom+$("#"+obj)[0].offsetHeight+"px";
#3
欲与天斗2010-11-25 19:33
路过
1