春風博客
          

          

          春天里，百花香...
          

			
          
				
					

          導航
          

					
          
	
          
		
          <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://www.aygfsteel.com/Files/sitinspring/PoemCollection20081012113047.rar 
          

		
          
			posted on 2008-10-12 10:10 sitinspring 閱讀(4393) 評論(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://www.aygfsteel.com)原創,轉載請注明出處.
    







          
        
	




主站蜘蛛池模板：
上高县|
岳阳县|
中宁县|
平潭县|
文成县|
茂名市|
台中县|
曲阳县|
石楼县|
馆陶县|
丹阳市|
郯城县|
宁津县|
吕梁市|
怀仁县|
河北区|
吐鲁番市|
磴口县|
高雄县|
德保县|
奈曼旗|
广汉市|
肇源县|
安塞县|
霍邱县|
齐齐哈尔市|
章丘市|
中卫市|
乌兰浩特市|
栾城县|
修武县|
察雅县|
肥西县|
廉江市|
重庆市|
贡嘎县|
盐亭县|
从江县|
彭山县|
马龙县|
长垣县|