About design and nearby

The Sweet Drop Down Javascript Menu

Posted: September 5th, 2011 | Author: | Filed under: Tips and Tricks | Tags: , , | No Comments »

Drop down menu is the common element of today’s web design. It’s very flexible and takes up less space than the usual one, all what you do need is make over your menu for your own needs. With Javascript drop down menu comes more interactive or at least gets animation that improve user interface. With help of CSS it’s pretty easy to customize the look and feel.

After googling I found Sexy Drop Down Menu (by Soh Tanaka), but it didn’t quite suit me. The menu tabs were opened after clicking the relevant button. And I was looking for the hover effect. So my decision was to do over its javascript for my need.

HTML:

  1. <ul class="topnav splitter_dropdown">  
  2.                    <li class="spt"><a class="my_titles" href="#"><span>Home</span></a></li>
  3.                    <li class="spt">  
  4.                         <a class="my_titles" href="#"><span>About me</span></a>
  5.                         <ul class="subnav">  
  6.                             <li><a href="#">Link</a></li>
  7.                             <li><a href="#">Link</a></li>
  8.                         </ul>  
  9.                     </li>
  10.                  
  11.                    <li class="spt"><a class="my_titles" href="#"><span>Portfolio</span></a>  
  12.                         <ul class="subnav">  
  13.                             <li><a href="#">Link</a></li>
  14.                             <li><a href="#">Link 2</a></li>
  15.                             <li><a href="#">Link 3</a></li>
  16.                             <li><a href="#">Link 4</a></li>
  17.                         </ul>
  18.                    </li>                  
  19.                    <li class="spt"><a class="my_titles" href="#"><span>Contact</span></a>                        
  20.                    </li>
  21.                    <li class="spt"><a class="my_titles" href="#"><span>Blog</span></a>                  
  22.                    </li>  
  23.                </ul>

Stylesheet:

  1. ul.topnav {
  2.     font-family: Georgia,serif;
  3.  list-style: none;
  4.  font-size: 13px;
  5.     margin: 0;  
  6.     text-align: left;
  7.     width: 964px;    
  8.     position:relative;  
  9. }
  10.  
  11. ul.topnav li {
  12.  float: left;
  13.  margin: 0;
  14.  padding: 0 8px 0 8px;
  15.  position: relative; /*–Declare X and Y axis base for sub navigation–*/
  16. }
  17.  
  18. ul.topnav li a {
  19.  padding: 10px 5px;
  20.  color: #222;
  21.  display: block;
  22.  text-decoration: none;
  23.  float: left;
  24.  font-size: 13px;
  25. }
  26.  
  27. ul.topnav li div {
  28.  width:15px;
  29.  height: 35px;
  30.  float: left;
  31.  background: url(../images/subnav_btn.gif) no-repeat center top;
  32. }
  33.  
  34. ul.topnav li div.subhover {
  35.     background-position: center bottom;
  36.     cursor: pointer;
  37. }
  38.  
  39. ul.topnav li ul.subnav {
  40.  list-style: none;
  41.  position: absolute; /*–Important – Keeps subnav from affecting main navigation flow–*/
  42.  left: 3px;
  43.  top: 38px;
  44.  background: #fff;
  45.  margin: 0; padding: 0;
  46.  display: none;
  47.  float: left;
  48.  width: 170px;
  49.  border: 1px solid #e0e0e0;
  50. }
  51.  
  52. ul.topnav li ul.subnav li{
  53.  margin: 0; padding: 0;
  54.  border-top: 1px solid #f2f2f2; /*–Create bevel effect–*/
  55.  border-bottom: 1px solid #e0e0e0; /*–Create bevel effect–*/
  56.  clear: both;
  57.  width: 170px;
  58. }
  59.  
  60. html ul.topnav li ul.subnav li a {
  61.  float: left;
  62.  background: #fff url(../images/dropdown_linkbg.gif) no-repeat 10px center;
  63.  padding-left: 20px;
  64. }
  65.  
  66. html ul.topnav li ul.subnav li a:hover {
  67.  background: #fff url('../images/dropdown_linkbg.gif') no-repeat 10px center;
  68.  color:#efaf01;
  69. }
  70.  
  71. ul.topnav li div /*arrow image*/ {
  72.      margin-top :4px;
  73. }

Javascript:
There was taken a script which used jQuery (which worked with onmouseover event), it was changed for onclick event. And there was an issue with submenus opening/closing – when a user moved the mouse cursor quickly from a menu item and back to the same item (the submenu opened and closed multiple times) or from one menu item to another one (new submenu item did not open). The problem was fixed by adding executeFlag variable, which shows if any submenu is executed, and which menu item has opened it so that to prevent multiple openings/ closings.

  1. var executeFlag;
  2. $(document).ready(function () {
  3.     $("ul.subnav").parent().append("<div></div>"); //Only shows drop down trigger when js is enabled (Adds empty span tag after ul.subnav*)
  4.  
  5.     $(".spt").hover(function () {
  6.     },
  7.     function () {
  8.  
  9.         $(this).find(".subnav").slideUp('fast', function () { executeFlag = "" }); //When the mouse hovers out of the subnav, move it back up
  10.     });
  11.  
  12.     $("ul.topnav li div, .spt .my_titles").hover(function () { //When trigger is hovered…
  13.  
  14.         var identificator = $(this).parent().find("a").find("span").text()
  15.  
  16.         if (executeFlag == identificator) {
  17.             return;
  18.         }
  19.  
  20.         executeFlag = identificator;
  21.        
  22.         $(this).parent().find("ul.subnav").slideDown('fast', function () { executeFlag = identificator }).show();
  23.     });
  24.  
  25. });

Live example: check the example >>

Share Button

Check Related Posts:


Leave a Reply


  • 5 × = thirty five

Looking for a Freelance UX & UI designer for your project? I’m ready to jump onboard!

Let's discuss your project now