-1

I want to have a Dashboard menu. If i click the burger icon, the menu have to change like on the pictures.

From this:

enter image description here

To this:

enter image description here

Here is my code: HTML

            <span class="glyphicon glyphicon-menu-hamburger"></span>
            <ul class="nav navbar-nav">
            <!-- Line 1-->
                <li class="listyle" >
                  <a href="#" data-toggle="collapse" data-target="#toggleDemo" data-parent="#sidenav01" class="collapsed">
                <span style="color:#e20074">  <span  class="glyphicon glyphicon-cloud"></span>&nbsp; 1. Item</span>
                  </a>
                  <div class="collapse" id="toggleDemo" style="height: 0px;">
                    <ul class="nav nav-list">
                      <li><a href="#">Submenu1.1</a></li>
                      <li><a href="#">Submenu1.2</a></li>
                      <li><a href="#">Submenu1.3</a></li>
                    </ul>
                  </div>
                </li>
              </ul>
Krishna Mohan
  • 1,503
  • 3
  • 22
  • 28
Kronkorken
  • 65
  • 2
  • 5

1 Answers1

0

Please try with below URL, I have added some css and Js.

.navbar-nav {
        width:200px;
        transition:all 0.8s ease;
    }
    .glyphicon{
        transition:all 0.9s ease;
    }
    .navbar-nav li{
        width:200px;
    }
    .someClass {
        width:50px;
        overflow:hidden;
        display:block;

    }
    .someClass .glyphicon{
        color:#0f0d9f;
        font-size:30px;
    }



$('.glyphicon-menu-hamburger').click( function() {
    $(".navbar-nav").toggleClass("someClass");
} );

ref url

ramya0072
  • 56
  • 7
  • I've been too early pleased. In the fiddle this is working fine. On my own files are happen nothing. What could i do? – Kronkorken Jul 20 '16 at 11:53
  • Please include Jquery library file in html. Download the jQuery library from jQuery.com OR include jQuery from a CDN. – ramya0072 Jul 20 '16 at 13:12
  • The library are included but is still not working: Here the – Kronkorken Jul 21 '16 at 07:49
  • Here its working fine.... Please check below html format, Jquery file should be in header Your html – ramya0072 Jul 21 '16 at 08:11
  • Now it works! My script was outside html, this was the mistake. Thanks a ton! Do you also know how can i combine this with columns in boostrap? If i click the icon to change from col-2 to col-1 ? – Kronkorken Jul 21 '16 at 08:27
  • Please change Js like: $('.glyphicon-menu-hamburger').click( function() { $(".navbar-nav").toggleClass('col-1').toggleClass('col-2') } ); Ref :http://jsfiddle.net/Wy22s/967/ – ramya0072 Jul 21 '16 at 08:46