滑动侧边菜单栏示例

滑动侧边菜单栏示例

示例图片：



菜单项示例：

< div  class ="ulTitle"   onclick ="showHideUL('poems')" /> 诗歌 </ div >
< ul  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 >

展开关闭菜单项的JS控制代码：

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

 

翻页后保持点击菜单项展开状态的代码示例：

<%  
    String ulId=request.getParameter("ulId");
    if(ulId==null){
        ulId="poems";
    }
%>
<!--  链接导航部分  -->
< div  class ="ulTitle"   onclick ="showHideUL('poems')" /> 诗歌 </ div >
<%  
    if( ulId.equals("poems")){
        out.print("<ul id='poems' style='display:block'>");
    }
    else{
        out.print("<ul 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 >

源码下载：
http://www.blogjava.net/Files/sitinspring/SlideSidebar20081024121833.rar