javascript - Custom Navbar-toggle (from dropdown to slide from the left) -


i want navigation/navbar @ top on bigger screen. when, on mobile view/collapsed, toggle button pressed should slide left following example.

http://dbushell.github.io/responsive-off-canvas-menu/step4.html

(source david bushell: http://www.smashingmagazine.com/2013/01/15/off-canvas-navigation-for-responsive-website/ )

i have seen many websites , examples use div have copy of nav items , visible when toggle button pressed on mobile view. redundant. examples have menu sidebar default. want menu on top default , slide left upon clicking toggle button. have done many research not find looking for.

problem:

i doing on visaul basic web-from mvc, want above example on current project.(slide menu left on click) using default bootstrap navigation, has dropdown menu when navbar-toggle pressed.

my question is:

is there way can change default dropdown-navbar-toggle menu slide left. changing jquery or something. have no clue change.

(i feel like, have create class , call when clicking navbar-toggle (hamburger icon) saying)

note: not expert coder, talk me beginner intermediate level.

here code

<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> 

this whole body code

  <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> 

just need answers or ideas or directions...

i searching kind of similar things , found this one. jasny bootstrap extension of vanilla bootstrap. offcanvas feature might design looking for.


Comments

Popular posts from this blog

Payment information shows nothing in one page checkout page magento -

tcpdump - How to check if server received packet (acknowledged) -