管理资源吧首页>>>教程>>>编程>>>CSS/HTML教程>>>

一个新的CSS菜单代码

<html>

<head>

<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%3E%0D%0A%0D%0Aif%20(!document.getElementById)%0D%0A%0D%0A%20%20%20%20document.getElementById%20%3D%20function()%20%7B%20return%20null%3B%20%7D%0D%0A%0D%0Afunction%20initializeMenu(menuId%2C%20actuatorId)%20%7B%0D%0A%0D%0A%20%20%20%20var%20menu%20%3D%20document.getElementById(menuId)%3B%0D%0A%0D%0A%20%20%20%20var%20actuator%20%3D%20document.getElementById(actuatorId)%3B%0D%0A%0D%0A%20%20%20%20if%20(menu%20%3D%3D%20null%20%7C%7C%20actuator%20%3D%3D%20null)%20return%3B%0D%0A%0D%0A%20%20%20%20%2F%2Fif%20(window.opera)%20return%3B%20%2F%2F%20I%26%23146%3Bm%20too%20tired%0D%0A%0D%0A%20%20%20%20actuator.parentNode.style.backgroundImage%20%3D%20%22url(%2Fimages%2Fplus.gif)%22%3B%0D%0A%0D%0A%20%20%20%20actuator.onclick%20%3D%20function()%20%7B%0D%0A%0D%0A%20%20%20%20%20%20%20%20var%20display%20%3D%20menu.style.display%3B%0D%0A%0D%0A%20%20%20%20%20%20%20%20this.parentNode.style.backgroundImage%20%3D%0D%0A%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20(display%20%3D%3D%20%22block%22)%20%3F%20%22url(%2Fimages%2Fplus.gif)%22%20%3A%20%22url(%2Fimages%2Fminus.gif)%22%3B%0D%0A%0D%0A%20%20%20%20%20%20%20%20menu.style.display%20%3D%20(display%20%3D%3D%20%22block%22)%20%3F%20%22none%22%20%3A%20%22block%22%3B%0D%0A%0D%0A%20%20%20%20%20%20%20%20return%20false%3B%0D%0A%0D%0A%20%20%20%20%7D%0D%0A%0D%0A%7D%0D%0A%0D%0A%20window.onload%20%3D%20function()%20%7B%0D%0A%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20initializeMenu(%22productsMenu%22%2C%20%22productsActuator%22)%3B%0D%0A%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20initializeMenu(%22newPhonesMenu%22%2C%20%22newPhonesActuator%22)%3B%0D%0A%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20initializeMenu(%22compareMenu%22%2C%20%22compareActuator%22)%3B%0D%0A%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%0D%0A%3C%2Fscript%3E">

<style>

body {

font-family: verdana, helvetica, arial, sans-serif;

}

#mainMenu {

background-color: #EEE;

border: 1px solid #CCC;

color: #000;

width: 203px;

}

#menuList {

margin: 0px;

padding: 10px 0px 10px 15px;

}

li.menubar {

background: url(/images/plus.gif) no-repeat 0em 0.3em;

font-size: 12px;

line-height: 1.5em;

list-style: none outside;

}

.menu, .submenu {

display: none;

margin-left: 15px;

padding: 0px;

}

.menu li, .submenu li {

background: url(/images/square.gif) no-repeat 0em 0.3em;

list-style: none outside;

}

a.actuator {

background-color: transparent;

color: #000;

font-size: 12px;

padding-left: 15px;

text-decoration: none;

}

a.actuator:hover {

text-decoration: underline;

}

.menu li a, .submenu li a {

background-color: transparent;

color: #000;

font-size: 12px;

padding-left: 15px;

text-decoration: none;

}

.menu li a:hover, submenu li a:hover {

/*border-bottom: 1px dashed #000;*/

text-decoration: underline;

}

span.key {

text-decoration: underline;

}

</style>

</head>

<body>

<div id="mainMenu">

<ul id="menuList">

<li class="menubar">

<a href="#" _ewebeditor_ta_href="%23" id="productsActuator" class="actuator">Phones</a>

<ul id="productsMenu" class="menu">

<li>

<a href="#" _ewebeditor_ta_href="%23" id="newPhonesActuator" class="actuator">New Phones</a>

<ul id="newPhonesMenu" class="submenu">

<li><a href="#" _ewebeditor_ta_href="%23">9290</a></li>

<li><a href="#" _ewebeditor_ta_href="%23">8390</a></li>

<li><a href="#" _ewebeditor_ta_href="%23">8290</a></li>

<li><a href="#" _ewebeditor_ta_href="%23">8270</a></li>

</ul>

</li>

<li>

<a href="#" _ewebeditor_ta_href="%23" id="compareActuator" class="actuator">Compare</a>

<ul id="compareMenu" class="submenu">

<li><a href="#" _ewebeditor_ta_href="%23">All Phones</a></li>

<li><a href="#" _ewebeditor_ta_href="%23">Service Provider</a></li>

</ul>

</li>

</ul>

</li>

</ul>

</div>

</body>

</html>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

教程首页更多教程