CSS-based menu
What you can see above this paragraph is my CSS-based navigation menu. It has sample links, some of them are not working, they're just for testing its capabilities. The menu has a standard ul-li structure with CSS styling appliedto it. The menu has not only one level, when you move your cursor over one, you can see the next level. I hope, you'll like it!
Features
- Fluid width of menu items
- Translucent background, even in the submenus
- Different style for active page via CSS
- 3-level navigation
Disclaimer
This menu DOES NOT support any version of Internet Explorer. Why? Because itself. Micro$oft, in 2007 haven't already managed to develop its 'famous' browser to support properly basic CSS properties and selectors such as :hover or z-index or PNG transparency. It is a joke, but unfortunately true... Every CSS menu has proper positioning, the multi-level ones need the :hover pseudo-selector an so on. Most of these problems can be solved by using IE hacks, such as conditional comments, behavior files, javascript, etc. But without javascript, making a dropdown menu that works in IE is not possible. (Note: .htc files are also javascript!) These make the code invalid, and muddled. Designing a webpage is not so hard in comparison to hacking IE to show the same page, as it is displayed in other standardized browsers. Half of the designing time is wasted with trying to get IE to display the page properly.
So, we have to do something about this tiresome problem!
It is about our time, all the webdesigners' life, that we waste time on this crazy thing, optimizing for IE... I know that only me cannot stop users to use IE, but if I start a boycott, and maybe someone else stand in, we can change, shape the web community. So my steps to this 'revolution' is: I don't design websites that support Internet Explorer (unfortunately, in some of my work I am forced to do that pesky thing... and I know that all webdesigners has this issue). When a user visits my site with IE, I notify him/her that maybe he/she should shift to a better browser, and until the non-IE browser is utilized the site will remain ugly that maybe egg the user on changing browser. My other step is that with a line of javascript code I redirect the IE user to a page, where the he/she can download a better browser. So until he or she change browser, he/she won't be able to view the site.
This is my little campaign, you can find similar ones on the net, because I'm not the one who hate IE.
Thanks for reading these lines, and hope my design will please You!
András Bognár
kreative-labs.com