Welcome!

Join our community of MMO enthusiasts and game developers! By registering, you'll gain access to discussions on the latest developments in MMO server files and collaborate with like-minded individuals. Join us today and unlock the potential of MMO server development!

Join Today!

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

Junior Spellweaver
Joined
Nov 30, 2010
Messages
141
Reaction score
16
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 . 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
 
Mother effin' clouds
Loyal Member
Joined
Apr 13, 2008
Messages
1,534
Reaction score
448
You are nearly there, but bad approach. You should try your best to minimise HTTP requests and make use of 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.
 
Junior Spellweaver
Joined
Nov 30, 2010
Messages
141
Reaction score
16
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.
 
Junior Spellweaver
Joined
Nov 25, 2008
Messages
180
Reaction score
2
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.
 
Joined
Jun 8, 2007
Messages
1,985
Reaction score
490
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.


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.
 
Last edited:
Junior Spellweaver
Joined
Nov 25, 2008
Messages
180
Reaction score
2
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 ;)
 
Joined
Sep 10, 2006
Messages
2,817
Reaction score
1,417
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 shenanigans. 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 element.

Also how would you do multilevel menu..

PHP:
<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
King Towel - [HTML/CSS]Simple Hover Navigation [All Browsers] - RaGEZONE Forums
rather than your post, in case you wondered.
 
Last edited:
Junior Spellweaver
Joined
Nov 25, 2008
Messages
180
Reaction score
2
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 :)
 
Joined
Sep 10, 2006
Messages
2,817
Reaction score
1,417
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:
<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?

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 and . Not to mention it actually always has a practical use(such as those multilevel menus).

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.

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:
 
Last edited:
Joined
Jun 8, 2007
Messages
1,985
Reaction score
490
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-butt, I was trying to help you and others who might influence from your bad code.
 
Last edited:
Back
Top