[javascript]Menu Bar

這是個很簡單的JavaScript的Menu Bar只可以由左向右顯示

構想

利用二個Div,第一個Div檔顯示Menu名字用的,第二個把寬高跟都設到最小

(看需求),以上二者均設定float:left

再來把滑鼠移入時要顯示的資料利用Div 放在上面的第二個Div 裡,設定其style

position:relative;

display:none;

z-index:100;

toppx;

left:0px;

利用第二個Div定位來顯示次Menu內容




 

再來在最外面加上一個li 或Div來控制onmouseover 時要把次Menu display出來

onmouseout則隱藏起來。

ps.為了讓Ie 也支援一定要加宣告doc type

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

大概的原始碼如下:

<li style="clear:both;height:18px;width:110px;" onmouseover="document.getElementById('menu1').style.display='block';" onmouseout="document.getElementById('menu1').style.display='none';">
<div style="float:left;width:100px;">Menu1</div>
<div style="float:left;height:1px;width:1px;">
<div id="menu1" style="position:relative;display:none;z-index:100;top:0px;left:0px;width:500px;height;500px;background-color:#ab0012">
<a href="http://blog.yslifes.com" target="_blank">Test World!</a><br/>
<a href="http://blog.yslifes.com" target="_blank">Test World!</a><br/>
<a href="http://blog.yslifes.com" target="_blank">Test World!</a><br/>
<a href="http://blog.yslifes.com" target="_blank">Test World!</a><br/></div>

</div></li>

展示畫面

2

操作網址

http://www.yslifes.com/MyTest/JSMenuBar/index.html

source請自行檢視原始碼抓吧!

發表迴響