按钮按下效果的左侧导航栏实现

按钮按下效果的左侧导航栏实现

在“ http://neic.usgs.gov/neis/qed/”看到了一个不错的按钮按下效果的左侧导航栏，自己模拟实现了一个，效果如下，目前在ie下效果可以，但FireFox下走形，以后再调吧：


一。左菜单右内容的实现。
本例中使用一个虚表格实现了左右两列的效果，代码如下：

< body >
     < div  id ="bodyDiv" >
         < div  id ="header" >
             < jsp:include  page ="/web/page/branch/header.jsp" />
         </ div >
         < div  id ="content" >
             < table  border ="0"  cellspacing ="0"  cellpadding ="0"  width ="100%"  height ="100%" >
                 < tr >
                     < td  width ="200"  valign ="top"  bgcolor ="#d4e4f0" >
                         < div  id ="leftMenu" >
                             < jsp:include  page ="/web/page/branch/menubar.jsp" />
                         </ div >
                     </ td >
                     < td >
                         < div  id ="rightContent" >
                            内容。。。。
                         </ div >
                     </ td >
                 </ tr >
             </ table >
         </ div >
         < div  id ="footer" >
             < jsp:include  page ="/web/page/branch/footer.jsp" />
         </ div >
     </ div >
</ body >

二。CSS部分设置代码。

body {} {
    margin:2px;
    text-align:center;
    background:#7b869a;
}

#bodyDiv {} {
    margin:0 auto;
    text-align:left;
    background:#ffffff;
}

#header {} {
    height:100px;
}

#content {} {
    height:500px;
}

#rightContent {} {
    height:500px;
    padding:20px;
}

#leftMenu {} {
    height:500px;
    background:#d4e4f0;
    border-bottom:0px solid #000000;
    border-left:0px solid #000000;
    border-right:0px solid #000000;
    border-top:0px solid #bad5e8;
}

#footer {} {
    clear:both;
    background:#7b869a;
}

ul.pressEffectUl {} {    
    color: #000000; 
    margin:0px;    
    padding:0px;
    list-style-type:none;
    background:#d4e4f0;
}

ul.pressEffectUl a {} {
    padding-left:20px;
    text-decoration:none;
    color:#8d4f10;
    width:200px;
    border-left:0px solid #000000;
    border-right:0px solid #000000;
    border-top:1px solid #ffffff;
    border-bottom:1px solid #bad5e8;
}

ul.pressEffectUl a.currentLink {} {
    padding:2px;
    padding-left:20px;
    text-decoration:none;
    color:#000000;
    background:#ffffff;
    width:200px;
    border-left:0px solid #000000;
    border-right:0px solid #000000;
    border-top:1px solid #ffffff;
    border-bottom:0px solid #bad5e8;
}

ul.pressEffectUl a:hover {} {
    color:#000033;
    background:#e1effa;
    border-left:0px solid #000000;
    border-right:0px solid #000000;
    border-top:1px solid #e1effa;
    border-bottom:1px solid #e1effa;
}

h1  {} {
    font-size: 18px; 
    margin: 10px 0px 5px; 
    color: #eeeeee; 
    text-align: center;
}

h2  {} {
    font-size: 24px; 
    margin: 10px 0px 5px; 
    color: #000000; 
    text-align: center;
}

.feedbackShow {} {
visibility: visible;
}

.feedbackHide {} {
visibility: hidden;
}

三。代码下载；
http://www.blogjava.net/Files/sitinspring/PressButtonMenu20080523130024.rar 

以上