春风博客

春天里,百花香...

导航

<2008年10月>
2829301234
567891011
12131415161718
19202122232425
2627282930311
2345678

统计

公告

MAIL: junglesong@gmail.com
MSN: junglesong_5@hotmail.com

Locations of visitors to this page

常用链接

留言簿(11)

随笔分类(224)

随笔档案(126)

个人软件下载

我的其它博客

我的邻居们

最新随笔

搜索

积分与排名

最新评论

阅读排行榜

评论排行榜

滑动侧边菜单栏示例

示例图片:



菜单项示例:
<div class="ulTitle"  onclick="showHideUL('poems')"/>诗歌</div>
<ul id='poems' style='display:block'>
    
<li><href="ShowPage?page=index&&ulId=poems&&aid=1">春歌</a></li>
    
<li><href="ShowPage?page=index&&ulId=poems&&aid=3">侠客行</a></li>
    
<li><href="ShowPage?page=index&&ulId=poems&&aid=4">南陵别儿童入京</a></li>
    
<li><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><href="ShowPage?page=index&&ulId=poems&&aid=1">春歌</a></li>
    
<li><href="ShowPage?page=index&&ulId=poems&&aid=3">侠客行</a></li>
    
<li><href="ShowPage?page=index&&ulId=poems&&aid=4">南陵别儿童入京</a></li>
    
<li><href="ShowPage?page=index&&ulId=poems&&aid=16">忆昔开元全盛日</a></li>
</ul>


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

posted on 2008-10-24 12:25 sitinspring 阅读(4226) 评论(0)  编辑  收藏 所属分类: HTML,CSS&JS


只有注册用户登录后才能发表评论。


网站导航:
 
sitinspring(http://www.blogjava.net)原创,转载请注明出处.