使用CSS實現滑動菜單欄

滑動菜單示例

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

滑動效果的實現

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

實現效果之一

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

<ulclass="stickedUl"onclick="showHideUL("poems")">

詩歌

</ul>

<ulclass="slidedUl"id="poems"style="display:block">");

<li><ahref="ShowPage?page=index&&ulId=poems&&aid=1">春歌</a></li>

<li><ahref="ShowPage?page=index&&ulId=poems&&aid=3">俠客行（李白）</a></li>

<li><ahref="ShowPage?page=index&&ulId=poems&&aid=4">南陵別兒童入京（李白）</a></li>

<li><ahref="ShowPage?page=index&&ulId=poems&&aid=16">憶昔開元全盛日</a></li>

</ul>

注意這裡用了UL來實現滑動塊,你可以換成DIV.

點擊滑動塊顯示或隱藏菜單的JavaScript代碼

<SCRIPTLANGUAGE="JavaScript">

<!--

functionshowHideUL(ulId)

{

//取得無序列表

varul=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代碼

<%

StringulId=request.getParameter("ulId");

if(ulId==null){

ulId="poems";

}

%>

<ulclass="stickedUl"onclick="showHideUL("poems")">

詩歌

</ul>

<%

if(ulId.equals("poems")){

out.print("<ulclass="slidedUl"id="poems"style="display:block">");

}

else{

out.print("<ulclass="slidedUl"id="poems"style="display:none">");

}

%>

<li><ahref="ShowPage?page=index&&ulId=poems&&aid=1">春歌</a></li>

<li><ahref="ShowPage?page=index&&ulId=poems&&aid=3">俠客行（李白）</a></li>

<li><ahref="ShowPage?page=index&&ulId=poems&&aid=4">南陵別兒童入京（李白）</a></li>

<li><ahref="ShowPage?page=index&&ulId=poems&&aid=16">憶昔開元全盛日</a></li>

</ul>

CSS定義

body{

}{

margin:0auto;

text-align:center;

min-width:760px;

background:#7b869a;

}

#bodyDiv{

}{

width:924px;

margin:0auto;

text-align:left;

background:#ffffff;

}

#header{

}{

width:924px;

height:100px;

}

#menubar{

}{

float:left;

margin:2px;

width:200px;

height:500px;

border-top:1pxsolid#ccd2d2;

border-bottom:0pxsolid#ccd2d2;

}

#content{

}{

float:right;

margin:2px;

width:712px;

height:500px;

}

#footer{

}{

clear:both;

background:#7b869a;

}

h1{

}{

font-size:18px;

margin:10px0px5px;

color:#eeeeee;

text-align:center;

}

h2{

}{

font-size:24px;

margin:10px0px5px;

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:1pxsolid#ccd2d2;

border-right:1pxsolid#ccd2d2;

border-top:1pxsolid#ffffff;

border-bottom:1pxsolid#ccd2d2;

}

ul.slidedUl{

}{

color:#000000;

margin:0;

padding:0;

list-style-type:none;

padding-left:20px;

height:20px;

background:#f5f7f7;

border-left:1pxsolid#ccd2d2;

border-right:1pxsolid#ccd2d2;

border-top:0pxsolid#ffffff;

border-bottom:0pxsolid#ccd2d2;

}

ul.slidedUla{

}{

padding:2px;

text-decoration:none;

color:#8d4f10;

}

ul.slidedUla: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 | 如坐春風@傑克 確實如此,謝謝提醒,非常感謝.回復更多評
推薦閱讀：