0

i have done how to toggle boostrap side nav bar using startbootstrap-simple-sidebar css which based on top of boostrap css

here is the sample code which is working

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script src="https://code.jquery.com/jquery.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"
        rel="stylesheet" type="text/css" />
    <%--Add the css reference here--%>
    <link href="../css/simple-sidebar.css" rel="stylesheet" type="text/css" />
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#ToggleSideMenu").click(function (e) {
                e.preventDefault();
                $("#wrapper").toggleClass("toggled");
            });
        });
    </script>
</head>
<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=".navbar-collapse">
                    <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar">
                    </span>
                </button>
                <a class="navbar-brand" href="/">Application name</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a href="/">Home</a></li>
                    <li><a href="/Home/About">About</a></li>
                    <li><a href="/Home/Contact">Contact</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container body-content">
    </div>
    <div id="wrapper">
        <!-- Sidebar -->
        <div id="sidebar-wrapper">
            <ul class="sidebar-nav">
                <li class="sidebar-brand"><a href="#">Start Bootstrap </a></li>
                <li><a href="#">Home</a> </li>
                <li><a href="#">About</a> </li>
                <li><a href="#">Contact</a> </li>
            </ul>
        </div>
        <!-- /#sidebar-wrapper -->
        <!-- Page Content -->
        <div id="page-content-wrapper">
            <br />
            <br />
            <a href="#ToggleSideMenu" class="btn btn-default" id="ToggleSideMenu">Toggle Menu</a>
            <hr />
            <footer>
            <p>&copy; 2015 - My ASP.NET Application</p>
        </footer>
        </div>
        <!-- /#page-content-wrapper -->
    </div>
</body>
</html>

Demo with image

enter image description here

i have bit different requirement.

1) so tell me what to change in code to make it right side bar. if possible give a change code to make it right side bar.

2) also tell me how could i have one small div which will be attached or stick to left side bar and when click on that div then left nav bar will collapse and expand instead of having big button for toggle menu. here is two screen shot url posted because i want to show how small div should look like to toggle left div.

please guide me for my 2 question. thanks

enter image description here enter image description here

1
  • there's like an extension to bootstrap called jasny bootstrap that has a built in side nav that you may want to look into
    – SuperVeetz
    Aug 29, 2015 at 9:50

1 Answer 1

0

In the CSS for the menu look for the ID

#sidebar-wrapper {} 

then remove

left: ..px; 

and replace it with

right: 1px

Hopefully this will help :)

2
  • it would be much better if u post full working code. also tell me how to attach small sticky div with left nav bar as per the last 2 images i posted.
    – Mou
    Aug 29, 2015 at 10:24
  • look at this page for side toggle.jasny.net/bootstrap/examples/navmenu-reveal
    – Mou
    Aug 29, 2015 at 10:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.