一个新的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菜单代码

css图片切换效果代码[不用js]
非常不错的图片切换效果代码，不用css，代码比较精简，推荐使用，注意一下多浏览器的兼容性
2008-09-09
css ie6 ie7 ff的CSS hack使用技巧
关于CSS HACK的文章在jb51.net中提及的也很多。CSSer必须掌握的关于IE6、IE7和FF的最简单的hack技巧。
2008-09-09
告别AJAX实现无刷新提交表单
通常对于无刷新提交表单，我们都是运用ajax实现的。前段时间了解到另一种无刷新提交表单的方法。现在整理出来分享给大家。
2014-05-05
div+CSS网页布局的意义与副作用原因小结
随着WEB2.0标准化设计理念的普及，国内很多大型门户网站已经纷纷采用DIV+CSS制作方法，从实际应用情况来看，此种方法绝对好于表格制作页面的方法。
2008-09-09
IE6/IE7/IE8/IE9中tbody的innerHTML不能赋值的完美解决方案
最近发现各大类库都能利用xxx.innerHTML=HTML片断来生成节点元素，再把它们插入到目标元素的各个位置上。这东西实际上就是insertAdjacentHTML，但是IE可恶的innerHTML把这优势变成劣势。
2014-06-06
html中CSS:hover选择器改变子元素、同级元素、就近元素的样式
鼠标悬浮覆盖元素后,以前使用js的mouseover和mouseout添加监听事件可以实现交互,现在可以使用CSS中的:hover选择器提高性能,:hover选择器可以针对不同的HTML元素,在鼠标悬停时改变元素（也可以是子元素、同级元素、就近元素）的样式,增强网页的互动性和用户体验,
2023-08-08
当ie7不认!important之后 [布局的解决办法]
当ie7不认!important之后 [布局的解决办法]...
2007-02-02
彻底弄懂CSS盒子模式系列教程集合
彻底弄懂CSS盒子模式系列教程集合...
2007-04-04
用CSS开发时髦的导航栏第二篇
我能够使用CSS和列表创造有子菜单的导航栏吗？有时候我们需要超过一级的导航栏 – 可是在CSS里面用样式化的列表能够创建多级导航栏吗？
2008-05-05
JAVASCRIPT IE 与 FF 中兼容写法记录
下面是高手整理的一些javascript在ie和ff中的兼容写法
2008-10-10

一个新的CSS菜单代码

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具