关于下拉菜单的JS代码

#mainMenu{

background-color: #FFF; /* Background color of main menu */

font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; /* Fonts of main menu items */

font-size:1.2em; /* Font size of main menu items */

border-bottom:1px solid #000000; /* Bottom border of main menu */

height:30px; /* Height of main menu */

position:relative; /* Don't change this position attribute */

visibility: hidden;

}

#mainMenu a{

padding-left:20px; /* Spaces at the left of main menu items */

padding-right:20px; /* Spaces at the right of main menu items */

font-weight: bold;

/* Don't change these two options */

position:absolute;

bottom:-1px;

}

#submenu{

font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; /* Font of sub menu items */

background-color:#E2EBED; /* Background color of sub menu items */

visibility: hidden;

width:778px; /* Don't change this option */

}

html>body #clearmenu{ /* non IE browsers menu bottom spacing */

margin-bottom: 2px;

}

#submenu div{

white-space:nowrap; /* Don't change this option */

}

Style attributes of active menu item

#mainMenu .activeMenuItem{

/* Border options */

border-left:1px solid #000000;

border-top:1px solid #000000;

border-right:1px solid #000000;

background-color: #E2EBED; /* Background color */

cursor:pointer; /* Cursor like a hand when the user moves the mouse over the menu item */

}

Style attributes of inactive menu items

#mainMenu .inactiveMenuItem{

color: #000; /* Text color */

cursor:pointer; /* Cursor like a hand when the user moves the mouse over the menu item */

}

#submenu a{

text-decoration:none; /* No underline on sub menu items - use text-decoration:underline; if you want the links to be underlined */

padding-left:5px; /* Space at the left of each sub menu item */

padding-right:5px; /* Space at the right of each sub menu item */

color: #000; /* Text color */

}

#submenu a:hover{

color: #FF0000; /* Red color when the user moves the mouse over sub menu items */

}

</style>

//more javascript from /support/analyzer/manual/html/General/CookiesJavaScript.htm

function Get_Cookie(name) {

var start = document.cookie.indexOf(name+"=");

var len = start+name.length+1;

if ((!start) && (name != document.cookie.substring(0,name.length))) return null;

if (start == -1) return null;

var end = document.cookie.indexOf(";",len);

if (end == -1) end = document.cookie.length;

return unescape(document.cookie.substring(len,end));

}

// This function has been slightly modified

function Set_Cookie(name,value,expires,path,domain,secure) {

expires = expires * 60*60*24*1000;

var today = new Date();

var expires_date = new Date( today.getTime() + (expires) );

var cookieString = name + "=" +escape(value) +

( (expires) ? ";expires=" + expires_date.toGMTString() : "") +

( (path) ? ";path=" + path : "") +

( (domain) ? ";domain=" + domain : "") +

( (secure) ? ";secure" : "");

document.cookie = cookieString;

}

function showHide()

{

if(activeMenuItem){

activeMenuItem.className = 'inactiveMenuItem';

var theId = activeMenuItem.id.replace(/[^\d]/g,'');

document.getElementById('submenu_'+theId).style.display='none';

}

activeMenuItem = this;

this.className = 'activeMenuItem';

var theId = this.id.replace(/[^\d]/g,'');

document.getElementById('submenu_'+theId).style.display='block';

if(rememberActiveTabByCookie){

Set_Cookie('dhtmlgoodies_tab_menu_tabIndex','index: ' + (theId-1),100);

}

function initMenu()

{

var mainMenuObj = document.getElementById('mainMenu');

var subMenuObj = document.getElementById('submenu'); //DD added line

mainMenuObj.style.visibility=subMenuObj.style.visibility="visible" //DD added line

var menuItems = mainMenuObj.getElementsByTagName('A');

if(document.all){

mainMenuObj.style.visibility = 'hidden';

document.getElementById('submenu').style.visibility='hidden';

}

if(rememberActiveTabByCookie){

var cookieValue = Get_Cookie('dhtmlgoodies_tab_menu_tabIndex') + '';

cookieValue = cookieValue.replace(/[^\d]/g,'');

if(cookieValue.length>0 && cookieValue<menuItems.length){

activeTabIndex = cookieValue/1;

}

var currentLeftPos = 15;

for(var no=0;no<menuItems.length;no++){

if(activateSubOnClick)menuItems[no].onclick = showHide; else menuItems[no].onmouseover = showHide;

menuItems[no].id = 'mainMenuItem' + (no+1);

menuItems[no].style.left = currentLeftPos + 'px';

currentLeftPos = currentLeftPos + menuItems[no].offsetWidth + topMenuSpacer;

if(no==activeTabIndex){

menuItems[no].className='activeMenuItem';

activeMenuItem = menuItems[no];

}else menuItems[no].className='inactiveMenuItem';

if(!document.all)menuItems[no].style.bottom = '-1px';

}

var mainMenuLinks = mainMenuObj.getElementsByTagName('A');

var subCounter = 1;

var parentWidth = mainMenuObj.offsetWidth;

while(document.getElementById('submenu_' + subCounter)){

var subItem = document.getElementById('submenu_' + subCounter);

if(leftAlignSubItems){

// No action

}else{

var leftPos = mainMenuLinks[subCounter-1].offsetLeft;

document.getElementById('submenu_'+subCounter).style.paddingLeft = leftPos + 'px';

subItem.style.position ='absolute';

if(subItem.offsetWidth > parentWidth){

leftPos = leftPos - Math.max(0,subItem.offsetWidth-parentWidth);

}

subItem.style.paddingLeft = leftPos + 'px';

subItem.style.position ='static';

}

if(subCounter==(activeTabIndex+1)){

subItem.style.display='block';

}else{

subItem.style.display='none';

}

subCounter++;

}

if(document.all){

mainMenuObj.style.visibility = 'visible';

document.getElementById('submenu').style.visibility='visible';

}

document.getElementById('submenu').style.display='block';

}

window.onload = initMenu;

</script>

</div>

</div>

<a href="/plug.asp?type=DreamWeaver插件">DreamWeaver插件</a>

<a href="/plug.asp?type=PhotoShop插件">PhotoShop插件</a>

<a href="/plug.asp?type=FLASH组件">FLASH组件</a>

</div>

<a href="/study.asp?type=多媒体制作">多媒体制作</a>

</div>

</div>