自定义导航栏切换（从下拉菜单向左滑动）

我希望导航/导航栏位于较大屏幕的顶部。当在移动视图/折叠状态下按下切换按钮时，它应像以下示例一样从左侧滑动。自定义导航栏切换（从下拉菜单向左滑动）

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

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

我见过很多网站和他们使用另一个DIV的例子，因为他们的资产净值项目的副本，当切换按钮是它是可见按下移动视图。这是多余的。一些示例将菜单作为默认的侧边栏。但是我希望菜单在默认情况下在顶部，并在点击切换按钮时从左侧滑动。我做了很多研究，但找不到我在找的东西。

问题：

我对VISAUL基本的Web-MVC中，我想是在我当前的项目上面的例子中这样做，我使用默认的引导导航（从左上单击幻灯片菜单），即。在按下导航栏切换按钮时有下拉菜单。

我的问题是：

有没有办法，我们可以更改默认的下拉菜单，导航栏，切换菜单从左侧滑动。通过更改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>

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

来源

2015-04-01 Sanjay Lama

https://jsfiddle.net/14tj17rj/ – 2015-04-01 18:35:30

小提琴不工作 – Ala 2015-04-05 13:23:32

我正在寻找一种类似的事情并找到this一个。 Jasny Bootstrap是Vanilla Bootstrap的延伸。它的OffCanvas功能可能帮助您设计您正在寻找的内容。

来源

2015-12-15 07:24:37 Aveek

简单。改变从

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

来源

2016-06-07 15:12:46

自定义导航栏切换（从下拉菜单向左滑动）

回答

相关问题