春風(fēng)博客
          

          

          春天里，百花香...
          

			
          
				
					

          導(dǎo)航
          

					
          
	
          
		
          <2008年10月>
          
	
          日一二三四五六
          2829301234
          567891011
          12131415161718
          19202122232425
          2627282930311
          2345678
          

          

					

          統(tǒng)計
          
	
					

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

          
Locations of visitors to this page 

					

          常用鏈接
          


          留言簿(11)
          


		
          隨筆分類(224)
          
		
				
			
	
		
          隨筆檔案(126)
          
		
				
			
	
		
          個人軟件下載
          
		
				
			
	
		
          我的其它博客
          
		
				
			
	
		
          我的鄰居們
          
		
				
			
	


          最新隨筆
          




          搜索
          



          積分與排名
          



          最新評論
	
          

          
	
			
		

          


          閱讀排行榜
          



          評論排行榜
          


				
			
          
			
          
				
					
	
          
		
          
			球拍式導(dǎo)航菜單效果的實(shí)現(xiàn)
		
          
		
          傳統(tǒng)的側(cè)邊菜單的問題
          

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

          Gmail的側(cè)邊菜單欄
          

          

          

          

          將要實(shí)現(xiàn)的效果
          

          

          

          

          如何實(shí)現(xiàn)菜單與左邊內(nèi)容區(qū)的連通效果
          

          要將左側(cè)內(nèi)容區(qū)和右邊選中的菜單項(xiàng)連通起來，需要將菜單欄分成兩個類別，選中和未選中的樣式如右。
          

           
          

          #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; 
          
          }
          

          

          

          大家注意看選中項(xiàng)和未選中項(xiàng)的邊框和底色設(shè)置。
          

          
CSS渲染后的菜單項(xiàng)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>
          


          
渲染的效果圖如下：
          

          

          

          如何翻頁后得知上次點(diǎn)擊的菜單項(xiàng)
          

          


          
剩下的問題是如何在翻頁后得知上次點(diǎn)擊的菜單項(xiàng)，這很簡單，從reuqest中取出請求參數(shù)curr，它代表了選中菜單項(xiàng)的記號，然后在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>
          


          
導(dǎo)航菜單上下邊的修補(bǔ)工作
          
全部工作到這里還未結(jié)束，還要在導(dǎo)航菜單上下部增加一些細(xì)節(jié)，要不菜單上下會缺失邊緣。
          
我采用了表格防止上邊，菜單和下邊三項(xiàng)，下面是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設(shè)置如下：
          

          .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; 
          
          }
          

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

          

          

          
 大致原理到這里就結(jié)束了，還有一些具體細(xì)節(jié)請看代碼：
          
http://www.aygfsteel.com/Files/sitinspring/PoemCollection20081012113047.rar 
          

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







          
	    
    


          

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

          <script>

          if (curr!=0){

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

          }

          </script>

          以上是大致意思  回復(fù)  更多評論
				  
			
          
		
			
          
				# re: 球拍式導(dǎo)航菜單效果的實(shí)現(xiàn)
					
						2008-10-14 11:57
					
				sitinspring
			
          
			
          
				@good

          

          如果做成Ajax應(yīng)用吧，這么做工程量就大了。

          

            回復(fù)  更多評論
				  
			
          
		

          




          








          

				
			
          
			
sitinspring(http://www.aygfsteel.com)原創(chuàng),轉(zhuǎn)載請注明出處.
    







          
        
	




主站蜘蛛池模板：
四子王旗|
泸定县|
海阳市|
嘉禾县|
信阳市|
固镇县|
镇江市|
沅江市|
肥乡县|
秀山|
合肥市|
共和县|
饶平县|
安泽县|
乐清市|
澎湖县|
厦门市|
威海市|
江孜县|
政和县|
沈阳市|
新密市|
年辖：市辖区|
敖汉旗|
张北县|
西青区|
彭水|
威信县|
衡山县|
双鸭山市|
太和县|
二手房|
渝中区|
乌兰察布市|
衡山县|
平利县|
黄浦区|
南岸区|
丹巴县|
瓦房店市|
潜江市|