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'm looking to create a /menu/widget area like the following site:

http://www.microsoft.com/en-gb/default.aspx

please see sections under downloads, security, support, about

is this considered a footer menu as well? my theme's footer menu is just a standard menu on the bottom right corner of the theme like the example site as well but i want to creat a similar area just above it.

thanks

share|improve this question
    
The submenus are are set to display:block when the top menu is clicked. This is a pure JavaScript/CSS question, isn’t it? –  toscho Dec 9 '12 at 21:14
add comment

2 Answers

FYI, what you should be looking/googling for is usually referred to as a "Mega Menu".

There are several plugins on CodeCanyon to help with it, I don't know of one on wordpress.org for it.

Not endorsing any solution but as an example: http://codecanyon.net/item/mega-menu-reloaded/1593152

You might also look over this post on WPMU http://wpmu.org/create-highly-customized-and-beautiful-mega-menus-for-wordpress/

share|improve this answer
add comment

I'm going to assume you're using Twenty Eleven theme, or another theme that supports child themes. If you're using a custom theme, then you can just edit the existing Functions.php and add your additional functionality there, and then edit the existing Style.css. However, if your situation is different, please post back, and I'll update to work with whatever theme you're using.

As of Dec. 2012, this site's footer is an example: http://dev.artbeforehygiene.com/

  1. Create a Child Theme in directory in your /wp-content/themes/ called twenteleven-child (or whatever you wish to call it, I'll use that name for the sake of these steps)
  2. Create two files: functions.php and a Style.css in that directory.
  3. In Style.css, add the following code:

    /*
    Theme Name: Twentyeleven Child: Triple Footer Addition
    Description: Child theme for the twentyeleven theme with footers 
    that look like http://www.microsoft.com/en-gb/default.aspx
    Author: [Your Name Here], Will Lanni
    Template: twentyeleven
    */
    
    @import url("../twentyeleven/style.css");
    /* Style Twentyeleven Footer to resemble Microsoft site */
    #colophon {
        background: #eee;
    }
    #site-generator,
    #supplementary {
        background: transparent;
    }
    #supplementary h3 {
        font-family: "wf_SegoeUI","Tahoma","Verdana","Arial","sans-serif";
        font-size: 1.2em;
        font-weight: normal;
        line-height: 1.25em;
        margin-bottom: 0.65em;
        color: #1a1a1a;
        text-transform: none;
    }
    #supplementary ul.menu {
        list-style-type: none;
        margin: 0 0 1.5em;
        padding: 0.25em 0 0.5em;
    }
    #supplementary ul.menu li {
        padding-bottom: .7em;
        font-size: .9em;
    }
    
    #supplementary ul.menu li a {
        font-weight: normal;
        color: #1570A6;
        transition: color 0.1s linear 0s;
    }
    #supplementary ul.menu li a:hover {
        color: #083947;
    }
    
  4. In functions.php, add the following code (this will create a bunch of extra nav menus that you can control within the WP Dashboard > Appearance > Menus). Twentyeleven already comes with three footer widget areas. However, if your theme only has one, you can add additional footer areas by uncommenting out the add footer code below.

    <?php
    
    // register additional custom menu slots
    function childtheme_register_menus() {
        if ( function_exists( 'register_nav_menu' )) {
            register_nav_menu( 'footer-1st-menu', '1st Additional Footer Menu' );
            register_nav_menu( 'footer-2nd-menu', '2nd Additional Footer Menu' );
            register_nav_menu( 'footer-3rd-menu', '3rd Additional Footer Menu' );
            register_nav_menu( 'footer-4th-menu', '4th Additional Footer Menu' );
            register_nav_menu( 'footer-5th-menu', '5th Additional Footer Menu' );
        }
    }
    add_action('init', 'childtheme_register_menus');
    
    /*
    Create additional footer areas ONLY IF THEY DON'T EXIST!!!
    Just uncomment out the add_action... but...
    If you're using twentyeleven, these are already there, just leave this alone!
    */
    //add_action( 'widgets_init', 'childtheme_widgets_init' );
    function childtheme_widgets_init() {
        register_sidebar( array(
            'name' => __( 'Footer Area One', 'twentyeleven' ),
            'id' => 'sidebar-3',
            'description' => __( 'An optional widget area for your site footer', 'twentyeleven' ),
            'before_widget' => '<aside id="%1$s" class="widget %2$s">',
            'after_widget' => "</aside>",
            'before_title' => '<h3 class="widget-title">',
            'after_title' => '</h3>',
        ) );
    
        register_sidebar( array(
            'name' => __( 'Footer Area Two', 'twentyeleven' ),
            'id' => 'sidebar-4',
            'description' => __( 'An optional widget area for your site footer', 'twentyeleven' ),
            'before_widget' => '<aside id="%1$s" class="widget %2$s">',
            'after_widget' => "</aside>",
            'before_title' => '<h3 class="widget-title">',
            'after_title' => '</h3>',
        ) );
    
        register_sidebar( array(
            'name' => __( 'Footer Area Three', 'twentyeleven' ),
            'id' => 'sidebar-5',
            'description' => __( 'An optional widget area for your site footer', 'twentyeleven' ),
            'before_widget' => '<aside id="%1$s" class="widget %2$s">',
            'after_widget' => "</aside>",
            'before_title' => '<h3 class="widget-title">',
            'after_title' => '</h3>',
        ) );
    }
    
    ?>
    
  5. Create your footer menus in Appearance > Menus. You'll create a single menu for each of those sub menus in the footer you want. Make sure to save!

  6. Add a single one of those menus to one of the drop down slots on the left. Save!
  7. Go to Appearance > Widgets.
  8. Drag a Custom Menu widget into one of the Footer slots, name it appropriately, and select the Nav menu you wish to appear.
  9. Repeat for the other menus you wish to add.
  10. Save and view your site!
share|improve this answer
add comment

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.