自定义导航栏切换（从下拉菜单到左侧滑动）答案

【问题标题】：Custom Navbar-toggle (from dropdown to slide from the left)自定义导航栏切换（从下拉菜单到左侧滑动）
【发布时间】：2015-06-06 11:32:07
【问题描述】：

我希望导航/导航栏位于更大屏幕的顶部。当在移动视图/折叠时按下切换按钮时，它应该从左侧滑动，如下例所示。

http://dbushell.github.io/Responsive-Off-Canvas-Menu/step4.html

（大卫·布谢尔的来源： http://www.smashingmagazine.com/2013/01/15/off-canvas-navigation-for-responsive-website/)

我见过许多网站和示例，他们使用另一个 div 具有导航项的副本，并且在移动视图上按下切换按钮时可见。那是多余的。一些示例默认将菜单作为侧边栏。但我希望顶部的菜单作为默认菜单，并在单击切换按钮时从左侧滑动。我做了很多研究，但找不到我想要的东西。

问题：

我在来自 MVC 的 Visaul 基本 Web 上执行此操作，我想要在我当前的项目中类似于上面的示例。（单击左侧的滑动菜单）我使用默认引导导航，导航栏时有下拉菜单- 切换被按下。

我的问题是：

有没有办法我们可以将默认的下拉导航栏切换菜单更改为从左侧滑动。通过更改jquery或其他东西。我不知道要改变什么。

（我觉得，我们必须创建另一个类并在单击导航栏切换（汉堡图标）时调用它，但我只是说）

注意：我不是专业的编码员，所以请以初级到中级的身份与我交谈。

这是我的代码

<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse"
                data-target="#public-menu-navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="pull-left brand" href="#"><img src="~/Images/Logo-Main.png" /></a>
    </div>

    <div class="collapse navbar-collapse" id="public-menu-navbar-collapse">
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#">list 1</a></li>
            <li><a href="#">list 1</a></li>
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                    list 3
                    <span class="caret"></span>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#">Change Password</a></li>
                </ul>
            </li>
            <li><a href="@Url.Action("Login","Home")">Login</a></li>
        </ul>
    </div>
</div>

这是全身代码

  <body>
  <div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#public-menu-navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

        </div>
        <div class="collapse navbar-collapse" id="public-menu-navbar-collapse" >
            <ul class="nav navbar-nav">
                <li>@Html.ActionLink("Home", "Index", "Home")</li>
                <li>@Html.ActionLink("About", "About", "Home")</li>
                <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
            </ul>
        </div>
    </div>
</div>
<div class="container body-content">
     <div class="container-fluid">
    <div class="row">
        <div class="col-md-4 left_space">
        </div>

        <div class="col-md-8 col-md-offset-4">
            <div class="row">
                @RenderBody()
            </div>
        </div>
    </div>
</div>
    <hr />
    <footer>

    </footer>
</div>
</body>

只需要一些答案或想法或方向......

【问题讨论】：

jsfiddle.net/14tj17rj
小提琴不工作
添加Bootstrap & Jquery，应该可以了~

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

我正在搜索类似的东西，发现this 一个。 Jasny Bootstrap 是 Vanilla Bootstrap 的扩展。它的 OffCanvas 功能可能会帮助您设计所需的内容。

【讨论】：

【解决方案2】：

简单。从

更改默认行为

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

到

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

然后：

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

确保您的导航栏已指定 CSS，例如（检查类名）：

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

【讨论】：