蔡晨:使用CSS实现滑动菜单栏1

来源：百度文库 编辑：九乡新闻网 时间：2024/04/30 12:00:40

滑动菜单示例



滑动菜单多用于菜单项目较多且菜单可归纳到少数类别的场合,点击类别滑动条会上下滑动以隐藏或显示其下的子菜单.其典型应用便是Visio中滑动菜单样式(上图).
本人在Web中实现了类似的控件(下图),拿出来希望和大家一起交流一下.

滑动效果的实现


本文中使用无序列表作为滑动条下的子菜单的实现,出现滑动效果实际是控制子菜单的隐藏和显示.
控制子菜单的隐藏和显示改变UL的display属性即可,当其为block时显示菜单,其为none时不显示,我们可以用JS来实现这一效果.
滑动块和菜单的页面代码示例如下:

实现效果之一

滑动块和菜单的页面代码示例


  诗歌

");
  
  • 春歌

    •   
  • 侠客行（李白）

    •   
  • 南陵别儿童入京（李白）

    •   
  • 忆昔开元全盛日

    • 注意这里用了UL来实现滑动块,你可以换成DIV.

    点击滑动块显示或隐藏菜单的JavaScript代码





    如何在点击菜单项翻页后保持展开状态

    现在剩下的问题是点击菜单项翻页后保持展开状态,如果使用Ajax左边可以不变,但右边内容区的代码全要通过Ajax实现有些费力不讨好,这里还是采用JSP的实现方法.
    具体做法就是在连接中将UL的id传出去,翻页再得到它与诸菜单项比较,如果id相等则展开,不相等则关闭.
    示例代码如下:

    用于翻页保持展开状态的JSP代码

    <% 
      String ulId=request.getParameter("ulId");
      if(ulId==null){
        ulId="poems";
      }
    %>


      诗歌

    <% 
      if( ulId.equals("poems")){
        out.print("");
      }
      else{
        out.print("");
      }
    %>
      
  • 春歌

    •   
  • 侠客行（李白）

    •   
  • 南陵别儿童入京（李白）

    •   
  • 忆昔开元全盛日



    • CSS定义

    body{}{
      margin:0 auto;
      text-align:center;
      min-width:760px;
      background:#7b869a;
    }

    #bodyDiv{}{
      width:924px;
      margin:0 auto;
      text-align:left;
      background:#ffffff;
    }

    #header{}{
      width:924px;
      height:100px;
    }

    #menubar{}{
      float:left;
      margin:2px;
      width:200px;
      height:500px;
      border-top:1px solid #ccd2d2;
      border-bottom:0px solid #ccd2d2;
    }

    #content{}{
      float:right;
      margin:2px;
      width:712px;
      height:500px;
    }

    #footer{}{
      clear:both;
      background:#7b869a;
    }

    h1 {}{
      font-size: 18px; 
      margin: 10px 0px 5px; 
      color: #eeeeee; 
      text-align: center;
    }

    h2 {}{
      font-size: 24px; 
      margin: 10px 0px 5px; 
      color: #000000; 
      text-align: center;
    }

    ul.stickedUl{}{
      color: #21536a; 
      margin:0;
      padding:0;
      list-style-type:none;
      text-align: center;
      height:20px;
      background:#ebedec;
      border-left:1px solid #ccd2d2;
      border-right:1px solid #ccd2d2;
      border-top:1px solid #ffffff;
      border-bottom:1px solid #ccd2d2;
    }

    ul.slidedUl{}{
      color: #000000; 
      margin:0;
      padding:0;
      list-style-type:none;
      padding-left:20px;
      height:20px;
      background:#f5f7f7;
      border-left:1px solid #ccd2d2;
      border-right:1px solid #ccd2d2;
      border-top:0px solid #ffffff;
      border-bottom:0px solid #ccd2d2;
    }

    ul.slidedUl a{}{
      padding:2px;
      text-decoration:none;
      color:#8d4f10;
    }

    ul.slidedUl a:hover{}{
      color:#007799;
    }


    代码下载:
    http://www.blogjava.net/Files/sitinspring/SlideMenu20080508141423.rarposted on 2008-05-08 14:20 sitinspring 阅读(1131) 评论(2)  编辑  收藏 所属分类: HTML,CSS&JS 、Web开发 、JavaScript
    FeedBack:# re: 使用CSS实现滑动菜单栏2008-05-15 23:25 | 杰克
    slidemenu.css里的一句,把firefox下的表现搞乱了,不如删去.


    ul.slidedUl{
    color: #000000; 

    margin:0;

    padding:0;

    list-style-type:none;

    padding-left:20px;

    height:20px;

    background:#f5f7f7;

    border-left:1px solid #ccd2d2;

    border-right:1px solid #ccd2d2;

    border-top:0px solid #ffffff;

    border-bottom:0px solid #ccd2d2;

    }




      回复  更多评论
      # re: 使用CSS实现滑动菜单栏2008-05-16 13:25 | 如坐春风
    @杰克

    确实如此,谢谢提醒,非常感谢.  回复  更多评
    使用CSS实现滑动菜单栏1 使用CSS实现侧边Tab菜单栏1 使用CSS实现侧边Tab菜单栏2 jQuery+CSS实现动态滑动菜单导航 jQuery+CSS实现竖向漂亮的滑动导航 CSS中的滑动门技术 w3cn.org vc++中轻松实现滑动(slider)控件 CSS柱状图的实现 滑动条控件1 CSS使用技巧201则 学会使用css中的behavior 21个超赞的CSS实现技术 CSS+DIV实现鼠标经过背景变色 译言网 | 21个超赞的CSS实现技术 常用的滑动门代码1 Android功能总结：仿照Launcher的Workspace实现左右滑动切换(一) CSS JS实现的选项卡效果(html组件)-网页陶吧-CSS-天极Yesky CSS实现同一图片左右半边加链接导航 - CSS - web - JavaEye论坛 div+css - Firefox和IE浏览器兼容问题 - 用CSS实现cellSpacing属性效果 CSS布局实例：仅一张图片实现圆角 MAC官方菜单纯CSS实现灰色会换色 五种方法让CSS实现垂直居中 使用简单图层样式实现PS抠图1 CSS 参考手册(1)