今次要介紹的, 是一個小小的小Menu, 所有東西是配合JS + CSS 做的. Menu 會在使用者的左面出現, 當使用者mouseover 時, 便會跳出來, 當使用者mouse 移開, menu 亦會移走.
之前講解過如何用element 隱形, 今次就說說如何令element 移走. 原理大同小異, 都是轉CSS 的Attribute.
首要先要知道, 所謂的彈出Menu 原理其實不是真的彈出了, 而是將其中一部份的東西, 移到使用者看不到的地方. 電腦的x, y 座標都是由左上角數起的, 所以, 當x, y 移到去負數的時間, 使用者便會
看不到. 但是, 要留一點位置, 讓使用者再次mouseover, 令mouse 回到x 是0 的位置, 就像有彈出來的效果了.
Javascript 的部份:
<script type=”text/javascript”>function setMenu(hide){var tempMenu = document.getElementById(“lowBMenu”);//找出要變更的Menu名if(hide){//如果縮了入去的話tempMenu.style.left = 0 + ‘px’;//彈出來}else{tempMenu.style.left = -30 + ‘px’;//縮回}} </script>
HTML+CSS:
<!– menu is the Div element–>
<div id=“lowBMenu”>
onmouseover=”setMenu(true)”
onmouseout=”setMenu(false)”
style=”width:60px;height:100px;
position:absolute;left:-30px;
top:50px;z-index:1001;
background-color:orange”>
<!– CSS setting the menu–>
<div align=“right”>
<table><tbody><!–Menu Content–><tr><td>M</td></tr><tr><td>E</td></tr><tr><td>N</td></tr><tr><td>U</td></tr></tbody></table>
</div>
</div>
