Forum Moderators: not2easy
I have a CSS based Menu for a new website I am working on. Everything is fine with Link, Visited, Hover but not active.
What I want to do is when the user has clicked on a link I would like that link to be in the "down" state so the user clearly knows what page he is on, plus the "down" state is incorporated into the web page design.
When I test my pages and select a link the "down" state appears but when I am on the selected link page the link has reverted to it's original state which I don't want.
I guess I can manipulate each page and insert an appropriate image for that page so the user sees a "down" state but I would like to know if this is possible to do using text only and without using images.
Regards
Steve
You need something within each page to trigger the 'down' state on a particular menu item, and then you can write the corresponding CSS.
One way to provide this 'trigger' is to simply have an id on the <body> tag. ie. <body id="homepage"> Each page has its own unique body ID. And also assign each menu item its own unique ID. You can then write the appropriate CSS... If BodyID="homepage" and MenuID="homepage_link" then "homepage_link" is in 'down' state etc. (psuedo code)
This technique has been discussed a few times, SuzyUK explains it well in this thread:
[webmasterworld.com...]
Does this work on all browsers? I am on Internet Explorer 7.0 and don't usually test for other browsers.
Also I have another question regarding CSS based menu. Now that I have implemented this technique is it possible to combine a text based image such as this with an image. For example if I inserted an arrow image within my border it would really finish my design off.
Thanks
Steve
Always, always use a modern browser, such as Firefox/Opera/Safari/anything but IE. Then your code can be adjusted for IEs quirks and bugs if it doesn't work in the first place. In addition, IE7 does not work the same as IE6.
Regards
Steve
...is it possible to combine a text based image such as this with an image. For example if I inserted an arrow image within my border it would really finish my design off.
Yes it's possible, in a few ways.... It may be easier to just have a 2nd (or 3rd?) background-image which is similar to the previous, but just has the additional 'arrow' on it.
OR, if the background-image is on your <li> element, you could have the 'arrow' background on your <a> element which is inside and on top of your <li> element. The 'arrow' background would need to be largely transparent (a gif or png) for the background on your <li> element to show through.
...if it worked in IE 7 my design and CSS would work in other and older browsers...
It could work in IE7 and not work in IE6....!
