CSS效果的隐藏/显示型菜单

原创 2005年01月02日 00:14:00

<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>

切换CSS3实现隐藏与显示效果

这段时间html5,css3可谓大大的火了,什么apple与adobe的冲突,IE9 beta preview开放下载,并高调宣布支持html5与css3。这些消息都无疑将html5与css3推到了峰...
  • xipinghuan2106
  • xipinghuan2106
  • 2017年01月18日 18:02
  • 1797

菜单点击 显示和隐藏

Document *{margin:0; padding:0; font-size:13px; list-style:none;} .menu{width:...
  • u013539760
  • u013539760
  • 2015年04月26日 09:35
  • 1406

css隐藏下拉菜单的设置,当鼠标放上去时,自动显示下拉菜单

html部分:  ....      .....      .....     css部分: #a ul li{ dis...
  • skywordphp
  • skywordphp
  • 2016年12月07日 17:02
  • 2484

Unity3D GUI菜单弹出隐藏的效果

Unity3D GUI菜单弹出隐藏的效果 关于GUI菜单弹出隐藏效果 有做好的预设文件 效果图1 效果图2 再次点击红色LOGO会还原成效果图...
  • logcabin
  • logcabin
  • 2012年04月13日 15:09
  • 1775

CSS3动画控制元素阶梯显示

CSS3动画控制元素阶梯显示 实现这个效果简单总结分为以下几步: 1、将元素透明 2、增加动画 3、控制动画结束后的状态 4、控制动画执行时间...
  • u011109042
  • u011109042
  • 2017年11月22日 11:51
  • 115

jquery实现的固定位置下拉隐藏上拉显示悬浮导航菜单特效

jquery固定位置下拉隐藏上拉显示悬浮导航菜单特效代码 body{background-color:white; padding-top:10px; font:100 14px '...
  • gsls181711
  • gsls181711
  • 2014年12月17日 20:10
  • 3617

利用jQuery 实现一个简单的侧边菜单隐藏显示功能

直接步入正题,创建一个html文件, 复制以下代码部分就能看到效果 boot样式用的网络资源,可以直接使用 jQuery库自行添加 ps:没有拆分,有点略长,不过直接复制就能用了。 可以结合boot...
  • github_38725775
  • github_38725775
  • 2017年06月27日 14:37
  • 513

CSS根据屏幕大小控制隐藏与显示

转自:http://tec.5lulu.com/detail/103krn1h921dm8y3a.html Bootstrap 提供了一些辅助类,以便更快地实现对移动设备友好的开发。这些可以通过媒体查...
  • shoubuliaole88
  • shoubuliaole88
  • 2017年02月25日 16:50
  • 314

CSS+JS制作导航栏点击选中效果

CSS+JS制作导航栏点击选中效果
  • u013319480
  • u013319480
  • 2016年09月12日 11:04
  • 292

4种CSS3超酷移动手机滑动隐藏侧边栏菜单特效

这是一组共4种效果非常炫酷的CSS3移动手机滑动隐藏侧边栏菜单特效。这四种效果分别是:默认的点击滑动侧边栏菜单效果、带3D transforms的滑动侧边栏效果、文字缩放和淡入淡出效果的滑动侧边栏...
  • natalie86
  • natalie86
  • 2015年03月18日 19:48
  • 2659
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS效果的隐藏/显示型菜单
举报原因:
原因补充:

(最多只允许输入30个字)