Build Your Site Navigation With CSS

Could anything look more boring than basic text links? Plain text displayed in the not very attractive colors of blue and purple, with no background colors, no rollovers, and nothing to make the page visually appealing…

This description might accurately describe plain text links, but text links styled using CSS properties are something else entirely! CSS makes it possible to create text links that look like buttons or menus and mimic the effect of an image file or JavaScript rollover. All this without the download time, accessibility, and promotion problems of images and JavaScript!

The "Look" Without The Load Time

Image-based navigation gives you control over presentation and layout, and even allows cool DHTML effects. Text-based navigation creates a site that’s more accessible, downloads more quickly, and is much friendlier to search engine spiders.

Web designers use images for site navigation because they look cool as standalone page elements. When you add a little JavaScript code to create a rollover effect (where, for example, the button changes color and size when the mouse is dragged over it), you’re also telling visitors "Hey! This is a link! Click on it and go deeper into my site!"

But there’s one problem: you’re relying on images to get this effect. JavaScript rollovers require at least two images for each link (one image for the basic button and another for the rollover). If you’re linking to ten different pages, then you’ve just loaded up your page with 20 images that have to download before your navigation system is clear to visitors.

People with slow dial-up connections may not be willing to wait. They can choose from hundreds of millions of Web pages and may not think that your site is anything special — particularly if the navigation system appears to be broken or non-existent.

So, our goal in this tutorial is to build a colorful, attractive text-based navigation system without the use of images.

Learn The CSS Link Pseudo-Classes

First, let’s take a minute to review some basics: CSS link pseudo-classes. As you know, CSS classes are used to refer to a particular category of element. Similarly, a CSS pseudo-class refers to a particular state of an element. We’ll use the pseudo-classes for different link states to create the navigation system.

People can have different states of consciousness: awake or asleep are the two most obvious. Well, in CSS, a hyperlink can exist in four different states, and you can set style properties for each:

  • Hover: Mimics the onMouseOver event in JavaScript. When a visitor moves the mouse over the link, the link’s appearance changes according to the properties you’ve defined.
  • Visited: Sets the appearance of links that have already been visited and are in the user’s history file.
  • Active: Changes the appearance of links when the user clicks on them or selects them with the keyboard.
  • Link: Sets the default appearance of links that haven’t been visited or opened.

Hover and link are the two most important link states for our purposes, but we’ll define properties for all four.

Navigation Buttons With CSS

The design process can get quite complicated, because we’re dealing with multiple link states and setting different properties for each. I always create a planning grid to clearly define my CSS properties before I ever begin to code them.

Build Your Site Navigation With CSS

Note that we’ve actually set just two different style definitions and applied each one to two different link states. The link and visited properties get the same style definition and the active and hover states display identically as well.

Here’s how the actual style definition looks.

<style type="text/css"> 

