left_menu js+css+picture

left_menu.js

function StringBuffer() {  
    this.strings = new Array;  
}  
 
StringBuffer.prototype.append = function (str) {  
    this.strings.push(str);  
}  
 
StringBuffer.prototype.toString = function() {  
    return this.strings.join("");  
}

function getMenu()
{
    var oBuffer = new StringBuffer();
    oBuffer.append("<dl id='leftMenu0'>");
    oBuffer.append("    <dt id='leftMenu00'>一级菜单一</dt>");
    oBuffer.append("    <dd id='leftMenu01'><a href='#>二级菜单</a></dd>");

    oBuffer.append("    <dd id='leftMenu01'><a href='#>二级菜单</a></dd>");

    oBuffer.append("    <dd id='leftMenu01'><a href='#>二级菜单</a></dd>");
   

    oBuffer.append("</dl>");
    oBuffer.append("<dl id='leftMenu1'>");
    oBuffer.append("    <dt id='leftMenu10'>一级菜单二</dt>");
    oBuffer.append("    <dd id='leftMenu11'><a href='#'>发布任务</a></dd>");
    oBuffer.append("    <dd id='leftMenu12'><a href='#l'>我发布的任务</a></dd>");
    oBuffer.append("    <dd id='leftMenu13'><a href='#'>我参与的任务</a></dd>");
    oBuffer.append("</dl>");
    oBuffer.append("<dl id='leftMenu2'>");
    oBuffer.append("    <dt id='leftMenu20'>一级菜单三</dt>");
    oBuffer.append("    <dd id='leftMenu21'><a href='#'>发布创意</a></dd>");
    oBuffer.append("    <dd id='leftMenu22'><a href='#'>我发布的创意</a></dd>");
    oBuffer.append("</dl>");
    oBuffer.append("<dl id='leftMenu3'>");
    oBuffer.append("    <dt id='leftMenu30'>一级菜单四</dt>");
    oBuffer.append("    <dd id='leftMenu31'><a href='#'>发布资讯</a></dd>");
    oBuffer.append("    <dd id='leftMenu32'><a href='#'>我发布的资讯</a></dd>");
    oBuffer.append("</dl>");
    oBuffer.append("<dl id='leftMenu4'>");
    oBuffer.append("    <dt id='leftMenu40'>一级菜单五</dt>");
    oBuffer.append("    <dd id='leftMenu41'><a href='../favorite/lookUpFavorite.html'>我的收藏</a></dd>");
    oBuffer.append("</dl>");
    return oBuffer.toString();
}


$(document).ready(function() {
    var menuId = "#leftMenu";
    $(menuId)[0].innerHTML=getMenu();

    //所有二级菜单隐藏
    $(menuId).find("dd").hide();
    $(menuId).find("dl:first").find("dd").show();
     $(menuId).find("dl:first").find("dt").addClass("selected");

    $(menuId).find("dt").hover(function(){ $(this).addClass("hover")}, function(){$(this).removeClass("hover") })
    .click(function(){
           
        if($(this).parent().find("dd").get(0).style.display == "block"){
                $(this).parent().find("dd").hide();
                $(this).removeClass("selected");
            } else {
                $("dt").removeClass("selected")
                $("dd").hide();
                $(this).addClass("selected");
                $(this).parent().find("dd").show();
            }
           
    })
    $(menuId).find("a").focus(function(){$(this).get(0).blur()})
    //二级菜单点击样式
    $(menuId).find("dd").click(function(){ $("dd").removeClass("focus");$(this).addClass("focus") });

})


function selectMenu(menuid,subtitleid,submenuid)
{
    var menuId = "#leftMenu";
    $(menuId).find("dd").hide();
    $(menuId).find("dt").removeClass("selected");


    var menuObj = document.getElementById(menuid);
    var ddObj = menuObj.getElementsByTagName("dd");

    ddObj[0].style.display ="block";
    for(i=0;i<ddObj.length;i++)
    {
        ddObj[i].style.display = "";               
    }

    document.getElementById(subtitleid).className="selected";
    document.getElementById(submenuid).className ="focus";
   
}

left_menu.css

@charset "utf-8";
@import url("common.css");
#leftMenu{
     float:left;
     overflow: hidden;
     width:175px;
     border-right:1px #aad095 solid;
     padding-top:5px;
     
}
#leftMenu dl{
    background:#fff;
    margin:2px;
   
}
#leftMenu dt{
    height:30px;
    cursor:pointer;
    background:#fff url(../images/perMenuBg.gif) no-repeat left top;
    color:#2f688c;
    font-weight:700;
    text-align:left;
    line-height:28px;
    padding-left:30px;
    white-space:nowrap;
    padding-top:6px;
    font-size:14px;
}


#leftMenu dt.hover{
    background:#fff url(../images/perMenuBg_on.gif) no-repeat left top;
    color:#1f8107;

}

#leftMenu dt.selected{
    background:#fff url(../images/perMenuBg_on.gif) no-repeat left top;
    color:#1f8107;
    font-weight:bold;
}


/*#leftMenu dt a span,#leftMenu dt a{
    display:block;
    height:25px;
}*/
#leftMenu dd{
    background:#f6fbfe url(../images/sub_icon.gif) no-repeat 10px center;
    margin-left:3px;
    height:28px;
    line-height:28px;
   
    width:160px;
    text-align:left;
}
#leftMenu dd a{
    background:url(../img/arrow.gif) no-repeat 5px 5px;
    padding-left:25px;
    display:block;
    line-height:28px;
    height:100%;
    color:#666;
}
#leftMenu dd a:hover{
    background:#e2ffdb url(../images/sub_icon.gif) no-repeat 10px center ;
    color:#098b14;
    }

#leftMenu img{
    vertical-align:middle;
    margin-right:4px;
    height:32px;

}

#leftMenu dd.focus{
    background:#fff url(../images/sub_icon.gif) no-repeat 10px center;
    width:170px;
    border:1px #aad095 solid;
    border-right:0px;
    position:relative;
    z-index:10000;
    margin-right:-1px;
    }
#leftMenu dd.focus a{
    color:#1f8107;
    font-weight:bold;
}

 

left_memu  picture

 

../images/sub_icon.gif

../img/arrow.gif

../images/perMenuBg_on.gif

left_menu.html

 

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/snp_leftMenu.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/leftMenu.js"></script>


<script type='text/javascript'>
    // 初始化菜单选择项
    $(document).ready(function() {selectMenu('leftMenu2','leftMenu20','leftMenu23');})
</script>

<title>个人资料</title>
</head>

<body >


    <!--左边菜单开始-->
    <div id="leftMenu" class="equal">           
    </div>
    <!--左边菜单结束-->


    <!--右边开始-->
    <div id="personMain" class="equal"></div>
    <!--右边结束-->


</body>
</html>