홈페이지 제작에 도움이 될만한 각종 테그 정보 입니다.

[자바스크립트] 세로 슬라이딩 메뉴 소스

세상이야기.      조회 수 2973 추천 수 0 2011.05.10 10:26:31


J001.jpg

 

위처럼 나오게 하는 스크립트 입니다. 좌측은 대메뉴..    

-----------------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<style type="text/css"> 
/* DEMO CSS */
a{
 color:red;
 text-decoration:none;
}
img{
 border:0px;
}
#mainContainer{
 width:760px;
 height:600px;
 margin:0 auto;
 text-align:left;
 background-color:#FFF;
}

#leftContainer{
 width:160px;
 float:left;
 padding-left:5px;
 padding-right:5px;
 height:300px;
}

#contentContainer{
 width:590px;
 float:left;
}
.ad{
 clear:both;
 text-align:center;
 padding:5px;
}

/* END DEMO CSS */
#dhtmlgoodies_menu{
 font-family:arial; /* Font for main menu items */
 width:150px; /* Width of main menu */

}
#dhtmlgoodies_menu li{ /* Main menu <li> */
 list-style-type:none; /* No bullets */
 margin:0px; /* No margin - needed for Opera */
}
#dhtmlgoodies_menu ul{
 margin:0px; /* No <ul> air */
 padding:0px; /* No <ul> air */
}
#dhtmlgoodies_menu ul li ul{ /* Styling for those who doesn't have javascript enabled */
 padding-left:10px;
}
#dhtmlgoodies_menu li a{ /* Main menu links */
 text-decoration:none; /* No underline */
 color:#000; /* Black text color */

 height:20px; /* 20 pixel height */
 line-height:20px; /* 20 pixel height */
 vertical-align:middle; /* Align text in the middle */
 border:1px solid #000; /* Black border */
 background-color:#FAFAFA; /* Light blue background color */
 margin:1px; /* A little bit of air */
 padding:1px; /* Air between border and text inside */

 display:block;
}
#dhtmlgoodies_menu li a:hover,#dhtmlgoodies_menu .activeMainMenuItem{
 color:#FFF;
 background-color:#317082;
}
.dhtmlgoodies_subMenu{
 visibility:hidden;
 position:absolute;
 overflow:hidden;
 border:1px solid #000;
 background-color:#FAFAFA;
 font-family:arial;
 text-align:left;

}
.dhtmlgoodies_subMenu ul{
 margin:0px;
 padding:0px;
}
.dhtmlgoodies_subMenu ul li{
 list-style-type:none;
 margin:0px;
 padding:1px; /* 1px of air between submenu border and sub menu item - (the "white" space you see on mouse over )*/
}
.dhtmlgoodies_subMenu ul li a{ /* Sub menu items */
 white-space:nowrap; /* No line break */
 text-decoration:none; /* No underline */
 color:#000; /* Black text color */

 height:16px; /* 16 pixels height */
 line-height:16px; /* 16 pixels height */
 padding:1px; /* 1px of "air" inside */

 display:block; /* Display as block - you shouldn't change this */
}
.dhtmlgoodies_subMenu ul li a:hover{ /* Sub menu items - mouse over effects */
 color:#FFF; /* White text */
 background-color:#317082; /* Blue background */
}
</style>

<SCRIPT LANGUAGE="JavaScript">
<!--
/***
* A huge thanks to Dean Parkinson for the help with this widget
*/
/************************************************************************************************************
@fileoverview
Slide out menu
Copyright (C) 2007  Dean Parkinson

This library is free software; you can redistribute it and/or
modify it under the terms of the GNU Lesser General Public
License as published by the Free Software Foundation; either
version 2.1 of the License, or (at your option) any later version.

This library is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
Lesser General Public License for more details.

You should have received a copy of the GNU Lesser General Public
License along with this library; if not, write to the Free Software
Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301  USA

Alf Magne Kalleland, 2007
Owner of DHTMLgoodies.com


************************************************************************************************************/ 
var MENUDIV_ID = "dhtmlgoodies_menu";
var SUBMENU_CLASS = 'dhtmlgoodies_subMenu';
var menuItems;
var slideSpeed_out = 10; // Steps to move sub menu at a time ( higher = faster)
var slideSpeed_in = 10;
var delayMenuClose = 150; // Microseconds from mouseout to close of menu
var slideTimeout_out = 25; // Microseconds between slide steps ( lower = faster)
var slideTimeout_in = 10; // Microseconds between slide steps ( lower = faster)
var xOffsetSubMenu = 0;  // Offset x-position of sub menu items - use negative value if you want the sub menu to overlap main menu

