On larger screens, I would like the navigation/navbar to be positioned at the top. However, on mobile view or when collapsed, I want the toggle button to reveal the navigation menu by sliding from the left side, similar to this example:
(source by David Bushell: )
Many websites and examples use a duplicate of the navigation items in another div that becomes visible when the toggle button is pressed in mobile view. This approach seems redundant to me. While some examples have the menu appearing as a sidebar by default, I prefer having the menu at the top by default and sliding out from the left upon toggling. Despite my extensive research, I couldn't find exactly what I was looking for.
Issue:
I am working on Visual Basic web-form MVC and would like to implement a similar slide-out menu feature to my current project. I'm using the default Bootstrap navigation with dropdown menus triggered by navbar-toggle.
My question is:
Is there a way to modify the default dropdown navbar-toggle menu behavior to slide from the left? I have no idea where to start in terms of changing the jQuery code or other aspects.
(I think we might need to create a new class and apply it when the navbar-toggle icon is clicked, but this is just my speculation)
NOTE: I am not an expert coder, so please explain things at a beginner to intermediate level.
Here is the code snippet:
<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 is the 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>
Looking for answers, suggestions, or guidance...