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

html has nothing special special

<div class="Dropdown">
 <span>My Account <img src="./arrow.png"></span>
  <div class="submenu">
   <ul>
      <li>Profile</li>
      <li>Settings</li>
      <li>Find Friends</li>
      <li>Feedback</li>
      <li>Signout</li>
   </ul>
  </div>
</div>

Css

body{
 background-color: #e4e8ec;
 font-family: arial;
}
.Dropdown{
 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{
 background:#155FB0;
 color: #FFFFFF;
 cursor: pointer;
}

javaScript

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="http://code.jquery.com/jquery-latest.js"></script>
<script>
 $(document).ready(function() {
  //when dropdowm button is clicked
  $('.Dropdown').click(function(){
   $('.submenu ul').toggle();
  });
  //when a key press in the document
  $(document).keyup(function(e) {
   var key = e.keyCode;
   if(key == '13'){
    $('.submenu ul').toggle();
   }
  });
 });
</script>