Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Zazzy WordPress Navigation WordCamp Milwaukee

1,373 views

Published on

Rachel Baker - WordCamp Milwaukee 2012

Published in: Technology, Art & Photos
  • Be the first to comment

Zazzy WordPress Navigation WordCamp Milwaukee

  1. 1. 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
  2. 2. There is no such thing as Navigation Gnomes PHASE 1 PHASE 2 PHASE 3 Build Website ? Happy VisitorsRachel Baker - WordCamp Milwaukee 2012
  3. 3. Who is Your Audience?What are they Expecting? http://xkcd.com/773/Rachel Baker - WordCamp Milwaukee 2012
  4. 4. Appearance -> MenusRachel Baker - WordCamp Milwaukee 2012
  5. 5. Expand Your Options.Rachel Baker - WordCamp Milwaukee 2012
  6. 6. Relationships Meta Data http://gmpg.org/xfn/creator <a href="http://www.rachelbaker.me" rel="me">Rachel Baker</a>Rachel Baker - WordCamp Milwaukee 2012
  7. 7. Add Relationships to Menu Items <a rel="friend met colleague" href="http:// heatheracton.com/">Heather Acton</a>Rachel Baker - WordCamp Milwaukee 2012
  8. 8. Boring Navigation MenuRachel Baker - WordCamp Milwaukee 2012
  9. 9. 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_itempage-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>Rachel Baker - WordCamp Milwaukee 2012
  10. 10. 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; }Rachel Baker - WordCamp Milwaukee 2012
  11. 11. 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; }Rachel Baker - WordCamp Milwaukee 2012
  12. 12. Icons = Visual Cues & Icons = Confused Beware!! Visitors Rachel Baker - WordCamp Milwaukee 2012
  13. 13. 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>Rachel Baker - WordCamp Milwaukee 2012
  14. 14. Add Icons to Navigation Labels <span class="glyph general"> h </span>ContactRachel Baker - WordCamp Milwaukee 2012
  15. 15. Menu Item Descriptions Give context and add more detailRachel Baker - WordCamp Milwaukee 2012
  16. 16. 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 ); } }Rachel Baker - WordCamp Milwaukee 2012
  17. 17. 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; }Rachel Baker - WordCamp Milwaukee 2012
  18. 18. Custom Classes Add individual style to menu itemsRachel Baker - WordCamp Milwaukee 2012
  19. 19. Highlight Important Menu Items #menu-top-navigation-bar .right { float: right; background-color: #528400; }Rachel Baker - WordCamp Milwaukee 2012
  20. 20. 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 //jQuerys 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);Rachel Baker - WordCamp Milwaukee 2012
  21. 21. 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;} Rachel Baker - WordCamp Milwaukee 2012
  22. 22. 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/Rachel Baker - WordCamp Milwaukee 2012

×