[HTML/CSS]Simple Hover Navigation [All Browsers]

I have been looking around the web, and found there's quite a few people trying to find a code for a navigation that changes on hover etc. If you want to know what I mean, cick Here. This was done using simple HTML and CSS, no JavaScript or hard-coding.

The HTML part is done using a simple List like this:

Code:

---

<ul id="nav">
<li><b><a href="index.php">Home</a></b></li>
<li><b><a href="bio.php">Biography</a></b></li>
<li><b><a href="web.php">Web Design</a></b></li>
<li><b><a href="writing.php">Writing</a></b></li>
<li><b><a href="cooking.php">Cooking</a></b></li>
<li><b><a href="music.php">Music</a></b></li>
<li><b><a href="gfx.php">GFX</a></b></li>
<li><b><a href="contact.php">Contact</a></b></li>
</ul>

---

That's the basic HTML code, but that alone will make your nav go vertical, and ugly. So you need some CSS to go with it.

Code:

---

#nav ul
{
margin: 0px;
padding: 0px;
}

#nav li
{
display: inline;
list-style-type: none;
}

#nav li a
{
padding: 5px;
}

#nav li a:hover
{
background-color: #2a9cd0;
}

---

If you would rather have a background-image instead of color, simply add this code to #nav li a:

Code:

---

background-image: url(path/to.img);

---

and you also need to change this:

Code:

---

#nav li a:hover
{
background-color: #2a9cd0;
}

---

to this:

Code:

---

#nav li a:hover
{
background-image: url(path/to-hover.img);
}

---

This code works for all browsers, and relatively simple to edit.

Thanks for reading, and I hope this helps you.

King Towel

You are nearly there, but bad approach. You should try your best to minimise HTTP requests and make use of CSS Sprites. Instead of changing the background image on a hover event, simply make it so it alters the background position - pertaining to your suggestion on background images.

That makes sense, I wasn't really planning on doing the alteration in the first place I only did it because I thought it would be usefull. Could you possibly post a code that would alter the background position? I will edit the topic post.

Hmmm, a nice tutorial, but you do not need to use <li> etc. it just clutters up your code. Here's how I do mine:

HTML

Code:

---

                        <div id="nav_links">
                                <a href="./" class="selected">Home</a>
                                <a href="./about.php">About</a>
                                <a href="./portfolio.php">Portfolio</a>
                                <a href="./services.php">Services</a>
                                <a href="./contact.php">Contact</a>
                        </div>

---

CSS

Code:

---

#nav_links a {
        display: block;
        color: #FFF;
        font-family: Trebuchet MS;
        font-size: 18px;
        float: left;
        height: 22px;
        padding: 6px;
        text-decoration: none;
}
#nav_links a:hover {
        color: #000;
        background-color: #EEEEEE;
}
#nav_links a.selected {
        color: #000;
        background-color: #EEEEEE;
}

---

Copied straight from my source code, you can easily change the div IDs and CSS though.

Quote:

---

Originally Posted by King Towel

That makes sense, I wasn't really planning on doing the alteration in the first place I only did it because I thought it would be usefull. Could you possibly post a code that would alter the background position? I will edit the topic post.

---

The CSS attribute is background-position.

So in your "etc:hover" class, instead of background-color, just change background-position..

So, if your images are 75px by 25px, (assuming they're all exactly the same size..) change background-position (from 0px by 0px) to 0px by 26px. (Take note I decided to use height for no reason what-so-ever, you could stack the images and offset using width instead- or both.)

Also the link he gave explains everything you need for an example, why didn't you read that instead of asking him to clarify.. Don't be afraid of a little read once in a while, it's good for you.

Quote:

---

Originally Posted by TehByte

Hmmm, a nice tutorial, but you do not need to use <li> etc. it just clutters up your code. Here's how I do mine:

HTML

Code:

---

            <div id="nav_links">
                <a href="./" class="selected">Home</a>
                <a href="./about.php">About</a>
                <a href="./portfolio.php">Portfolio</a>
                <a href="./services.php">Services</a>
                <a href="./contact.php">Contact</a>
            </div>

---

CSS

Code:

---

#nav_links a {
    display: block;
    color: #FFF;
    font-family: Trebuchet MS;
    font-size: 18px;
    float: left;
    height: 22px;
    padding: 6px;
    text-decoration: none;
}
#nav_links a:hover {
    color: #000;
    background-color: #EEEEEE;
}
#nav_links a.selected {
    color: #000;
    background-color: #EEEEEE;
}

---

Copied straight from my source code, you can easily change the div IDs and CSS though.

---

Yes you do need to use lists in HTML for certain features other tags don't single-handedly support (such as in-line element tags- like <a>, <p>, <span>, and many more)

It's not completely useless, but (like everything) shouldn't be used if your not using it for any particular reason..

In this case there's (arguably) some reason.. I'm not arguing that there really is, but.. <li> isn't clutter, it actually reduces code in A LOT of cases.

Quote:

---

Originally Posted by s-p-n

Yes you do need to use lists in HTML for certain features other tags don't single-handedly support (such as in-line element tags- like <a>, <p>, <span>, and many more)

