Zazzy WordPress Navigation

Navigation is among the most important elements of a website’s design. Effective navigation allows visitors to quickly and easily find desired content, keeping them on your site. Using the built-in WordPress Menu system, combined with CSS and occasionally a little jQuery you can make any site's navigation stand out.

Transcript

1. Zazzy WordPress Navigation Presented by: Rachel Baker @rachelbaker www.rachelbaker.me Freelance Web Developer Plugged In Consulting www.pluggedinconsulting.com Courtesy of: CSS Tricks & jQuery Magic
2. There is no such thing as Navigation Gnomes Rachel Baker - WordCamp Milwaukee 2012 PHASE 1 PHASE 2 PHASE 3 Build Website ? Happy Visitors
3. Rachel Baker - WordCamp Milwaukee 2012 Who is Your Audience? What are they Expecting? http://xkcd.com/773/
4. Appearance -> Menus FTW Rachel Baker - WordCamp Milwaukee 2012
5. Rachel Baker - WordCamp Milwaukee 2012 Get Fancy. Expand Your Options.
6. Rachel Baker - WordCamp Milwaukee 2012 <a href="http://www.rachelbaker.me" rel="me">Rachel Baker</a> Relationships Meta Data http://gmpg.org/xfn/creator
7. Rachel Baker - WordCamp Milwaukee 2012 Add Relationships to Menu Items <a rel="friend met colleague" href="http:// heatheraction.com/">Heather Acton</a>
8. Rachel Baker - WordCamp Milwaukee 2012 Boring Navigation Menu
9. Rachel Baker - WordCamp Milwaukee 2012 <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> <li id="menu-item-54" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-54"> <a href="http://milwaukee2012.org/schedule/sunday-june-3rd/">Sunday, June 3rd</a> </li> </ul> </li> <li id="menu-item-31" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-31"> <a href="http://milwaukee2012.org/speakers/">Speakers</a> <ul class="sub-menu"> <li id="menu-item-36" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-36"> <a href="http://milwaukee2012.org/speakers/heather-acton/">Heather Acton</a> </li> <li id="menu-item-43" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-43"> <a href="http://milwaukee2012.org/speakers/tracy-apps/">tracy apps</a> </li> <li id="menu-item-44" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-44"> <a href="http://milwaukee2012.org/speakers/vid-luther/">Vid Luther</a> </li> <li id="menu-item-56" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-56"> <a href="http://milwaukee2012.org/speakers/mike-mccallister/">Mike McCallister</a> </li> </ul> </li> </ul> </div> Not-so-scary Custom Menu Code
10. Rachel Baker - WordCamp Milwaukee 2012 #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; } Show Visitors Where They Are
11. Rachel Baker - WordCamp Milwaukee 2012 #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; } Make Hovering Helpful
12. Icons = Visual Cues & Icons = Confused Visitors Rachel Baker - WordCamp Milwaukee 2012 Beware!! W43218 790-= P%*(#
13. Rachel Baker - WordCamp Milwaukee 2012 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>
14. Rachel Baker - WordCamp Milwaukee 2012 Add Icons Directly to Navigation Labels <span class="glyph general"> h </span>Contact
15. Menu Item Descriptions Rachel Baker - WordCamp Milwaukee 2012 Give context and add more detail
16. Rachel Baker - WordCamp Milwaukee 2012 // 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 ); } } Slightly Scary Custom Walker
17. Rachel Baker - WordCamp Milwaukee 2012 When One or Two Words Are Not Enough .description { line-height: 1; font-size: 10px; margin: -10px 0 5px 0; display: block; } <?php wp_nav_menu( array( 'theme_location' => 'primary', 'walker' => new description_walker ) ); ?>
18. Custom Classes Rachel Baker - WordCamp Milwaukee 2012 Add individual style to menu items
19. Rachel Baker - WordCamp Milwaukee 2012 Highlight Important Menu Items #menu-top-navigation-bar .right { float: right; background-color: #528400; }
20. Go Further with jQuery Manipulation Rachel Baker - WordCamp Milwaukee 2012 Add individual style to menu items (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);
21. Rachel Baker - WordCamp Milwaukee 2012 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; z-index: 99999; } #menu-top-navigation-bar .left.sub-menu{ float: left; margin: 0; position: absolute; top: 3.433em; left: 0; width: 188px; z-index: 99999; } <script type="text/javascript"> jQuery(document).ready(function(){ jQuery("#menu-item-31 .sub-menu").splitSubmenus(); }); </script>
22. Don’t Stop Believin’ Rachel Baker - WordCamp Milwaukee 2012 Download the Demo Child Theme: http://www.smashingmagazine.com/2011/06/06/planning-and-implementing- website-navigation/ http://psychobserver.com/usability/usability-sense-navigation-hierarchy/ https://github.com/rachelbaker/milwaukee2012 Navigation Usability: Font Icons: http://www.zurb.com/playground/foundation-icons http://somerandomdude.com/work/iconic/ http://icons.marekventur.de/