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
Post a Comment