| Mock JS Rollever Navigation w/ CSS |
[Jul. 25th, 2006|01:22 pm]
Love Your Code
|
| [ | mood |
| | creative | ] |
| [ | music |
| | Burn, Burn by Lostprophets | ] | I have been playing with the LiveJournal layouts and applying a lot of my knowledge of CSS to the navigation menus. I am developing a friend's layout at my test journal, 👁 Image deprecated_diva.
The page is almost done, and the navigation menu was my biggest challenge, because I wasn't sure how I wanted it to look without ruining the overall feel of the page. I still have some tweaking to do to the navigation, but I need a bit of a break for now. :o)
The navigation uses list items for the navigation, and the CSS background is set to an image. Sure, that isn't anything special, but in this case when the "hover" and "active" attribute for the anchor tag are intialized, the background shifts position to appear as if the links are using a javascript rollover function. I know most of us are against javascript, and this is a script that will help reduce the use of javascript. As for upload/download time, it's prefect because it's only downloading 1 image, because the text on the image is actually text and NOT an image, which helps with SEO and 508 compliance (if you are concerned about it). I have created it to be stacked on top of eachother for a vertical navigation menu, but I have used it to make them inline for a hortizontal navigation menu. As far as I can tell, I haven't had any conflicts with cross-browser compatiability.
Don't you just LOVE what CSS can do? |
|
link | post comment
| |