[javascript]Menu Bar

yku javascript, 程式

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

構想

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

（看需求），以上二者均設定float:left

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

position:relative;
display:none;
z-index:100;
top:0px;
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請自行檢視原始碼抓吧！

發表迴響