SlideShare uma empresa Scribd logo
1 de 22
Baixar para ler offline
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/
Rachel Baker - WordCamp Milwaukee 2012
Appearance -> Menus




Rachel 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 Menu




Rachel 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_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>



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>Contact
Rachel Baker - WordCamp Milwaukee 2012
Menu Item Descriptions
    Give context and add more detail




Rachel 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
                  items




Rachel 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
                                                //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);




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

Mais conteúdo relacionado

Mais procurados

Dethroning Grunt: Simple and Effective Builds with gulp.js
Dethroning Grunt: Simple and Effective Builds with gulp.jsDethroning Grunt: Simple and Effective Builds with gulp.js
Dethroning Grunt: Simple and Effective Builds with gulp.jsJay Harris
 
Learning the basics of the Drupal API
Learning the basics of the Drupal APILearning the basics of the Drupal API
Learning the basics of the Drupal APIAlexandru Badiu
 
Web::Machine - Simpl{e,y} HTTP
Web::Machine - Simpl{e,y} HTTPWeb::Machine - Simpl{e,y} HTTP
Web::Machine - Simpl{e,y} HTTPMichael Francis
 
Mason - A Template system for us Perl programmers
Mason - A Template system for us Perl programmersMason - A Template system for us Perl programmers
Mason - A Template system for us Perl programmersJerome Eteve
 
WordPress for developers - phpday 2011
WordPress for developers -  phpday 2011WordPress for developers -  phpday 2011
WordPress for developers - phpday 2011Maurizio Pelizzone
 
WordPress plugin #3
WordPress plugin #3WordPress plugin #3
WordPress plugin #3giwoolee
 
Angular JS blog tutorial
Angular JS blog tutorialAngular JS blog tutorial
Angular JS blog tutorialClaude Tech
 
So long, jQuery, and thanks for all the fish!
So long, jQuery, and thanks for all the fish!So long, jQuery, and thanks for all the fish!
So long, jQuery, and thanks for all the fish!Matt Turnure
 
Drush - use full power - DrupalCamp Donetsk 2014
Drush - use full power - DrupalCamp Donetsk 2014Drush - use full power - DrupalCamp Donetsk 2014
Drush - use full power - DrupalCamp Donetsk 2014Alex S
 
jQuery and_drupal
jQuery and_drupaljQuery and_drupal
jQuery and_drupalBlackCatWeb
 
How to migrate Cakephp 1.x to 2.x
How to migrate Cakephp 1.x to 2.xHow to migrate Cakephp 1.x to 2.x
How to migrate Cakephp 1.x to 2.xAndolasoft Inc
 
Semantic accessibility
Semantic accessibilitySemantic accessibility
Semantic accessibilityIan Stuart
 
Introduction to backbone presentation
Introduction to backbone presentationIntroduction to backbone presentation
Introduction to backbone presentationBrian Hogg
 
Advanced RESTful Rails
Advanced RESTful RailsAdvanced RESTful Rails
Advanced RESTful RailsBen Scofield
 
Introduction to Vue.js
Introduction to Vue.jsIntroduction to Vue.js
Introduction to Vue.jsMeir Rotstein
 

Mais procurados (20)

Facebook
FacebookFacebook
Facebook
 
Dethroning Grunt: Simple and Effective Builds with gulp.js
Dethroning Grunt: Simple and Effective Builds with gulp.jsDethroning Grunt: Simple and Effective Builds with gulp.js
Dethroning Grunt: Simple and Effective Builds with gulp.js
 
Learning the basics of the Drupal API
Learning the basics of the Drupal APILearning the basics of the Drupal API
Learning the basics of the Drupal API
 
Web::Machine - Simpl{e,y} HTTP
Web::Machine - Simpl{e,y} HTTPWeb::Machine - Simpl{e,y} HTTP
Web::Machine - Simpl{e,y} HTTP
 
Mason - A Template system for us Perl programmers
Mason - A Template system for us Perl programmersMason - A Template system for us Perl programmers
Mason - A Template system for us Perl programmers
 
