메인메뉴를 만드는데 상단메뉴에

  • 시냇물
  • 2005.05.19 10:15:45
  • 3
나모FX를 사용합니다.  일반 홈피에 거의 사용하고 있던데 무식해서 미안합니다   메인메뉴를 만드는데 상단메뉴에
마우스를 올리면 자동으로 메뉴아래 여러 하부 메뉴가  가로로 떠는것 어떻게 하죠? 아마 플레시로 하는 모양인데
공부할 수 있는 부분이나 페이지 또는 사이트 좀 알려 주세요

태그목록

  • 없음

첨부파일 목록

  • 없음
목록으로 돌아가기
댓글 쓰기
댓글 목록 [3]
  • ganji

    물론 플래쉬나 스위시,,등등을 이용해서 이미지나 기타 부분을 멋지게 꾸미는 방법도 있고
    그냥 단순히 html을 이용하는 방법도 있습니다.

    대충,,아래와 같은것
    http://ganji.80port.net/ganjijava/20040075.html

    댓글 2005-05-19

  • ganji

    소스는 아래와 같이,,

    <!--1. 아래 스크립트를 HEAD 부분에 복사해 넣으세요. -->
    <STYLE type=text/css>FONT {
    FONT-SIZE: 9pt; LINE-HEIGHT: 17px; FONT-FAMILY: "굴림"
    }
    TD {
    FONT-SIZE: 9pt; LINE-HEIGHT: 17px; FONT-FAMILY: "굴림"
    }
    A:visited {
    COLOR: #000000; TEXT-DECORATION: none
    }
    A:link {
    COLOR: #000000; TEXT-DECORATION: none
    }
    A:active {
    COLOR: #00ff00; TEXT-DECORATION: none
    }
    A:hover {
    COLOR: #ffa217; TEXT-DECORATION: underline
    }
    P {
    FONT-SIZE: 9pt; FONT-FAMILY: 돋움
    }
    BR {
    FONT-SIZE: 9pt; FONT-FAMILY: 돋움
    }
    BODY {
    FONT-SIZE: 9pt; FONT-FAMILY: 돋움
    }
    TD {
    FONT-SIZE: 9pt; FONT-FAMILY: 돋움
    }
    SELECT {
    FONT-SIZE: 9pt; FONT-FAMILY: 돋움
    }
    INPUT {
    FONT-SIZE: 9pt; FONT-FAMILY: 돋움
    }
    FORM {
    FONT-SIZE: 9pt; FONT-FAMILY: 돋움
    }
    TEXTAREA {
    FONT-SIZE: 9pt; FONT-FAMILY: 돋움
    }
    OPTION {
    FONT-SIZE: 9pt; FONT-FAMILY: 돋움
    }
    .cont {
    LINE-HEIGHT: 140%
    }
    BODY {
    SCROLLBAR-FACE-COLOR: #ffffff; SCROLLBAR-HIGHLIGHT-COLOR: #c0c0c0; SCROLLBAR-SHADOW-COLOR: #c0c0c0; SCROLLBAR-3DLIGHT-COLOR: #ffffff; SCROLLBAR-ARROW-COLOR: #ffffff; SCROLLBAR-TRACK-COLOR: #ffffff; SCROLLBAR-DARKSHADOW-COLOR: #ffffff
    }
    INPUT {
    BORDER-RIGHT: #808080 1px solid; BORDER-TOP: #808080 1px solid; FONT-SIZE: 9pt; BORDER-LEFT: #808080 1px solid; COLOR: black; BORDER-BOTTOM: #808080 1px solid; HEIGHT: 20px; BACKGROUND-COLOR: #c0c0c0; size: 30
    }
    TEXTAREA {
    BORDER-RIGHT: #808080 1px solid; BORDER-TOP: #808080 1px solid; FONT-SIZE: 9pt; BORDER-LEFT: #808080 1px solid; COLOR: black; BORDER-BOTTOM: #808080 1px solid; BACKGROUND-COLOR: white
    }
    </STYLE>

    <SCRIPT language=JavaScript>
    <!--

    ns = (document.layers)? true:false
    ie = (document.all)? true:false

    function show(id) {
    if (ns) document.layers[id].visibility = "visible"
    else if (ie) document.all[id].style.visibility = "visible"
    }

    function hide(id) {
    if (ns) document.layers[id].visibility = "hidden"
    else if (ie) document.all[id].style.visibility = "hidden"
    }

    //-->
    </SCRIPT>

    <STYLE type=text/css>#sub1 {
    BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 7px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 7px; FONT-WEIGHT: bold; FONT-SIZE: 7pt; FILTER: Alpha(Opacity=70); VISIBILITY: hidden; PADDING-BOTTOM: 7px; BORDER-LEFT: #cccccc 1px solid; WIDTH: 120px; LINE-HEIGHT: 150%; PADDING-TOP: 7px; BORDER-BOTTOM: #cccccc 1px solid; FONT-FAMILY: tahoma; BACKGROUND-COLOR: #e1e1e1
    }
    #sub2 {
    BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 7px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 7px; FONT-WEIGHT: bold; FONT-SIZE: 7pt; FILTER: Alpha(Opacity=70); VISIBILITY: hidden; PADDING-BOTTOM: 7px; BORDER-LEFT: #cccccc 1px solid; WIDTH: 120px; LINE-HEIGHT: 150%; PADDING-TOP: 7px; BORDER-BOTTOM: #cccccc 1px solid; FONT-FAMILY: tahoma; BACKGROUND-COLOR: #e1e1e1
    }
    #sub3 {
    BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 7px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 7px; FONT-WEIGHT: bold; FONT-SIZE: 7pt; FILTER: Alpha(Opacity=70); VISIBILITY: hidden; PADDING-BOTTOM: 7px; BORDER-LEFT: #cccccc 1px solid; WIDTH: 120px; LINE-HEIGHT: 150%; PADDING-TOP: 7px; BORDER-BOTTOM: #cccccc 1px solid; FONT-FAMILY: tahoma; BACKGROUND-COLOR: #e1e1e1
    }
    #sub4 {
    BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 7px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 7px; FONT-WEIGHT: bold; FONT-SIZE: 7pt; FILTER: Alpha(Opacity=70); VISIBILITY: hidden; PADDING-BOTTOM: 7px; BORDER-LEFT: #cccccc 1px solid; WIDTH: 120px; LINE-HEIGHT: 150%; PADDING-TOP: 7px; BORDER-BOTTOM: #cccccc 1px solid; FONT-FAMILY: tahoma; BACKGROUND-COLOR: #e1e1e1
    }
    </STYLE>

    <!--<BODY></BODY> 부분에 아래의 스크립트를 복사해 넣으세요-->
    <TABLE borderColor=#000000 cellSpacing=0 cellPadding=0 width=606 align=center
    border=1>
    <TBODY>
    <TR>
    <TD vAlign=center align=middle width=602 height=25><FONT
    color=#ffffff></FONT></TD></TR>
    <TR>
    <TD vAlign=center align=middle height=133 bordercolor="white"> 
    <TABLE cellSpacing=0 cellPadding=2 align=center bgColor=#f6f6f6
    border=0><TBODY>
    <TR height=35>
    <TD width=24></TD>
    <TD width=74>
    <p align="center"><A onmouseover="show('sub1')" onmouseout="hide('sub1'+ '+ ')"
    href="http://ganji.80port.net/"><FONT
    class=tah8>HOME</FONT></A>   <font color="#999999">|</font></TD>
    <TD width=74>
    <p align="center"><A onmouseover="show('sub2')" onmouseout="hide('sub2')"
    href="http://ganji.80port.net/"><FONT
    class=tah8>STUDY</FONT></A>   <font color="#999999">|</font></TD>
    <TD width=74>
    <p align="center"><A onmouseover="show('sub3')" onmouseout="hide('sub3'+ ')"
    href="http://ganji.80port.net/"><FONT
    class=tah8>PDS</FONT></A>   <font color="#999999">|</font></TD>
    <TD width=50>
    <p align="center"><A onmouseover="show('sub4')" onmouseout="hide('sub4')"
    href="http://ganji.80port.net/"><FONT
    class=tah8>BOARD</FONT></A></TD></TR></TBODY></TABLE><!--메인 메뉴 출력부분 끝--><!--서브 메뉴 출력부분 시작-->
    <TABLE cellSpacing=0 cellPadding=0 width=330 align=center border=0>
    <TBODY>
    <TR>
    <TD>
    <DIV style="LEFT: 0px; POSITION: relative; TOP: 0px">

    <DIV id="sub1" onmouseover="show('sub1')"
    style="width:100px; height:100px; position:absolute; left:20px; top:-12px; z-index:1;"
    onmouseout="hide('sub1')">
    <a href="http://ganji.80port.net/">sub menu 1</a><BR>
    <a href="http://ganji.80port.net/">sub menu 2</a><BR>
    <a href="http://ganji.80port.net/">sub menu 3</a><BR>
    </DIV>

    <DIV id="sub2" onmouseover="show('sub2')"
    style="width:100px; height:100px; position:absolute; left:97px; top:-12px; z-index:1;"
    onmouseout="hide('sub2')">
    <a href="http://ganji.80port.net/">sub menu 1</a><BR>
    <a href="http://ganji.80port.net/">sub menu 2</a><BR>
    <a href="http://ganji.80port.net/">sub menu 3</a><BR>
    </DIV>

    <DIV id="sub3" onmouseover="show('sub3')"
    style="width:100px; height:100px; position:absolute; left:176px; top:-12px; z-index:1;"
    onmouseout="hide('sub3')">
    <a href="http://ganji.80port.net/">sub menu 1</a><BR>
    <a href="http://ganji.80port.net/">sub menu 2</a><BR>
    <a href="http://ganji.80port.net/">sub menu 3</a><BR>
    </DIV>

    <DIV id="sub4" onmouseover="show('sub4')"
    style="width:100px; height:100px; position:absolute; left:254px; top:-12px; z-index:1;"
    onmouseout="hide('sub4')">
    <a href="http://ganji.80port.net/">sub menu 1</a><BR>
    <a href="http://ganji.80port.net/">sub menu 2</a><BR>
    <a href="http://ganji.80port.net/">sub menu 3</a><BR>

    </DIV></DIV>
    </TD>
    </TR>
    </TBODY>
    </TABLE>

    댓글 2005-05-19

  • rombardi

    나모에 레이어 기능을 이용해보세요...

    댓글 2005-05-19