国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看

滑動菜單示例

滑動菜單多用于菜單項目較多且菜單可歸納到少數(shù)類別的場合,點擊類別滑動條會上下滑動以隱藏或顯示其下的子菜單.其典型應用便是Visio中滑動菜單樣式(上圖).
本人在Web中實現(xiàn)了類似的控件(下圖),拿出來希望和大家一起交流一下.

滑動效果的實現(xiàn)

本文中使用無序列表作為滑動條下的子菜單的實現(xiàn),出現(xiàn)滑動效果實際是控制子菜單的隱藏和顯示.
控制子菜單的隱藏和顯示改變UL的display屬性即可,當其為block時顯示菜單,其為none時不顯示,我們可以用JS來實現(xiàn)這一效果.
滑動塊和菜單的頁面代碼示例如下:

實現(xiàn)效果之一

滑動塊和菜單的頁面代碼示例

<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來實現(xiàn)滑動塊,你可以換成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>

如何在點擊菜單項翻頁后保持展開狀態(tài)

現(xiàn)在剩下的問題是點擊菜單項翻頁后保持展開狀態(tài),如果使用Ajax左邊可以不變,但右邊內(nèi)容區(qū)的代碼全要通過Ajax實現(xiàn)有些費力不討好,這里還是采用JSP的實現(xiàn)方法.
具體做法就是在連接中將UL的id傳出去,翻頁再得到它與諸菜單項比較,如果id相等則展開,不相等則關閉.
示例代碼如下:

用于翻頁保持展開狀態(tài)的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;
}

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;

}