Princess Party

Princess Party - 網頁教學

介面外觀

主選單

新作塗鴉

網頁教學

WinXP 下拉選單

2008/05/28 (Wed)
  • 顧名思義,便是模擬 WinXP 視窗側邊的選單。不過是這個是採單開式,一次只能展開一個選單,而 WinXP 的則是多開式,除此之外大概都做的蠻像的(其實單開式比多開式還難做很多哦.....~_~")。當然也可以照個人喜好做修改,善加修改還能做出很多變化,視覺效果是我目前看過最棒的樹狀選單。

原始碼



設定方式

  • 有點複雜,需有點耐心

    【新增選單選項的方式】
     先把 Html 的選項部分整行複製下來往下新增,同時要確定選項數量。
     以第三組選單為例,必須修改 menuStart('menu3','menutit3',68) 之中的 68 這個數字,計算方式是 (20x選項數)+8
     如果是預設開啟的選單(預設為第一組)要增加選項的話,需特別注意,HTML部分還有一個 height: 88px;,Script部分還要修改第 27 行 88,0,0 ,照著上面步驟 (20x選項數)+8 算出來的數字填進去即可。

    【新增整組選單的方式】
     先把 Html 的選單部分整組 (由 <a href="javascript:..... 一直到 ..... </dl></div> 為止) 複製下來往下新增,但要注意不可以複製第一組選單,第一組選單因為預設為開啟狀態,有一些設定會跟下面的不同。
     複製好以後分別修改以下數字 menuStart('menu4','menutit4',108); 、 id="menutit4 、 id="menu4" ,因預設為 3 組選單,現在要加第 4 組故改為 4,以下類推。
     Script 部份第 24 行的 indexof = 3,請改為 4
     Script 部份第 25 行的 title = new Array("menutit1","menutit2","menutit3");,請插入 "menutit4"。
     Script 部份第 26 行的 style = new Array("menu1","menu2","menu3");,請插入 "menu4"。
     Script 部份第 27 行的 menu_nowH = new Array(88,0,0); 請改為 88,0,0,0
     Script 部份第 28 行的 menu_nowO = new Array(100,0,0); 請改為 100,0,0,0
     最後同新增選項最後步驟修改 menuStart('menu4','menutit4',68) 之中的 68 這個數字即可。

    【修改預設開啟選單的方式】
     此語法中的預設開啟選單為第一組,現在假若要改成第二組,必須先分別找出第 2 行與第 11 行 id="menuTitle1"id="menuTitle2" ,將其CSS class="titb" 與 class="tita" 互換。
     接著同樣再找出第 3 行與第 12 行 id="menu1"id="menu2" 將後面 style="..." 的內容對調,並適當修改 Height: xx 的數字。
     接下來到 script 部分第 27 行,將裡面 menu_nowH = new Array(88,0,0); 改為 menu_nowH = new Array(0,108,0); ,看預設要第幾組,就把那一組的數字改為他的高度就對了。
     同樣到 script 部分第 28 行,將裡面 menu_nowO = new Array(100,0,0); 改為 menu_nowO = new Array(0,100,0); ,看預設要第幾組,就把那一組的數字改為 100 就可以了。

    【不要預設開啟選單的方式】
     先到HTML部分預設開啟的那組中,找出 class="titb" 修改為 class="tita"。
     往後把後面的 style="height: XXpx;" 的數字改為 0px。
     接下來到 script 部分第 27,28 行將 menu_nowH 與 menu_nowO 後面的數字通通都改為 0 。
     最後到 script 部分第 37 行將 which_close = 0 改為 which_close = 1 即完成。

    【其他】
     其餘樣式、間距的部份請自行修改CSS,這裡就不贅述了。

取材網站

相關回應

Rei

No Subject

2010/09/11 (Sat)
  • 其實因為您留言的時候小Rei已經開始整理資料庫了
    所以在那段時間中間的留言就....

    至於那個粉紅色的版面,只是暫時隱藏而已
    等我整理完畢就會再放上來

    另外關於選單的問題,不知是否方便讓我看一下您的頁面或源碼,這樣我才有辦法看問題出在哪...
  • Mail
  • Home
  •  

bluesky

選單之間的距離問題

2010/09/12 (Sun)
  • 你好呀~其實我在幾個月前便來過貴站了
    亦有留言, 但現在卻找不到
    所以重發一次
    (而且印象中之前的版面是粉紅色, 我蠻喜歡那個版面呢, 撤走了真可惜)

    我對WinXP 下拉選單很有興趣
    不過當應用在我的網頁時卻有問題
    在你的範例中
    打開選單前, 選單之間的距離是很近的
    而且收放自如
    不過我多次嘗試, 發覺.......
    選單打開前, 選單與選單之間仲相隔了多個選項的距離..... 而不是靠在一起....
    即使不打開選單, 也能直接按到選項的連結....
    怎麼改也改不好.....
    不過我還是很想用這款選單啦~!

    所以想問問REI有沒有方法解決呢?



  • Mail
  •  

bluesky

No Subject

2010/09/12 (Sun)
  • 貼上來嗎.....
    我怕太長了
    而且好像找不到REI 你的EMAIL
    我試試看貼上來吧

    較完整的資料夾要靠EMAIL 才能SEND 給你
    不過資料夾中多是圖片和其他不相干的頁面
    希望這些HTML 便足夠找出問題吧?
    新的網址無法顯示網頁,
    我把下面的HTML UPLOAD上了舊WEB SITE
    看有沒有幫助吧

    ________________________________________

    <HTML>

    <HEAD>
    <TITLE>夕映的魔法小屋</TITLE>

    </HEAD>

    <!----下拉選單PART1 ↓---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->


    <style type="blob/css">
    <!--
    :focus { -moz-outline-style: none; }
    a { blr:expression(this.onFocus=this.blur()); }
    a.tita { clear: left; margin: 10px 0 0; background: url(gif/title_hide.gif) no-repeat center; position: relative;
    float: left; blob-decoration: none; width: 129px; height: 23px; color: #215dc6; cursor: default; }
    a.tita:hover { background: url(gif/title_hide_hover.gif) no-repeat center; color: #b9d; color: #428eff; }

    a.titb { clear: left; margin: 10px 0 0; background: url(gif/title_show.gif) no-repeat center; position: relative;
    float: left; blob-decoration: none; width: 129px; height: 23px; color: #215dc6; cursor: default; }
    a.titb:hover { background: url(gif/title_show_hover.gif) no-repeat center; color: #b9d; color: #428eff; }

    a.tita span, a.titb span { position: absolute; left: 7px; top: 3px; font-weight: bold; }
    div.ins { margin: 0; background-color: #d6dff7; border: 1px solid #ffffff; border-top: 0px;
    width: 127px; float: left; clear: left; overflow: hidden; filter: alpha(opacity=0); -moz-opacity: 0; opacity: 0; }
    div.ins dl { margin: 0; padding: 5px; }
    div.ins dl dd { margin: 0; padding: 0px; list-style-type: none; font-size: 12px; font-family: Tahoma, 新細明體; line-height: 20px; height: 20px; }
    div.ins dl dd a { color: #215dc6; blob-decoration: none; }
    div.ins dl dd a:hover { color: #428eff; }
    div.ins dl dd img { margin: 0 3px 0 0; vertical-align: middle; border: 0; }
    -->
    </style>

    <script type="blob/javascript">
    <!--
    var indexof = 3;
    var title = new Array("menutit1","menutit2","menutit3"); //標題陣列
    var style = new Array("menu1","menu2","menu3"); //選單陣列
    var menu_nowH = new Array(0,128,0); //高度初始設定
    var menu_nowO = new Array(0,100,0); //透明度初始設定
    var menu_posH = new Array(indexof);
    var menu_posO = new Array(indexof);
    var menu_offsetH= new Array(indexof);
    var menu_offsetO= new Array(indexof);
    var menu_style = new Array(indexof);
    var menu_title = new Array(indexof);
    var menu_float = new Array(indexof);
    var obj_float;
    var which_close = 0;

    function menuClose() {
    if(which_close == 0) {
    for (i=0; i<indexof; i++) {
    if (menu_title[i].className == 'titb') {
    if(menu_nowH[i] > menu_posH[i] && menu_nowO[i] > menu_posO[i]) {
    menu_nowH[i] += menu_offsetH[i];
    menu_nowO[i] += menu_offsetO[i];
    menu_style[i].height = menu_nowH[i] + 'px';
    menu_style[i].opacity = (menu_nowO[i]/100);
    menu_style[i].MozOpacity = (menu_nowO[i]/100);
    menu_style[i].KmenuOpacity = (menu_nowO[i]/100);
    menu_style[i].filter = "alpha(opacity=" + menu_nowO[i] + ")";
    menu_float[i] = setTimeout("menuClose()", 10 );
    } else {
    clearTimeout(menu_float[i]);
    menu_title[i].className = 'tita';
    if(obj_title != menu_title[i]) {
    menuOpen();
    } else {
    which_close = 1;
    }
    }
    }
    }
    } else {
    menuOpen();
    which_close = 0;
    }
    }

    function menuOpen() {
    for (i=0; i<indexof; i++) {
    if(obj_title == menu_title[i]) {
    if(menu_nowH[i] < obj_posH && menu_nowO[i] < obj_posO) {
    menu_nowH[i] += obj_offsetH;
    menu_nowO[i] += obj_offsetO;
    menu_style[i].height = menu_nowH[i] + 'px';
    menu_style[i].opacity = (menu_nowO[i]/100);
    menu_style[i].MozOpacity = (menu_nowO[i]/100);
    menu_style[i].KmenuOpacity = (menu_nowO[i]/100);
    menu_style[i].filter = "alpha(opacity=" + menu_nowO[i] + ")";
    menu_float[i] = setTimeout("menuOpen()", 10 );
    } else {
    clearTimeout(menu_float[i]);
    menu_title[i].className = 'titb';
    }
    }
    }
    }

    function menuStart(obj,tit,hei) {
    for (i=0; i<indexof; i++) {
    menu_posH[i] = 0;
    menu_posO[i] = 0;
    menu_title[i] = document.getElementById(title[i]);
    menu_style[i] = document.getElementById(style[i]).style;
    menu_style[i].height = menu_nowH[i] + 'px';
    menu_offsetH[i] = (menu_posH[i] - menu_nowH[i]) / 20;
    menu_offsetO[i] = (menu_posO[i] - menu_nowO[i]) / 20;
    }
    obj_title = document.getElementById(tit);
    obj_posH = hei;
    obj_posO = 100;
    obj_offsetH = hei / 20;
    obj_offsetO = 100 / 20;
    menuClose();
    }
    //-->
    </script>


    <!----下拉選單PART1 ↑---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->





    <BODY>

    <center><IMG SRC="http://lh4.ggpht.com/__lf_8OJ3lwQ/S4A9L_TsunI/AAAAAAAAAEU/ZRH6BwQ_DJs/25.jpg" ALT="夕映" ALIGN=TOP BORDER=1 HSPACE=2 VSPACE=2 HEIGHT=200 WIDTH=200>
    </center>
    <!夕映大頭照>
    <P>

    <BODY BGCOLOR="#ffffff" blob="#000000" LINK="#0000ff" VLINK="#ff00ff" ALINK="#ff0000" BACKGROUND="http://lh5.ggpht.com/__lf_8OJ3lwQ/S44WRGHKorI/AAAAAAAAAPE/Ti62m98GnI4/s512/white_wings.jpg">
    <font color=FF9966>
    <P>
    <P>


    <!----下拉選單PART2 ↓---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->

    <a href="myself.HTM" target=2 "javascript: menuStart('menu1','menutit1',98);" id="menutit1" class="tita"><span>站主介紹</span></a>


    <!1.><div id="xpmenu">
    <!2.> <a href="javascript: menuStart('menu1','menutit1',68);" id="menutit1" class="tita"><span>自我創作</span></a>
    <!3.> <div id="menu1" class="ins" style="height: 0px;">
    <!4. > <dl>
    <!5. > <dd><a href="Hand_make/gallery.HTM" target=2 ><img src="gif/dl.gif" alt="" /><B>Gallery</B></a></dd>
    <!6. > <dd><a href="Hand_make/handmake.HTM" target=2 ><img src="gif/jar.gif" alt="" />手作</a></dd>
    <!7. > <dd><a href="#"><img src="gif/js.gif" alt="" /> - - </a></dd>
    <!8. >
    <!9. > </dl>
    <!10. > </div>
    <!11.> <a href="javascript: menuStart('menu2','menutit2',128);" id="menutit2" class="titb"><span>魔法老師</span></a>
    <!12.> <div id="menu2" class="ins" style="height: 0px; filter: alpha(opacity=100); -moz-opacity: 1; opacity: 1;">
    <!13. > <dl>
    <!14. > <dd><a href="Negima/words.HTM"target=2><img src="gif/dl.gif" alt="" />小小的自言自語</a></dd>
    <!15. > <dd><a href="Negima/story.HTM"target=2><img src="gif/jar.gif" alt="" />故事大綱</a></dd>
    <!16. > <dd><a href="Negima/character.HTM"target=2><img src="gif/js.gif" alt="" />人物介紹</a></dd>
    <!17. > <dd><a href="Negima/cover.HTM"target=2><img src="gif/htm.gif" alt="" />漫畫封面</a></dd>
    <!18.> <dd><a href="Negima/movie.HTM"target=2><img src="gif/ini.gif" alt="" />音樂</a></dd>
    <dd><a href="Negima/movie.HTM"target=2><img src="gif/ini.gif" alt="" />同人MOVIE</a></dd>
    <!19.> </dl>
    <!20.> </div>
    <!21.>
    <!22.> <a href="javascript: menuStart('menu3','menutit3',68);" id="menutit3" class="tita"><span>測試選單 3</span></a>
    <!23.> <div id="menu3" class="ins" style="height: 0px;">
    <!24. > <dl>
    <!25. > <dd><a href="#"><img src="gif/htm.gif" alt="" />測試選項 1</a></dd>
    <!26. > <dd><a href="#"><img src="gif/jar.gif" alt="" />測試選項 2</a></dd>
    <!27.> <dd><a href="#"><img src="gif/js.gif" alt="" />測試選項 3</a></dd>
    <!28.> </dl>
    <!29.> </div>



    <a href="http://blog.xuite.net/bobo0717/sky" target=2 "javascript: menuStart('menu1','menutit1',98);" id="menutit1" class="tita"><span>BLOG</span></a>

    <a href="home.HTM" target=_top "javascript: menuStart('menu1','menutit1',98);" id="menutit1" class="tita"><span>HOME</span></a>

    <a href="index.HTM" target=_top "javascript: menuStart('menu1','menutit1',98);" id="menutit1" class="tita"><span>INDEX</span></a>
    <!30.></div>

    <!----下拉選單PART2 ↑-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->



    <style> BODY {scrollbar-base-color : #0000ff; scrollbar-face-color : #ff0000; scrollbar-track-color: #00ff00; scrollbar-arrow-color : #0000ff; scrollbar-3dlight-color: #2f2f2f; scrollbar-highlight-color : #0000ff; scrollbar-shadow-color : #0000ff; scrollbar-darkshadow-color : #000000; color:ff99ff; border:10 ridge #ff00ff;} </style>
    <!----邊框--->


    </BODY>
    </HTML>


  • Mail
  • Home
  •  

Rei

No Subject

2010/09/12 (Sun)
  • 我想是文件類型的問題,您的頁面並沒有宣告文件類型是 HTML 或 XHTML 等等。

    我剛剛用DreamWeaver打開檔案,然後
    修改 => 頁面屬性 => 標題/編碼方式
    文件類型(DTD)改成 XHTML 1.0 Strict 以後,間距的問題應該是解決了,你可以參考看看我改過的頁面。

    http://rei.idv.tw/test/xpp.html
  • Mail
  • Home
  •  

bluesky

No Subject

2010/09/15 (Wed)
  • 謝謝了!! 問題總算是解決了~
    至於文件類型...我是使用HtmlABC
    所以要Download 了DreamWeaver
    才能把問題改過來呢~

    不過不習慣用DreamWeaver呢.....
    最初接觸的軟件用慣了,
    其他軟件反而不上手.......
    所以想問小REI 有什麼好推介嗎?
    在網頁編寫的軟件方面?
  • Home
  •  

Rei

No Subject

2010/09/16 (Thu)
  • Htmlabc應該是原始碼方式的編輯器,小 Rei 多年前也使用過。

    其實改變文件類型也不一定要用 DreamWeaver 才能達成,那只是放在網頁第一行的宣告而已,把小 Rei 改好的頁面的第一行複製到您製作中的頁面也能達成同樣的效果。

    至於軟體上,其實小 Rei 沒有什麼特別推薦的軟體,隨便一個可以編輯純文字文件的軟體皆可,就算是記事本也沒什麼關係,小 Rei 雖然使用 DreamWeaver,但也幾乎完全只使用原始碼編輯,差別只是多了顏色方便辨識原始碼、且有些語法提示而已。
  • Mail
  • Home
  •  

發表回應

您可以利用以下表單發表您對本篇的回應

  • 表情:            
紙娃娃設定

素材、設計