滑动菜单

技术文章

滑动菜单

时间：2009-03-09 点击：1698

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">

<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD>
<title>滑动菜单</title>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<STYLE type=text/css>A {
	COLOR: red; TEXT-DECORATION: none
}
BODY {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 0.8em; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; FONT-FAMILY: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; BACKGROUND-COLOR: #e2ebed; TEXT-ALIGN: center
}
IMG {
	BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px
}
#mainContainer {
	MARGIN: 0px auto; WIDTH: 760px; BACKGROUND-COLOR: #fff; TEXT-ALIGN: left
}
#leftContainer {
	PADDING-RIGHT: 5px; PADDING-LEFT: 5px; FLOAT: left; WIDTH: 160px; HEIGHT: 300px
}
#contentContainer {
	FLOAT: left; WIDTH: 590px
}
.ad {
	CLEAR: both; PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; PADDING-TOP: 5px; TEXT-ALIGN: center
}
#dhtmlgoodies_menu {
	WIDTH: 150px; FONT-FAMILY: arial
}
#dhtmlgoodies_menu LI {
	MARGIN: 0px; LIST-STYLE-TYPE: none
}
#dhtmlgoodies_menu UL {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
#dhtmlgoodies_menu UL LI UL {
	PADDING-LEFT: 10px
}
#dhtmlgoodies_menu LI A {
	BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 1px; BORDER-TOP: #000 1px solid; DISPLAY: block; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; MARGIN: 1px; VERTICAL-ALIGN: middle; BORDER-LEFT: #000 1px solid; COLOR: #000; LINE-HEIGHT: 20px; PADDING-TOP: 1px; BORDER-BOTTOM: #000 1px solid; HEIGHT: 20px; BACKGROUND-COLOR: #fafafa; TEXT-DECORATION: none
}
#dhtmlgoodies_menu LI A:hover {
	COLOR: #fff; BACKGROUND-COLOR: #317082
}
#dhtmlgoodies_menu .activeMainMenuItem {
	COLOR: #fff; BACKGROUND-COLOR: #317082
}
.dhtmlgoodies_subMenu {
	BORDER-RIGHT: #000 1px solid; BORDER-TOP: #000 1px solid; VISIBILITY: hidden; OVERFLOW: hidden; BORDER-LEFT: #000 1px solid; BORDER-BOTTOM: #000 1px solid; FONT-FAMILY: arial; POSITION: absolute; BACKGROUND-COLOR: #fafafa; TEXT-ALIGN: left
}
.dhtmlgoodies_subMenu UL {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
.dhtmlgoodies_subMenu UL LI {
	PADDING-RIGHT: 1px; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; MARGIN: 0px; PADDING-TOP: 1px; LIST-STYLE-TYPE: none
}
.dhtmlgoodies_subMenu UL LI A {
	PADDING-RIGHT: 1px; DISPLAY: block; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; COLOR: #000; LINE-HEIGHT: 16px; PADDING-TOP: 1px; WHITE-SPACE: nowrap; HEIGHT: 16px; TEXT-DECORATION: none
}
.dhtmlgoodies_subMenu UL LI A:hover {
	COLOR: #fff; BACKGROUND-COLOR: #317082
}
</STYLE>

var timeBeforeAutoHide = 700;	// Microseconds to wait before auto hiding menu(1000 = 1 second)
	var slideSpeed_out = 10;	// Steps to move sub menu at a time ( higher = faster)
	var slideSpeed_in = 10;
		
	
	var slideTimeout_out = 25;	// Microseconds between slide steps ( lower = faster)
	var slideTimeout_in = 10;	// Microseconds between slide steps ( lower = faster)
	
	var showSubOnMouseOver = true;	// false = show sub menu on click, true = show sub menu on mouse over
	var fixedSubMenuWidth = false;	// Width of sub menu items - A number(width in pixels) or false when width should be dynamic
	
	var xOffsetSubMenu = 0; 	// Offset x-position of sub menu items - use negative value if you want the sub menu to overlap main menu
	
	var slideDirection = 'right';	// Slide to left or right ?
	
	/* Don't change anything below here */
	
	var activeSubMenuId = false;
	var activeMainMenuItem = false;
	var currentZIndex = 1000;		
	var autoHideTimer = 0;
	var submenuObjArray = new Array();
	var okToSlideInSub = new Array();
	var subPositioned = new Array();

if(navigator.userAgent.indexOf('Opera')>=0){
					submenuObjArray[no+1] = new Array();
					submenuObjArray[no+1]['parentDiv'] = mainMenuItemArray[no];
					submenuObjArray[no+1]['divObj'] = div;
					submenuObjArray[no+1]['ulObj'] = sub;
					submenuObjArray[no+1]['width'] = sub.offsetWidth;
					submenuObjArray[no+1]['left'] = div.style.left.replace(/[^0-9]/g,'');
				}
				sub.style.left = 1 - sub.offsetWidth + 'px';	
				
				
				
				if(browserVersion<7 && isMSIE)div.style.width = '1px';	
					
				if(navigator.userAgent.indexOf('Opera')<0){
					submenuObjArray[no+1] = new Array();
					submenuObjArray[no+1]['parentDiv'] = mainMenuItemArray[no];
					submenuObjArray[no+1]['divObj'] = div;
					submenuObjArray[no+1]['ulObj'] = sub;
					submenuObjArray[no+1]['width'] = sub.offsetWidth;
					
					
					
					submenuObjArray[no+1]['left'] = div.style.left.replace(/[^0-9]/g,'');
					if(fixedSubMenuWidth)submenuObjArray[no+1]['width'] = fixedSubMenuWidth;
				}

if(!document.all)div.style.width = '1px';			
					
			}			
		}

