자유롭게 게시물을 올릴수있는 게시판입니다.
  • 유년추억
  • 학교생활
  • 입시준비
  • 대학생활
  • 군생활
  • 알바생활
  • 취업준비
  • 직장생활
  • 원룸생활
  • 연애중
  • 결혼준비
  • 집안살림
  • 자녀교육
  • 창업준비
  • 이민유학
  • 노후생활
  • 전체보기


BCPARK 유튜브 구독 감사합니다. BCPARK 유튜브 구독 감사합니다.
비씨파크 회원 뭉쳐서 100만 유튜브 채널 가즈아~~~


계단형 메뉴(2)

 
<!---- [1단계] 아래의 소스코드를 <HEAD>와 </HEAD> 사이에 붙여 넣으세요 ---->

<STYLE>

.menuBar
{
    POSITION: relative;
    BACKGROUND-COLOR: transparent;
    TEXT-ALIGN: center
}
.Bar
{
    BORDER-RIGHT: orange 1px outset;
    BORDER-TOP: orange 1px outset;
    FLOAT: left;
    BORDER-LEFT: orange 1px outset;
    WIDTH: 100px;
    CURSOR: hand;
    TEXT-INDENT: 5px;
    BORDER-BOTTOM: orange 1px outset;
    POSITION: relative;
    BACKGROUND-COLOR: gold;
    TEXT-ALIGN: center
}
.menu
{
    BORDER-RIGHT: buttonhighlight thin outset;
    BORDER-TOP: buttonhighlight thin outset;
    VISIBILITY: hidden;
    BORDER-LEFT: buttonhighlight thin outset;
    WIDTH: 150px;
    LINE-HEIGHT: 140%;
    BORDER-BOTTOM: buttonhighlight thin outset;
    POSITION: absolute;
    BACKGROUND-COLOR: gold
}
.menuItem
{
    PADDING-RIGHT: 15px;
    PADDING-LEFT: 10px;
    WIDTH: 100%;
    CURSOR: hand;
    LINE-HEIGHT: 20px;
    BORDER-BOTTOM: gold 1px solid
}
.ItemMouseOver
{
    PADDING-RIGHT: 15px;
    PADDING-LEFT: 10px;
    WIDTH: 100%;
    CURSOR: hand;
    COLOR: highlighttext;
    LINE-HEIGHT: 20px;
    BORDER-BOTTOM: gold 1px solid;
    BACKGROUND-COLOR: highlight
}
.ItemMouseOut
{
    WIDTH: 100%
}
.Arrow
{
    FLOAT: right;
    FONT-FAMILY: Webdings;
    POSITION: absolute;
    TEXT-ALIGN: left
}
.barOver
{
    BORDER-RIGHT: orange 1px ridge;
    BORDER-TOP: orange 1px ridge;
    FLOAT: left;
    BORDER-LEFT: orange 1px ridge;
    WIDTH: 100px;
    CURSOR: hand;
    TEXT-INDENT: 5px;
    BORDER-BOTTOM: orange 1px ridge;
    POSITION: relative;
    BACKGROUND-COLOR: orange;
    TEXT-ALIGN: center
}
</STYLE>

<SCRIPT LANGUAGE="JavaScript">
<!--


   function InitMenu()
   {
     var bar = menuBar.children    

     for(var i=0;i < bar.length;i++)
        {
          var menu=eval(bar[i].menu)
          menu.style.visibility = "hidden"
          bar[i].onmouseover = new Function("ShowMenu("+bar[i].id+")")
          var Items = menu.children
          for(var j=0; j<Items.length; j++)
            {
              var menuItem = eval(Items[j].id)
                
                if(menuItem.menu != null)
                   {
                    menuItem.innerHTML += "<Span Id="+menuItem.id+"_Arrow class='Arrow'>4</Span>"
                    //var tmp = eval(menuItem.id+"_Arrow")
                    // tmp.style.pixelLeft = menu.getBoundingClientRect().Right //- tmp.offsetWidth - 15
                    FindSubMenu(menuItem.menu)}
              
                 if(menuItem.cmd != null)
                   {
                   menuItem.onclick = new Function("Do("+menuItem.id+")") }
                  
              menuItem.onmouseover = new Function("highlight("+Items[j].id+")")
            
            }    
        
        }  
   }
   function FindSubMenu(subMenu)
   {
         var menu=eval(subMenu)
         var Items = menu.children
          for(var j=0; j<Items.length; j++)
            {
              menu.style.visibility = "hidden"
              var menuItem = eval(Items[j].id)
              
              
              if(menuItem.menu!= null)
                 {
                    menuItem.innerHTML += "<Span Id="+menuItem.id+"_Arrow class='Arrow'>4</Span>"
                    // var tmp = eval(menuItem.id+"_Arrow")
                    //tmp.style.pixelLeft = 35 //menuItem.getBoundingClientRect().right - tmp.offsetWidth - 15
                    FindSubMenu(menuItem.menu)
                 }

                 if(menuItem.cmd != null)
                   {
                   menuItem.onclick = new Function("Do("+menuItem.id+")") }
                  
              menuItem.onmouseover = new Function("highlight("+Items[j].id+")")
                
            }  
   }
   function ShowMenu(obj)
   {
     HideMenu(menuBar)
     var menu = eval(obj.menu)
     var bar = eval(obj.id)
     bar.className="barOver"
     menu.style.visibility = "visible"
     menu.style.pixelTop =  obj.getBoundingClientRect().top + obj.offsetHeight + Bdy.scrollTop
     menu.style.pixelLeft = obj.getBoundingClientRect().left + Bdy.scrollLeft
   }
  
   function highlight(obj)
   {
     var PElement = eval(obj.parentElement.id)
     if(PElement.hasChildNodes() == true)
     {  var Elements = PElement.children
       for(var i=0;i<Elements.length;i++)
       {
          TE = eval(Elements[i].id)
          TE.className = "menuItem"
       }
      }
     obj.className="ItemMouseOver"
     window.defaultStatus = obj.title
     ShowSubMenu(obj)
   }
  
   function Do(obj)
   {
    var cmd = eval(obj).cmd        
    window.navigate(cmd)
    
   }
  
   function HideMenu(obj)
   {
          if(obj.hasChildNodes()==true)
              {  
                 var child = obj.children    
                
                 for(var j =0;j<child.length;j++)
                  {
                     if (child[j].className=="barOver")
                     {var bar = eval(child[j].id)
                      bar.className="Bar"}
                      
                     if(child[j].menu != null)
                       {
                          var childMenu = eval(child[j].menu)
                          if(childMenu.hasChildNodes()==true)
                               HideMenu(childMenu)
                          
                           childMenu.style.visibility = "hidden"
                         }
                  }
              
              }
   }
  function ShowSubMenu(obj)
  {
     PMenu = eval(obj.parentElement.id)
      HideMenu(PMenu)
     if(obj.menu != null)
     {
     var menu = eval(obj.menu)
     menu.style.visibility = "visible"
     menu.style.pixelTop =  obj.getBoundingClientRect().top + Bdy.scrollTop
     menu.style.pixelLeft = obj.getBoundingClientRect().right + Bdy.scrollLeft
     if(menu.getBoundingClientRect().right > window.screen.availWidth )
       menu.style.pixelLeft = obj.getBoundingClientRect().left - menu.offsetWidth
    }
  }


