资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

怎么在bootstrap自定义样式实现侧边导航栏功能

怎么在bootstrap自定义样式实现侧边导航栏功能?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

站在用户的角度思考问题,与客户深入沟通,找到浈江网站设计与浈江网站推广的解决方案,凭借多年的经验,让设计与互联网技术结合,创造个性化、用户体验好的作品,建站类型包括:网站设计、网站建设、企业官网、英文网站、手机端网站、网站推广、空间域名、网络空间、企业邮箱。业务覆盖浈江地区。

bootstrap侧边导航栏实现原理

1.侧滑栏使用定位fixed
2.使用bootstrap响应式使用工具类 visible-sm visible-xs hidden-xs hidden-sm等对不同屏幕适配
3.侧滑栏的侧滑效果不使用jquery方法来实现,使用的是css3 transforms属性进行div的移动,侧滑的动画效果使用的是css属性transition
4.缺点:使用两套菜单,一套是pc端屏幕显示的菜单,一套是移动端显示的手机导航菜单,这个缺点比较明显,生成无关的标签,优点代码少,简单容易接受

效果图

怎么在bootstrap自定义样式实现侧边导航栏功能 

怎么在bootstrap自定义样式实现侧边导航栏功能

bootstrap侧边导航栏

bootstrap导航栏布局
  
  
    
          
  • 首页
  •       
  • Java
  •       
  • SVN
  •       
  • iOS
  •     
  
                          菜鸟教程       
      
                   iOS           
  • SVN
  •           
  • Java
  •                
        
                                

    一个导航栏的布局,用了两个导航菜单,一个是pc端的,一个是手机端,利用bootstrap响应式使用工具类visible-xs visible-sm来实现pc端隐藏切换按钮; visible-lg visible-md 实现了pc端显示导航栏;visible-xs visible-sm实现手机端显示手机导航栏。
    bootstrap响应式工具类详见:https://www.runoob.com/bootstrap/bootstrap-responsive-utilities.html

    css实现布局和侧滑效果(侧滑的关键css3属性transform、transition)

    代码不多,仅仅10行 

      * {margin:0;padding:0;}
         #mobile-menu {position:fixed;top:0;left:0;width:220px;height:100%;background-color:#373737;z-index:9999;}
         a:hover ,a:focus{text-decoration:none}
        .mobile-nav ul li a {color:gray;display:block;padding:1em 5%;  border-top:1px solid #4f4f4f;border-bottom:1px solid #292929;transition:all 0.2s ease-out;cursor:pointer;#mobile-menu {position:fixed;top:0;left:0;width:220px;height:100%;background-color:#373737;z-index:9999;transition:all 0.3s ease-in;}}
        .mobile-nav ul li a:hover {background-color: #23A1F6;color: #ffffff;}
        .show-nav {transform:translateX(0);}
        .hide-nav {transform:translateX(-220px);} /*侧滑关键*/
        .mobile-nav-taggle {height:35px;line-height:35px;width:35px;background-color:#23A1F6;color:#ffffff;display:inline-block;text-align:center;cursor:pointer}
        .nav.avbar-inverse{position:relative;}
        .nav-btn {position:absolute;right:20px;top:20px;}

    要值得注意的是css3的两个属性:

    transform:旋转div,支持元素2D或3D旋转,属性值translateX(X)就是在X轴上移动Xpx的距离

    http://www.w3school.com.cn/cssref/pr_transform.asp

    而侧滑的动画效果是使用transition属性,设置属性的过渡动画的效果,语法

    transition: property duration timing-function delay;

    http://www.w3school.com.cn/cssref/pr_transition.asp

    单击事件切换侧滑

     $("#mobile-nav-taggle").click(function () {
          var mobileMenu = $("#mobile-menu");
          if (mobileMenu.hasClass("show-nav")) {
            setTimeout(function () {
              mobileMenu.addClass("hide-nav").removeClass("show-nav");
            }, 100)
          }
          else {
            setTimeout(function (){
              mobileMenu.addClass("show-nav").removeClass("hide-nav");
            }, 100)
          }
        })

    看完上述内容,你们掌握怎么在bootstrap自定义样式实现侧边导航栏功能的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注创新互联行业资讯频道,感谢各位的阅读!


    当前文章:怎么在bootstrap自定义样式实现侧边导航栏功能
    网页网址:http://cdkjz.cn/article/pdcipd.html
    多年建站经验

    多一份参考,总有益处

    联系快上网,免费获得专属《策划方案》及报价

    咨询相关问题或预约面谈,可以通过以下方式与我们联系

    大客户专线   成都:13518219792   座机:028-86922220