How To Create Search Engine Friendly Navigation
It's a constant battle. You want great usability for your website, but at the same time, you have to consider the needs of the search engine robots. Sometimes prepping a site for search engines can seem limiting on the usability side. But there is a way to "have your cake and eat it too," especially when it comes to creating navigation on your website. Avoid the Javascript and turn to Cascading Style Sheets (CSS) instead!
I often hear clients say that specific types of navigation layouts won't work without Javascript. Poppycock. CSS is very powerful today, and you can accomplish many of the same approaches for navigation with CSS as you can with Javascript. Take for instance the ubiquitous drop-down, cascading navigation menus, which I'll demonstrate in this post.
There are two main steps to developing navigation in CSS:
- Developing the CSS layout on your page.
- Coding the CSS styles in your CSS file.
Developing the CSS Layout on Your Page
To develop the CSS layout on your web page (I put mine in an included "header" file), create the navigation hierarchy in an unordered list (<ul>) using bulleted items (<li>) as your items in each list. Here's an example from Search Mojo's "About Us" drop-down navigation on our website:
<div id="nav">
<ul>
<li><a href="http://www.search-mojo.com/about/full_service_search_engine_ marketing_firm.php">About us</a>
</li><li><a href="http://www.search-mojo.com/about/staff_all.php">Staff</a>
<ul>
<li><a href="http://www.search-mojo.com/about/staff_jdm.php">Janet Driscoll Miller </a></li>
<li><a href="http://www.search-mojo.com/about/staff_jm.php">Joe McCloskey</a></li>
<li><a href="http://www.search-mojo.com/about/staff_cw.php">Chris Wilson</a></li>
<li><a href="http://www.search-mojo.com/about/staff_aa.php">Avelyn Austin</a></li>
<li><a href="http://www.search-mojo.com/about/staff_tm.php">Tad Miller</a></li>
<li><a href="http://www.search-mojo.com/about/staff_ac.php">Amanda Chaney</a></li>
<li><a href="http://www.search-mojo.com/about/staff_rr.php">Renée Revetta</a></li>
<li><a href="http://www.search-mojo.com/about/staff_el.php">Evan Levy</a></li>
<li><a href="http://www.search-mojo.com/about/staff_mb.php">Mark Browner</a></li>
<li><a href="http://www.search-mojo.com/about/staff_lk.php">Lauren Kade</a></li>
<li><a href="http://www.search-mojo.com/about/staff_jc.php">Justin Champion</a></li>
<li><a href="http://www.search-mojo.com/about/staff_cd.php">Christian DeBaun</a></li>
<li><a href="http://www.search-mojo.com/about/staff_sl.php">Sarah Lokitis</a></li>
<li><a href="http://www.search-mojo.com/about/staff_lmk.php">Lindsay Keller</a></li>
</ul>
</li>
<li><a href="http://www.search-mojo.com/about/news.php">Press, News & Events</a></li>
<li><a href="http://www.search-mojo.com/about/clients.php">Clients</a></li>
<li><a href="http://www.search-mojo.com/about/careers.php">Careers</a></li>
<li><a href="http://www.search-mojo.com/about/directors.php">Board of Advisors</a></li>
<li><a href="http://www.search-mojo.com/about/why-charlottesville.php">About Charlottesville </a></li>
</ul>
</div> |
Developing CSS Styles on Your Stylesheet
Next, use your CSS file to determine how these items will show or not show. Here's the code from our CSS file. There are several "unordered" lists in the example above, each one representing a level of the drop down menu. So for each level, we have corresponding CSS styles to determine how and when they are displayed.
For the initial top layer (about us), the following styles apply:
div#header div#nav{
z-index: 100000;
padding: 23px 0 0;
margin: 0;
position: relative;
}
div#header div#nav ul{
margin: 0;
padding: 0;
z-index: 9999;
position: relative;
}
div#header div#nav ul li{
margin: 0;
padding: 0;
z-index: 9999;
position: relative;
}
div#header div#nav ul li a{
margin: 0;
}
div#header div#nav > ul{
height: 23px;
background: #ffa713;
}
div#header div#nav > ul > li{
float: left;
width: 168px;
position: relative;
border: 1px solid #ffa713;
border-bottom: none;
border-top: none;
}
div#header div#nav > ul > li a{
display: block;
padding: 6px;
font-size: 0.917em;
text-align: center;
color: #FFF;
text-transform: uppercase;
}
div#header div#nav > ul > li:hover{
border-color: #e57300;
}
div#header div#nav > ul > li:hover > a{
background: #ffefd3;
color: #d36b01;
} |
The next step is where the real action begins! This is where we tell the CSS what to display in the navigation and when. We'll create a section of style assignments for each level of the navigation. Here's the code I use for the next level down, the drop-down menu (contains staff, news/events, etc.):
/* begin first level */
div#header div#nav > ul > li > ul{
color: #ff0000;
display: none;
position: absolute;
z-index: 9999;
top: 22px;
left: -1px;
border: 1px solid #e57300;
border-top: none;
width: 168px;
background: #ffdba8;
}
div#header div#nav > ul > li:hover > ul{
color: #ff0000;
display: block;
}
div#header div#nav > ul > li > ul > li {
position: relative;
}
div#header div#nav > ul > li > ul > li > a{
color: #ec7600;
text-align: right;
line-height: 1.2em;
padding-right: 20px;
background: url(images/menu-arrow.png) -999px center no-repeat;
}
div#header div#nav > ul > li > ul > li:hover > a{
background-position: 152px center;
} |
Notice lines 4 and 17. Line 4 (display: none;) indicates that this area should not be initially shown. Line 17 (display: block;) indicates that when we hover above the top level (about us) then this area should display the second layer of choices (i.e., staff, news/events, etc.). We use this for every layer, just extending out the ul > li piece in the CSS styles for as many layers as we need. So, for instance, here's the styles for the next set of layers (Janet Driscoll Miller, Joe McCloskey, etc.):
/* begin second level */
div#header div#nav > ul > li > ul > li > ul{
color: #000000;
display: none;
position: absolute;
left: 168px;
top: 0;
background: #ed7d0d;
width: 168px;
border: 1px solid #e3780e;
z-index: 9999;
}
div#header div#nav > ul > li > ul > li > ul > li > a{
background: url(images/menu-arrow-level3.png) -999px center no-repeat;
text-align: left;
padding-left: 24px;
}
div#header div#nav > ul > li > ul > li > ul > li:hover > a{
background-position: 5px center;
}
div#header div#nav > ul > li > ul > li > ul > li:hover {
background: #ffb05a;
}
div#header div#nav > ul > li ul{
color: #ff0000;
display: none;
}
div#header div#nav > ul > li > ul > li:hover > ul {
color: #ff0000;
display: block;
}
/* end second level */ |
So we did the same thing on the second level down as we did on the first: initially don't display this, but display it when the level above is hovered on.
It's that simple! Now you can create a great looking, search engine friendly navigation - all without Javascript!
Comments
View All Articles by Janet Driscoll Miller
Receive
Our Daily Email of Breaking eBusiness News
About the Author:
Janet Driscoll Miller brings over ten years of search engine marketing experience to Search Mojo and is considered a leading expert in her field. Janet has spoken at search engine conferences including SMX Advanced, Search Engine Strategies and Pubcon, has published articles in B2B Magazine, Visibility Magazine and others, and contributes to several blogs, including Search Marketing Sage, Marketing Pilgrim and Search Engine Journal.
 WebProNews RSS Feed
More Expert Articles Articles
Contact WebProNews |
Janet Driscoll Miller