//-->
</SCRIPT>

<!------------------------- 여기까지 ---------------------------------->

</HEAD>

<!---- [2단계] <BODY> 태그안에 있는 코드를 복사 해 넣으세요 --------------->

<BODY OnLoad="InitMenu()" Onclick="HideMenu(menuBar)" ID="Bdy">

<!------------------------- 여기까지 ---------------------------------->

<!---- [2단계] 아래의 방법으로 원하는 위치에 복사 해 넣으세요 ------------------>

<DIV Id="menuBar" class="menuBar" >
    <DIV Id="Bar1" class="Bar"  menu="menu1">Menu #1</DIV>
    <DIV Id="Bar2" class="Bar"  menu="menu2">Menu #2</DIV>
    <DIV Id="Bar3" class="Bar"  menu="menu3">Menu #3</DIV>
    <DIV Id="Bar4" class="Bar"  menu="menu4">Menu #4</DIV>
</DIV>

<!--메뉴항목을 설정 하세요 -->

<div Id="menu1" class="menu" >
   <div Id="menuItem1_1" class="menuItem"  menu="menu6">SubMenu #1</div>
   <div Id="menuItem1_2" class="menuItem" title="JavaScripts" cmd="#"> JavaScript Source </div>
   <div Id="menuItem1_3" class="menuItem" title="WDVL" cmd="//www.daum.net">한메일넷</div>
</div>
<div Id="menu2" class="menu">
   <div Id="menuItem2_1" class="menuItem">Page #1</div>
   <div Id="menuItem2_2" class="menuItem">Page #2</div>
   <div Id="menuItem2_3" class="menuItem">Page #3</div>
</div>
<div Id="menu3" class="menu">
   <div Id="menuItem3_1" class="menuItem">Page #1</div>
   <div Id="menuItem3_2" class="menuItem">Page #2</div>
   <div Id="menuItem3_3" class="menuItem">Page #3</div>
   <div Id="menuItem3_4" class="menuItem" menu="menu5">SubMenu #4</div>
</div>
<div Id="menu4" class="menu">
   <div Id="menuItem4_1" class="menuItem">Page #1</div>
   <div Id="menuItem4_2" class="menuItem">Page #2</div>
   <div Id="menuItem4_3" class="menuItem">Page #3</div>
   <div Id="menuItem4_4" class="menuItem">Page #4</div>
</div>
<div id="menu5" class="menu">
    <div Id="menuItem5_1" class="menuItem">Page #4-1</div>
    <div Id="menuItem5_2" class="menuItem">Page #4-2</div>
    <div Id="menuItem5_3" class="menuItem">Page #4-3</div>
</div>
<div id="menu6" class="menu">
    <div Id="menuItem6_1" class="menuItem">Page #1-1</div>
    <div Id="menuItem6_2" class="menuItem">Page #1-2</div>
    <div Id="menuItem6_3" class="menuItem" menu="menu7">SubMenu #1-1</div>
</div>
<div id="menu7" class="menu">
    <div Id="menuItem7_1" class="menuItem">Page #1-1-1</div>
    <div Id="menuItem7_2" class="menuItem">Page #1-1-2</div>
    <div Id="menuItem7_3" class="menuItem">Page #1-1-3</div>
</div>

<!------------------------- 여기까지 ---------------------------------->

비씨파크 카카오톡 오픈채팅방 오픈! gogogo~~~
[초대코드 bcpark]


2004-05-06 23:00:37
661 번 읽음
☞ 로그인 후 의견을 남기실 수 있습니다
 캐시선물


홈페이지 운영하세요? 용량과 트래픽과 가격으로 고민하셨어요?
비씨파크 평생 무제한 웹호스팅





Copyright ⓒ 2000-2025 BCPARK Inc. All Right Reserved.

365ch.com 128bit Valid HTML 4.01 Transitional and Valid CSS!
태그