<rt id="bn8ez"></rt>
<label id="bn8ez"></label>
  • 

    • <span id="bn8ez"></span>
    

    <label id="bn8ez"><meter id="bn8ez"></meter></label>
    

    
    

    




    







												


        

    

    春風博客
    

    

    春天里，百花香...
    

			
    
				
					

    導航
    

					
    
	
    
		
    <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)
    
		
				
			
	
		
    個人軟件下載
    
		
				
			
	
		
    我的其它博客
    
		
				
			
	
		
    我的鄰居們
    
		
				
			
	


    最新隨筆
    




    搜索
    



    積分與排名
    



    最新評論
	
    

    
	
			
		

    


    閱讀排行榜
    



    評論排行榜
    


				
			
    
			
    
				
					
	
    
		
    
			球拍式導航菜單效果的實現
		
    
		
    傳統的側邊菜單的問題
    

    
    工字型布局中都有一個側邊菜單欄目用以導航，它們存在的一個普遍問題是：用戶無法迅速的找到自己所處頁面在整個網站中的位置。
    
當菜單項較多時這會演變成一個大問題，當用戶需要刻意尋找網頁標志來確定自己所處位置時，這已經說明網站給了客戶一種迷宮的感覺，有流失客戶的潛在可能性。
    
解決這個問題只要將用戶選擇的菜單項突出顯示即可，下面是gmail的解決方案。
    

    Gmail的側邊菜單欄
    

    

    

    

    將要實現的效果
    

    

    

    

    如何實現菜單與左邊內容區的連通效果
    

    要將左側內容區和右邊選中的菜單項連通起來，需要將菜單欄分成兩個類別，選中和未選中的樣式如右。
    

     
    

    #sidebar li a.unselect{
    
  text-decoration    : none;
    
  width    :100%;
    
  height    :10px;
    
  font-weight    :bold;
    
  color    :#0000cc;
    
  
    
  border-left    : 1px solid #7799dd; 
    
  border-right    : 0px solid #7799dd; 
    
  border-top    : 0px solid #7799dd; 
    
  border-bottom    : 0px solid #7799dd; 
    
  
    
  padding-left    :15px;
    
  padding-right    :15px;
    
  padding-top    :5px;
    
  padding-bottom    :5px;
    
    }
    

    
#sidebar li a.selected    {
    
  text-decoration    : none;
    
  width    :100%;
    
  height    :10px;
    
  font-weight    :bold;
    
  background    :#ffffff;
    
  color    :#000000;
    
  
    
  border-left    : 0px solid #7799dd; 
    
  border-right    : 1px solid #7799dd; 
    
  border-top    : 1px solid #7799dd; 
    
  border-bottom    : 1px solid #7799dd; 
    
  
    
  padding-left    :15px;
    
  padding-right    :15px;
    
  padding-top    :5px;
    
  padding-bottom    :5px; 
    
    }
    

    

    

    大家注意看選中項和未選中項的邊框和底色設置。
    

    
CSS渲染后的菜單項HTML代碼：
    

    <ul>
    
    <li><a href='ShowPage?page=add&&curr=0' class='unselect'>新增詩歌</a></li>
    
    <li><a href='ViewPoems?curr=1' class='unselect'>全部詩歌</a></li>
    
    <li><a href='ShowAuthorPoem?curr=ps1&&author=崇禎皇帝&&count=1' class='unselect'>崇禎皇帝(1)</a></li>
    
    <li><a href='ShowAuthorPoem?curr=ps2&&author=蘇軾&&count=2' class='selected'>蘇軾(2)</a></li>
    
    <li><a href='ShowAuthorPoem?curr=ps3&&author=辛棄疾&&count=1' class='unselect'>辛棄疾(1)</a></li>
    
    </ul>
    


    
渲染的效果圖如下：
    

    

    

    如何翻頁后得知上次點擊的菜單項
    

    


    
剩下的問題是如何在翻頁后得知上次點擊的菜單項，這很簡單，從reuqest中取出請求參數curr，它代表了選中菜單項的記號，然后在jsp頁面中用scriptlet逐個判斷即可。
    

    <ul>
    
      <%
    
        String curr=request.getParameter("curr");
    
        if(curr==null){
    
      curr    ="0";
    
    }
    
    
    
        if(curr.equals("0")){
    
      out.print(    "<li><a href='ShowPage?page=add&&curr=0' class='selected'>新增詩歌</a></li>");
    
    }
    
        else{
    
      out.print(    "<li><a href='ShowPage?page=add&&curr=0' class='unselect'>新增詩歌</a></li>");
    
    }
    
    
    
        if(curr.equals("1")){
    
      out.print(    "<li><a href='ViewPoems?curr=1' class='selected'>全部詩歌</a></li>");
    
    }
    
        else{
    
      out.print(    "<li><a href='ViewPoems?curr=1' class='unselect'>全部詩歌</a></li>");
    
    }
    
    
    
        // 顯示作者列表
    
    PoemSumaryService service    =new PoemSumaryService();
    
    List    <PoemSummary> ls=service.getAll();
    
    
    
        for(PoemSummary ps:ls){
    
          if(curr.equals(ps.getId())){
    
        out.print(    "<li><a href='ShowAuthorPoem?curr="+ps.getId()+"&&author="+ps.getAuthor()+"&&count="+ps.getCount()+"' class='selected'>"+ps.getAuthor()+"("+ps.getCount()+")</a></li>");
    
      }
    
          else{
    
        out.print(    "<li><a href='ShowAuthorPoem?curr="+ps.getId()+"&&author="+ps.getAuthor()+"&&count="+ps.getCount()+"' class='unselect'>"+ps.getAuthor()+"("+ps.getCount()+")</a></li>");
    
      }
    
    }
    
      %>
    
    </ul>
    


    
