此練習試作一個可展開與隱藏的選單。開始時只顯示第一層主選單，點選主選單項目，會展開第二層選單；再點選時，會隱藏子選單。你也可以用 CSS 作 展開式選單，其顯示效果不同，可以依需要選用最適合的方法。此練習使用的元素與方法有：
- UL：建立一個沒有編號的清單。
- getElementById()：利用 ID 讀取元素物件。
- getElementsByTagName()：利用標籤名讀取元素物件，結果存入陣列中。要注意這是 getElementsByTagName。
- style：設定風格表新值。
- display:none：隱藏元素內容。
- 程式用法：
<ul id='menus'>請點選下列項目
<li><span onclick='toggleMenu("m1")'>動作遊戲</span>
<ul id=m1>
<li><a href='http://gamelily.blogspot.com/2008/11/blog-post_3953.html'>長劍客戰骷髏</a>
<li><a href='http://gamelily.blogspot.com/2008/11/blog-post_2534.html'>坦克衝鋒戰</a>
</ul>
<li><span onclick='toggleMenu("m2")'>競速遊戲</span>
<ul id=m2>
<li><a href='http://gamelily.blogspot.com/2008/11/blog-post_3232.html'>摩托車飛峽谷</a>
<li><a href='http://gamelily.blogspot.com/2008/11/blog-post_430.html'>城市碰碰車</a>
</ul>
</ul>
<script type='text/javascript'>
function toggleMenu( id )
{
var o=document.getElementById( id );
o.style.display=
(o.style.display=='none') ? '' : 'none';
}
function hideMenu( id )
{
var o=document.getElementById( id ).getElementsByTagName('ul');
for( var i=0; i < o.length; i++)
o[i].style.display='none';
}
hideMenu('menus');
</script> - 執行結果：
測試時還發現一個問題。原本範例是寫成下面的方式，可是卻不能展開子選單。這顯示 『UL.pull UL {display:none}』這個規則，不能用 style.display 改變。
- 程式用法：
<style type='text/css'>
UL.pull UL {display:none}
</style>
<ul class=pull>請點選下列項目
<li><span onclick='toggleMenu("m3")'>動作遊戲</span>
<ul id=m3>
<li><a href='http://gamelily.blogspot.com/2008/11/blog-post_3953.html'>長劍客戰骷髏</a>
<li><a href='http://gamelily.blogspot.com/2008/11/blog-post_2534.html'>坦克衝鋒戰</a>
</ul>
<li><span onclick='toggleMenu("m4")'>競速遊戲</span>
<ul id=m4>
<li><a href='http://gamelily.blogspot.com/2008/11/blog-post_3232.html'>摩托車飛峽谷</a>
<li><a href='http://gamelily.blogspot.com/2008/11/blog-post_430.html'>城市碰碰車</a>
</ul>
</ul> - 執行結果：
使用 white-space 製作一個展開式選單。此法利用 white-space 的兩個值，pre 與 nowrap 來隱藏或展開選單；與前面的效果有差異。可以放一些次要資料在其中，要點選才能看到。此法也有一個 CSS 版本 的，但是不能在 IE6 執行。
- 程式用法：
<script type='text/javascript'>
function togglePre( obj )
{
var os=obj.parentNode.style;
os.whiteSpace=
(os.whiteSpace=='pre') ? 'nowrap' : 'pre';
}
</script>
<style type='text/css'>
.pre {height:auto;
overflow:hidden;
width:140px;
border:solid 1px red;
white-space:nowrap;
cursor:pointer;
}
</style>
請點選下列項目：
<DIV class=pre><span onclick='togglePre( this )'>動作遊戲</span>
<a href='http://gamelily.blogspot.com/2008/11/blog-post_3953.html'>長劍客戰骷髏</a>
<a href='http://gamelily.blogspot.com/2008/11/blog-post_2534.html'>坦克衝鋒戰</a>
</div>
<div class=pre><span onclick='togglePre( this )'>競速遊戲</span>
<a href='http://gamelily.blogspot.com/2008/11/blog-post_3232.html'>摩托車飛峽谷</a>
<a href='http://gamelily.blogspot.com/2008/11/blog-post_430.html'>城市碰碰車</a>
</div> - 執行結果：
請點選下列項目：
下拉式的選單。開始時只顯示第一層主選單，滑鼠移到選單項目上，會展開第二層選單；滑鼠移出，會隱藏子選單。此練習使用到 position 特徵。先用一個父矩格 DIV 包納所有選單，並將其設為 position:relative。第二層選單則設為 position:absolute，並且利用 top, left 調整其位置。
- 程式用法：
<script type='text/javascript'>
function showMenu(id)
{
var mo=document.getElementById(id);
mo.style.display='block';
}
function hideMenu(id)
{
var mo=document.getElementById(id);
mo.style.display='none';
}
</script>
<style type='text/css'>
.menulst
{position:absolute;
width:140px;
height:200px;
background:white;
display:none;
}
</style>
<div style='position:relative'>
<span onmouseover='showMenu("mu1")'
onmouseout='hideMenu("mu1")'>
動作遊戲</span> |
<span onmouseover='showMenu("mu2")'
onmouseout='hideMenu("mu2")'>
競速遊戲</span>
<pre id=mu1 class=menulst
style='top:0px;left:0px'
onmouseover='this.style.display="block"'
onmouseout='this.style.display="none"'>
<a href='http://gamelily.blogspot.com/2008/11/blog-post_3953.html'>長劍客戰骷髏</a>
<a href='http://gamelily.blogspot.com/2008/11/blog-post_2534.html'>坦克衝鋒戰</a>
</pre>
<pre id=mu2 class=menulst
style='top:-200px;left:120px'
onmouseover='this.style.display="block"'
onmouseout='this.style.display="none"'>
<a href='http://gamelily.blogspot.com/2008/11/blog-post_3232.html'>摩托車飛峽谷</a>
<a href='http://gamelily.blogspot.com/2008/11/blog-post_430.html'>城市碰碰車</a>
</pre>
</div>
<p>1
<p>2
<p>3
<p>4 - 執行結果：
1
2
3
4
