SpiffyJr's Blogaroo

Preface

Waaaaasssuuuuupppp? Kidding. Drop-down menus are always a pain for me because you have to remember to do all kinds of CSS and it has to work in 45 different browsers. Rubbish, I say! I recently decided to add an animated drop-down menu to for the user section. The HTML/CSS was pretty straight forward but I hit a snag with the JavaScript so I sent an email to the Dojo Toolkit Mailing List and got a quick response from Peter Higgins (those Dojo guys are awesome). I promised a few blogs (and more to come in the future)  to showcase some of Dojo’s quick & easy wow features. This post assumes that you already know the basics about Dojo and have included Dojo somewhere in your project. If not, please check out Dojo Campus and the Dojo Toolkit homepage to get started.

Live Demonstration

Take a peak at the live demonstration to see where we’re headed. If you’re interested in how I got there keep on reading!

The HTML

The HTML is pretty straight forward and utilizes an unordered list for the layout. Note: all of the code here is going to be a straight copy/paste from the Blitzaroo source.

        

                

                        
                        Add ▼
                
                

                        

                                
                                        
                                        Event
                                
                        
                        

                                
                                        
                                        Profile
                                
                        
                        

                                
                                        
                                        Team
                                
                        
                
        
        

                
                        
                        Dashboard
                
        
        

                
                        
                        Events
                
        
        

                
                        
                        Profiles
                
        
        

                
                        
                        Teams
                
        

The only required attributes are class=”tabs” on the root

and class=”dropdown” on each
that is going to be a drop-down menu. The above menu has four regular links (Dashboard, Events, Profiles, and Teams.) and one drop-down menu (Add). I’ve spruced it up a bit by adding a few images but that is completely optional. I use the id tag on the root
for styling the menu. No surprise here but the HTML renders a menu that looks like:



The CSS

.downArrow {
        font-size: 85%;
        vertical-align: text-bottom;
}

#userMenu {
        -webkit-border-radius: 8px;
        background: #f5faf5;
        border: 1px solid #bbcfbb;
        display: table;
        font-size: 13px;
        font-weight: bold;
        list-style-type: none;
        margin: 8px 0;
        padding: 0 12px;
        position: relative;
}

#userMenu li {
        cursor: pointer;
        font-size: 12px;
        list-style: none;
        display: table-cell;
        float: left;
        position: relative;
        text-shadow: 0px 0px 1px #fff;
}

#userMenu li a,#userMenu li div {
        color: #154f14;
        font-size: 11px;
        padding: 5px 12px;
}

#userMenu li a:hover,#userMenu li div:hover {
        background-color: #dae8da;
        text-decoration: none;
}

#userMenu img {
        margin-right: 3px;
        vertical-align: top;
}

#userMenu a {
        position: relative;
        display: block;
}

#userMenu .dropdown {
        -webkit-border-bottom-left-radius: 8px;
        -webkit-border-bottom-right-radius: 8px;
        background: #f5faf5;
        border: 1px solid #BBCFBB;
        margin: 0;
        padding: 0;
        position: absolute;
        z-index: 999;
        top: 24px;
        left: -999em;
        height: 1px;
        display: block;
}

#userMenu .dropdown li {
        margin: 0;
        padding: 0;
        list-style: none;
        width: 145px;
}

#userMenu .dropdown li:hover {
        opacity: 1;
}

#userMenu .dropdown li a {
        display: block;
        padding: 6px 14px;
        text-shadow: 0px 0px 1px #fff;
}

#userMenu .dropdown li a:hover {
        text-decoration: none;
}

I’m a huge fan of CSS3 so I use border-radius quite liberally. Blitzaroo isn’t released yet so I haven’t added the Mozilla border-radius (-moz-border-radius) equivalent so you can either add it or remove the radius all together. The CSS itself is nothing special – I use display: block with a touch of padding on tags and float

• tags left for the parent so that we have a horizontal menu. With a slight change of the CSS you could create a vertical drop-down (slide out?) menu. I use left: -999em for accessibility (and for the Dojo animation we’ll be using).  So, with the addition of CSS the menu now looks like:

  

  The JavaScript

  I found the JavaScript on a tutorial to Create The Fanciest Dropdown Menu You Ever Saw which uses jQuery rather than Dojo. Personally, I think jQuery is over-hyped and I love Dojo (/me wipes nose). I took the JavaScript listed there, combined it with the mailing list love from Peter Higgins, and came up with:

  dojo.addOnLoad(function() {
          // user menu special effects
          var userMenu = dojo.byId("userMenu");
          if (userMenu) {
                  dojo.query(".dropdown").forEach(function(n) {
                  var l = dojo.query(n);
                  l.parent().at(0)
                                  .onmouseenter(function(){
                                          dojo.style(l[0], "left", "0");
                                          dojo.fx.wipeIn({node: l[0], duration: 250}).play();
                                  })
                                  .onmouseleave(function(){
                                          dojo.style(l[0], "left", "-999em");
                                          dojo.style(l[0], "display", "none");
                                  });
              });
      }
  });
  

  This little snippet recursively checks for .dropdown and when the mouse enters sets left: 0; followed by an animated Dojo wipeIn. On mouse out it sets left: -999em; and then sets the display to none. I tried a number of CSS/FX combinations to come up with a solution that worked and this is about all I could come up with. You could use any combination of Dojo FX to stylize your own menu. My favorites are wipeIn, wipeOut, fadeIn, and fadeOut combined with easing. Try out a few combinations and see what you like best. Enjoy!

  Tags: Cascading Style Sheets, CSS, Data Formats, Dojo Toolkit, HTML, HTML element, JavaScript, Style Sheets

  This entry was posted on Tuesday, March 2nd, 2010 at 9:30 am and is filed under Dojo. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.