Centered Sliding Doors Menus
- Posted at: 7:28 pm
- Filed in: Design
I know myself and a lot of designers were very excited after reading Ethan Marcotte’s method of centering sliding doors tabs last month over at 24 ways. I had been waiting for someone to help solve the float issue with the sliding doors technique for a very long while. I enjoyed the article but thought it was lacking a few presentation elements that help to make the sliding doors technique so nice. I wanted to find a way to add the nice single-image rollover effects for Ethan’s centered tabs that Douglas Bowman had in his article at A List Apart. After lots of ranting, raving, fussing, cussing, and the destroying of what was Ethan’s original code I managed to hammer out a method of centered sliding door tabs complete with an active tab, that have been tested and work in IE, Firefox, and Safari.
Thanks very much for this post, I’ve been wondering myself how this is done. You’ve saved me a lot of time! Good work!
This is very good work. You might also consider assigning the navigation id to the ul itself and avoid some extra markup.
Nice concept, but the spans… No.
Badass Christopher.
Veracon, what’s the big deal with the spans?
Tony: You could easily do away with the navigation id. It was used to dress up the menu’s background and help seperate things for the example.
Veracon: I see where you are coming from. Sure, the extra span may be a bit messy, but I feel it is small price to pay to accomplish what I set out to do with the menus.
Have to say, I really like this. The use of sprites seems to be really popular ATM.
Nice work Chris, way to expand on what Ethan did. I’m looking forward to using this technique in the future.
PS. Your link to Ethan’s site has an extra “http://” in it, just FYI.
Lookin’ sharp, sir–nicely done.
[...] A method of centered sliding door tabs complete with an active tab, that have been tested and work in IE, Firefox, and Safari. [...]
It looks like your design has already been implemented.
http://easyubuntu.freecontrib.org
Excellent!
Chris - I wonder if you have noticed that ie 7 has a problem with the left-hand bg images? Can you suggest a fix?
Michael: I haven’t forgot about ya. I just haven’t had any time to download and test the mneus in IE7. I will very soon.
[...] A few days back I received a comment from a reader asking for help using the centered sliding door menus that I had expanded upon from Ethan Marcotte’s original tutorial. The commenter explained that the menus were acting a little buggy in IE7 so I decided to download IE7 and try to find a way to solve things. After a couple of small changes in the stylesheet the menus should now be fully functional in IE, Firefox, and Safari. Enjoy! [...]
Michael: The menus are been now been updated and display correctly in IE7. For more information see here.
This is excellent work very cool.