CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Sanjay Lama
Sanjay Lama

Reputation: 21

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

I want the navigation/navbar at the top on bigger screen. When, on mobile view/collapsed, the toggle button is pressed it should slide from the left like the following example.

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

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

I have seen many websites and examples where they use another div which have copy of the nav items and it is visible when the toggle button is pressed on the mobile view. That is redundant. Some examples have the menu as a sidebar as a default. But I want the menu on top as default and slide from left upon clicking the toggle button. I have done many research but could not find what I was looking for.

Problem:

I am doing this on Visaul basic web-from MVC, I want something like the above example on my current project.(slide menu from left on click) I am using default bootstrap navigation, that has the dropdown menu when the navbar-toggle is pressed.

My question is:

Is there way we can change the default dropdown-navbar-toggle menu to slide from the left. By changing the jquery or something. I have no clue what to change.

(I feel like, we have to create another class and call it when clicking the navbar-toggle (hamburger icon) but i am just saying)

NOTE: I am not expert coder, so talk to me as a beginner to intermediate level.

Here is my 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 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>

Just need some answers or ideas or directions...

Upvotes: 2

Views: 3841

Answers (2)

Hrvoje Golcic
Hrvoje Golcic

Reputation: 3686

Easy. Change the default behavior from

<button ... data-toggle="collapse" data-target="#public-menu-navbar-collapse">

to

<button ... data-toggle="slide-collapse" data-target="#public-menu-navbar-collapse">

And then:

// mobile menu slide from the left
$('[data-toggle="slide-collapse"]').on('click', function() {
    $navMenuCont = $($(this).data('target'));
    $navMenuCont.animate({'width':'toggle'}, 350);
});

Make sure that your navbar has specified CSS for example (check the class name):

.navbar-collapse {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    width: 280px; /*example + never use min-width with this solution */
    height: 100%;
}

Upvotes: 0

Aveek
Aveek

Reputation: 849

I was searching kind of similar things and found this one. Jasny Bootstrap is an extension of Vanilla Bootstrap. Its OffCanvas feature might help you to design what you are looking for.

Upvotes: 2

Related Questions