/* Don't change anything below here */

var indeces = new Array();
indeces[0] = 0;
var isMSIE = navigator.userAgent.indexOf('MSIE')>=0?true:false;
var browserVersion = parseInt(navigator.userAgent.replace(/.*?MSIE ([0-9]+?)[^0-9].*/g,'$1'));
if(!browserVersion)browserVersion=1;

function mouseOn(obj) {
 var mi = findNode(getSearchIdFromObj(obj));
 if (mi) mi.mouseOn();
}

function mouseOff(obj) {
 var mi = findNode(getSearchIdFromObj(obj));
 if (mi) mi.mouseOff();
}

function getSearchIdFromObj(obj) {
 // pull the postfix off the A link or LI tag id and return the menu item ID
 var objId = obj.id;
 var idx = objId.indexOf('_');
 if (idx>=0) {
  return "MenuItem" + objId.substring(idx);
 }
 return null;
}

function slideChildMenu(aId) {
 var mi = findNode(aId);
 if (mi) mi.slideChildMenu();
}

function findNode(searchId) {
 var result;
 for (var no=0;no<menuItems.length;no++) {
  result = menuItems[no].findNode(searchId);
  if (result) return result;
 }
 return null;
}

function getNextIndex(lvl) {
 var result = 0;
 if (indeces.length<=lvl) {
  indeces[lvl] = 1;
 } else {
  result = indeces[lvl];
  indeces[lvl]++;
 }
 return result;
}