It's not completely useless, but (like everything) shouldn't be used if your not using it for any particular reason..

In this case there's (arguably) some reason.. I'm not arguing that there really is, but.. <li> isn't clutter, it actually reduces code in A LOT of cases.

---

That's why you display them as a block, this gives them the same properties as other tags such as divs etc.

And compare your code to mine, then tell me that <li> reduces the code ;)

Quote:

---

Originally Posted by TehByte

Hmmm, a nice tutorial, but you do not need to use <li> etc. it just clutters up your code. Here's how I do mine:

HTML

Code:

---

            <div id="nav_links">
                <a href="./" class="selected">Home</a>
                <a href="./about.php">About</a>
                <a href="./portfolio.php">Portfolio</a>
                <a href="./services.php">Services</a>
                <a href="./contact.php">Contact</a>
            </div>

---

CSS

Code:

---

#nav_links a {
    display: block;
    color: #FFF;
    font-family: Trebuchet MS;
    font-size: 18px;
    float: left;
    height: 22px;
    padding: 6px;
    text-decoration: none;
}
#nav_links a:hover {
    color: #000;
    background-color: #EEEEEE;
}
#nav_links a.selected {
    color: #000;
    background-color: #EEEEEE;
}

---

Copied straight from my source code, you can easily change the div IDs and CSS though.

---

That's bullshit. You do need to use a list for a LIST. If not, you are just a bad coder with a terrible semantics. Even if you plan to use html5 <nav> element.

Also how would you do multilevel menu..

PHP Code:

---

<a href="#">Foo</a>
<a href="#">bar
  <a href="#">Something</a>
  <a href="#">Something</a>
  <a href="#">Something</a>
</a> 


---

..like this eh?

---------- Post added at 06:25 PM ---------- Previous post was at 06:05 PM ----------

and no offense, it's just that you prove that the more a person brag about his coding/programming skills the less he actually knows.

Judging from this http://img38.imageshack.us/img38/9127/backgroundypp.png rather than your post, in case you wondered.

The CSS used I styled the links in a certain div class/ID this means you can change the link styling for a separate class if you wish; thus allowing a multilevel menu. I've used several different navigation bars throughout my name of coding (including the one which you've shown) and my CSS works perfectly for it.

As I said in my previous post, the "display: block;" method gives the link all of the properties that a div class for example would hold, height, width etc. etc. therefore you don't need to use a list.

I was showing another method of how to do it, now I've got two smart arses trying to prove my method wrong ;) I'm not saying that either is better, I'm just showing a neater way of doing the same thing.

Also, that's my twitter background, and it gives people an idea of what I do in my spare time - no where throughout that image is be bragging that I can code/program well, I simply start that I am a website designer, which I am. So gf, gtfo, goodnight :)

Quote:

---

Originally Posted by TehByte

The CSS used I styled the links in a certain div class/ID this means you can change the link styling for a separate class if you wish; thus allowing a multilevel menu.

---

Yea, right right, and do you realize that by clicking anywhere inside

PHP Code:

---

<a href="#">Foo
  <a href="#">bar</a>
  <a href="#">bar</a>
</a> 


---

would trigger clicking on the parent element instead of the one you actually want to click on?

Quote:

---

Originally Posted by TehByte

As I said in my previous post, the "display: block;" method gives the link all of the properties that a div class for example would hold, height, width etc. etc. therefore you don't need to use a list.

---

You are completely clueless. You need to use list because it is a list, it's called semantic and accesibility. Not to mention it actually always has a practical use(such as those multilevel menus).

Quote:

---

Originally Posted by TehByte

I was showing another method of how to do it, now I've got two smart arses trying to prove my method wrong ;) I'm not saying that either is better, I'm just showing a neater way of doing the same thing.

---

Neither can be better(of these two anyway), because the only right and valid method is the one with a list. What you are doing it confusing people with your bad coding, some might believe you and here we go - another bad coder on the internet.

Quote:

---

Originally Posted by TehByte

Also, that's my twitter background, and it gives people an idea of what I do in my spare time - no where throughout that image is be bragging that I can code/program well, I simply start that I am a website designer, which I am. So gf, gtfo, goodnight :)

---

The simple fact that you are using avatar with a php shirt, stating that you are web developer, web designer and "Knowledgeable Developer", while you are clearly not really experienced is quite enough for me. :wink:

I don't mean to carry on this argument, (which I tried to prevent, btw). But how exactly am I being a Smart "arse", hm?

I was trying to help you, and by your third comment, I think we all know that you're just being stubborn.

You think Foxx and I don't know what "display" does, lol.. Sorry, but yeah.. You don't even know dude.

As I also tried to explain, the w3 standard was built with a whole lot of thought. With CSS things can get confusing, but the defaults are a guide we should all follow, and when going outisde that guide, make sure you know what you're doing.


The link tag <a> and the paragraph tag, <p>.. the image tag, <img>- they all serve better left as inline elements..

Thus, I wasn't being a smart-ass, I was trying to help you and others who might influence from your bad code.

There you go, thread cleaned. Wow, gone for a day and shit hits the fan lol. Try to keep it clean this time.