UI-Router
UI-RouterUI-Router
UI-Router
 
WordPress for developers - phpday 2011
WordPress for developers -  phpday 2011WordPress for developers -  phpday 2011
WordPress for developers - phpday 2011
 
WordPress plugin #3
WordPress plugin #3WordPress plugin #3
WordPress plugin #3
 
Angular JS blog tutorial
Angular JS blog tutorialAngular JS blog tutorial
Angular JS blog tutorial
 
So long, jQuery, and thanks for all the fish!
So long, jQuery, and thanks for all the fish!So long, jQuery, and thanks for all the fish!
So long, jQuery, and thanks for all the fish!
 
jQuery for beginners
jQuery for beginnersjQuery for beginners
jQuery for beginners
 
Drush - use full power - DrupalCamp Donetsk 2014
Drush - use full power - DrupalCamp Donetsk 2014Drush - use full power - DrupalCamp Donetsk 2014
Drush - use full power - DrupalCamp Donetsk 2014
 
ARIA Gone Wild
ARIA Gone WildARIA Gone Wild
ARIA Gone Wild
 
jQuery and_drupal
jQuery and_drupaljQuery and_drupal
jQuery and_drupal
 
How to migrate Cakephp 1.x to 2.x
How to migrate Cakephp 1.x to 2.xHow to migrate Cakephp 1.x to 2.x
How to migrate Cakephp 1.x to 2.x
 
Semantic accessibility
Semantic accessibilitySemantic accessibility
Semantic accessibility
 
jQuery Essentials
jQuery EssentialsjQuery Essentials
jQuery Essentials
 
Introduction to backbone presentation
Introduction to backbone presentationIntroduction to backbone presentation
Introduction to backbone presentation
 
Advanced RESTful Rails
Advanced RESTful RailsAdvanced RESTful Rails
Advanced RESTful Rails
 
Introduction to Vue.js
Introduction to Vue.jsIntroduction to Vue.js
Introduction to Vue.js
 

Destaque

WordPress per giornalisti freelance
WordPress per giornalisti freelance  WordPress per giornalisti freelance
WordPress per giornalisti freelance GGDBologna
 
Ecomm wp2014
Ecomm wp2014Ecomm wp2014
Ecomm wp2014Tom Nora
 
Wordcamp Reno11 - keynote
Wordcamp Reno11 - keynoteWordcamp Reno11 - keynote
Wordcamp Reno11 - keynotejoshuastrebel
 
Take the next step with git
Take the next step with gitTake the next step with git
Take the next step with gitKarin Taliga
 
Working Off Grid & Remote
Working Off Grid & RemoteWorking Off Grid & Remote
Working Off Grid & Remotetravistotz
 
Wcto2012- after the install
Wcto2012- after the install Wcto2012- after the install
Wcto2012- after the install Al Davis
 
Understanding WordPress Filters and Actions
Understanding WordPress Filters and ActionsUnderstanding WordPress Filters and Actions
Understanding WordPress Filters and ActionsIan Wilson
 
WordPress Community: Choose your own adventure
WordPress Community: Choose your own adventureWordPress Community: Choose your own adventure
WordPress Community: Choose your own adventureAndrea Middleton
 
Building Your First Widget
Building Your First WidgetBuilding Your First Widget
Building Your First WidgetChris Wilcoxson
 
Intro to WordPress Child Themes
Intro to WordPress Child ThemesIntro to WordPress Child Themes
Intro to WordPress Child Themesvegasgeek
 
Power Up Your Non-Profit Website With WordPress
Power Up Your Non-Profit Website With WordPressPower Up Your Non-Profit Website With WordPress
Power Up Your Non-Profit Website With WordPressRaymund Mitchell
 
The WordPress Project; It's all about YOU!
The WordPress Project; It's all about YOU!The WordPress Project; It's all about YOU!
The WordPress Project; It's all about YOU!Denise (Dee) Teal
 
