Wednesday, April 2, 2014

Simple DropDown Menu with Keyboard operation shortcut

Hi Guyz in this tutorial i am going to teach u how to create a DropDown menu with Keyboard operation shortcut. U can press enter to operate the dropDown menu . Its very easy and basic it have just few lines of code and a beatuful interface
Live View Download Watch Video Tutorial


html has nothing special special
<div class="Dropdown">
 <span>My Account <img src="./arrow.png"></span>
  <div class="submenu">
      <li>Find Friends</li>


 background-color: #e4e8ec;
 font-family: arial;
 background: #FFF;
 padding: 5px 10px;
 border-radius: 10px;
 width: 120px;
 box-shadow: 2px 2px 5px #ccc;
 cursor: pointer;
.Dropdown span img{
 margin-bottom: 5px;
 margin-left: 20px;
.submenu ul{
 display: none;
 margin: 0;
 padding: 0;
 list-style: none;
 margin-top: 5px;
 background: #fff;
.submenu ul li{
 padding: 5px;
.submenu ul li:hover{
 color: #FFFFFF;
 cursor: pointer;


In this file when class Dropdown is clicked we toggle the dropbox and when the enter button is clicked we also toggle dropbox on and off
<script src=""></script>
 $(document).ready(function() {
  //when dropdowm button is clicked
   $('.submenu ul').toggle();
  //when a key press in the document
  $(document).keyup(function(e) {
   var key = e.keyCode;
   if(key == '13'){
    $('.submenu ul').toggle();