![如何从左侧而不是从顶部滑动导航栏]( "如何从左侧而不是从顶部滑动导航栏")
本文介绍了如何从左侧而不是从顶部滑动导航栏?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
Bootstrap 支持从顶部切换导航栏.屏幕小，如何从左边滑动?
例如:
在上面提供的屏幕截图中，当屏幕重新调整大小时，导航栏会切换并从顶部向下滑动.我宁愿导航栏应该从左侧滑动.在 Bootstrap 中如何实现这个功能?
目前，根据代码，导航栏从顶部滑动.这是我的代码:
<div class="容器"><div class="navbar-header"><button data-target=".navbar-collapse" data-toggle="collapse" class="navbar-toggle" type="button"><span class="sr-only">切换导航</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span><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>公司名称 </span></a>
<div class="navbar-collapse collapse"><ul class="nav navbar-nav navbar-right">{% if user.is_authenticated %}<li class="下拉菜单"><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>个人主页 </a></li><li><a href="statements.html"><i class=" icon-money "></i>付款历史 </a></li><li><a href="{% url 'logout' %}"><i class="glyphicon glyphicon-off"></i>退出 </a></li>{％ 别的 ％}<li><a href="{% url 'login' %}">登录</a></li><li><a href="{% url 'signup' %}">注册</a></li>{％ 万一 ％}<li class="postadd"><a class="btn btn-block btn-border btn-post btn-danger" href="{% url 'post_ad' %}">发布免费添加</a></li>
</nav>
解决方案
简单.从
更改默认行为
到我们现在要实现的slide-collapse功能
菜单包含在 ID 为 my-navbar-collapse 的 div 中.请注意，使用 id 而不是类选择器将提高可访问性，因为引导程序会将 ARIA 状态(展开/折叠)附加到菜单自动.
<ul class="nav navbar-nav">...
引导程序中的类 .collapse 确保菜单最初被隐藏.
代码:
然后将以下 Javascript 粘贴到页脚的某处:
//移动菜单向左滑动$('[data-toggle="slide-collapse"]').on('click', function() {$navMenuCont = $($(this).data('target'));$navMenuCont.animate({'width':'toggle'}, 350);});
以及以下 CSS 属性:
#my-navbar-collapse {位置:固定；顶部:0；左:0；z-索引:1；宽度:280px；/* 示例 + 永远不要在此解决方案中使用 min-width */高度:100%；}
一些提示:
Bootstrap supports toggling a navbar from the top. How can I slide it from the left when the screen-size is small?
For example:
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">
to slide-collapse functionality which we are going to implement now
<button ... data-toggle="slide-collapse" data-target="#my-navbar-collapse">
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 menuautomatically.
<div id="my-navbar-collapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
...
</ul>
</div>
Class .collapse in bootstrap ensures the menu to be initially hidden.
The code:
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);
});
And the following CSS properties:
#my-navbar-collapse {
position: fixed;
top: 0;
left: 0;
z-index: 1;
width: 280px; /*example + never use min-width with this solution */
height: 100%;
}
Some hints:
- 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
这篇关于如何从左侧而不是从顶部滑动导航栏?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！