CSI: WordPress -- Getting Into the Guts
CSI: WordPress -- Getting Into the GutsCSI: WordPress -- Getting Into the Guts
CSI: WordPress -- Getting Into the GutsDougal Campbell
 
Scoping and Estimating WordPress Projects as an Agency
Scoping and Estimating WordPress Projects as an AgencyScoping and Estimating WordPress Projects as an Agency
Scoping and Estimating WordPress Projects as an AgencyKara Hansen
 
WordCamp Seattle 2011 Presentation
WordCamp Seattle 2011 PresentationWordCamp Seattle 2011 Presentation
WordCamp Seattle 2011 PresentationBobWP.com
 
Breaking up (your code) is hard to do
Breaking up (your code) is hard to doBreaking up (your code) is hard to do
Breaking up (your code) is hard to doDan Beil
 

Destaque (20)

WordPress per giornalisti freelance
WordPress per giornalisti freelance  WordPress per giornalisti freelance
WordPress per giornalisti freelance
 
Wcoc preso
Wcoc presoWcoc preso
Wcoc preso
 
Ecomm wp2014
Ecomm wp2014Ecomm wp2014
Ecomm wp2014
 
Wordcamp Reno11 - keynote
Wordcamp Reno11 - keynoteWordcamp Reno11 - keynote
Wordcamp Reno11 - keynote
 
Take the next step with git
Take the next step with gitTake the next step with git
Take the next step with git
 
Working Off Grid & Remote
Working Off Grid & RemoteWorking Off Grid & Remote
Working Off Grid & Remote
 
Wcto2012- after the install
Wcto2012- after the install Wcto2012- after the install
Wcto2012- after the install
 
Understanding WordPress Filters and Actions
Understanding WordPress Filters and ActionsUnderstanding WordPress Filters and Actions
Understanding WordPress Filters and Actions
 
WordPress Community: Choose your own adventure
WordPress Community: Choose your own adventureWordPress Community: Choose your own adventure
WordPress Community: Choose your own adventure
 
Building Your First Widget
Building Your First WidgetBuilding Your First Widget
Building Your First Widget
 
Intro to WordPress Child Themes
Intro to WordPress Child ThemesIntro to WordPress Child Themes
Intro to WordPress Child Themes
 
The Best SEO Plugin for WordPress
The Best SEO Plugin for WordPressThe Best SEO Plugin for WordPress
The Best SEO Plugin for WordPress
 
WordPress as a CMS
WordPress as a CMSWordPress as a CMS
WordPress as a CMS
 
Power Up Your Non-Profit Website With WordPress
Power Up Your Non-Profit Website With WordPressPower Up Your Non-Profit Website With WordPress
Power Up Your Non-Profit Website With WordPress
 
The WordPress Project; It's all about YOU!
The WordPress Project; It's all about YOU!The WordPress Project; It's all about YOU!
The WordPress Project; It's all about YOU!
 
CSI: WordPress -- Getting Into the Guts
CSI: WordPress -- Getting Into the GutsCSI: WordPress -- Getting Into the Guts
CSI: WordPress -- Getting Into the Guts
 
Scoping and Estimating WordPress Projects as an Agency
Scoping and Estimating WordPress Projects as an AgencyScoping and Estimating WordPress Projects as an Agency
Scoping and Estimating WordPress Projects as an Agency
 
WordCamp Seattle 2011 Presentation
WordCamp Seattle 2011 PresentationWordCamp Seattle 2011 Presentation
WordCamp Seattle 2011 Presentation
 
Cain & Obenland — Episode 4
Cain & Obenland — Episode 4Cain & Obenland — Episode 4
Cain & Obenland — Episode 4
 
Breaking up (your code) is hard to do
Breaking up (your code) is hard to doBreaking up (your code) is hard to do
Breaking up (your code) is hard to do
 

Semelhante a Zazzy WordPress Navigation WordCamp Milwaukee