導航菜單上下邊的修補工作
    
全部工作到這里還未結束，還要在導航菜單上下部增加一些細節，要不菜單上下會缺失邊緣。
    
我采用了表格防止上邊，菜單和下邊三項，下面是HTML代碼：
    

    <table border="0" cellspacing="0" cellpadding="0" width="100%" height="100%" style="table-layout:fixed;word-wrap:break-word;word-break;break-all;">
    
      <tr height="10" valign="top">         
    
        <td width="100%">
    
          <div class="sideBlank">
    
          </div>
    
        </td>
    
      </tr>
    
      <tr valign="top">         
    
        <td width="100%">
    
          <ul>
    
            <%
    
          
    
            %>
    
          </ul>
    
        </td>
    
      </tr>
    
  
    
      <tr height="100%" valign="top">         
    
        <td width="100%">
    
          <div class="sideBlank">
    
          </div>
    
        </td>
    
      </tr>
    
    </table>
    

    sideBlank的CSS設置如下：
    

    .sideBlank{
    
    width    :100%;
    
    height    :100%;
    
    
    
    border-left    : 1px solid #7799dd; 
    
    border-right    : 0px solid #7799dd; 
    
    border-top    : 0px solid #7799dd; 
    
    border-bottom    : 0px solid #7799dd; 
    
    }
    

    這樣，菜單上下的邊就封上了，視覺效果也要好一些，位置示意圖如下：
    

    

    

    
 大致原理到這里就結束了，還有一些具體細節請看代碼：
    
http://m.tkk7.com/Files/sitinspring/PoemCollection20081012113047.rar 
    

		
    
			posted on 2008-10-12 10:10 sitinspring 閱讀(4382) 評論(2)  編輯  收藏  所屬分類: HTML,CSS&JS 
		
    
	
    







    
	    
    


    

    評論
    
	
	
			
    
				# re: 球拍式導航菜單效果的實現
					
						2008-10-14 11:35
					
				good
			
    
			
    
				寫的很好，但判斷當前選擇時麻煩了點，消耗服務器端資源，可以把判斷過程放到客戶端瀏覽器中用js修改css完成

    <script>

    if (curr!=0){

    $("li[@name="+curr+"]").class="selected";

    }

    </script>

    以上是大致意思  回復  更多評論
				  
			
    
		
			
    
				# re: 球拍式導航菜單效果的實現
					
						2008-10-14 11:57
					
				sitinspring
			
    
			
    
				@good

    

    如果做成Ajax應用吧，這么做工程量就大了。

    

      回復  更多評論
				  
			
    
		

    




    








    

				
			
    
			
sitinspring(http://m.tkk7.com)原創,轉載請注明出處.
    







    
        
	



主站蜘蛛池模板：
一个人免费观看视频在线中文|
在线综合亚洲中文精品|
亚洲日本va午夜中文字幕久久|
国产免费69成人精品视频|
亚洲无码视频在线|
久久久久亚洲精品无码网址色欲
|
亚洲国产精品第一区二区三区|
亚洲午夜久久久久久噜噜噜|
亚洲精品91在线|
国产亚洲午夜精品|
一级毛片成人免费看免费不卡
|
青青草国产免费久久久下载|
亚洲综合另类小说色区|
亚洲色一区二区三区四区|
三年片免费高清版
|
激情婷婷成人亚洲综合|
99久久免费观看|
亚洲国产精品碰碰|
国产在线播放线91免费|
亚洲国产精品VA在线观看麻豆|
亚洲综合av一区二区三区不卡|
日韩免费无砖专区2020狼|
亚洲黄色片在线观看|
www成人免费观看网站|
亚洲精品白浆高清久久久久久|
麻豆69堂免费视频|
性色av免费观看|
99久久亚洲精品无码毛片|
精品一区二区三区免费视频|
国产免费无遮挡精品视频|
一区二区三区在线免费观看视频|
久热综合在线亚洲精品|
精品熟女少妇aⅴ免费久久|
亚洲成a人片在线观看中文动漫|
一级毛片**免费看试看20分钟|
九月丁香婷婷亚洲综合色|
美女视频黄免费亚洲|
亚洲精品国产成人专区|
国产免费无码一区二区|
亚洲一区视频在线播放|
久久国产色AV免费观看|