Anonymous
Anonymous asked in 電腦與網際網路程式設計 · 2 decades ago

請問動態文字選項的語法(這應該是CSS做的吧)??

http://www.spyder-25.com/90s.html

請教上述網頁,左手邊的文字選單是怎麼做的,請大大分享一下語法吧!要完全一模一樣的喔!拜託啦!

Update:

補充1.知識版上有一些多層選單的效果(網址件補充2),但是有點不一樣喔!我所附的連結,當滑鼠移過去子選單時,整列有反白的效果,我想應該有搭配表格使用吧!

補充2. http://nknucc.nknu.edu.tw/~s1378/wjs-13079955.htm

1 Answer

Rating
  • 宏賜
    Lv 5
    2 decades ago
    Favorite Answer

    因為您要完全一模一樣,

    所以我就幫您偷回來了,

    如果要改文字及連結的話,最下方有一堆Link[?]的,改掉就行了 ^_^

    <table border=0 bordercolor="gray" cellspacing=0 cellpadding=1 width=130><tr><td>

    <style>

    .menu

    {

    background-color:#dfdfdf;

    border:1px solid gray;

    width:127px;

    font-size:10px;

    font-family:verdana;

    position: absolute;

    font:bold;

    font-weight:900;

    color: #444444;

    cursor: pointer;

    }

    .item_panel

    {

    width:127px;

    border-left:1px solid #aaaaaa;

    border-right:1px solid #aaaaaa;

    clip:rect(0,127,0,20);

    position: absolute;

    cursor:pointer;

    }

    .item_panel a

    {

    text-decoration:none;

    color:black;

    cursor:pointer;

    }

    .item

    {

    background-color: #eeeeee;

    width: 125px;

    font-size: 10px;

    font-family: verdana;

    }

    </style>

    <script language="javascript">

    document.write("<style>")

    document.write("BODY {")

    document.write("scrollbar-base-color: #333333;")

    document.write("scrollbar-track-color: #333333;")

    document.write("scrollbar-face-color: #aaaaaa;")

    document.write("scrollbar-highlight-color: #ffffff;")

    document.write("scrollbar-3dlight-color: #000000;")

    document.write("scrollbar-darkshadow-color: #000000;")

    document.write("scrollbar-shadow-color: #000000;")

    document.write("scrollbar-arrow-color: #000000;")

    document.write("}")

    document.write("</style>")

    function goToURL() { history.go(-1); }

    var height = 20; // height of the menu headers

    var iheight = 15; // height of the menu_items

    var bgc = "#eeeeee" // background color of the item

    var tc = "black" // text color of the item

    var over_bgc = "#f9f9f9";

    var over_tc = "#000000";

    var speed = 0;

    var timerID = "";

    var N = (document.all) ? 0 : 1;

    var width = 129;

    var self_menu = new Array();

    function write_menu()

    {

    smc = 0; // count the position of the self_menu

    document.write("<div>");

    mn = 0;

    mni = 1;

    start = -1;

    for(i=0;i<Link.length;i++)

    {

    la = Link[i].split("|");

    if (la[0] == "0")

    {

    if(start == 0)

    {

    document.write("</div>");

    h = csmc * iheight;

    tmn = mn; //-h

    self_menu[smc] = new Array(tmn,h,0,-2);

    smc++;

    mn--;

    }

    csmc = 0;

    document.write("<div class='menu' style='top:"+mn+";height:"+height+"' id='down"+smc+"' onclick='pull_down("+smc+","+mni+")'> "+ la[1] + "</div>");

    self_menu[smc] = new Array(mn,height,0,mni);

    smc++;

    mni++;

    mn+=height;

    start = 1;

    }

    else

    {

    if(start == 1)

    {

    if(N)mn+=2;

    document.write("<div class='item_panel' id='down"+smc+"' style='top:"+mn+"'>");

    start = 0;

    }

    document.write("<a href='"+la[2]+"'");

    if (la[3] != "") document.write(" target='" + la[3] + "' ");

    document.write("><div class='item' id='d"+i+"' style='height:"+iheight);

    if (N) document.write(";width:127");

    document.write("' onmouseover='color(this.id)' onmouseout='uncolor(this.id)'> "+ la[1] + "</div></a>");

    csmc++;

    }

    }

    if (start == 0)

    {

    document.write("</div>");

    h = csmc * iheight;

    tmn = mn + 5; //-h

    self_menu[smc] = new Array(tmn,h,0);

    name = "down" + (self_menu.length-1);

    obj = document.getElementById(name);

    obj.style.borderBottomColor = "#bbbbbb";

    obj.style.borderBottomWidth = 1;

    obj.style.borderBottomStyle = "solid";

    }

    document.write("</div>");}

    function color(obj)

    {

    document.getElementById(obj).style.backgroundColor = over_bgc;

    document.getElementById(obj).style.color = over_tc

    }

    function uncolor(obj)

    {

    document.getElementById(obj).style.backgroundColor = bgc;

    document.getElementById(obj).style.color = tc

    }

    function pull_down(nr,c)

    {

    if (timerID == "")

    {

    to = self_menu[nr+1][1]

    begin = nr + 2;

    if (timerID != "") clearTimeout(timerID);

    if (self_menu[nr+1][2] == 0)

    {

    self_menu[nr+1][2] = 1;

    if(nr == self_menu.length-2) {to++;}

    epull_down(begin,to,0);

    }

    else

    {

    to = 0;

    self_menu[nr+1][2] = 0;

    name = "down"+(nr+2);

    open_item = 0;

    for(i=0;i<nr;i++)

    {

    if(self_menu[i][2] == 1)

    {open_item += self_menu[i][1];

    }

    }

    if (N == false) {open_item-= (c*1)};

    if (nr== self_menu.length-2) {val = self_menu[self_menu.length-1][1];to=-1;}

    else val = parseInt(document.getElementById(name).style.top) -(open_item)-(c*height);

    epull_up(begin,to,val);

    }

    }

    }

    function epull_down(nr,to,nowv)

    {

    name = "down" + (nr-1);

    obj = document.getElementById(name).style.clip = "rect(0,"+width+","+(nowv+1)+",0)";

    for (i=nr;i<self_menu.length;i++)

    {

    name = "down" + i;

    obj = document.getElementById(name);

    obj.style.top = parseInt(obj.style.top)+1;

    }

    nowv++;

    if(nowv < to) timerID = setTimeout("epull_down("+nr+","+to+","+nowv+")",speed);

    else timerID = "";

    }

    function epull_up(nr,to,nowv)

    {

    name = "down" + (nr-1);

    obj = document.getElementById(name).style.clip = "rect(0,"+width+","+nowv+",0)";

    for (i=nr;i<self_menu.length;i++)

    {

    name = "down" + i;

    obj = document.getElementById(name);

    obj.style.top = parseInt(obj.style.top)-1;

    }

    nowv--;

    if(nowv > to) timerID = setTimeout("epull_up("+nr+","+to+","+nowv+")",speed);

    else timerID = "";

    }

    function startup(nr)

    {

    write_menu();

    if (nr != 0)

    {

    for(i=0;i<self_menu.length;i++)

    {

    if(self_menu[i][4] == nr) pull_down(i,nr)

    i==self_menu.length;

    }

    }

    }

    document.write("<table cellspacing=0 cellpadding=0>");

    document.write("<tr style='cursor:pointer' onclick=document.location.href='default.asp'><td width=1></td><td bgcolor='#dfdfdf' height=18 width=125 valign='top'><font face='verdana' size=1 color='#444444'> <b><a class='nav2' href='default.asp'> Main Page</a></b></font></td></tr>");

    document.write("</table>");

    document.write("<div style='position:absolute; top:40'>");

    //Link[nr] = "position [0 is menu/1 is item],Link name,url,target (blank|top|frame_name)"

    var Link = new Array();

    Link[0] = "0|   News / Editorials";

    Link[1] = "1|   Articles|editorial.html|";

    Link[2] = "1|   August|news.asp?month=August|";

    Link[3] = "1|   June|news.asp?month=June|";

    Link[4] = "1|   May|news.asp?month=May|";

    Link[5] = "1|   April|news.asp?month=April|";

    Link[6] = "1|   March|news.asp?month=March|";

    Link[7] = "0|   Pictures";

    Link[8] = "1|   Pictures Home|pictures.html|";

    Link[9] = "1|   Spider-Man Movie I|showgal.asp?sec=movie1|";

    Link[10] = "1|   Spider-Man Movie II|showgal.asp?sec=movie2|";

    Link[11] = "1|   Mary Jane|showgal.asp?sec=maryjane|";

    Link[12] = "1|   Character Pics|pictures.html#character|";

    Link[13] = "1|   Miscellaneous|showgal.asp?sec=spidey|";

    Link[14] = "1|   Animated Series|showgal.asp?sec=animated|";

    Link[15] = "0|   Covers / Overviews";

    Link[16] = "1|   Core Titles|coverscore.html|";

    Link[17] = "1|   Limited Series|coverslim.html|";

    Link[18] = "1|   One Shots|coverslim.html#one|";

    Link[19] = "1|   ASM Volume II|showgal.asp?sec=asm_volume2|";

    Link[20] = "1|   Ultimate Spider-Man|showgal.asp?sec=ultimate|";

    Link[21] = "1|   Spectacular SM|showgal.asp?sec=spectacular2|";

    Link[22] = "1|   Marvel Knights SM|showgal.asp?sec=mksm|";

    Link[23] = "0|   Multimedia";

    Link[24] = "1|   Wallpapers|wallpapers.asp|";

    Link[25] = "1|   Music|music.html|";

    Link[26] = "1|   Downloads|downloads.html|";

    Link[27] = "0|   Reviews / Issues";

    Link[28] = "1|   Back Issues|issues.html|";

    Link[29] = "1|   Reviews|review.html|";

    Link[30] = "0|   Characters";

    Link[31] = "1|   Allies|characters.html|";

    Link[32] = "1|   Enemies|characters.html|";

    Link[33] = "1|   Family|characters.html|";

    Link[34] = "1|   Friends|characters.html|";

    Link[35] = "0|   Cartoons";

    Link[36] = "1|   60's Spider-Man|60s.html|";

    Link[37] = "1|   90's Spider-Man|90s.html|";

    Link[38] = "1|   2003 MTV Series|animated_home.html|";

    Link[39] = "1|   Episode Guide (MTV)|animated_synopsis.html|";

    Link[40] = "0|   Movies";

    Link[41] = "1|   Spider-Man (2002)|movie1.html|";

    Link[42] = "1|   Spider-Man 2 (2004)|movie2.html|";

    Link[43] = "0|   Store / Shop";

    Link[44] = "1|   Amazon Shop|/shop/default.html|";

    Link[45] = "1|   Poster Store|poster.html|";

    Link[46] = "0|   Advertise";

    Link[47] = "1|   Contact Us|contact.html|";

    startup(4);

    document.write("<br><br><br><br><br><br></div>");

    </script>

    </table>

    Source(s): 感謝他 http://www.spyder-25.com/nav.js
Still have questions? Get your answers by asking now.