Zazzy WordPress Navigation WordCamp Milwaukee
Upcoming SlideShare
Loading in...5
×
 

Zazzy WordPress Navigation WordCamp Milwaukee

on

  • 677 views

Rachel Baker - WordCamp Milwaukee 2012

Rachel Baker - WordCamp Milwaukee 2012

Statistics

Views

Total Views
677
Views on SlideShare
674
Embed Views
3

Actions

Likes
1
Downloads
5
Comments
0

2 Embeds 3

http://rachelbaker.me 2
https://twitter.com 1

Accessibility

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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 Zazzy WordPress Navigation WordCamp Milwaukee Presentation Transcript

  • 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 VisitorsRachel Baker - WordCamp Milwaukee 2012
  • Who is Your Audience?What are they Expecting? http://xkcd.com/773/Rachel Baker - WordCamp Milwaukee 2012
  • Appearance -> MenusRachel Baker - WordCamp Milwaukee 2012
  • Expand Your Options.Rachel Baker - WordCamp Milwaukee 2012
  • Relationships Meta Data http://gmpg.org/xfn/creator <a href="http://www.rachelbaker.me" rel="me">Rachel Baker</a>Rachel Baker - WordCamp Milwaukee 2012
  • Add Relationships to Menu Items <a rel="friend met colleague" href="http:// heatheracton.com/">Heather Acton</a>Rachel Baker - WordCamp Milwaukee 2012
  • Boring Navigation MenuRachel Baker - WordCamp Milwaukee 2012
  • 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
  • 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
  • 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
  • Icons = Visual Cues & Icons = Confused Beware!! Visitors 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>Rachel Baker - WordCamp Milwaukee 2012
  • Add Icons to Navigation Labels <span class="glyph general"> h </span>ContactRachel Baker - WordCamp Milwaukee 2012
  • Menu Item Descriptions Give context and add more detailRachel Baker - WordCamp Milwaukee 2012
  • 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
  • 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
  • Custom Classes Add individual style to menu itemsRachel Baker - WordCamp Milwaukee 2012
  • Highlight Important Menu Items #menu-top-navigation-bar .right { float: right; background-color: #528400; }Rachel Baker - WordCamp Milwaukee 2012
  • 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
  • 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
  • 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