Create CSS and jQuery slide-in menu panels

Inspired by the Weget.nl site, discover a solution for adding slide-in menu panels activated with both click and keypress events

GET THE TUTORIAL FILES

Get started

In this example we will emulate Weget’s slide-in navigation menu panel, using CSS3 transitions and jQuery to trigger open and closed states. The <div> panel will be activated both on click and also via pressing the M key. Start with a new HTML document and attach the latest jQuery library to the <head> of the page. In addition we’ll be styling our page text with Lato via Google Fonts:

001 <script src="http://code.jquery.    com/jquery-1.11.2.min.js"></script>    
002 <link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>

Define the HTML elements

For page elements set up a menu <div> containing a pair of nested divs – a main panel and a small tabbed edge. We’ll style these in Step 4 with the subsequent <h1>, <h2> and <p> tags (these are labels for instruction and outputting event or variable states).

001 <body>    
002 <div id="menu">
003 <div id="panel">NOW YOU<br>SEE     ME!</div>    
004 <div id="tab">&raquo;</div>    
005 </div>
006 <h1>Slide-in menu on click or     keypress</h1>    
007 <h2>[Click arrow tab or hit 'M'     key]</h1>    
008 <p id="label1">KEY PRESSED: None</    p>    
009 <p id="label2">MENU OPEN: false</p>
010 </body>

Basic page styling

Moving to the CSS, start by styling optional body styles. Here we’ve opted for Weget-inspired background and text colours, along with the familiar use of the Lato font. Alongside this are sizing preferences for our various page labels. All of this is optional and included for illustration, as it has no bearing on the menu itself.

001 <style>                 
002 body {
003 font-family: 'Lato', sans-serif;
004 text-align: center;        
005 background-color: #161616;    
006 color: rgba(224, 224, 224, 0.8);      
007 }        
008 h1 {     
009 font-size: 40px;    
010 }    
011 p {
012 font-size: 36px;
013 }
014

CSS menu element

The menu element contains two parts, the main panel which is hidden on close and the tabbed edge which remains visible. So in the CSS we define styles for those divs, crucially setting the left property negatively to hide it in the left page. By setting a transition we dictate how it will animate into view when we dynamically toggle on the open class and set left to zero:

001 #menu{ 
002 position: absolute;            
003 top: 0;    
004 bottom: 0;    
005 left: -410px;     
006 background-color:#F03;;
007 color: #000000;            
008 font-size:60px;    
009 -webkit-transition: all 0.4s ease;
010 transition: all 0.4s ease;     
011 }
012 #menu.open{    
013 left: 0;
014 }            
015 #panel{    
016 width: 410px;    
017 float: left;     
018 }
019 #tab{            
020 width: 40px;    
021 background-color: #F90;
022 cursor: pointer;     
023 float: left;
024 }    
025 </style>    
026

Bind the key events

We’ll add our script just before the </body> tag and start by defining a Boolean variable as an open or closed flag. By default the menu is closed so we set it false. Next we have a small function called on load which very simply binds keyup and click events to the page body and the menu’s tab element. Upon either of these events we will then call an activated() function that is defined next.

001 <script>
002 var menuOpen=false;            
003 $(function(){     
004 $("body").bind("keyup", activated);    
005 $("#tab").bind("click", activated);     
006 });
007

Invoke the menu transitions

The main activated() function then performs our menu actions. Additionally, it outputs variable states to our page labels, which is purely cosmetic to track the events. However the main part checks the passed event object for an M press keyCode (77) or our bound click. If true we merely toggle the #menu.open class from our CSS before flipping our Boolean flag. This is then used to switch the tab arrow icon to in or out. All done!

001 function activated(event){     
002 $("#label1").text("KEY PRESSED = "     + String.fromCharCode(event.keyCode));     
003 if(event.keyCode==77 || event.type=="click"){    
004 $("#menu").toggleClass("open");     
005 menuOpen=!menuOpen;
006 if(menuOpen){ $("#tab").html("&laquo;");} else {
007 $("#tab").html("&raquo;");        
008 };    
009 $("#label2").text("MENU OPEN: " +     menuOpen.toString());    
010 };     
011 };
012 </script>    
013