球拍式导航菜单效果的实现

来源：百度文库 编辑：神马文学网 时间：2024/04/29 23:19:28

球拍式导航菜单效果的实现

传统的侧边菜单的问题

工字型布局中都有一个侧边菜单栏目用以导航，它们存在的一个普遍问题是：用户无法迅速的找到自己所处页面在整个网站中的位置。
当菜单项较多时这会演变成一个大问题，当用户需要刻意寻找网页标志来确定自己所处位置时，这已经说明网站给了客户一种迷宫的感觉，有流失客户的潜在可能性。
解决这个问题只要将用户选择的菜单项突出显示即可，下面是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代码：


  • 新增诗歌

  • 全部诗歌

  • 崇祯皇帝(1)

  • 苏轼(2)

  • 辛弃疾(1)


渲染的效果图如下：

如何翻页后得知上次点击的菜单项


剩下的问题是如何在翻页后得知上次点击的菜单项，这很简单，从reuqest中取出请求参数curr，它代表了选中菜单项的记号，然后在jsp页面中用scriptlet逐个判断即可。


      <%
        String curr=request.getParameter("curr");
        if(curr==null){
          curr="0";
        }
        
        if(curr.equals("0")){
          out.print("
  • 新增诗歌
    • ");
        }
        else{
          out.print("
  • 新增诗歌
    • ");
        }
        
        if(curr.equals("1")){
          out.print("
  • 全部诗歌
    • ");
        }
        else{
          out.print("
  • 全部诗歌
    • ");
        }
        
        // 显示作者列表
        PoemSumaryService service=new PoemSumaryService();
        List ls=service.getAll();
        
        for(PoemSummary ps:ls){
          if(curr.equals(ps.getId())){
            out.print("
  • "+ps.getAuthor()+"("+ps.getCount()+")
    • ");
          }
          else{
            out.print("
  • "+ps.getAuthor()+"("+ps.getCount()+")
    • ");
          }
        }
      %>


导航菜单上下边的修补工作
全部工作到这里还未结束，还要在导航菜单上下部增加一些细节，要不菜单上下会缺失边缘。
我采用了表格防止上边，菜单和下边三项，下面是HTML代码：


           
    
      
      

    
  
           
    
      

            <%
              
            %>
          

    
  
  
           
    
      
      

    
  

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.blogjava.net/Files/sitinspring/PoemCollection20081012113047.rar

球拍式导航菜单效果的实现 模仿Flash AS效果的导航菜单 模仿Flash AS效果的导航菜单 模仿Flash AS效果的导航菜单 模仿Flash AS效果的导航菜单 - 菜单特效 - 网页特效代码 跳动的菜单导航 图标菜单(菜单图标)的实现 目前非常流行的导航菜单 - 菜单特效 - 网页特效代码 目前非常流行的导航菜单 - 菜单特效 - 网页特效代码 目前非常流行的导航菜单 PHPCMS导航菜单打不开的解决方法 仿蓝色理想网站的导航菜单 选项卡导航菜单 国外网站扒下来的二级动态导航菜单特效 国外网站扒下来的二级动态导航菜单特效 自己制作的[导航菜单]与你分享 网页特效代码经典实用的触发型导航菜单 打造简洁的CSS菜单-菜单导航-网页特效-网站特效-特效代码-JS特效-javascrip... 国外网站扒下来的二级动态导航菜单特效 - 菜单特效 - 网页特效代码 [组图]使用jQuery与CSS搭建下拉式导航菜单 | 仿淘宝网站的导航标签效果！ 隐藏菜单效果 各种效果的tab选项卡菜单代码 cxGrid在内置右键菜单的后面增加菜单项并实现诸多功能