搜索
首页web前端Bootstrap教程详解bootstrap自定义侧边导航栏的方法

本篇文章给大家介绍一下bootstrap自定义侧边导航栏的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

详解bootstrap自定义侧边导航栏的方法

bootstrap自带的响应式导航栏是向下滑动的,有时满足不了个性化的需求,需要做一个类似于android drawerLayout 侧滑的菜单,这就是我要实现的bootstrap自定义侧滑菜单,参考了很多官网的侧滑,实现方法各有不同,优缺点也十分明显,有的官网首页为了仅仅实现一个侧滑的效果,用了owl.carousel滑屏的插件,个人觉得小题大做了。这个bootstrap侧滑菜单更专业的名字叫做手机导航栏。我也比较这个名字,更符合bootstrap的特性。所以我这篇文章介绍的更容易的一种做法,新手更容易接受。

相关推荐:《bootstrap教程

bootstrap侧边导航栏实现原理

  • 侧滑栏使用定位fixed

  • 使用bootstrap响应式使用工具类 visible-sm visible-xs hidden-xs hidden-sm等对不同屏幕适配

  • 侧滑栏的侧滑效果不使用jquery方法来实现,使用的是css3 transforms属性进行p的移动,侧滑的动画效果使用的是css属性transition

  • 缺点:使用两套菜单,一套是pc端屏幕显示的菜单,一套是移动端显示的手机导航菜单,这个缺点比较明显,生成无关的标签,优点代码少,简单容易接受

效果图

bootstrap侧边导航栏

这里写图片描述

bootstrap导航栏布局

    <!--手机导航栏-->
    <div id="mobile-menu" class="mobile-nav visible-xs visible-sm">
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">Java</a></li>
            <li><a href="#">SVN</a></li>
            <li><a href="#">iOS</a></li>
        </ul>
    </div>
    <!--pc导航栏-->
    <nav class="navbar-inverse visible-lg visible-md" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">菜鸟教程</a>
            </div>
            <div>
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">iOS</a></li>
                    <li><a href="#">SVN</a></li>
                    <li><a href="#" class="dropdown-toggle" data-toggle="dropdown">Java</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <!--手机导航栏侧滑-->
    <div class="nav-btn visible-xs visible-sm">
        <a href="#" class="mobile-nav-taggle" id="mobile-nav-taggle">
            <span class="glyphicon glyphicon-align-justify"></span>
        </a>
    </div>

一个导航栏的布局,用了两个导航菜单,一个是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:旋转p,支持元素2D或3D旋转,属性值translateX(X)就是在X轴上移动Xpx的距离

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

transition: property duration timing-function delay;

单击事件切换侧滑

        $("#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)
            }
        })

总结

不推荐用两个菜单导航栏,缺点很明显,为了实现效果而已,不要介意,其实用一个菜单导航栏也是可以实现,试试media 完全可以实现。

本文转载自:http://blog.csdn.net/kebi007/article/details/76038251

更多编程相关知识,请访问:编程视频!!

以上是详解bootstrap自定义侧边导航栏的方法的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文转载于:csdn。如有侵权,请联系admin@php.cn删除
Bootstrap的目的:建立一致且有吸引力的网站Bootstrap的目的:建立一致且有吸引力的网站Apr 19, 2025 am 12:07 AM

Bootstrap的主要用途是帮助开发者快速构建响应式、移动优先的网站。其核心功能包括:1.响应式设计,通过网格系统实现不同设备的布局调整;2.预定义组件,如导航栏和模态框,确保美观和跨浏览器兼容性;3.支持自定义和扩展,使用Sass变量和mixins调整样式。

Bootstrap与其他框架:比较概述Bootstrap与其他框架:比较概述Apr 18, 2025 am 12:06 AM

Bootstrap优于TailwindCSS、Foundation和Bulma,因为它易用且快速开发响应式网站。1.Bootstrap提供丰富的预定义样式和组件库。2.其CSS和JavaScript库支持响应式设计和交互功能。3.适合快速开发,但自定义样式可能较复杂。

在React中集成引导样式:方法和技术在React中集成引导样式:方法和技术Apr 17, 2025 am 12:04 AM

在React项目中整合Bootstrap可以通过两种方法:1)使用CDN引入,适合小型项目或快速原型设计;2)使用npm包管理器安装,适用于需要深度定制的场景。通过这些方法,你可以在React中快速构建美观且响应式的用户界面。

React的引导:优势和最佳实践React的引导:优势和最佳实践Apr 16, 2025 am 12:17 AM

将Bootstrap集成到React项目中的优势包括:1)快速开发,2)一致性和可维护性,3)响应式设计。通过直接引入CSS文件或使用React-Bootstrap库,可以在React项目中高效使用Bootstrap的组件和样式。

Bootstrap:网络框架的快速指南Bootstrap:网络框架的快速指南Apr 15, 2025 am 12:10 AM

Bootstrap是由Twitter开发的框架,帮助快速搭建响应式、移动优先的网站和应用。1.易用性和丰富组件库使开发更快。2.庞大社区提供支持和解决方案。3.通过CDN引入并使用类名控制样式,如创建响应式网格。4.可自定义样式和扩展组件。5.优点包括快速开发和响应式设计,缺点是样式一致性和学习曲线。

打破bootstrap:是什么以及为什么重要打破bootstrap:是什么以及为什么重要Apr 14, 2025 am 12:05 AM

Bootstrapisafree,开放式frameworkthatsimplifiesRessiveandMobile-firstwebsitedEvelvelopment.itofferspre-styledComponentsAndAgridSystem,流化inthiningthecreationofaesthethetshethetshetshetshetshetshetshetshetshetshethetshethet interpleaseansing和Runctinctionalwebdesigns。

Bootstrap:使网页设计更容易Bootstrap:使网页设计更容易Apr 13, 2025 am 12:10 AM

Bootstrap让网页设计更容易的原因是其预设组件、响应式设计和丰富的社区支持。1)预设组件库和样式让开发者无需编写复杂的CSS代码;2)内置网格系统简化了响应式布局的创建;3)社区支持提供了丰富的资源和解决方案。

Bootstrap的影响:加速网络开发Bootstrap的影响:加速网络开发Apr 12, 2025 am 12:05 AM

Bootstrap加速了Web开发,通过提供预定义的样式和组件,开发者可以快速搭建响应式网站。1)它缩短了开发时间,例如在项目中几天内完成基本布局。2)通过Sass变量和mixins,Bootstrap允许定制样式以满足特定需求。3)使用CDN版本可以优化性能,提高加载速度。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

安全考试浏览器

安全考试浏览器

Safe Exam Browser是一个安全的浏览器环境,用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问,并防止学生使用未经授权的资源。

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

Atom编辑器mac版下载

Atom编辑器mac版下载

最流行的的开源编辑器

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境