SharePointfest Denver - A jQuery Primer for SharePoint
SharePointfest Denver -  A jQuery Primer for SharePointSharePointfest Denver -  A jQuery Primer for SharePoint
SharePointfest Denver - A jQuery Primer for SharePointMarc D Anderson
 
Grok Drupal (7) Theming
Grok Drupal (7) ThemingGrok Drupal (7) Theming
Grok Drupal (7) ThemingPINGV
 
Better Selenium Tests with Geb - Selenium Conf 2014
Better Selenium Tests with Geb - Selenium Conf 2014Better Selenium Tests with Geb - Selenium Conf 2014
Better Selenium Tests with Geb - Selenium Conf 2014Naresha K
 
You're Doing it Wrong - WordCamp Orlando
You're Doing it Wrong - WordCamp OrlandoYou're Doing it Wrong - WordCamp Orlando
You're Doing it Wrong - WordCamp OrlandoChris Scott
 
HirshHorn theme: how I created it
HirshHorn theme: how I created itHirshHorn theme: how I created it
HirshHorn theme: how I created itPaul Bearne
 
Introduction to Web Components
Introduction to Web ComponentsIntroduction to Web Components
Introduction to Web ComponentsFelix Arntz
 
You're Doing it Wrong - WordCamp Atlanta
You're Doing it Wrong - WordCamp AtlantaYou're Doing it Wrong - WordCamp Atlanta
You're Doing it Wrong - WordCamp AtlantaChris Scott
 
Angular.js Fundamentals
Angular.js FundamentalsAngular.js Fundamentals
Angular.js FundamentalsMark
 
AngularJS vs. Ember.js vs. Backbone.js
AngularJS vs. Ember.js vs. Backbone.jsAngularJS vs. Ember.js vs. Backbone.js
AngularJS vs. Ember.js vs. Backbone.jsMark
 
WordPress Theme Design and Development Workshop - Day 3
WordPress Theme Design and Development Workshop - Day 3WordPress Theme Design and Development Workshop - Day 3
WordPress Theme Design and Development Workshop - Day 3Mizanur Rahaman Mizan
 
jQuery (BostonPHP)
jQuery (BostonPHP)jQuery (BostonPHP)
jQuery (BostonPHP)jeresig
 
10 Things Every Plugin Developer Should Know (WordCamp Atlanta 2013)
10 Things Every Plugin Developer Should Know (WordCamp Atlanta 2013)10 Things Every Plugin Developer Should Know (WordCamp Atlanta 2013)
10 Things Every Plugin Developer Should Know (WordCamp Atlanta 2013)arcware
 
深入淺出 MVC
深入淺出 MVC深入淺出 MVC
深入淺出 MVCJace Ju
 
Pitfalls to Avoid for Cascade Server Newbies by Lisa Hall
Pitfalls to Avoid for Cascade Server Newbies by Lisa HallPitfalls to Avoid for Cascade Server Newbies by Lisa Hall
Pitfalls to Avoid for Cascade Server Newbies by Lisa Hallhannonhill
 
A piece of sugar in your client-side development
A piece of sugar in your client-side developmentA piece of sugar in your client-side development
A piece of sugar in your client-side developmentNicolas Blanco
 

Semelhante a Zazzy WordPress Navigation WordCamp Milwaukee (20)

SharePointfest Denver - A jQuery Primer for SharePoint
SharePointfest Denver -  A jQuery Primer for SharePointSharePointfest Denver -  A jQuery Primer for SharePoint
SharePointfest Denver - A jQuery Primer for SharePoint
 
Grok Drupal (7) Theming
Grok Drupal (7) ThemingGrok Drupal (7) Theming
Grok Drupal (7) Theming
 
Better Selenium Tests with Geb - Selenium Conf 2014
Better Selenium Tests with Geb - Selenium Conf 2014Better Selenium Tests with Geb - Selenium Conf 2014
Better Selenium Tests with Geb - Selenium Conf 2014
 
