如何从左向右滑动导航栏? [英] How to slide nav bar from left instead from top?

问题描述

Bootstrap支持从顶部切换导航栏.屏幕尺寸较小时，如何从左侧滑动它?

Bootstrap supports toggling a navbar from the top. How can I slide it from the left when the screen-size is small?

例如:

在上面提供的屏幕截图中，当调整屏幕大小时，导航栏被切换并从顶部向下滑动.我宁愿导航栏从左侧滑动.如何在Bootstrap中实现此功能?

In the screenshot provided above, when the screen is re-sized, the navbar is toggled and slides down from the top. I rather want that the navbar should slide from the left. How can I achieve this function in Bootstrap?

当前，根据代码，导航栏从顶部滑动.这是我的代码:

Currently, as per code, the navbar slides from the top. Here is my code:

<nav class="navbar navbar-site navbar-default" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button data-target=".navbar-collapse" data-toggle="collapse" class="navbar-toggle" type="button"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
            <a href="{% url 'index' %} " class="navbar-brand logo logo-title">
            <span class="logo-icon"><i class="icon icon-search-1 ln-shadow-logo shape-0"></i> </span> <span>Companyname </span> </a> 
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                {% if user.is_authenticated %}
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <span>{{user.first_name}}</span> <i class="icon-user fa"></i> <i class=" icon-down-open-big fa"></i></a>
                        <ul class="dropdown-menu user-menu">
                            <li class="active"><a href="account-home.html"><i class="icon-home"></i> Personal Home </a></li>
                            <li><a href="statements.html"><i class=" icon-money "></i> Payment history </a></li>
                            <li><a href="{% url 'logout' %}"> <i class="glyphicon glyphicon-off"></i> Signout </a></li>
                        </ul>
                    </li>
                {% else %}
                    <li><a href="{% url 'login' %}">Login</a></li>
                    <li><a href="{% url 'signup' %}">Signup</a></li>
                {% endif %}
                <li class="postadd"><a class="btn btn-block btn-border btn-post btn-danger" href="{% url 'post_ad' %}">Post Free Add</a></li>
            </ul>
        </div>
    </div>
</nav>

推荐答案

简单.将默认行为更改为

Easy. Change the default behavior from

<button ... data-toggle="collapse" data-target="#my-navbar-collapse">

到我们现在要实现的slide-collapse功能

to slide-collapse functionality which we are going to implement now

<button ... data-toggle="slide-collapse" data-target="#my-navbar-collapse">

菜单包含在ID为my-navbar-collapse的div中.请注意，使用id代替类选择器将改善可访问性，因为引导程序会将ARIA状态(展开/折叠)附加到菜单中 自动.

Where the menu is contained within div that has the id my-navbar-collapse. Note that using id instead of class selector will improve the accessibility because bootstrap will append ARIA states (expanded/collapsed) to the menu automatically.

<div id="my-navbar-collapse" class="collapse navbar-collapse">
    <ul class="nav navbar-nav">
        ...
    </ul>
</div>

引导程序中的

类.collapse确保菜单最初处于隐藏状态.

Class .collapse in bootstrap ensures the menu to be initially hidden.

代码:

然后将以下Javascript粘贴到页脚中的某处:

And then paste the following Javascript somewhere in the footer:

// mobile menu slide from the left
$('[data-toggle="slide-collapse"]').on('click', function() {
    $navMenuCont = $($(this).data('target'));
    $navMenuCont.animate({'width':'toggle'}, 350);
});

以及以下CSS属性:

#my-navbar-collapse {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    width: 280px; /*example + never use min-width with this solution */
    height: 100%;
}

一些提示:

• 好主意也是进行响应式查询，其中智能手机的菜单宽度为100％，而不是始终为280px.它就像一种魅力.
• 如果您有台式机的水平菜单，而只有较小型设备的滑块，则可以轻松利用 @grid-float-breakpoint和 Bootstrap LESS变量

• Good idea is also to make responsive query where menu width would be 100% for smartphones instead of always 280px. It works like a charm.
• If you have horizontal menu for desktops, and slider only for smaller devices, you can easily take advantage of @grid-float-breakpoint and @grid-float-breakpoint-max Bootstrap LESS variables

这篇关于如何从左向右滑动导航栏?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！