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;
}
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>',
) );
}
?>
display:block
when the top menu is clicked. This is a pure JavaScript/CSS question, isn’t it?