Zazzy WordPress Navigation WordCamp Milwaukee

Zazzy WordPress
Navigation
Courtesy of:
CSS Tricks & jQuery Magic

Presented by: Rachel Baker
@rachelbaker
www.rachelbaker.me

Freelance Web Developer
Plugged In Consulting
www.pluggedinconsulting.com

There is no such thing
as Navigation Gnomes

PHASE 1 PHASE 2 PHASE 3

Build
Website ? Happy
Visitors

Rachel Baker - WordCamp Milwaukee 2012

Who is Your Audience?
What are they Expecting?

http://xkcd.com/773/

Appearance -> Menus


Expand Your Options.


Relationships Meta Data
http://gmpg.org/xfn/creator

<a href="http://www.rachelbaker.me"
rel="me">Rachel Baker</a>


Add Relationships
to Menu Items

<a rel="friend met
colleague" href="http://
heatheracton.com/">Heather
Acton</a>


Boring Navigation Menu


Not-so-scary Menu Code
<div class="menu-top-navigation-bar-container">
<ul id="menu-top-navigation-bar" class="menu">
<li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item
page-item-28 current_page_item menu-item-30">
<a href="http://milwaukee2012.org/schedule/">Schedule</a>
<ul class="sub-menu">
<li id="menu-item-55" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-55">
<a href="http://milwaukee2012.org/schedule/saturday/">Saturday, June 2nd</a>
</li>
<a href="http://milwaukee2012.org/schedule/sunday-june-3rd/">Sunday, June 3rd</a>
</li>
</ul>
</li>
<a href="http://milwaukee2012.org/speakers/">Speakers</a>
<ul class="sub-menu">
<a href="http://milwaukee2012.org/speakers/heather-acton/">Heather Acton</a>
</li>
<a href="http://milwaukee2012.org/speakers/tracy-apps/">tracy apps</a>
</li>
<a href="http://milwaukee2012.org/speakers/vid-luther/">Vid Luther</a>
</li>
<a href="http://milwaukee2012.org/speakers/mike-mccallister/">Mike McCallister</a>
</li>
</ul>
</li>
</ul>
</div>


Show Visitors Where
They Are

#menu-top-navigation-bar .current-menu-item > a,
#menu-top-navigation-bar .current-menu-ancestor > a,
#menu-top-navigation-bar .current_page_item > a,
#menu-top-navigation-bar .current_page_ancestor > a {
background-color: #d9d9d9;
color: #2a3238;
}


Make Hovering Helpful

#menu-top-navigation-bar li:hover > a,
#menu-top-navigation-bar a:focus {
background: #7ab43b;
color: #FFF;
}
#menu-top-navigation-bar .sub-menu li:hover > a,
#menu-top-navigation-bar .sub-menu ul li:hover > a,
#menu-top-navigation-bar .sub-menu a:focus {
background: #7ab43b;
color: #FFF;
}


Icons = Visual Cues
&
Icons = Confused
Beware!! Visitors



Zurb Foundation Icons
http://www.zurb.com/playground/foundation-icons

@font-face {
font-family: 'FoundationFont[Name]';
src: url('fonts/foundation-icons-[name].eot');
src: url('fonts/foundation-icons-[name].eot?#iefix') format('embedded-opentype'),
url('fonts/foundation-icons-[name].woff') format('woff'),
url('fonts/foundation-icons-[name].ttf') format('truetype'),
url('fonts/foundation-icons-[name].svg#FoundationIcons[Name]') format('svg');
font-weight: normal;
font-style: normal;
}

.glyph { cursor: default; font-size: 16px; line-height: 1; }
.glyph.general { font-family: 'FoundationIcons[Name]'; }

<span class="glyph [set-name]">a</span>


Add Icons to Navigation Labels

<span class="glyph general"> h </span>Contact

Menu Item Descriptions
Give context and add more detail


