How to make menu to slide right on click using HTML and CSS?

Question

I have an HTML page in which there is an side menu bar that displays a list of dashboards which is done using Django. i want this menu(left-side menu) to show only a part of it when logged in and show fully after clicking on it.

The code for the html looks like this:

 <div class="row"> <div class="col-sm-3 col-md-2 sidebar"> <ul class="nav nav-sidebar"> <li><span style="color:blue; font-weight:bold;">Dashboards</span></li> {% for Dashboard in dashboards %} <li><a href="{{ Dashboard.d_url }}" target="iframe_a">{{ Dashboard.d_name }}</a></li> {% endfor %} </ul> </div> 

since i am not familiar with jquery and all i want to know if there are any ways which works with only css and javascript to do this. when i open my html file it looks like this after clicking on icon

Answer 1

Is not very clear what you are trying to do, but i understand that is something like transition: left 1s; or transition: transform 1s ; and when you press your button toggles a class for changing left or transform: translateX(value); styles like this example

But also you need to understand if that menu will push your other content or not.

That's a basic transition and a basic Layout i'm not sure if it fits on your requirements. Also for IE9 and older browsers support you might want to check animations using jQuery or jQuery UI

Answer 2

check out this code of javascript which does required

 $("#menu-button").bind( "click", function() { $('#mobile-menu').toggleClass('open'); $('#overlay').show(0); }); $("#overlay").bind( "click", function() { $('#mobile-menu').removeClass('open'); $('#overlay').hide(0); //basically so that clicking outside closes the menu; but on mobile I think it's immediately undoing the add class above }); $('#menu-button').click(function(){ $(this).find('span').toggleClass('glyphicon-chevron-right glyphicon-chevron-left') });