"menu"
既能「互動」又給讀者充分「選擇權」的文本呈現形式！
1. 先於 <head>xxx</head> 之內或<body>之後寫入 javascript
<script type="text/javascript"
src="http://lmcdwriting.org/userfiles/lmcsilver20121007/jsmenu/jscookmenu-2.0.4/JSCookMenu.js"></script>
<link rel="stylesheet" href="http://lmcdwriting.org/userfiles/lmcsilver20121007/jsmenu/ThemePanel-1.1/ThemePanel/theme.css" type="text/css">
<script type="text/javascript" src="http://lmcdwriting.org/userfiles/lmcsilver20121007/jsmenu/ThemePanel-1.1/ThemePanel/theme.js"></script>
<link rel="stylesheet" href="http://lmcdwriting.org/userfiles/lmcsilver20121007/jsmenu/ThemePanel-1.1/ThemePanel/theme.css" type="text/css">
<script type="text/javascript" src="http://lmcdwriting.org/userfiles/lmcsilver20121007/jsmenu/ThemePanel-1.1/ThemePanel/theme.js"></script>
2. 於版面上置放一部影音，並設上 ID="xxx"，此例為 id="gotosouth20130706" 。
<iframe allowfullscreen="" frameborder="0" height="315"
id="gotosouth20130706"
src="http://www.youtube.com/embed/1Qoe0H_Qkp8?rel=0"
style="margin-right: -20px;" width="560"></iframe>
3. 套裝程式語法
<script type="text/javascript">
function gotodiv01 ()
{
document.getElementById("gotosouth20130706").src="http://www.youtube.com/embed/EjO1lTZ5pXY?rel=0";
};
function gotodiv02 ()
{
document.getElementById("gotosouth20130706").src="http://www.youtube.com/embed/4q58G5Z1KHI?rel=0";
};
function gotodiv03 ()
{
document.getElementById("gotosouth20130706").src="http://www.youtube.com/embed/fOdRMvtrerc?rel=0";
};
function gotodiv04 ()
{
document.getElementById("gotosouth20130706").src="http://www.youtube.com/embed/c80sS-EfSTI?rel=0";
};
var myMenu02 =
[
['▲ ', '暑假南行的四篇影像散記 ', null, null, null, // a menu item
['↗ ', '屏東萬金聖母堂 ', 'javascript: gotodiv04()', null, null], // a submenu item
['↗ ', '屏東隨走的雲和風 ', 'javascript: gotodiv03()', null, null], // a submenu item
['↗ ', '水里蛇窯的光澤 ', 'javascript: gotodiv02()', null, null], // a submenu item
['↗ ', '中部的溪頭散步 ', 'javascript: gotodiv01()', null, null] // a submenu item
]
];
</script>
<style>
.ThemePanelMenu,.ThemePanelSubMenuTable
{
font-family: 微軟正黑體, verdana, arial, sans-serif;
font-size: 1.2em;
cursor: default;
white-space: nowrap;
}
</style>
<div id="myMenuID02" ><br>
</div>
<script type="text/javascript">
cmDraw ('myMenuID02', myMenu02, 'hur', cmThemePanel);
</script>
function gotodiv01 ()
{
document.getElementById("gotosouth20130706").src="http://www.youtube.com/embed/EjO1lTZ5pXY?rel=0";
};
function gotodiv02 ()
{
document.getElementById("gotosouth20130706").src="http://www.youtube.com/embed/4q58G5Z1KHI?rel=0";
};
function gotodiv03 ()
{
document.getElementById("gotosouth20130706").src="http://www.youtube.com/embed/fOdRMvtrerc?rel=0";
};
function gotodiv04 ()
{
document.getElementById("gotosouth20130706").src="http://www.youtube.com/embed/c80sS-EfSTI?rel=0";
};
var myMenu02 =
[
['▲ ', '暑假南行的四篇影像散記 ', null, null, null, // a menu item
['↗ ', '屏東萬金聖母堂 ', 'javascript: gotodiv04()', null, null], // a submenu item
['↗ ', '屏東隨走的雲和風 ', 'javascript: gotodiv03()', null, null], // a submenu item
['↗ ', '水里蛇窯的光澤 ', 'javascript: gotodiv02()', null, null], // a submenu item
['↗ ', '中部的溪頭散步 ', 'javascript: gotodiv01()', null, null] // a submenu item
]
];
</script>
<style>
.ThemePanelMenu,.ThemePanelSubMenuTable
{
font-family: 微軟正黑體, verdana, arial, sans-serif;
font-size: 1.2em;
cursor: default;
white-space: nowrap;
}
</style>
<div id="myMenuID02" ><br>
</div>
<script type="text/javascript">
cmDraw ('myMenuID02', myMenu02, 'hur', cmThemePanel);
</script>
影音教學：
Javascript 程式來源：JSCookMenu
老师，目录所连接的内容能否换成不是视频的内容呢？还有能不能做到，点击目录里面的某一个子项，然后网页就会出现仿佛刚刚是被折叠起来的一部分内容呢？（这部分内容包含图文视频等。）
回覆刪除可以的，但難度是有的，所以我還沒有很正式的教這個，你如果有興趣，找個時間我跟你講一下就會了
回覆刪除你好，此功能實在強大，感謝分享！將其套用到我的blogger並隊功能做些許修改如是：http://goo.gl/2d0Hf7，待正式測試完成後會另創文章並標註碼源來自貴站。此外，日前於另篇文章向您請益的相關頁面亦屆測試完成，不嫌棄請您賞光並不吝指教：http://goo.gl/fC2p0E，謝謝。
回覆刪除另請教您，欲將所點選的subitem取代main menu上的主文，是否有可能達成，如是能否指點迷津或略述其概念，再次感謝您！