Slightly Scary Custom Walker
// Custom Walker that adds description support
class Description_walker extends Walker_Nav_Menu
{
function start_el(&$output, $item, $depth, $args)
{
global $wp_query;
$indent = ( $depth ) ? str_repeat( "t", $depth ) : '';

$class_names = $value = '';

$classes = empty( $item->classes ) ? array() : (array) $item->classes;

$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
$class_names = ' class="'. esc_attr( $class_names ) . '"';

$output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>';

$attributes = ! empty( $item->attr_title ) ? ' title="' . esc_attr( $item->attr_title ) .'"' : '';
$attributes .= ! empty( $item->target ) ? ' target="' . esc_attr( $item->target ) .'"' : '';
$attributes .= ! empty( $item->xfn ) ? ' rel="' . esc_attr( $item->xfn ) .'"' : '';
$attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : '';

$prepend = '';
$append = '';
$description = ! empty( $item->description ) ? '<span class="description">'.esc_attr( $item->description ).'</span>' : '';

if($depth != 0)
{
$description = $append = $prepend = "";
}

$item_output = $args->before;
$item_output .= '<a'. $attributes .'>';
$item_output .= $args->link_before .$prepend.apply_filters( 'the_title', $item->title, $item->ID ).$append;
$item_output .= $description.$args->link_after;
$item_output .= '</a>';
$item_output .= $args->after;

$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
}


When One or Two Words Are Not Enough
<?php wp_nav_menu( array( 'theme_location' =>
'primary', 'walker' => new description_walker ) ); ?>

.description {
line-height: 1;
font-size: 10px;
margin: -10px 0 5px 0;
display: block;
}


Custom Classes
Add individual style to menu
items


Highlight Important Menu Items

#menu-top-navigation-bar .right {
float: right;
background-color: #528400;
}

Go Further with jQuery Manipulation

Add individual (function($) {

$.fn.splitSubmenus = function(newSubmenuClass) {
// declaring default classes for the two submenu columns
var leftSubmenuClass = "left ";
var rightSubmenuClass = "right ";
//assign newSubmenuClass to be the passed in string or use "sub-menu" as the default
var newSubmenuClass = newSubmenuClass || "sub-menu",
Submenu = this,

//create two new Submenus, with default classes added to any declared class
leftNewSubmenu = $("<ul></ul>", {"class": leftSubmenuClass+newSubmenuClass}),
rightNewSubmenu = $("<ul></ul>", {"class": rightSubmenuClass+newSubmenuClass}),
SubmenuItems = Submenu.children("li"), //get the items that we need to split up
SubmenuLength = SubmenuItems.size(), //get the number of items to split
splitPoint = Math.ceil(SubmenuLength/2); //the split point is total/2 rounded up.

//loop through each item in the Submenu
SubmenuItems.each(function(i, item) {
//if i < splitPoint, add the item to the first of the two new Submenus we created
called leftNewSubmenu
//else, add the item to the second of the new Submenus, called rightNewSubmenu
//jQuery's append() method puts the item in as the last child of the element we
invoke it on
(i < splitPoint) ? leftNewSubmenu.append(item) : rightNewSubmenu.append(item);
});
//add the two new Submenus and then remove the old one
Submenu.after(leftNewSubmenu).after(rightNewSubmenu).remove();
}

})(jQuery);


Split Long Submenus into Columns

#menu-top-navigation-bar .right.sub-menu {
float: right;
margin: 0;
position: absolute;
top: 3.433em;
left: 188px;
width: 188px; <script type="text/javascript">
}
z-index: 99999;
jQuery(document).ready(function(){
jQuery("#menu-item-31 .sub-menu").splitSubmenus();
#menu-top-navigation-bar .left.sub-menu{
float: left; });
margin: 0;
position: absolute; </script>
top: 3.433em;
left: 0;
width: 188px;
z-index: 99999;
}


Don’t Stop Believin’
Download the Demo Child Theme:
https://github.com/rachelbaker/milwaukee2012
Font Icons:
http://www.zurb.com/playground/foundation-
icons

http://somerandomdude.com/work/iconic/

http://icons.marekventur.de/

Navigation Usability:
http://www.smashingmagazine.com/2011/06/06/planning-and-implementing-
website-navigation/

http://psychobserver.com/usability/usability-sense-navigation-
hierarchy/


Zazzy WordPress Navigation WordCamp Milwaukee

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Zazzy WordPress Navigation WordCamp Milwaukee

Similar to Zazzy WordPress Navigation WordCamp Milwaukee (20)

Recently uploaded

Recently uploaded (20)

Zazzy WordPress Navigation WordCamp Milwaukee

Editor's Notes