a.button:link   {    font-size:14px;    font-weight:bold;    text-decoration:none;    border-style:outset;    border-color:red;    border-width:5px;    background-color:#FFFFCE;    width:125px;     color:navy;  } 

a.button:visited   {    font-size:14px;    font-weight:bold;    text-decoration:none;    border-style:outset;    border-color:red;    border-width:5px;    background-color:#FFFFCE;    width:125px;     color:navy;  } 

a.button:active   {    font-size:14px;    font-weight:bold;    text-decoration:none;    border-style:inset;    border-color:red;    border-width:5px;    background-color:#FFFFCE;    width:125px;    color:maroon;  } 

a.button:hover   {    font-size:14px;    font-weight:bold;    text-decoration:none;    border-style:inset;    border-color:red;    border-width:5px;    background-color:#FFFFCE;    width:125px;     color:maroon;  } 

</style>

Place it in your document’s <head> section, or attach it via an external style sheet (remember to remove the <style> and </style> tags if you do!). Looking at it, you may wonder why I didn’t let later definitions inherit all the common properties from the first definition. Ideally, that’s the way style sheets should work: define the button once, and then for later states, just make changes as needed. Unfortunately, browser support for this is spotty! It’s safer to add all the properties and values to each link state, even though it means duplicating some information.

Include the buttons on your Web page as you would any normal text link, but be sure to add the class name to the <a href> tag:

<a href="http://www.sitepoint.com/" class="button"   title="Visit SitePoint.com for valuable webmaster   resources">SitePoint</a>

The border property is what actually gives the button the look of a button. We set the border-style property to outset to give it the look of a regular button for the :link and :visited states, and provide an inset value for the :active and :hover states. That gives the link the appearance of a button that has been pushed.

Note that we defined each link as a dependent CSS class named "button." Otherwise, every link on the Web page would look like our navigation buttons — even links within text content, and mailto links. When you create an individual class for your navigation system, you’re free to style the text content and mailto links in a less obtrusive manner.

I could explain in detail how all this will look in a browser, but this example page shows the effect much more clearly. It has different buttons and even contains a simple horizontal navigation menu created with individual buttons placed side by side.

Explorer and Netscape create the most attractive buttons. There are slight display differences between Opera version 6 and version 7. WebTV displays the buttons, but without the border or rollover effect. a

Navigation Menus With CSS

Next, let’s create a vertical navigation menu using this same technique.

The only difference from the previous style definition is that we’re going to take the border off each individual text link, and place the links inside a DIV tag with a border.

Here’s what the planning grid looks like this time:

Build Your Site Navigation With CSS

As before, the identical pairs are link/visited and active/hover. We’re going to define a <div> class to contain our menu system and give it an attractive, finished look with a single border around all the links.

Here’s the style definition for the link classes and the div. Note that we used classes again instead of applying the styles to every link and every div on the page!

<style type="text/css">  

a.vertical:link   {     font-size:14px;     text-decoration:none;     color:#9966CC;     background:#FFFF00;     font-weight:bold;     width:150px;   }  

a.vertical:active   {     font-size:14px;     text-decoration:none;     color:white;     background:white;     font-weight:bold;     width:150px;   }  

a.vertical:visited    {     font-size:14px;     text-decoration:none;     color:#9966CC;     background:#FFFF00;     font-weight:bold;     width:150px;   }  

a.vertical:hover   {     font-size:14px;     text-decoration:none;     color:white;     background:#9966CC;     font-weight:bold;     width:150px;   }  

.verticalBorder   {     background:#FFFF00;     border-style:solid;     border-color:#9966CC;     border-width:5px;     width:160px;   }     

</style>

Place the links for the menu system wherever you want it to display on your page. Be sure to use the correct class information and wrap the links inside the <div> we just defined:

<div class="verticalBorder" align="center">   <a href="http://www.sitepoint.com"    class="vertical">Site Point Home</a><br/>   <a href="http://www.sitepoint.com"    class="vertical">CSS Tips</a><br/>   <a href="http://www.sitepoint.com"    class="vertical">JavaScript Tips</a><br/>   <a href="http://www.sitepoint.com"    class="vertical">Domain Names</a><br/>   <a href="http://www.sitepoint.com"    class="vertical">Beginner Tips</a>   </div>

Use a break (<br />) tag between the links create a vertical menu. That tag drops the link to the next line. This is more reliable than using the display property to turn the link into a block-level element.

You’ll probably need to experiment with different border styles, widths, and colors to customize the CSS properties to your individual site. Setting the widths of the links and the <div> can be particularly tricky, so be sure to test the menu in several browsers to make sure it displays consistently.

This second example page shows a vertical menu system. It returns fairly consistent results in all major browsers (even WebTV) except Netscape 4.7 (whose hobby is breaking style sheets, no matter what technique you use).

As a really cool test, look at the page using Opera and turn off images. Compare the appearance of the text link navigation menu to the image map below it.

A Word About Visitor Preferences

It’s easy to place the <a href> tags for your menu system in the <body> section. But actually getting them to look the way you want involves a bit of trial and error. Ideally, you want each link to look the same except for the text content. So the width, color, alignment, etc. of each text link needs to match the others.

That means you’ll have to take some control away from your visitors by defining the font and setting an absolute font size. Relative font sizes that scale in relation to surrounding text and visitor preferences are just too risky.

We’re working here with a pretty tight layout that will be broken — maybe even illegible — if a visitor tries to view it with the browser’s text size set to the largest or smallest available value. Often, the best answer is a compromise: set absolute font values for navigation systems, but make sure they’re large enough to read clearly. 12 pixels is the minimum, in my opinion. Then, you can let visitor preference rule for the rest of the page content.

Still, even with that much careful planning and control, you can never be sure that your links will work in all browsers for all visitors. One factor limiting wider adoption of CSS is inconsistent browser support. In this article I’ve tried to stick with techniques supported by IE 5.x and up, Netscape 6.x and up, and Opera 6.x and up.

Is All This Work Really Worth It?

You bet. You’ll benefit in many ways, and so will your visitors!

  • Faster Downloads

Less image files mean less download time! Visitors with slow connections see your pages more quickly and more reliably. You may have a fast broadband Internet connection, but others aren’t so lucky. Although use of high-speed lines is increasing, the vast majority of users worldwide still connect via dial-up.

  • Browser Compatibility

All browsers support text links, but some browsers don’t adequately support JavaScript or display images (think about WebTV and text browsers). A complex DHTML menu structure may be completely inaccessible to a WebTV visitor. Visitors with slow connections may prefer to surf with images turned off. And sometimes, the problem is on your end. The server may not send the image to the browser or a coding error may prevent it from displaying properly.

  • Better Accessibility

Visitors with severe visual disabilities often listen to Web pages using screen readers or Web page readers. An image-based navigation system is hard to decipher if you can’t see the images.

  • Easier Maintenance

It’s a lot easier to change the text in a link when the link is actually in text format rather than an image format. Suppose your boss decides that the "Contact Us" link should actually be labeled "Email Us" instead. If it’s a text link, you change one word. If it’s an image link or button, you have to modify the entire image file yourself or pay the graphic designer to do it for you.

  • Keywords in Link Text

Some search engine algorithms (like Google’s) particularly prize keywords placed inside link text. Keywords are words or phrases that you expect people to enter into a search engine to locate your Website. You can give your site a slight boost on the results page by using your site’s targeted keywords inside link text. You can use keywords inside ALT and TITLE attributes on image links (and you should!), but text is more important.

  • More Likely to be Spidered

Most search engines claim that their spiders are capable of crawling through every level of a Web site and indexing every page. This is called "deep spidering" because the spider reads content even if it’s located deep inside the site. But the spider has to find the internal pages before it can index them.

Think about what a spider really is: basically a simple text browser. Spiders can’t see your images and sometimes have problems following JavaScript hyperlinks. So that great DHTML drop-down menu system on your site may look wonderful, but it also may be slamming the door on search engine spiders. They can’t index what they can’t find!

…Still not convinced? Try out these techniques on some sample pages of your own and consider how they might be integrated into your site design. Used together, text links and CSS are such a powerful tool for site design and promotion that you may never use image navigation again!

Replay

Category: other Time: 2003-02-28 Views: 1
Tags:

Related post

  • Thinking Laterally: Build a Side-scrolling Site Layout with CSS & jQuery 2011-03-01

    Ever since I saw Tyler Finck's Sursly.com, I've been looking everywhere for an excuse to try out a smooth-scrolling horizontal layout like his. It's by no means a new trend, but it's one that few of us have had the opportunity to use, and it's still

  • How to best format your HTML to help Google display your websites navigation with the search result for your site in Google Search? 2010-07-09

    My website used to have sitelinks and now it doesn't. It's very possible that it's due to changing the website to a sidebar design instead of having an "interstitial" type landing page which limited the number of choices, but I'm not sure. Here

  • Responsive, Fluid-Width, Variable-Item Navigation with CSS 2014-07-29

    Around six months ago I was asked to develop a single row navigation bar that could contain a variable number of menu items while filling the entire width of the container. The amount of navigational items was dictated elsewhere and likely to change

  • Make Your Site Faster With Google Page Speed Online 2011-04-06

    A decade ago, 100KB was considered to be the absolute maximum total file size for a single web page. Today, developers rarely adhere to any limits thanks to the availability of high-speed broadband. However, there are several reasons why you should s

  • Build Your Perfect Interface with UI Design Patterns 2012-09-19

    In spite of all the UI toolkits available these days, designing intuitive user interfaces is still a challenging task for many of us, and it's especially difficult for new designers. Even armed with solid design principles, it's still difficult to im

  • Build Content Site Profits with Ecommerce 2005-11-12

    People often view ecommerce as a big step that one doesn't enter into lightly, and that's mostly true if you're making your first ecommerce site. However one thing people often do not consider is simply selling a few products on their existing conten

  • How to Test Your Site Locally with Modern.IE 2014-08-19

    This article was sponsored by Modern.IE. Thanks for supporting the sponsors that make SitePoint possible! There's no shortage of front end tools to help us test the quality of our code. Some examples of these tools are JSHint and JSLint, to test our

  • Using content search web part to build a site navigation (SP 2013) 2015-09-22

    Problem: I've got a site with 15 subsites, each which in turn has many pages. I want to use a content search web part to query all sub sites, and display each sub site as a heading, with the three most visited pages linked in bullet points under each

  • Build your own NAS with OpenMediaVault 2012-03-01

    OpenMediaVault is a Debian based special purpose Linux Distribution to build a Network Attached Storage (NAS) System. It provides an easy to use web-based interface, Multilanguage support, Volume Management, Monitoring and a plugin system to extend i

  • Make a dropdown menu and submenu navigation with css 2016-01-24

    #header{ background: url("../images/naviBack.jpg"); width: 100%; } a{ display: block; } .ic{ color: #1B7EDB; text-align: center; display: inline-block; font-size: 4vm; } <div id="header"> <ul class="list-group"> &

  • Can you store your site entirely with Amazon Web Services? 2010-10-21

    Can I host my entire site at AWS or do I need to have shared hosting/server in order to use AWS, my site runs on php and mysql. --------------Solutions------------- Amazon Web Services (AWS) is merely infrastructure. You could spin up a new LAMP (Lin

  • Make your Site PDA-Friendly 2001-07-09

    *** WARNING! *** This article is getting a little dusty, and some of the links may no longer work. We recommend that you check out the following article for more up-to-date information on building a site that is optimized for mobile devices: Designin

  • Customizing wordpress to match your site theme 2011-03-02

    I have been wondering about how I could customize a Wordpress theme to look like that of my site, which is basically made of simple html and css. Alternatively, do you think there is a customizable simpler blogging solution that can be used for the s

  • Site navigation and SEO best practices 2012-07-19

    I've been reading several SEO books in preparation for a full site re-write. One of the suggestions that I've seen several times is that content should come before navigation in the site's markup. Question: If a site is using top-level navigation, ho

  • Add HTML input tag to to site navigation 2013-09-17

    I'm building a site using the twentytwelve theme. I need to add an input text box situation on the far left of the menu navigation bar. Here is the HTML from Header.php and the css from style.css. HTML <nav id="site-navigation" class="ma

  • Building a Step Wizard with BEM and Sass 2014-10-02

    A step wizard is a user interface component that helps a site's visitor know what's going on during a multiple-steps action. For instance, an online purchase. It is commonly used on payment forms describing the different steps to complete the desired

  • Back to Basics with Build Your Own Web Site The Right Way Using HTML & CSS 2006-06-07

    With Google seemingly launching a complex, new web application every week, it's easy to get caught up in the waves of cool, new stuff hitting the Web every day here at SitePoint HQ. But this past week, I had the opportunity to get back to basics and

  • New Release: Build Your Own Web Site The Right Way Using HTML & CSS 2009-01-23

    Build Your Own Web Site The Right Way Using HTML & CSS, is widely regarded as the definitive beginner's guide to building web sites. After hundreds of reviews and suggestions from the first edition, we're very pleased to announce a second edition of

  • Build Your Own Database Driven Web Site Using PHP & MySQL, Part 1: Installation 2009-07-02

    This article was written in 2009 and remains one of our most popular posts. If you're keen to learn more about PHP, you may find this recent article on CakePHP of great interest. In this book, I'll guide you as you take your first steps beyond the st

iOS development

Android development

Python development

JAVA development

Development language

PHP development

Ruby development

search

Front-end development

Database

development tools

Open Platform

Javascript development

.NET development

cloud computing

server

Copyright (C) avrocks.com, All Rights Reserved.

processed in 2.682 (s). 13 q(s)