一個(gè)新的CSS菜單代碼

2020-10-23 18:42:21

字體：大中小

供稿：網(wǎng)友

<html><head><script>if (!document.getElementById)    document.getElementById = function() { return null; }function initializeMenu(menuId, actuatorId) {    var menu = document.getElementById(menuId);    var actuator = document.getElementById(actuatorId);    if (menu == null || actuator == null) return;    //if (window.opera) return; // I’m too tired    actuator.parentNode.style.backgroundImage = "url(/images/plus.gif)";    actuator.onclick = function() {        var display = menu.style.display;        this.parentNode.style.backgroundImage =            (display == "block") ? "url(/images/plus.gif)" : "url(/images/minus.gif)";        menu.style.display = (display == "block") ? "none" : "block";        return false;    }} window.onload = function() {            initializeMenu("productsMenu", "productsActuator");            initializeMenu("newPhonesMenu", "newPhonesActuator");            initializeMenu("compareMenu", "compareActuator");        }</script><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   class="iwvjtn8m0"   id="mainMenu">      <ul id="menuList">        <li id="iwvjtn8m0"    class="menubar">          Phones          <ul id="productsMenu" class="menu">            <li>              New Phones              <ul id="newPhonesMenu" class="submenu">                <li>9290</li>                <li>8390</li>                <li>8290</li>                <li>8270</li>              </ul>            </li>            <li>              Compare              <ul id="compareMenu" class="submenu">                <li>All Phones</li>                <li>Service Provider</li>              </ul>            </li>          </ul>        </li>      </ul>    </div>  </body></html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

上一篇：客齊集OEM的CSS解析與開(kāi)發(fā)經(jīng)驗(yàn)

下一篇：非常漂亮的Div+CSS布局入門(mén)教程第1/5頁(yè)