Question

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

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

（来自David Bushell的消息： http://www.smashingmagazine.com/2013/01/15/off-canvas-navigation-for-responsive-website/）

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

问题：

我在Visaul基本网站上这样做 - 来自MVC，我想在我当前的项目中使用上面的例子。（点击左侧的幻灯片菜单）我使用默认的bootstrap导航，当导航栏有下拉菜单-toggle被按下了。

我的问题是：

我们是否可以更改默认的dropdown-navbar-toggle菜单以从左侧滑动。通过改变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>

只需要一些答案，想法或指示......

Answer 1

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

Answer 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%;
}

自定义导航栏切换（从下拉列表到左侧滑动）

2 个答案: