2 comments

1. I was just doing exactly this recently. Not sure how advanced you are so you may know some of this stuff already.

   I found this video to be very good (+ it’s second part)

   I think one of the original pieces of research done was this

   I think Twenty Eleven also uses the superfish jquery plugin

   As the other poster mentioned you can find the twenty eleven code itself somewhere amongst the theme files

   Log in to Reply

2. Here is a quick snippet I use to get started on my projects:

   The first step is to add some code to the functions.php file. This is what will enable the WordPress Custom Navigation. The controls will be in Appearance>Menu’s once your finished.
   Code for functions.php:

   <?php
   add_action( 'init', 'register_my_menus' );
   function register_my_menus() {
   register_nav_menus(
   array(
       'main' => __( 'main' ),
       'secondary-menu' => __( 'Secondary Menu' ),
       ));
   }
   ?>
   

   The code above allows for two menu’s. I’ll show you how to add one, and if you want you can use the same method to add a second wherever you wish.

   The next step is to add the code to the header.php file. Notice above that the first menu in the array is labeled main. This is what we’ll use to place the menu in the header.php.

   Here is the code for the header.php:

   <div id="menu" class="menu-center">
       <?php wp_nav_menu( array( 'theme_location' => 'main' ) ); ?>
   </div>
   

   This should be placed inside your <div id="header"> div’s (it isn’t mandatory, but is the most common place for the code.

   The last step is to add some CSS to style the menu and actually make it “drop-down”, instead of a bunch of multilevel links.

   The CSS code:

   ul.menu,ul.menu ul,ul.menu li,ul.menu a {
   display:block;
   margin:0;
   padding:0;
   }
   
   ul.menu ul {
   display:none;
   }
   ul.menu li:hover {
   z-index:999;
   }
   ul.menu li:hover > ul {
   display:block;
   position:absolute;
   float:left;
   }
   ul.menu li {
   float:left;
   width:auto;
   }
   ul.menu ul li {
   float:left;
   width:190px;
   }
   ul.menu ul li ul {
   float:left;
   width:190px;
   position:absolute;
   left:100%;
   top:0;
   }
   ul.menu-ver,ul.menu-ver ul {
   width:14em;
   }
   
   div.menu-center ul.menu {
   float:left;
   position:relative;
   left:50%;
   }
   
   div.menu-center ul.menu li {
   position:relative;
   left:-50%;
   }
   
   div.menu-center ul.menu li li {
   left:auto;
   }
   
   
   ul.menu li a {
   border-bottom:1px outset ghostwhite;
   }
   
   ul.menu li a {
   padding:8px 12px 10px;
   }
   
   ul.menu li a:link,ul.menu li a:hover,ul.menu li a:visited,ul.menu li a:active {
   text-decoration:none;
   border-bottom:1px outset black;
   }
   
   
   ul.menu li {
   background: #45484d;
   background: -moz-linear-gradient(top, #45484d 0%, #000000 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#45484d), color-stop(100%,#000000));
   background: -webkit-linear-gradient(top, #45484d 0%,#000000 100%);
   background: -o-linear-gradient(top, #45484d 0%,#000000 100%);
   background: -ms-linear-gradient(top, #45484d 0%,#000000 100%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 );
   background: linear-gradient(top, #45484d 0%,#000000 100%);
   }
   .menu-center {
   float:right;
   margin-right:95px;
   }
   
   ul.menu li a{
   color:ghostwhite;
   }
   ul.menu li a:hover {
   background: #efefef;
   background: -moz-linear-gradient(top, #efefef 0%, #ffffff 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#efefef), color-stop(100%,#ffffff));
   background: -webkit-linear-gradient(top, #efefef 0%,#ffffff 100%);
   background: -o-linear-gradient(top, #efefef 0%,#ffffff 100%);
   background: -ms-linear-gradient(top, #efefef 0%,#ffffff 100%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#ffffff',GradientType=0 );
   background: linear-gradient(top, #efefef 0%,#ffffff 100%);
   color:black;
   }
   

   You can play with the css to adjust it to your liking, but that should get you started.

   Edited For WordPress 3.3 Compatibility:

   After updating to the latest version of WordPress (v3.3) it appears the menu’s won’t work if your theme is using the after_setup_theme hook and you use the ‘init’ hook to register the menu’s.

   The Fix:

   For this example I’ll use the name yourtheme as the function_name.

   Sample functions.php file:

   <?php
   if ( ! isset( $content_width ) )
   $content_width = 610;
   add_action( 'after_setup_theme', 'yourtheme_setup' );
   if ( ! function_exists( 'yourtheme_setup' ) ):
   function yourtheme_setup() {
     // Adds styles the visual editor (editor-style.css)
     add_editor_style();
     add_theme_support( 'automatic-feed-links' );
     //Register Custom Menu's
       register_nav_menus(
         array(
           'main' => 'main',
           'secondary' => 'secondary',
           )
         );  
     // Add Post Thumbs and Custom Image Sizes
     add_theme_support( 'post-thumbnails', array( 'post' ) );
     // Add support for a variety of post formats
     add_theme_support( 'post-formats', array( 'aside', 'link', 'gallery', 'status', 'quote', 'image' ));
     }
   endif; // yourtheme_setup
   /**
    * Start the rest of your functions.php file code...
    * 
    */
   ?>
   

   Look at the TwentyTen Themes functions.php file to see other functions to include in the after_theme_setup hook.

   Log in to Reply