mamadouthiam
asked on
Problems incorportation Server Side Includes/ .lbi with navigation effects
We are considering converting some of our global navigation elements to SSIs or Dreamweaver library items. After further reflection an issue arose that I had overlooked. Our current navigation functions such that when an element is chosen from the left nav, the subsequent pages for that section have an effect where the element chosen has a different background color on the navigation (see http://www.csrees.usda.gov/nea/education/in_focus/education_if_avian.html for an example).
My questions is:
If we switch to SSI or .lbi is there anyway to preserve this functionality (i.e. the color chage). I can't see how this would work without some database/ CMS as there is no way for the SSI/ .lbi to "know" which page it is on (and thus have the correct element on the navigation highlighted).
Thanks,
mama
My questions is:
If we switch to SSI or .lbi is there anyway to preserve this functionality (i.e. the color chage). I can't see how this would work without some database/ CMS as there is no way for the SSI/ .lbi to "know" which page it is on (and thus have the correct element on the navigation highlighted).
Thanks,
mama
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
You need to stop using the images directly, and instead use CSS to set the images as the background for each link, like in this example:
http://css.maxdesign.com.au/listamatic/vertical11.htm
Have a look at the other lists on the above link. You can quite easily re-create the lists using CSS and no images, which makes them faster to load, more Google friendly, and MUCH easier to maintain!
http://css.maxdesign.com.au/listamatic/vertical11.htm
Have a look at the other lists on the above link. You can quite easily re-create the lists using CSS and no images, which makes them faster to load, more Google friendly, and MUCH easier to maintain!
ASKER
Rouchie,
"faster to load, more Google friendly, and MUCH easier to maintain" --- I agree absolutely and given the option I would gladly do this. However, I am locked into the look and feel of the site and the only way I could make a change would be if I could duplicate the look of the buttons with CSS. Unfortunately, some of the buttons have some subtle shading/ 3D effects which I don't think are replicable (and I am thus out of luck).
Thanks though for the excellent references as I will be able to use this info in other pursuits.
AW
"faster to load, more Google friendly, and MUCH easier to maintain" --- I agree absolutely and given the option I would gladly do this. However, I am locked into the look and feel of the site and the only way I could make a change would be if I could duplicate the look of the buttons with CSS. Unfortunately, some of the buttons have some subtle shading/ 3D effects which I don't think are replicable (and I am thus out of luck).
Thanks though for the excellent references as I will be able to use this info in other pursuits.
AW
>> subtle shading/ 3D effects which I don't think are replicable
You can create 3 images:
> the normal unselected button (without text)
> the selected button when the mouse hovers over it (without text)
> the currently selected button that references the current page (without text)
You can then set these as the background for each link state using CSS.
You can create 3 images:
> the normal unselected button (without text)
> the selected button when the mouse hovers over it (without text)
> the currently selected button that references the current page (without text)
You can then set these as the background for each link state using CSS.
ASKER
Rouchie,
Thanks again for all the help - greatly appreciated.
mama
Thanks again for all the help - greatly appreciated.
mama
ASKER
Great resource thanks.
One follow up. It turns out, after a little more digging, that we may be tied to the gif buttons (w/ rollover effects) that we currently use. So, and I am dreaming a little here, is there anyway using the method described (or another hack) to have the body id tag tell the SSI to use the down version of the button (if a user is on the appropriate page) vs the native state of teh button.
Basically, I want to use CSS to trigger the correct button display.
Thanks,
mama