一个新的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 id="mainMenu">
      <ul id="menuList">
        <li 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需再刷新一下页面才能执行]

一个新的CSS菜单代码

让iframe自适应高度（支持xhtml）IE firefox兼容
让iframe自适应高度（支持xhtml）IE firefox兼容...
2007-04-04
CSS中几种常见的注释
CSS中几种常见的注释...
2007-05-05
line-block的运用最小宽度的设置
line-block：本身是内联盒模型的存在，又具备块状盒模型的特性。很好很强大的东西啊～
2008-05-05
从加载到渲染的全链路提速的网站打开速度前端优化
一个电商网站通过使用ChromeDevTools进行性能诊断,作者发现并解决了资源加载、图片优化、代码分割、虚拟列表、状态管理以及缓存策略等多个问题,经过优化,网站的首屏加载时间从8秒降至2秒,多性能指标均有显著提升,和大家分享网站打开速度前端优化的实战经验
2024-12-12
超强推荐CSS打造经典鼠标触发显示选项
超强推荐CSS打造经典鼠标触发显示选项...
2007-09-09
web标准知识——用途相似的标签
在XHTML标签中有一些标签的作用是相似的，当然这里的相似是指语义相似，以至于很多人都不清楚这些相似的标签如何使用，那么今天的主题就是分解相似的标签，明确各个标签的用途。
2008-06-06
多浏览器支持CSS 容器内容超出(溢出)支持自动换行
完美支持IE，Firefox，Opera等浏览器。
2008-12-12
XHTML标签的自关闭写法的坏处分析
我们都知道XHTML里面的img标记应该这样写：<img alt="" src="" />，这种写法也就是所谓的自关闭，在XML中是完全合法的写法。
2008-09-09
css滤镜实现页面灰色黑白色效果代码
为方便站点哀悼，特提供素装代码，以表哀悼。以下为全站CSS代码。
2008-05-05
【已解决】标签页刷新问题
【已解决】标签页刷新问题...
2006-12-12

一个新的CSS菜单代码

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具