function MenuItem(divref, ulref, liref, lvlnum, parentref) {
 this.parent = parentref;
 this.div = divref;
 this.ul = ulref;
 this.width = this.ul.offsetWidth;
 // this.left = div.style.left.replace(/[^0-9]/g,'');
 this.li = liref;
 this.alink = this.li.getElementsByTagName('A')[0];
 this.lvl = lvlnum;
 this.idx = getNextIndex(this.lvl);
 this.children;
 this.subUL = this.li.getElementsByTagName('UL')[0];
 this.children;
 this.isMouseOnMe = false;
 // note: if !isOpen && !isClosed then I am animating a slide
 this.isChildMenuOpen = false;
 this.isChildMenuClosed = true;

 // Constructor
 // if a node does not have an A tag but it's children do then we need
 // null out this node's alink field...
 if (this.alink) {
  if (this.alink.parentNode!=this.li) this.alink = null;
 }
 if (this.subUL) {
  this.children = new Array();
  var subLI = this.subUL.getElementsByTagName('LI')[0];
  while(subLI) {
   if(subLI.tagName && subLI.tagName.toLowerCase()=='li') {
    this.children[this.children.length] = new MenuItem(null, this.subUL, subLI, this.lvl + 1, this);
   }
   subLI = subLI.nextSibling;
  }
 }

 this.getPostfix = function() {
  return '_' + this.idx + '_' + this.lvl;
 }
 
 this.getId = function() {
  return "MenuItem" + this.getPostfix();
 }

 this.hasChildren = function() {
  return (this.children!=null);
 }

 this.getTopPos = function() {
  var origDisp = this.div.style.display;
  this.div.style.display = "";
  var obj = this.li;
  var result = obj.offsetTop;
  while((obj = obj.offsetParent) != null) result += obj.offsetTop;
  this.div.style.display = origDisp;
  return result;
 }

 this.getLeftPos = function() {
  var origDisp = this.div.style.display;
  this.div.style.display = "";
  var obj = this.li;
  var result = obj.offsetLeft;
  while((obj = obj.offsetParent) != null) result += obj.offsetLeft;
  this.div.style.display = origDisp;
  return result;
 }

 this.renderNode = function() {
  // set node properties
  this.li.id = "menuItemLI" + this.getPostfix();
  this.ul.style.position = "relative";
  if (this.alink) {
   this.alink.id = "menuItemA" + this.getPostfix();
   this.alink.onmouseover = function() {mouseOn(this);};
   this.alink.onmouseout = function() {mouseOff(this);};
  } else {
   this.li.onmouseover = function() {mouseOn(this);};
   this.li.onmouseout = function() {mouseOff(this);};
  }

  // set sub-menu nodes
  if (this.hasChildren()) {
   var mi = this.children[0];
   var subdiv = document.createElement('DIV');
   subdiv.className=SUBMENU_CLASS;
   document.body.appendChild(subdiv);
   subdiv.id = "menuItemDIV" + mi.getPostfix();
   this.subUL.id = "menuItemUL" + mi.getPostfix();
   subdiv.appendChild(this.subUL);
   subdiv.style.left = this.getLeftPos() + this.width + xOffsetSubMenu + 'px';
   subdiv.style.top = this.getTopPos() + 'px';
   subdiv.style.visibility = "hidden";
   subdiv.style.display = "none";
   subdiv.style.zindex = "1000";
   for (var no=0;no<this.children.length;no++) {
    var mi = this.children[no];
    mi.div = subdiv;
    mi.renderNode();
   }
  }
  return this.li;
 }

 this.findNode = function(searchId) {
  var result;
  if (this.getId() == searchId) {
   result = this;
  } else {
   if (this.hasChildren()) {
    for (var no=0;no<this.children.length;no++) {
     var mi = this.children[no];
     result = mi.findNode(searchId);
     if (result!=null) break;
    }
   }
  }
  return result;
 }

 this.mouseOn = function() {
  this.isMouseOnMe = true;
  if (this.hasChildren() && this.isChildMenuClosed) {
   this.initiateChildMenuOpen();
  }
 }

 this.mouseOff = function() {
  this.isMouseOnMe = false;
  if (this.hasChildren() && !this.isChildMenuClosed) {
   this.initiateChildMenuClose();
  } else if (this.parent) {
   this.parent.mouseOff();
  }
 }

 this.isMouseOnChild = function() {
  if (this.isMouseOnMe) return true;
  if (this.hasChildren()) {
   for (var no=0;no<this.children.length;no++) {
    if (this.children[no].isMouseOnChild()) return true;
   }
  }
  return false;
 }

 this.initiateChildMenuOpen = function() {
  this.isChildMenuClosed = false;
  var childDiv = this.children[0].div;
  childDiv.style.width = "0px";
  childDiv.style.visibility = "visible";
  childDiv.style.display = "";
  this.slideChildMenu();
 }

 this.initiateChildMenuClose = function() {
  this.isChildMenuOpen = false;
  // we have to wait to close the menu
  // allow the mouse to navigate over the child menu
  setTimeout("slideChildMenu('" + this.getId() + "')", delayMenuClose);
 }

 this.slideChildMenu = function() {
  var divref = this.children[0].div;
  var ulref = this.children[0].ul;
  var maxwidth = this.children[0].width;
  var nextWidth;
  if (this.isMouseOnMe  || this.isMouseOnChild()) {
   nextWidth = divref.offsetWidth + slideSpeed_out;
   if (nextWidth >= maxwidth) {
    this.finishOpeningChild(divref, ulref, maxwidth);
   } else {
    ulref.style.left = nextWidth - maxwidth + "px";
    divref.style.width = nextWidth + "px";
    setTimeout("slideChildMenu('" + this.getId() + "')", slideTimeout_out);
   }
  } else {
   nextWidth = divref.offsetWidth - slideSpeed_in;
   if (nextWidth <= 0) {
    this.finishClosingChild(divref, ulref, maxwidth);
   } else {
    ulref.style.left = nextWidth - maxwidth + "px";
    divref.style.width = nextWidth + "px";
    setTimeout("slideChildMenu('" + this.getId() + "')", slideTimeout_out);
   }
  }
 }

 this.finishOpeningChild = function(divref, ulref, maxwidth) {
  this.isChildMenuOpen = true;
  this.isChildMenuClosed = false;
  ulref.style.left = "0px";
  divref.style.width = maxwidth + "px";
 }

 this.finishClosingChild = function(divref, ulref, maxwidth) {
  this.isChildMenuOpen = false;
  this.isChildMenuClosed = true;
  divref.style.visibility = "hidden";
  divref.style.display = "none";
  divref.style.width = maxwidth + "px";
  if (this.parent) this.parent.mouseOff();
 }

}

