寻道

探寻程序之道，软件之道，生存之道，生活之道及生命之道。

BlogJava 首页 新随笔 联系 聚合 管理
  195 Posts :: 1 Stories :: 342 Comments :: 0 Trackbacks
按钮按下效果的左侧导航栏实现
在“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 

以上
posted on 2008-05-23 13:16 sitinspring 阅读(387) 评论(0)  编辑  收藏 所属分类: HTML,CSS&JS 、Web开发

标题  
姓名  
主页
验证码 *  
内容(请不要发表任何与政治相关的内容)  
  登录  使用高级评论  新用户注册  返回页首  恢复上次提交      
 
 
相关链接:
网站导航:

sitinspring(http://www.blogjava.net)原创,转载请注明出处.