【菜单的实现原理】

最新推荐文章于 2021-05-30 20:53:39 发布

weixin_34318326

最新推荐文章于 2021-05-30 20:53:39 发布

阅读量257

点赞数

原文链接：http://www.cnblogs.com/qq12345678/p/3265927.html

版权

本来要用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>
    
    <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>
    
    <div class="farRight">
    <div id="menu" class="menuPanel">Some options here!</div>
    </div>
    </td>
    </tr>
    </table>
    </div>
    <div id="content" class="contentPanel">
    <p>A</p>
    <p>B</p>
    <p>C</p>
    <p>D</p>
    <p>E</p>
    </div>
    </body>
    </html>