使用bootstrap+jQuery创建右侧导航条

问题

使用bootstrap提供的css创建一个右侧导航条

解决方案

First：创建的导航条要根据该页面内容动态增减，所以：1、要从已渲染网页中的获取待导航内容；2、要将导航条动态放置在网页右下角

    // 创建浮动窗口
    function rightFloatNavigationBar(listNameValue, childElem, mountId){
      var navigationList = $('table[name="'+listNameValue+'"]'); //获取待导航内容父元素Table
    
      $('#'+mountId+'').append(
        '<div class="fs-right-float-nav text-center" id="rightFloatNav">'+
          '<div id="rightFloatNavIcon" class="fs-float-nav-show"><span class="caret"></span></div>'+
          '<div style="display: none;" id="rightFloatNavContent"></div>'+
        '</div>'
      ); //在该页面增加导航条框架
      for (var i = 0; i < navigationList.length; i++) {
        // console.log($(navigationList[i]).attr('id'));
        $('#rightFloatNavContent').append(
          '<div class="fs-right-float-item" ><a href="#'+$(navigationList[i]).attr('id')+'">'+
            $(navigationList[i]).find("strong").html()+
          '</div>'
        );
      }  //将待导航内容添加到导航条框架中
      $('#rightFloatNav').append(
        '<div class="fs-right-float-item">'+
          '<a href="javascript:window.scrollTo(0,0)"><span class="glyphicon glyphicon-chevron-up"></span> 回到顶部</a>'+
        '</div>'
      );  //增加“返回顶部”选项
      rightFloatNavOp(); //动画效果func
    }

Second：给导航条添加动画，包括：隐藏/展示、鼠标hover状态修改

    // 浮动窗口相关动画
    function rightFloatNavOp(){
      $('#rightFloatNavIcon').unbind('click').click(function(){
        // console.log("click the show or hide float nav");
        $('#rightFloatNavIcon').empty();
        if($('#rightFloatNavIcon').hasClass("fs-float-nav-show")){
          // console.log("now is show");
          $('#rightFloatNavIcon').removeClass("fs-float-nav-show");
          $('#rightFloatNavIcon').addClass("fs-float-nav-hidden");
          $('#rightFloatNavIcon').append(
            '<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>'
          );
          $('#rightFloatNavContent').show(2);
        }
        else{
          $('#rightFloatNavIcon').addClass("fs-float-nav-show");
          $('#rightFloatNavIcon').removeClass("fs-float-nav-hidden");
          $('#rightFloatNavIcon').append(
            '<span class="caret"></span></div>'
          );
          $('#rightFloatNavContent').hide(2);
        }
      });
    }

End：使用到的自定义css：

    .fs-right-float-nav{
      right:20px; 
      bottom: 60px;
      margin-bottom: 0;
      border-width: 1px 0 0;
      /*z-index: 1030;*/
      background-color: rgba(245, 245, 245, 0.1);
      position: fixed;
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
      border-radius: 10px;
    /*  box-shadow:inset 0px 0px 1px #999, 3px 3px 10px #D3D3D5;*/
    }
    .fs-right-float-item{
      margin-top: 10px;
      background-color: rgba(240, 255, 255, 0.9);
    }
    .fs-right-float-item a{
      text-decoration:none;
    }
    .fs-right-float-item:hover,
    .fs-right-float-item:focus{
      background-color: rgba(150, 150, 150, 0.5);
      cursor: pointer;
    }

效果图：

隐藏状态 显示状态

<del><small>忽略马赛克……，忽略这丑到家的配色……。唉，这么多年审美就没提升过……</small></del>