navigation
a webmaster learning community
     Home    Register     Search      Help      Login    
Sponsors

Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions.

Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.

Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax

Search Forums
 

Advanced search
Recent Posts

 Todays Posts
 Most Active posts
 Posts since last visit
 My Recent Posts
 Mark posts read

Microsoft MVP

 

Navigation buttons with rollover effects

 
View related threads: (in this forum | in all forums)

Logged in as: Guest
Users viewing this topic: none
Printable Version 

All Forums >> Web Development >> Cascading Style Sheets >> Navigation buttons with rollover effects
Page: [1]
 
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

(in reply to Starhugger)
BonRouge

 

Posts: 42
Joined: 3/3/2006
Status: offline

 
RE: Navigation buttons with rollover effects - 3/21/2006 14:02:16   
Here's a good way to do it with php...http://bonrouge.com/br.php?page=current2

(in reply to Tailslide)
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

(in reply to Tailslide)
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

(in reply to BonRouge)
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

(in reply to Starhugger)
Starhugger

 

Posts: 512
Joined: 4/12/2005
Status: offline

 
RE: Navigation buttons with rollover effects - 3/22/2006 4:09:53   
quote:

ORIGINAL: Tailslide

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.

Thanks Tailslide. CSS seems like magic sometimes so it's easy to forget it's really just a markup language. :)

Starhugger

(in reply to Tailslide)
BonRouge

 

Posts: 42
Joined: 3/3/2006
Status: offline

 
RE: Navigation buttons with rollover effects - 3/22/2006 4:19:06   
quote:


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!

Glad you like it :).

quote:

Thanks for the tip about the PHP. I'll keep it in mind if I can't get this to work properly in CSS.


I hope you noticed that that php does exactly what you want. It's so short and easy to implement - what more can you ask for?

(in reply to Starhugger)
c1sissy

 

Posts: 5084
Joined: 7/20/2002
From: NJ
Status: offline

 
RE: Navigation buttons with rollover effects - 3/23/2006 4:35:06   
I just went through this with 12 images, 6 normal and 6 hover.

I ended up using js finally as it seemed to be at thsi point the only thing that worked.

Someone provided me with code, but the only thing I need to learn now is how to change that code :)

Good luck with your page!

_____________________________

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/

(in reply to BonRouge)
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).

(in reply to c1sissy)
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/

(in reply to BonRouge)
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

(in reply to c1sissy)
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

(in reply to Starhugger)
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

(in reply to BonRouge)
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.

(in reply to Starhugger)
Starhugger

 

Posts: 512
Joined: 4/12/2005
Status: offline

 
RE: Navigation buttons with rollover effects - 3/24/2006 4:27:26   
Doh! It would help if I read it, wouldn't it? :) Thanks. It's late and I'm about to head off to dreamland. That's my excuse and I'm sticking to it. :)

Starhugger

(in reply to BonRouge)
Page:   [1]

All Forums >> Web Development >> Cascading Style Sheets >> Navigation buttons with rollover effects
Page: [1]
Jump to: 1





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