当前位置:编程学习 > JAVA >>

菜单的实现原理

本来要用GWT实现一个菜单,最后还是逃不开要理解一下CSS和HTML。
看了下面代码应该就能明白其中原理了。
 
[java] 
<html>  
<head>  
<title>Menu example</title>  
<style>  
*{  
    padding:0px;   
    margin:0px;  
    border:0px;  
}  
.menuBarPanel{  
    border:5px solid red;  
    width:99%;  
}  
.menuPanel{  
    width:250px;  
    height:200px;  
    border:5px solid black;  
    background:white;  
    display:none;  
}  
.farRight{  
    position:absolute;  
    right:1%;  
    z-index:2;    
}  
.contentPanel{  
    width:99%;  
    border:5px solid blue;  
    background:yellow;  
    position:absolute;  
}  
</style>  
<script>  
function show(){  
    document.getElementById('menu').style.display='block';  
}  
function hide(){  
    document.getElementById('menu').style.display='none';  
}  
</script>  
</head>  
<body>  
    <div id="menuBar" class="menuBarPanel">  
        <table style="width:100%;">  
            <colgroup>  
                <col style="width:50%;">  
                <col style="width:50%;">  
            </colgroup>  
            <tr>  
                <td></td>  
                <!--How to locate the buttons on the far right.-->  
                <td style="text-align:right;">  
                    <div>  
                        <input type="button" value="Hide" onClick="javascript:hide();"/>  
                        <input type="button" value="Show" onClick="javascript:show();"/>                            
                    </div>  
                </td>  
            </tr>  
            <tr>  
                <td></td>  
                <td>  
                    <!--How to locate the menu on the far right.-->  
                    <div class="farRight">  
                        <div id="menu" class="menuPanel">Some options here!</div>  
                    </div>  
                </td>  
            </tr>  
        </table>  
    </div>  www.zzzyk.com
    <div id="content" class="contentPanel">  
        <p>A</p>  
        <p>B</p>  
        <p>C</p>  
        <p>D</p>  
        <p>E</p>  
    </div>  
</body>  
</html>  
补充:软件开发 , Java ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,