使用CSS实现滑动菜单栏

滑动菜单示例

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

滑动效果的实现

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

实现效果之一

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

<ul class="stickedUl" onclick="showHideUL('poems')">
  诗歌
</ul>
<ul class='slidedUl' id='poems' style='display:block'>");
  <li><a href="ShowPage?page=index&&ulId=poems&&aid=1">春歌</a></li>
  <li><a href="ShowPage?page=index&&ulId=poems&&aid=3">侠客行（李白）</a></li>
  <li><a href="ShowPage?page=index&&ulId=poems&&aid=4">南陵别儿童入京（李白）</a></li>
  <li><a href="ShowPage?page=index&&ulId=poems&&aid=16">忆昔开元全盛日</a></li>
</ul>

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

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

<SCRIPT LANGUAGE="JavaScript">
<!--
function showHideUL(ulId){
  // 取得无序列表
  var ul=document.getElementById(ulId);
  
  // 原隐藏即显示，原显示即隐藏
  if(ul.style.display=="block" || ul.style.display=="" ){
    ul.style.display="none";
  }
  else{
    ul.style.display="block";
  }
}
//-->
</SCRIPT>

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

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

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

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

<ul class="stickedUl" onclick="showHideUL('poems')">
  诗歌
</ul>
<% 
  if( ulId.equals("poems")){
    out.print("<ul class='slidedUl' id='poems' style='display:block'>");
  }
  else{
    out.print("<ul class='slidedUl' id='poems' style='display:none'>");
  }
%>
  <li><a href="ShowPage?page=index&&ulId=poems&&aid=1">春歌</a></li>
  <li><a href="ShowPage?page=index&&ulId=poems&&aid=3">侠客行（李白）</a></li>
  <li><a href="ShowPage?page=index&&ulId=poems&&aid=4">南陵别儿童入京（李白）</a></li>
  <li><a href="ShowPage?page=index&&ulId=poems&&aid=16">忆昔开元全盛日</a></li>
</ul>

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

posted 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 | 如坐春风

@杰克

确实如此,谢谢提醒,非常感谢.  回复  更多评