一個新的CSS菜單代碼

更新時間：2007年03月17日 00:00:00 作者：

<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="oskoesw"   id="mainMenu">
      <ul id="menuList">
        <li id="cugmyge"    class="menubar">
          <a href="#" id="productsActuator" class="actuator">Phones</a>
          <ul id="productsMenu" class="menu">
            <li>
              <a href="#" id="newPhonesActuator" class="actuator">New Phones</a>
              <ul id="newPhonesMenu" class="submenu">
                <li><a href="#">9290</a></li>
                <li><a href="#">8390</a></li>
                <li><a href="#">8290</a></li>
                <li><a href="#">8270</a></li>
              </ul>
            </li>
            <li>
              <a href="#" id="compareActuator" class="actuator">Compare</a>
              <ul id="compareMenu" class="submenu">
                <li><a href="#">All Phones</a></li>
                <li><a href="#">Service Provider</a></li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </body>
</html>

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

一個新的CSS菜單代碼

讓iframe自適應高度（支持xhtml）IE firefox兼容
讓iframe自適應高度（支持xhtml）IE firefox兼容...
2007-04-04
CSS中幾種常見的注釋
CSS中幾種常見的注釋...
2007-05-05
line-block的運用最小寬度的設置
line-block：本身是內(nèi)聯(lián)盒模型的存在，又具備塊狀盒模型的特性。很好很強大的東西啊～
2008-05-05
從加載到渲染的全鏈路提速的網(wǎng)站打開速度前端優(yōu)化
一個電商網(wǎng)站通過使用ChromeDevTools進行性能診斷,作者發(fā)現(xiàn)并解決了資源加載、圖片優(yōu)化、代碼分割、虛擬列表、狀態(tài)管理以及緩存策略等多個問題,經(jīng)過優(yōu)化,網(wǎng)站的首屏加載時間從8秒降至2秒,多性能指標均有顯著提升,和大家分享網(wǎng)站打開速度前端優(yōu)化的實戰(zhàn)經(jīng)驗
2024-12-12
超強推薦CSS打造經(jīng)典鼠標觸發(fā)顯示選項
超強推薦CSS打造經(jīng)典鼠標觸發(fā)顯示選項...
2007-09-09
web標準知識——用途相似的標簽
在XHTML標簽中有一些標簽的作用是相似的，當然這里的相似是指語義相似，以至于很多人都不清楚這些相似的標簽如何使用，那么今天的主題就是分解相似的標簽，明確各個標簽的用途。
2008-06-06
多瀏覽器支持CSS 容器內(nèi)容超出(溢出)支持自動換行
完美支持IE，F(xiàn)irefox，Opera等瀏覽器。
2008-12-12
XHTML標簽的自關閉寫法的壞處分析
我們都知道XHTML里面的img標記應該這樣寫：<img alt="" src="" />，這種寫法也就是所謂的自關閉，在XML中是完全合法的寫法。
2008-09-09
css濾鏡實現(xiàn)頁面灰色黑白色效果代碼
為方便站點哀悼，特提供素裝代碼，以表哀悼。以下為全站CSS代碼。
2008-05-05
【已解決】標簽頁刷新問題
【已解決】標簽頁刷新問題...
2006-12-12