Advanced CSS Menu Trick
CSS really opens the doors to a lot of powerful and rich opportunities. It is funny how such minor things can create a whole new look, feel, and effect of a site. The beauty of CSS really is that it gives you power, but not too much power. It is not a tool like flash that really invites you to run away and take things too far.
We are now coming to a point where the browsers are supporting a lot of new features, giving us more opportunities to take advantage of previously unused pseudo elements. This example, “advanced css menu tricks” will work perfectly in any modern browser, yet still be fully functional in your older version of IE as well.
What we want to do here, is instead of simply altering the state of the navigation item the user is currently rolling over, we want to alter the non navigation items as well. This will help focus the users attention on the item they have selected on, and create a new look and feel for the site overall. Want to see it in action? Look at my demo page before we start.
The first step – CSS roll overs
The first step of the game is building some CSS roll overs. We want to keep things accessible so I have opted to use an IR technique. Essentially we create an image that has both the static, active and rolled over state all lined up next to each other. We then set the image as the background of th element, but the width is only wide enough for one state of the image (so if the button image is 600px wide with all three states, we make the navigation element as a 200px wide button). We then set the text indent really high and overflow to hidden so that it pushes the text out of the box. Then we only see the image even though there is still HTML text on the page for search engines and accessibility.
Image Examples
Menu Before
We are now coming to a point where the browsers are supporting a lot of new features, giving us more opportunities to take advantage of previously unused pseudo elements. This example, “advanced css menu tricks” will work perfectly in any modern browser, yet still be fully functional in your older version of IE as well.
What we want to do here, is instead of simply altering the state of the navigation item the user is currently rolling over, we want to alter the non navigation items as well. This will help focus the users attention on the item they have selected on, and create a new look and feel for the site overall. Want to see it in action? Look at my demo page before we start.
The first step – CSS roll overs
The first step of the game is building some CSS roll overs. We want to keep things accessible so I have opted to use an IR technique. Essentially we create an image that has both the static, active and rolled over state all lined up next to each other. We then set the image as the background of th element, but the width is only wide enough for one state of the image (so if the button image is 600px wide with all three states, we make the navigation element as a 200px wide button). We then set the text indent really high and overflow to hidden so that it pushes the text out of the box. Then we only see the image even though there is still HTML text on the page for search engines and accessibility.
Image Examples
Menu Before
Then when we want to change the state of the button we simply adjust the background position to be -200px (or the size of the button itself) pulling the different state of the button into view. The reason for doing it this way then simply swapping images, is the latter method tends to create flickering in some browsers.
At this point most people have it set so that if an item is hovered on (#home for example) it switches the background-image position. This creates the standard run of the mill css roll over. However we want to do something else, something more unique. We want to have every roll over item on the menu change except the one you are hovering on. This requires a little css trickery!
IE7, Safari, Firefox, all support the :hover pseudo selectors so let’s take advantage of that. What we need to do is have all the menu items change the background-image position when the menu item itself has been rolled over. Then the item that is hovered on is set to have the background-position: 0px to keep it from moving when the rest do.
0 comments:
Post a Comment
Terima Kasih telah memberikan komentar disini
Info Jasa kami, klik http://www.grahaDesignstudio.com
Phone :
081332333372 - 087833396980
email :
cs@grahadesignstudio.com