Friday, October 22, 2010

Basic CSS Nav Bar

So today I thought I'd share with everyone my simple way of making a very effective and dynamic Navigation Bar using CSS.
Here is the finished example: http://yallara.cs.rmit.edu.au/~s3166403/silentmountain/index.html
This example could have been done using embed fonts and mouse over colours very easily, but with this way of working you can achieve much cooler effects, such as buttons that give the look of animation without using flash.

Step 1: The CSS Code

#nav {
 position: relative;
 top: 490px;
 width: 948px;
 height: 75px;
}

#nav ul {
    float: left;
    padding: 0;
    margin: 0;
    list-style: none;
}

#nav li {
    float: left;
 margin: 0 30px 0 0;
    width: auto;
 
 
}

#nav a {
    display: block;
    width: auto;
    background-position:  0 0;
    text-indent: -9999px;
    height: 25px;
    background: url(nav.png) no-repeat 0 0;
}


#nav a#home {
    width: 120px
}

#nav a#home:hover {
    background-position:  0 -25px;
}

#nav a#home.active {
    background-position:  0 -50px;
}

#nav a#filminfo {
    width: 95px;
    background-position:  -145px 0;
}

#nav a#filminfo:hover {
    background-position:  -145px -25px;
}

#nav a#filminfo.active {
    background-position:  -145px -50px;
}

 
#nav a#gallery {
    width: 74px;
    background-position:  -267px 0;
}

#nav a#gallery:hover {
    background-position:  -267px -25px;
}

#nav a#gallery.active {
    background-position:  -267px -50px;
}

    

This code uses this image:
I've edited the code to only include it for the first 3 parts, as you can see it works by moving the image around to where you want it to show, so when it's normal it displays white, green when it's moused over, and blue when the page is active.
You can easily create your own nav.png, I like to use Adobe Fireworks as it's easy to get the pixel locations, also PNGs can be transparent unlike most other common web image formats.

Lastly you need to use this code in your HTML document:
               <div id="nav">
                  <ul>
                    <li><a  class="active" id="home" href="/">Home</a></li>                 
                    <li><a  href="" id="filminfo" title="Film Info">Bookings</a></li>
                    <li><a href="" id="gallery" title="Gallery">Rates</a></li>
                    <li><a  href="datestimes.html" id="datestimes" title="Dates and Times">Club History</a></li>
                    <li><a  href="" id="competition" title="Competition">Availability</a></li>
                    <li><a href="" id="links" title="Links">Tour</a></li>
                    <li><a  href="" id="games" title="Games">Contact</a></li>
                </ul>
              </div><!-- Close nav -->

As you can see, by replacing the HREF statement with class="active" you can tell the document that you with that part to be blue for my example.

And here is an example of it working in action: http://yallara.cs.rmit.edu.au/~s3166403/silentmountain/index.html

19 comments:

  1. What does this even mean? Ahhh I only took Java for one semester sorry.

    ReplyDelete
  2. thanks for this ... I hate to admit it but CSS has always been a little mysterious to me.

    ReplyDelete
  3. strangely took a long time to load. looks really good though.

    ReplyDelete
  4. im still learning CSS

    the finish product looks nice tho

    ReplyDelete
  5. I'll learn CSS so easy here.
    I'll follow you brother

    ReplyDelete
  6. Wow, you did a great job of explaining CSS here. Very informative, thank you

    ReplyDelete
  7. Ok, this makes no sense to me but I guess it's usefull ??

    ReplyDelete
  8. interesting. Would try it but I'm so f*cking busy... Later, maybe.

    ReplyDelete
  9. CSS is so easy to learn and such a good friend to developers, it's my #2 favorite "language" to learn. My first favorite was javascript, it's SO much fun creating animations =D

    ReplyDelete