menuObj.style.visibility = 'visible';
		
		window.onresize = resetPosition;
	}
	
	
	window.onload = initLeftMenu;
	</SCRIPT>

<META content="MSHTML 6.00.2900.3243" name=GENERATOR></HEAD>
<BODY>
<DIV id=mainContainer>
<DIV style="LINE-HEIGHT: 50px; HEIGHT: 50px">滑动菜单 </DIV>
<DIV id=leftContainer>
<DIV id=dhtmlgoodies_menu>
<UL>
  <LI><A href="#">New 
  scripts</A> 
  <UL>
    <LI><A 
    href="#">Slide out 
    menu</A> 
    <LI><A 
    href="#">Content 
    organizer</A> 
    <LI><A 
    href="#">Slide in 
    pane</A> 
    <LI><A 
    href="#">Chess 
    widget</A> 
    <LI><A 
    href="#">Color 
    picker</A> </LI></UL>
  <LI><A 
  href="#">Updated 
  scripts</A> 
  <UL>
    <LI><A 
    href="#">Calendar 
    script</A> 
    <LI><A href="#">Tab 
    menu</A> 
    <LI><A 
    href="#">DHTML 
    menu</A> 
    <LI><A 
    href="#">Slide in 
    pane</A> </LI></UL>
  <LI><A 
  href="#">Support 
  us</A> 
  <UL>
    <LI><A href="#">Link 
    to us</A> 
    <LI><A 
    href="#">Recommend 
    us</A> 
    <LI><A 
    href="#">Donate</A> 
    </LI></UL>
  <LI><A 
  href="#">Forum</A> 
  <UL>
    <LI><A 
    href="#">Topic 
    one</A> 
    <LI><A 
    href="#">Topic 
    two</A> 
    <LI><A 
    href="#">Topic 
    three</A> </LI></UL>
  <LI><A 
  href="#">Contact 
  us</A> 
  <UL>
    <LI><A 
    href="#">Support</A>

<LI><A 
    href="#">Feedback</A>

<LI><A 
    href="#">Submit a 
    script</A> </LI></UL>
  <LI><A href="#">The 
  end(no subs)</A> </LI></UL></DIV></DIV>
</DIV></DIV>

</BODY></HTML>

经典浮动弹窗层

实用经典浮动窗口

一个滑动门标签卡

滑动门式菜单,二级分类

鼠标提示说明文字(2)

> 返回

地址：上海市普陀区胶州路941号长久商务中心电话： QQ：