Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I really like the drop down menu solution of twenty eleven theme:

http://twentyelevendemo.wordpress.com/

and would like to create a similar one but I cannot figure how it works, or is it based on some existing code for dropdown menus?

Is there any source code that can be used, or can someone explain the principle behind it?

I know internet is full of both js and non-js solutions, I've even made some myself, but IMO nothing comes near this menu, so help is appreciated:)

share|improve this question
2  
you can access the code by downloading Twenty Eleven wordpress.org/extend/themes/twentyeleven –  Michael Sep 14 '11 at 12:56
    
Great comment, and that's actually the first thing I did, but everything was just too messy to figure, even though I tried. –  Freelancer Sep 14 '11 at 13:48

2 Answers 2

up vote 1 down vote accepted

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

share|improve this answer
    
Thanks, superfish is what turned out to provide the exact same functionality. –  Freelancer Sep 14 '11 at 13:49

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.

share|improve this answer
    
Jeremy - I inserted that code into functions, but it isn't appearing in my "menu" under appearance. Is there a specific place I should paste it??? Thanks! –  user11207 Dec 16 '11 at 20:37
    
It just needs to be placed in the functions.php file. Make sure your theme isn't using 'register_my_menus'. Maybe you can change it to 'register_my_custom_menus'. Just be sure to change both instances. I just checked it on a theme from the repo that didn't come with custom menu's and it worked fine. A few questions for you: Does your current theme already use custom menu's? Is your theme one I can download? I'll check it out if it's available and if I it gives me any issues. –  Jeremy Jared Dec 17 '11 at 2:13
    
@Megan at Fiterature: It seems there was an issue. For some reason when I tested it on my site using the WordPress Beta Installation it worked. I just created a new site, installed WordPress 3.3. That's when I noticed the menu's weren't being registered as you said. See the code above for the solution that fixed it for me. –  Jeremy Jared Dec 17 '11 at 19:49

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.