| 网站首页 | 业界新闻 | 小组 | 威客 | 人才 | 下载频道 | 博客 | 代码贴 | 在线编程 | 编程论坛
欢迎加入我们,一同切磋技术
用户名:   
 
密 码:  
共有 736 人关注过本帖
标题:初学,求高手修改下拉菜单一段js代码及CSS
取消只看楼主 加入收藏
zlbpaul
Rank: 1
等 级:新手上路
帖 子:1
专家分:0
注 册:2010-11-24
结帖率:0
收藏
已结贴  问题点数:20 回复次数:0 
初学,求高手修改下拉菜单一段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();
    });


});

-->
搜索更多相关主题的帖子: CSS 菜单 代码 初学 
2010-11-24 23:04
快速回复:初学,求高手修改下拉菜单一段js代码及CSS
数据加载中...
 
   



关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.020480 second(s), 9 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved