Zazzy WordPress Navigation WordCamp Milwaukee

1,079 views
1,028 views

Published on

Rachel Baker - WordCamp Milwaukee 2012

Published in: Technology, Art & Photos
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,079
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
6
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • Hello Wisconsin!\n1. Introduction\n2. Questions & ground rules\n3. Why topic\n\n\n\nAfter reviewing some information and best practices relating to Website Navigation, I will demonstrate some styling tips, discuss best practices you can take with you to implement on your own websites. I do hope to leave time for questions at the end, so let’s begin. \n
  • Every website, from a small blog to a large business/organization site needs to spend time organizing and RE-evaluating their navigation. Can visitors find the information they are looking for? Do your menu item labels make sense to your different types of visitors or users? Are the key areas of your website receiving visits? \n\n\nAfter reviewing some information and best practices relating to Website Navigation, I will demonstrate some styling tips, discuss best practices you can take with you to implement on your own websites. I do hope to leave time for questions at the end, so let’s begin. \n
  • Every website, from a small blog to a large business/organization site needs to spend time organizing and RE-evaluating their navigation. Can visitors find the information they are looking for? Do your menu item labels make sense to your different types of visitors or users? Are the key areas of your website receiving visits? \n\n\nAfter reviewing some information and best practices relating to Website Navigation, I will demonstrate some styling tips, discuss best practices you can take with you to implement on your own websites. I do hope to leave time for questions at the end, so let’s begin. \n
  • \n
  • \n
  • Hello Atlanta!\nMy name is Rachel Baker, and I am a freelance web developer from Chicago.\n\nToday, I am going to talk to you about Website Navigation, one of the most impactful elements in relation to the overall effectiveness of a website. I develop websites powered by WordPress.org for my clients, who range from single bloggers -> large corporations via my company Plugged In Consulting. \n \n\n\nAfter reviewing some information and best practices relating to Website Navigation, I will demonstrate some styling tips, discuss best practices you can take with you to implement on your own websites. I do hope to leave time for questions at the end, so let’s begin. \n
  • \n
  • Twenty Eleven Default Theme used with demo site\n
  • \n
  • \n
  • \n
  • \n
  • Hello Atlanta!\nMy name is Rachel Baker, and I am a freelance web developer from Chicago.\n\nToday, I am going to talk to you about Website Navigation, one of the most impactful elements in relation to the overall effectiveness of a website. I develop websites powered by WordPress.org for my clients, who range from single bloggers -> large corporations via my company Plugged In Consulting. \n \n\n\nAfter reviewing some information and best practices relating to Website Navigation, I will demonstrate some styling tips, discuss best practices you can take with you to implement on your own websites. I do hope to leave time for questions at the end, so let’s begin. \n
  • Hello Atlanta!\nMy name is Rachel Baker, and I am a freelance web developer from Chicago.\n\nToday, I am going to talk to you about Website Navigation, one of the most impactful elements in relation to the overall effectiveness of a website. I develop websites powered by WordPress.org for my clients, who range from single bloggers -> large corporations via my company Plugged In Consulting. \n \n\n\nAfter reviewing some information and best practices relating to Website Navigation, I will demonstrate some styling tips, discuss best practices you can take with you to implement on your own websites. I do hope to leave time for questions at the end, so let’s begin. \n
  • \n
  • Hello Atlanta!\nMy name is Rachel Baker, and I am a freelance web developer from Chicago.\n\nToday, I am going to talk to you about Website Navigation, one of the most impactful elements in relation to the overall effectiveness of a website. I develop websites powered by WordPress.org for my clients, who range from single bloggers -> large corporations via my company Plugged In Consulting. \n \n\n\nAfter reviewing some information and best practices relating to Website Navigation, I will demonstrate some styling tips, discuss best practices you can take with you to implement on your own websites. I do hope to leave time for questions at the end, so let’s begin. \n
  • Hello Atlanta!\nMy name is Rachel Baker, and I am a freelance web developer from Chicago.\n\nToday, I am going to talk to you about Website Navigation, one of the most impactful elements in relation to the overall effectiveness of a website. I develop websites powered by WordPress.org for my clients, who range from single bloggers -> large corporations via my company Plugged In Consulting. \n \n\n\nAfter reviewing some information and best practices relating to Website Navigation, I will demonstrate some styling tips, discuss best practices you can take with you to implement on your own websites. I do hope to leave time for questions at the end, so let’s begin. \n
  • Hello Atlanta!\nMy name is Rachel Baker, and I am a freelance web developer from Chicago.\n\nToday, I am going to talk to you about Website Navigation, one of the most impactful elements in relation to the overall effectiveness of a website. I develop websites powered by WordPress.org for my clients, who range from single bloggers -> large corporations via my company Plugged In Consulting. \n \n\n\nAfter reviewing some information and best practices relating to Website Navigation, I will demonstrate some styling tips, discuss best practices you can take with you to implement on your own websites. I do hope to leave time for questions at the end, so let’s begin. \n
  • Hello Atlanta!\nMy name is Rachel Baker, and I am a freelance web developer from Chicago.\n\nToday, I am going to talk to you about Website Navigation, one of the most impactful elements in relation to the overall effectiveness of a website. I develop websites powered by WordPress.org for my clients, who range from single bloggers -> large corporations via my company Plugged In Consulting. \n \n\n\nAfter reviewing some information and best practices relating to Website Navigation, I will demonstrate some styling tips, discuss best practices you can take with you to implement on your own websites. I do hope to leave time for questions at the end, so let’s begin. \n
  • \n
  • \n
  • \n
  • 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

    ×