PHP API
PHP APIPHP API
PHP API
 
Javascript in Plone
Javascript in PloneJavascript in Plone
Javascript in Plone
 
Flask – Python
Flask – PythonFlask – Python
Flask – Python
 
You're Doing it Wrong - WordCamp Orlando
You're Doing it Wrong - WordCamp OrlandoYou're Doing it Wrong - WordCamp Orlando
You're Doing it Wrong - WordCamp Orlando
 
HirshHorn theme: how I created it
HirshHorn theme: how I created itHirshHorn theme: how I created it
HirshHorn theme: how I created it
 
jQuery UI and Plugins
jQuery UI and PluginsjQuery UI and Plugins
jQuery UI and Plugins
 
Introduction to Web Components
Introduction to Web ComponentsIntroduction to Web Components
Introduction to Web Components
 
You're Doing it Wrong - WordCamp Atlanta
You're Doing it Wrong - WordCamp AtlantaYou're Doing it Wrong - WordCamp Atlanta
You're Doing it Wrong - WordCamp Atlanta
 
Angular.js Fundamentals
Angular.js FundamentalsAngular.js Fundamentals
Angular.js Fundamentals
 
AngularJS vs. Ember.js vs. Backbone.js
AngularJS vs. Ember.js vs. Backbone.jsAngularJS vs. Ember.js vs. Backbone.js
AngularJS vs. Ember.js vs. Backbone.js
 
Blog Hacks 2011
Blog Hacks 2011Blog Hacks 2011
Blog Hacks 2011
 
WordPress Theme Design and Development Workshop - Day 3
WordPress Theme Design and Development Workshop - Day 3WordPress Theme Design and Development Workshop - Day 3
WordPress Theme Design and Development Workshop - Day 3
 
jQuery (BostonPHP)
jQuery (BostonPHP)jQuery (BostonPHP)
jQuery (BostonPHP)
 
10 Things Every Plugin Developer Should Know (WordCamp Atlanta 2013)
10 Things Every Plugin Developer Should Know (WordCamp Atlanta 2013)10 Things Every Plugin Developer Should Know (WordCamp Atlanta 2013)
10 Things Every Plugin Developer Should Know (WordCamp Atlanta 2013)
 
深入淺出 MVC
深入淺出 MVC深入淺出 MVC
深入淺出 MVC
 
Pitfalls to Avoid for Cascade Server Newbies by Lisa Hall
Pitfalls to Avoid for Cascade Server Newbies by Lisa HallPitfalls to Avoid for Cascade Server Newbies by Lisa Hall
Pitfalls to Avoid for Cascade Server Newbies by Lisa Hall
 
A piece of sugar in your client-side development
A piece of sugar in your client-side developmentA piece of sugar in your client-side development
A piece of sugar in your client-side development
 

Último

UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
Governance in SharePoint Premium:What's in the box?
Governance in SharePoint Premium:What's in the box?Governance in SharePoint Premium:What's in the box?
Governance in SharePoint Premium:What's in the box?Juan Carlos Gonzalez
 
Valere | Digital Solutions & AI Transformation Portfolio | 2024
Valere | Digital Solutions & AI Transformation Portfolio | 2024Valere | Digital Solutions & AI Transformation Portfolio | 2024
Valere | Digital Solutions & AI Transformation Portfolio | 2024Alexander Turgeon
 
99.99% of Your Traces Are (Probably) Trash (SRECon NA 2024).pdf
99.99% of Your Traces  Are (Probably) Trash (SRECon NA 2024).pdf99.99% of Your Traces  Are (Probably) Trash (SRECon NA 2024).pdf
99.99% of Your Traces Are (Probably) Trash (SRECon NA 2024).pdfPaige Cruz
 
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"DianaGray10
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
The Kubernetes Gateway API and its role in Cloud Native API Management
The Kubernetes Gateway API and its role in Cloud Native API ManagementThe Kubernetes Gateway API and its role in Cloud Native API Management
The Kubernetes Gateway API and its role in Cloud Native API ManagementNuwan Dias
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 

