Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 205
  • Last Modified:

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
0
mamadouthiam
Asked:
mamadouthiam
  • 3
  • 3
1 Solution
 
RouchieCommented:
Actually it is possible for CSS to know which page you are on - kind of!  The following link details how the trick is achieved.
http://www.hicksdesign.co.uk/journal/highlighting-current-page-with-css

May I recommend using SSI over LBI because changes to the SSI file will only require one single upload to make the changes live.  Changing LBI files often requires ALL the files that reference this library item to be uploaded.
0
 
mamadouthiamAuthor Commented:
Rouchie,


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
0
 
RouchieCommented:
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!
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
mamadouthiamAuthor Commented:
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
0
 
RouchieCommented:
>> 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.
0
 
mamadouthiamAuthor Commented:
Rouchie,

Thanks again for all the help - greatly appreciated.

mama
0

Featured Post

Upgrade your Question Security!

Add Premium security features to your question to ensure its privacy or anonymity. Learn more about your ability to control Question Security today.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now