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
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
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&#x2019;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&#x2019;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&#x2019;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&#x2019;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&#x2019;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&#x2019;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&#x2019;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&#x2019;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&#x2019;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&#x2019;s begin. \n