Último (20)

UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
Governance in SharePoint Premium:What's in the box?
Governance in SharePoint Premium:What's in the box?Governance in SharePoint Premium:What's in the box?
Governance in SharePoint Premium:What's in the box?
 
Valere | Digital Solutions & AI Transformation Portfolio | 2024
Valere | Digital Solutions & AI Transformation Portfolio | 2024Valere | Digital Solutions & AI Transformation Portfolio | 2024
Valere | Digital Solutions & AI Transformation Portfolio | 2024
 
99.99% of Your Traces Are (Probably) Trash (SRECon NA 2024).pdf
99.99% of Your Traces  Are (Probably) Trash (SRECon NA 2024).pdf99.99% of Your Traces  Are (Probably) Trash (SRECon NA 2024).pdf
99.99% of Your Traces Are (Probably) Trash (SRECon NA 2024).pdf
 
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
The Kubernetes Gateway API and its role in Cloud Native API Management
The Kubernetes Gateway API and its role in Cloud Native API ManagementThe Kubernetes Gateway API and its role in Cloud Native API Management
The Kubernetes Gateway API and its role in Cloud Native API Management
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 

Zazzy WordPress Navigation WordCamp Milwaukee

  • 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. There is no such thing as Navigation Gnomes PHASE 1 PHASE 2 PHASE 3 Build Website ? Happy Visitors Rachel Baker - WordCamp Milwaukee 2012
  • 3. Who is Your Audience? What are they Expecting? http://xkcd.com/773/ Rachel Baker - WordCamp Milwaukee 2012
  • 4. Appearance -> Menus Rachel Baker - WordCamp Milwaukee 2012
  • 5. Expand Your Options. Rachel Baker - WordCamp Milwaukee 2012
  • 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. Add Relationships to Menu Items <a rel="friend met colleague" href="http:// heatheracton.com/">Heather Acton</a> Rachel Baker - WordCamp Milwaukee 2012
  • 8. Boring Navigation Menu Rachel Baker - WordCamp Milwaukee 2012
  • 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_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> Rachel Baker - WordCamp Milwaukee 2012
  • 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. 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. Icons = Visual Cues & Icons = Confused Beware!! Visitors   Rachel Baker - WordCamp Milwaukee 2012
  • 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. Add Icons to Navigation Labels <span class="glyph general"> h </span>Contact Rachel Baker - WordCamp Milwaukee 2012
  • 15. Menu Item Descriptions Give context and add more detail Rachel Baker - WordCamp Milwaukee 2012
  • 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. 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. Custom Classes Add individual style to menu items Rachel Baker - WordCamp Milwaukee 2012
  • 19. Highlight Important Menu Items #menu-top-navigation-bar .right { float: right; background-color: #528400; } Rachel Baker - WordCamp Milwaukee 2012
  • 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 //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); Rachel Baker - WordCamp Milwaukee 2012
  • 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. 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

Notas do Editor

  1. Hello Wisconsin!\n1. Introduction\n2. Questions &amp; 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&amp;#x2019;s begin. \n
  2. 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&amp;#x2019;s begin. \n
  3. 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&amp;#x2019;s begin. \n
  4. \n
  5. \n
  6. 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 -&gt; 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&amp;#x2019;s begin. \n
  7. \n
  8. Twenty Eleven Default Theme used with demo site\n
  9. \n
  10. \n
  11. \n
  12. \n
  13. 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 -&gt; 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&amp;#x2019;s begin. \n
  14. 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 -&gt; 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&amp;#x2019;s begin. \n
  15. \n
  16. 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 -&gt; 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&amp;#x2019;s begin. \n
  17. 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 -&gt; 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&amp;#x2019;s begin. \n
  18. 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 -&gt; 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&amp;#x2019;s begin. \n
  19. 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 -&gt; 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&amp;#x2019;s begin. \n
  20. \n
  21. \n
  22. \n