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

Front page 的框架設置&選單(10點)很急...

Front page 的框架我想要讓他隱藏起來不要灰灰的一條...要怎麼弄呢?

還有把箭頭指到選單會自動往下跑出其他選單(參考此網站)→例如:http://www.brothers.com.tw/

像這ㄍ網站的選單那樣→請問要怎麼做?

Update:

請問第一ㄍ回答的那位...語法到底是哪ㄍ阿?我完完全全看不懂捏!!!

3 Answers

Rating
  • Anonymous
    2 decades ago
    Favorite Answer

    把框架設定 frameset 裡ㄉ border 設成 0 就可以嘍

    例如::<frameset border="0"

    第二個ㄉ語法:

    -----------------------------貼在</head>上面

    <style>

    .menuskin {position: absolute; width: 110px; background-color: #EAF0EA; border: 1px dashed #009900; font: normal 9pt 細明體; line-height: 18px; z-index: 100; visibility: hidden; }

    .menuskin a {text-decoration: none; color: black; padding-left: 10px; padding-right: 10px; }

    #mouseoverstyle {background-color: #8FBC8F; }

    #mouseoverstyle a {color: white; }

    </style>

    <script language="JavaScript1.2">

    <!-- Original: Dynamicdrive (www.dynamicdrive.com) -->

    <!-- Download this script and many more at -->

    <!-- The Java Magician!! http://run.to/java168 -->

    var linkset=new Array()

    //設定子目錄,注意linkset[]中陣列數字需與主目錄的設定相同

    linkset[0]='<div class="menuitems"><a href="#">Sample1</a></div>'

    linkset[0]+='<div class="menuitems"><a href="#">Sample2</a></div>'

    linkset[0]+='<div class="menuitems"><a href="#">Sample3</a></div>'

    linkset[1]='<div class="menuitems"><a href="#">Sample4</a></div>'

    linkset[1]+='<div class="menuitems"><a href="#">Sample5</a></div>'

    linkset[1]+='<div class="menuitems"><a href="#">Sample6</a></div>'

    linkset[2]='<div class="menuitems"><a href="#">Sample7</a></div>'

    linkset[2]+='<div class="menuitems"><a href="#">Sample8</a></div>'

    ////以下勿動

    var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1

    var ns6=document.getElementById&&!document.all

    var ns4=document.layers

    function showmenu(e,which){

    if (!document.all&&!document.getElementById&&!document.layers)

    return

    clearhidemenu()

    menuobj=ie4? document.all.popmenu : ns6? document.getElementById("popmenu") : ns4? document.popmenu : ""

    menuobj.thestyle=(ie4||ns6)? menuobj.style : menuobj

    if (ie4||ns6)

    menuobj.innerHTML=which

    else{

    menuobj.document.write('<layer name=gui bgColor=#E6E6E6 width=165 onmouseover="clearhidemenu()" onmouseout="hidemenu()">'+which+'</layer>')

    menuobj.document.close()

    }

    menuobj.contentwidth=(ie4||ns6)? menuobj.offsetWidth : menuobj.document.gui.document.width

    menuobj.contentheight=(ie4||ns6)? menuobj.offsetHeight : menuobj.document.gui.document.height

    eventX=ie4? event.clientX : ns6? e.clientX : e.x

    eventY=ie4? event.clientY : ns6? e.clientY : e.y

    //Find out how close the mouse is to the corner of the window

    var rightedge=ie4? document.body.clientWidth-eventX : window.innerWidth-eventX

    var bottomedge=ie4? document.body.clientHeight-eventY : window.innerHeight-eventY

    //if the horizontal distance isn't enough to accomodate the width of the context menu

    if (rightedge<menuobj.contentwidth)

    //move the horizontal position of the menu to the left by it's width

    menuobj.thestyle.left=ie4? document.body.scrollLeft+eventX-menuobj.contentwidth : ns6? window.pageXOffset+eventX-menuobj.contentwidth : eventX-menuobj.contentwidth

    else

    //position the horizontal position of the menu where the mouse was clicked

    menuobj.thestyle.left=ie4? document.body.scrollLeft+eventX : ns6? window.pageXOffset+eventX : eventX

    //same concept with the vertical position

    if (bottomedge<menuobj.contentheight)

    menuobj.thestyle.top=ie4? document.body.scrollTop+eventY-menuobj.contentheight : ns6? window.pageYOffset+eventY-menuobj.contentheight : eventY-menuobj.contentheight

    else

    menuobj.thestyle.top=ie4? document.body.scrollTop+event.clientY : ns6? window.pageYOffset+eventY : eventY

    menuobj.thestyle.visibility="visible"

    return false

    }

    function contains_ns6(a, b) {

    //Determines if 1 element in contained in another- by Brainjar.com

    while (b.parentNode)

    if ((b = b.parentNode) == a)

    return true;

    return false;

    }

    function hidemenu(){

    if (window.menuobj)

    menuobj.thestyle.visibility=(ie4||ns6)? "hidden" : "hide"

    }

    function dynamichide(e){

    if (ie4&&!menuobj.contains(e.toElement))

    hidemenu()

    else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))

    hidemenu()

    }

    function delayhidemenu(){

    if (ie4||ns6||ns4)

    delayhide=setTimeout("hidemenu()",500)

    }

    function clearhidemenu(){

    if (window.delayhide)

    clearTimeout(delayhide)

    }

    function highlightmenu(e,state){

    if (document.all)

    source_el=event.srcElement

    else if (document.getElementById)

    source_el=e.target

    if (source_el.className=="menuitems"){

    source_el.id=(state=="on")? "mouseoverstyle" : ""

    }

    else{

    while(source_el.id!="popmenu"){

    source_el=document.getElementById? source_el.parentNode : source_el.parentElement

    if (source_el.className=="menuitems"){

    source_el.id=(state=="on")? "mouseoverstyle" : ""

    }

    }

    }

    }

    if (ie4||ns6)

    document.onclick=hidemenu

    </script>

    -----------------------------貼在<body>裡面要放的地方

    <div id="popmenu" class="menuskin" onMouseover="clearhidemenu();highlightmenu(event,'on')" onMouseout="highlightmenu(event,'off');dynamichide(event)">

    </div>

    <a href="#" onMouseover="showmenu(event,linkset[0])" onMouseout="delayhidemenu()">SampleA</a>

    <a href="#" onMouseover="showmenu(event,linkset[1])" onMouseout="delayhidemenu()">SampleB</a>

    Source(s): java魔法師
  • Anonymous
    2 decades ago

    Q : http://www.brothers.com.tw/

    像這ㄍ網站的選單那樣→請問要怎麼做?

    A : 像這個網站的選單是用Macromedia Fireworks 所做出來的彈出式選單

    如果你有Fireworks

    在Fireworks底下

    叫出教學

    選擇

    建立和編輯彈出式選單

    就會有很詳盡的解說

    例如 :

    彈出式選單是當您在瀏覽器中移動指標,滑過觸發影像時所出現的選單。裡面包含了可以連結到其他網頁的項目清單。

    如果你沒有Fireworks

    下面這個網站

    http://mis.im.tku.edu.tw/~jliu11a/example/menu/exm...

    有相同功能的選單

    你可以參考範例

    下載所有程式碼

    接著你你可以按照說明

    修改主、次選單背景樣式

    成為你喜歡的樣子

    如果你不熟HTML ,CSS

    也可以先把程式存檔

    再用Frontpage叫出修改

    希望有幫到你

    以下是整理好的完整網頁碼

    <html>

    <head>

    <Style type="text/css">

    /*主選單背景樣式

    其中的top與left屬性決定了主選單的位置*/

    .MMType

    {

    Border-Style:outset;

    Border-Width:1px;

    Background-Color:#336699;

    position:absolute;

    top:0px;

    left:0px;

    }

    /*主選單選項樣式*/

    .MainStyle

    {

    Font-Size:9pt;

    Font-Family:細明體;

    Color:white;

    Cursor:hand;

    }

    /*次選單背景樣式

    其中的top屬性決定了次選單與主選單上方相對位置*/

    .SubStyle

    {

    position:absolute;

    Border-Style:outset;

    Border-Width:2px;

    Background-Color:#EEEEEE;

    Top:19px;

    visibility:hidden;

    }

    /*次選單選項樣式*/

    .SubItem

    {

    font-size:9pt;

    background-color:#EEEEEE;

    Color:black;

    Cursor:hand;

    }

    /*次選單選項樣式(游標移過時)*/

    .SubItemHover

    {

    font-size:9pt;

    background-color:#000088;

    Color:white;

    Cursor:hand;

    }

    </Style>

    <Script Language="JavaScript">

    //存放所有選單資料之陣列

    var MMAry = new Array();

    //主選單選項寬度

    MenuWidth = 100;

    //置入主選單選項

    AddMainMenu("線上新聞,入口網站");

    //置入”線上新聞”下之次選單選項

    AddSubMenu("線上新聞","中時電子報|http://news.chinatimes.com/%22)

    AddSubMenu("線上新聞","自由電子新聞網|http://www.libertytimes.com.tw/%22)

    AddSubMenu("線上新聞","東森新聞報|http://www.ettoday.com/%22)

    AddSubMenu("線上新聞","---")

    AddSubMenu("線上新聞","紐約時報|http://www.nytimes.com/%22)

    AddSubMenu("線上新聞","華盛頓郵報|http://www.washingtonpost.com/%22)

    AddSubMenu("線上新聞","路透社|http://www.reuters.com/%22)

    //置入”入口網站”下之次選單選項

    AddSubMenu("入口網站","雅虎奇摩|http://www.yahoo.com.tw/%22)

    AddSubMenu("入口網站","新浪網|http://www.sina.com.tw/%22)

    AddSubMenu("入口網站","蕃薯藤|http://www.yam.com.tw/%22)

    //建立選單

    SetMenu();

    //------------------

    //增加主選單項目函式

    //傳入參數:

    // .MenuList(主選單串列)

    //------------------

    function AddMainMenu(MenuList){

    //主選單的項目可以以串列或單個的方式不斷加入

    //不管傳入的是單項或串列,皆以split函式分割存入暫存陣列中

    var MLAry = MenuList.split(",");

    //將暫存陣列中的每個項目加入選單陣列中

    for(var i=0;i<MLAry.length;i++){

    MMAry[MMAry.length] = MLAry[i];

    //設定每個主選單項目為一陣列形態,用以存放次選單選項

    MMAry[MLAry[i]] = new Array();

    }

    }

    //------------------

    //增加次選單項目函式

    //傳入參數:

    // .MainMenuItem(副選單所屬之主選單項目)

    // .MenuList(次選單串列)

    //------------------

    function AddSubMenu(MainMenuItem,MenuList){

    //切分次選單串列並存入暫存陣列中

    var SLAry = MenuList.split(",");

    //窮舉次選單暫存陣列的每個項目,並加入選單陣列中

    for(var i=0;i<SLAry.length;i++)

    MMAry[MainMenuItem][MMAry[MainMenuItem].length] = SLAry[i];

    }

    //------------------

    //主選單顯示函式

    //------------------

    function SetMenu(){

    //宣告主選單顯示暫存字串,並預設其值為空白

    var MenuStr = "";

    //以表格方式編排主選單內容

    MenuStr += "<table border=0 cellpadding=3 cellspacing=0";

    MenuStr += " class=MMType id=MainMenu><tr>";

    //將主選單項目一一加入

    for(var i=0;i<MMAry.length;i++){

    MenuStr += "<td align=center width="+MenuWidth;

    MenuStr += " OnMouseOver=\"SetSubMenu(\'"+MMAry[i]+"\');\"";

    MenuStr += " OnMouseout=\"HiddenMenu();\" class=MainStyle>"+MMAry[i];

    MenuStr += "</td>";

    }

    MenuStr += "</tr></table>";

    //列出主選單

    document.write(MenuStr);

    }

    //------------------

    //次選單顯示函式

    //傳入參數:

    // .MainMenuItem(副選單所屬之主選單項目)

    //------------------

    function SetSubMenu(MainMenuItem){

    //宣告次選單顯示暫存字串

    var MenuStr = "";

    //宣告次選單列示文字暫存陣列

    var SubMenuDesc = "";

    //宣告次選單連結位址暫存陣列

    var SubMenuLink = "";

    //以表格方式編排次選單內容

    MenuStr += "<table border=0 cellpadding=3";

    MenuStr += " cellspacing=0 width='100'>";

    //將次選單項目一一加入

    for(var i=0;i<MMAry[MainMenuItem].length;i++){

    //若次選單項目為分隔線則畫出分隔線

    if(MMAry[MainMenuItem][i] == "---"){

    MenuStr += "<tr><td><hr></td></tr>";

    } else {

    //分離出次選單串列中的列示文字並存入暫存陣列中

    SubMenuDesc = MMAry[MainMenuItem][i].split("|")[0];

    //分離出次選單串列中的連結位址並存入暫存陣列中

    SubMenuLink = MMAry[MainMenuItem][i].split("|")[1];

    //產生次選單選項之顯示碼

    MenuStr += "<tr><td align=left class=SubItem nowrap";

    MenuStr += " OnMouseOver=\"this.className='SubItemHover';\"";

    MenuStr += " OnMouseOut=\"this.className='SubItem';\"";

    MenuStr += " OnClick=\"gotoURL('"+SubMenuLink+"');\">"+SubMenuDesc;

    MenuStr += "</td></tr>";

    }

    }

    MenuStr += "</table>";

    //取得目前主選單項目位在所有主選單中第i個項目

    for(var i=0;i<MMAry.length;i++){

    if(MainMenuItem==MMAry[i])

    break;

    }

    //透過id取得次選單顯示區塊物件

    var SubMenuObj = document.getElementById("SubMenu")

    //改變次選單顯示區塊內容為先前產生之html碼

    SubMenuObj.innerHTML = MenuStr;

    //設定次選單顯示位置

    SubMenuObj.style.left = i*MenuWidth+6;

    //顯示次選單

    SubMenuObj.style.visibility = "inherit";

    }

    //------------------

    //次選單隱藏函式

    //------------------

    function HiddenMenu(){

    document.getElementById("SubMenu").style.visibility = "hidden";

    }

    //------------------

    //次選單連結函式

    //傳入參數:

    // .URL(選項連結位址)

    //------------------

    function gotoURL(URL){

    location.href = URL;

    }

    </Script>

    </head>

    <body>

    <Div id="SubMenu" Name="SubMenu" Class="SubStyle"

    OnMouseOver="this.style.visibility='inherit';"

    OnMouseOut="this.style.visibility='hidden';">

    </Div>

    </body>

    </html>

  • ?
    Lv 7
    2 decades ago

    第一個問題,三個步驟解決此問題:1.  在任何一個頁框上按滑鼠右鍵\框架內容2.  按「框架頁」按鈕3.  點選「框架」索引頁籤\取消勾選「顯示框線」 OK! 第二個問題,可考慮使用下列軟體:一勞永逸!!Sothink DHTMLMenu 是非常棒的網頁 DHTML 選單製作工具,能夠幫您製作出具有專業級水準的 DHTML 彈出式選單,完全不需要具備 DHTML 或 JavaScript 知識,就可以操作使用!千篇一律的佈局,無甚創意的製作,是否讓您感到有些厭倦、疲乏和灰心?想去做一些改變,可是又對那些令人頭疼的DHTML 和JavaScript語言一竅不通,怎麼辦?碩思網頁魔法功能表可以解決這個問題,您無需瞭解DHTML和JavaScript,只需輕點滑鼠就可以製作出具有專業水準的動態功能表和導航條,讓您的創作靈感得到最大限度的發揮! http://ec.softking.com.tw/sale/index.asp?id=207

Still have questions? Get your answers by asking now.