function collectMenuNodes(menuObj) {
     if (!menuObj) return null;

     var results = new Array();
     var menuUL = menuObj.getElementsByTagName('UL')[0];
     var menuLI = menuUL.getElementsByTagName('LI')[0];
     while(menuLI) {
        if(menuLI.tagName && menuLI.tagName.toLowerCase()=='li') {
              results[results.length] = new MenuItem(menuObj, menuUL, menuLI, 0, null);
        }
        menuLI = menuLI.nextSibling;
     }
     return results;
}

function initMenu() {
 var mainDiv = document.getElementById(MENUDIV_ID);
 menuItems = collectMenuNodes(mainDiv);
 if (menuItems) {
  for (var no=0;no<menuItems.length;no++) {
   var mi = menuItems[no];
   mi.renderNode();
  }
  mainDiv.style.visibility = 'visible';
 }
 // window.onresize = resetPosition;
}

window.onload = initMenu;
//-->
</SCRIPT>

</head>
<body>
 <div id="leftContainer">
  <!--- START MENU HTML -->
  <div id="dhtmlgoodies_menu" style="visibility: hidden;">
  <ul>
   <li><a href="#">New scripts</a>
    <ul>
     <li><a href="#">Slide out menu</a></li>
     <li><a href="#">Content organizer</a>
      <ul>
       <li><a href="#">Item #1</a></li>
       <li><a href="#">Item #2</a></li>
      </ul>
     </li>
     <li><a href="#">Slide in pane</a></li>
     <li><a href="#">Chess widget</a></li>
     <li><a href="#">Color picker</a></li>
    </ul>
   </li>
   <li><a href="#">Updated scripts</a>
    <ul>
     <li><a href="#">Calendar script</a></li>
     <li><a href="#">Tab menu</a></li>
     <li><a href="#">DHTML menu</a></li>
     <li><a href="#">Slide in pane</a></li>
    </ul>
   </li>
   <li><a href="#">Support us</a>
    <ul>
     <li><a href="#">Link to us</a></li>
     <li><a href="#">Recommend us</a></li>
     <li><a href="#">Donate</a></li>
    </ul>
   </li>
   <li><a href="#">Forum</a>
    <ul>
     <li><a href="#">Topic one</a></li>
     <li><a href="#">Topic two</a></li>
     <li><a href="#">Topic three</a></li>
    </ul>
   </li>
   <li><a href="#">Contact us</a>
    <ul>
     <li><a href="#">Support</a></li>
     <li><a href="#">Feedback</a></li>
     <li><a href="#">Submit a script</a></li>
    </ul>
   </li>
   <li><a href="#">The end(no subs)</a></li>
  </ul>
  </div>
  <!-- END MENU HTML-->
 </div>
</div>

</body>
</html> 

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

출처: webmadang.net

List of Articles
번호 제목 글쓴이 날짜 조회 수
32 페이지 상단 이동 버턴 만들기 세상이야기 2018-12-23 83
31 CSS 배경 이미지 속성 세상이야기 2017-12-24 81
30 HTML5 비디오 / 오디오 삽입 테그 세상이야기 2017-12-19 110
29 [자바스크립트] 클릭시 숨은 부분이 표시되는 메뉴 file 세상이야기. 2011-05-10 1627
28 [자바스크립트] 세로형 슬라이딩 메뉴 소스 file 세상이야기. 2011-05-10 3304
» [자바스크립트] 세로 슬라이딩 메뉴 소스 file 세상이야기. 2011-05-10 2973
26 [자바스크립트] 가로형 메뉴 만들기 소스 세상이야기. 2011-05-10 1909
25 [자바스크립트] 움직이는 팝업 레이어 세상이야기. 2011-05-10 1788
24 [자바스크립트] 화면 우측하단에 고정버턴 만들기 세상이야기. 2011-05-10 1686
23 제로보드 게시글 열람글 아래 목록 안나오게 하는 방법 세상이야기 2011-01-20 2457
XE Login