x

Coding an Accessible Navigation


In this part of the tutorial I will guide you through coding the image created in part 1 of the tutorial.

How to Slice The Image

The first thing you must do to create your navigation is to slice it. The idea of slicing is to take sections of the image you created in photoshop. For this template we will need two images. These images will be 1px wide and 28px high. These will be repeated horizontally to create the base look of the buttons for normal and hover states. The reason the image is only 28px high is because we also have 1px borders above and below which will be done using CSS but are included in our images. In our photoshop document we created three buttons of 30px.

First thing to do is to save your psd as a jpeg and open it in photoshop. To get the first base image use the rectangle marquee tool and select fixed size 28px high and 1px wide. Click onto the image of the top button in the darker state. Nude the selection using the arrow keys until you have the whole of the height of the button selected but not the two border. Next press CTRL and C then new document in photoshop. The setting should be automatically set to height 28px and width 1px. If not change it to these. Then press CTRL and V to paste the selction into the document and save as a JPEG. You have now got your main background image. To get the hover background image do the same but put the selection over the lighter button. Save the two images as bg.jpg and hoverbg.jpg.

Coding an Accessible Navigation In CSS and XHTML

Now for the CSS part. The best way to create the navigation is to use lists. Lists are good as they cut down on code in your XHTML. Lists are shown by li and ul. To create the navigation simply add the following to you CSS.

#navvy
          {
          width: 200px;
          font-size:11px;
          padding: 0;
          text-align:left;
          font-family:Verdana, Arial, Helvetica, sans-serif;
        }
         ul#navvylist
          {
          text-align: left;
          list-style: none;
          margin: 0;
          padding: 0;
          width:100%;
          }
 		ul#navvylist li
          {
          width:100%;
          display: block;
          margin: 0;
          padding: 0;
          }
      ul#navvylist li a
          {
          display: block;
          margin:0;
          width:100%;
          padding-top:8px;
          padding-bottom:7px;
          padding-left:20px;
          padding-right:10px;
          border-top:#387EAF solid 1px;
          border-bottom:#193C64 solid 1px;
          color: #FFF;
          text-decoration: none;
          background:url(bg.jpg) repeat-x;
          }
         #navvy>ul#navvylist li a { width: auto; }
         ul#navvylist li a:hover, ul#navvylist li#active a:hover
          {
          color: #ededed;
          background:url(bghover.jpg) repeat-x;
          border-top: solid 1px #41A2C5;
          border-bottom:1px solid #2A5C8D;
          } 

This at first glance may look very complicated. In reality it isn’t. My code is not the best when it comes it size. I tend to throw extra attributed in than needed but never the less it works. The main things you should observe from the code are the use of the list and the use of the background image repeat. These background repeats are the way our images are copied many times in the X-axis (horizontally).

XHTML

Step two of the coding process is to add the XHML. This isn’t very difficult. Add the following to main page of your site where you want the navigation to appear:

<div id="navvy">
          <ul id="navvylist">
          <li><a href="#">Home</a></li>
          </ul>
        </div> 

This refers the the list with id navvylist and this put in a container with id navvy. Both are items we defined in the CSS. To add extra links simple copy:

<li><a href="#">Home</a></li>

The best way I find to learn CSS – although it may be messy – is to copy code then play around with it and see how things change. Try this and you will learn how certain attributed alter certain appearance aspects.

Like this post?

If you liked this post and want to keep up-to-date with the website, please consider subscribing to our rss feed or following us on twitter.

Want to learn CSS fast?

Sick of reading tutorial after tutorial? Just want to learn CSS quickly and simply? Why not try lynda css screencast tutorials. You can learn everything you need to know about CSS in one place. The website is a great learning resource for all languages, CSS included. Why not check the website out for more details.

x

Related CSS Tutorials

  • jQuery Enhanced CSS Navigation

    July 4, 2010 / 3 Comments

    In this tutorial we will combine jQuery and CSS to create a nice tab style navigation. The basic effect we are creating is when you hover over a tab it raises up using jQuery.

    Read
  • 13 Awesome CSS and jQuery Navigations for Free

    February 13, 2010 / 17 Comments

    Today I have been experimenting with adding jQuery effects to navigations and links to create some pretty nice interfaces. I have written a brief description for each and include a download.

    Read
  • How to Design a Glossy Navigation

    August 26, 2007 / No Comments

    This tutorial will guide you through part one of creating a lovely accessible corporate navigation.

    Read

Comments

  1. Patricia says:

    Hi,
    Your information was helpful. I would like to go to the next step. I am trying to reproduce (or do something similar to) the hover nav I found on this website: http://www.joshritter.com/news.php?nid=161. I am using iweb in iwork ’08. I know that you can do a lot of custom stuff with the “web widgets” where you add the htlm code.
    So basically I would like to know how to add animation to hover nav. Is this possible without getting into flash and all that? I have experience with Keynote. Any help you can give would be appreciated.

  2. admin says:

    For something like that flash would be required. You can do some basic animation on navigations using javascript however. I suggest checking the following out: http://gmarwaha.com/blog/?p=7

Leave a Comment

Awake is an amazing wordpress theme with over 30 unique style variations. Its our star buy at only $42!

Wordpress Themes

Other Websites

CSS Books