|
| |
|
|
Starhugger
Posts: 512
Joined: 4/12/2005
Status: offline
 |
Navigation buttons with rollover effects - 3/21/2006 1:59:02
I'm trying to create a system of navigation buttons with rollover effects. So far I have 2 images which work beautifully by using the "background-image: url(blahblah.jpg)" attribute with "a:" and "a:hover". It works in all 4 major browsers, although Opera has a delay with the hover image.
Anyway, I want to have it so that the current page uses a third image for its button. So, for instance, when you're viewing the Home page, the Home button shows this third image (which is a bit greyed out). Is there a straightforward way to do this, perhaps using another a: pseudo-class? I want to use an included file for the navigation bar, so I don't want to have to redo the bar for every different page, if you know what I mean.
Thanks for the help!
Starhugger
|
|
|
|
Tailslide
Posts: 5972
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: Navigation buttons with rollover effects - 3/21/2006 3:10:52
The easiest way to do this would be to ensure every page has it's own "id" - put it in the body tag e.g
<body id="home">
then assign ids to all your menu items e.g:
<li><a href="whatever.html" id="nav-home">Home</a></li>
<li><a href="faq.html" id="nav-faq">FAQ</a></li>
<li><a href="contact.html" id="nav-contact">Contact</a></li>
(Just assuming you've got your links in a list 'cos that's the way I do it ;) but it doesn't matter - the idea applies whatever.
Then in your CSS you assign the new hover state to specifically the id of the link and the page you want to look "active"
#home #nav-home, #faq #nav-faq, #contact #nav-contact {whatever}
Now when the user's on the home page the link with the id nav-home id will be "active". When on the FAQ page the link with the id nav-faq will be "active" etc etc.
This is the best way to do this because you can have a single include with all the navigation stuff in it rather than having to change it for each page which is the other way of doing it.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
Starhugger
Posts: 512
Joined: 4/12/2005
Status: offline
|
RE: Navigation buttons with rollover effects - 3/21/2006 23:47:59
Thanks Tailslide! I think I have it working. It seems to work when I load it into a browser and when I Preview it in FP, but it behaves strangely when I'm in Design/Split mode. I'll post again if I find there's a problem when the site goes live. It's for a client, not my own site.
Another question though. I've got these rollover links in an Include file that I bring into each page. The Include file simply has a list of a-tags; for example:
<div id="leftnav">
<a class="linkservices" href="../services.htm"></a>
<a class="linkcontact" href="../contact.htm"></a>
<a class="linkhome" href="../index.htm"></a>
</div>
Is there a simple way to arrange it so that when the link points to the same page it's on, it will be a dead link, so that if the person clicks the link it won't just reload the page? In other words, if I'm on the Home page and I click the Home navigation link, it will be a dead link, whereas if I'm on the Contact page then Home becomes a live link. This tends to be the standard behaviour for navigation bar links but I'm not sure how to create this from scratch in HTML/CSS.
Thanks again for the help.
Starhugger
| |
|
|
|
Starhugger
Posts: 512
Joined: 4/12/2005
Status: offline
|
RE: Navigation buttons with rollover effects - 3/21/2006 23:54:09
quote:
ORIGINAL: BonRouge
Here's a good way to do it with php...http://bonrouge.com/br.php?page=current2
Hey BonRouge! I was checking out your site recently as I looked for ideas to do rollover effects, and bookmarked it. It's a great site!
Thanks for the tip about the PHP. I'll keep it in mind if I can't get this to work properly in CSS.
Starhugger
| |
|
|
|
Tailslide
Posts: 5972
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: Navigation buttons with rollover effects - 3/22/2006 3:02:49
quote:
ORIGINAL: Starhugger
Is there a simple way to arrange it so that when the link points to the same page it's on, it will be a dead link, so that if the person clicks the link it won't just reload the page? In other words, if I'm on the Home page and I click the Home navigation link, it will be a dead link, whereas if I'm on the Contact page then Home becomes a live link. This tends to be the standard behaviour for navigation bar links but I'm not sure how to create this from scratch in HTML/CSS.
No - CSS only affects the look and layout not the content or behaviour. You might be able to do that with some server-side coding but I don't know how off the top of my head. I usually don't bother - I just leave it as a "real" link so that I can just have one list of links in the include.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
BonRouge
Posts: 42
Joined: 3/3/2006
Status: offline
|
RE: Navigation buttons with rollover effects - 3/23/2006 6:59:13
c1sissy,
Are you talking about rollovers?
It's usually better to use CSS than js.
Have you seen this page:http://bonrouge.com/br.php?page=rollover3? (It's not bad).
| |
|
|
|
c1sissy
Posts: 5084
Joined: 7/20/2002
From: NJ
Status: offline
|
RE: Navigation buttons with rollover effects - 3/23/2006 7:38:30
quote:
ORIGINAL: BonRouge
c1sissy,
Are you talking about rollovers?
It's usually better to use CSS than js.
Have you seen this page:http://bonrouge.com/br.php?page=rollover3? (It's not bad).
quote:
c1sissy,
Are you talking about rollovers?
It's usually better to use CSS than js.
Have you seen this page:http://bonrouge.com/br.php?page=rollover3? (It's not bad).
Actually I totally agree with you, however I was having difficulty getting the page go work, so I went with the js suggestion for this one time.
Thanks for the link, and I will check it out when I get back from california. I appreciate you posting it for me and others, and also you should think about posting it in the thread in here that we post links for css information.
_____________________________
Deb-aka-c4Ksissy
high panjandurum and alpha female of the silverback tribe
As decreed by Jesper 5-24-2003.
The only stupid question is... the one that is never asked!!
http://directory.css-styling.com
http://fmsforum.com
http://positioniseverything.net/
http://www.tanfa.co.uk/
| |
|
|
|
Starhugger
Posts: 512
Joined: 4/12/2005
Status: offline
|
RE: Navigation buttons with rollover effects - 3/24/2006 3:56:59
Here's a sample of the code I wound up using. It works very nicely using only background images. There's no text in the link, the way I'm using it, but I'm sure it could be used, and I might still change it for that purpose, so that the SEs can see them. But for now I'm using a kind of glowing effect for the link text, so it looks best in graphics mode. The person I'm doing this for is mostly interested in a brochure type of site, not something that will make him world famous (yet).  Each link uses its own set of the 3 style definitions below:
#home a.linkhome { /* DEFINE LINK ON ITS OWN PAGE */
display: block;
width: 128px;
height: 35px;
background-image: url("images/home3.jpg");
background-repeat: no-repeat
}
a.linkhome { /* DEFINE BASIC LINK ON ALL OTHER PAGES */
display: block;
width: 128px;
height: 35px;
background-image: url("images/home1.jpg");
background-repeat: no-repeat;
}
a:hover.linkhome { /* DEFINE HOVER LINK ON ALL OTHER PAGES */
background-image: url("images/home2.jpg");
}
I've used the Home page as the example above. As suggested by Tailslide, the #home linkhome applies to the Home button when it's displayed on the Home page, and it uses a greyed out image. On the Home page, the body is labeled id="home".
Then the HTML is simple:
<div id="leftnav">
<a class="linkhome" href="../index.htm"></a>
...etc...
</div>
Very simple, very straightforward. And it tests fine in IE6, FF, NN7 and Opera. In Opera it goes blank on the first mouseover, but shows up fine in subsequent mouseovers. That's the only problem I saw.
Starhugger
| |
|
|
|
BonRouge
Posts: 42
Joined: 3/3/2006
Status: offline
|
RE: Navigation buttons with rollover effects - 3/24/2006 4:04:45
I think you'll probably find that it goes blank on your first rollover in every browser - not just Opera (clear your cache and you should see that happen). The reason for that is that the hover image will not be loaded until you hover - hence the wait for the image to be downloaded. After that, it's cached so there's no wait. You can get around this by... Well, by checking out the link I gave earlier...http://bonrouge.com/br.php?page=rollover3
| |
|
|
|
Starhugger
Posts: 512
Joined: 4/12/2005
Status: offline
|
RE: Navigation buttons with rollover effects - 3/24/2006 4:19:06
Thanks BonRouge, that would make sense. I was playing around with this stuff for another site and found it worked using "visibility: hidden" and "visibility: visible" too. On your site, you're using "background: transparent." Am I right in thinking that you are essentially setting up multiple layers of images and then making one transparent, which allows a lower layer to show through?
Starhugger
| |
|
|
|
BonRouge
Posts: 42
Joined: 3/3/2006
Status: offline
|
RE: Navigation buttons with rollover effects - 3/24/2006 4:23:24
quote:
me (on the page I showed you)
On hover, the background of the 'a' tag becomes transparent and the background of the 'li' shows through.
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
. 
Thanks. It's late and I'm about to head off to dreamland. That's my excuse and I'm sticking to it. 