How to achieve Expand collapse Side Nav with icon using jquery and boostrap css


Tags: jquery,html,css,twitter-bootstrap

Problem :

i have almost done my job for expand collapse side nav using jquery and boostrap. here is my html and screen shot.

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

screen shot

enter image description here

in my case nav is getting expand and collapse by button by i want to do with icon which will be sticky with nav bar. here i am giving a url which looks same as per my requirement.

http://www.keenthemes.com/preview/index.php?theme=conquer

enter image description here

just tell me what to change in my html and css to get a little icon stick with my left side nav. if possible please help me with code sample. thanks



Solution :

Just move your button inside your navbar-header div, like this:

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

Then, in your css:

.navbar-header {
    position: relative;
}

.navbar-toggle {
    position: absolute;  // this takes the button out of the regular document flow 
    left: 100%;    // this will stick the button on the outside right edge -- reduce this if you want the button more inside of the navbar-header
    top: 50%;
    transform: translateY(-50%);  // this & the rule above it will center the button vertically relative to the navbar-header
}

    CSS Howto..

    How to make HTML table cells expand horizontally beyond end of page?

    How to draw a circle sector in CSS?

    How does a browser determine which cursor to use if multiple are set via CSS?

    How can I put a graphic marker next to an item using pure CSS?

    How to make a simple timer image slideshow using HTML and CSS

    how to see which CSS class is applied or where is that font-size coming from, from which class or tag

    How to override nth-child

    How to use easily svg as icon?

    How to fix the alignment of my sub-menu

    How to set border between two products in css?

    How are scrollbars in new Google Docs UI styled (esp. the arrow buttons)?

    How to set css attribute for pseudo element in Dart

    How to unbind element then allow that element to bind again

    How to place divs three in a row with css and html

    WordPress TwentyTen menu: how to CSS-select sub-menus in a specific position?

    How to select other (sibling) elements CSS?

    how to create css shapes X which has to be background inside? [closed]

    How to match the last n children with CSS?

    How to do caption hover effect on a background?

    How to make the hover attributes stays when it is clicked/active?

    How to increase the font size of one word only in the line?

    How to write css rule that run with a special browser?

    how to underline a letter of button caption in vaadin?

    How to only change left padding in javafx css

    How to get this specific responsive nav?

    How to set min-height of div to height of viewport?

    How to set alternating color to nested and sibling divs with certain class.

    how to change li last anchor color

    How use hash tag (“a name”) to go to spot on page but account for a fixed element at top?

    How to create a circle with text coming out of it like rays [closed]