Drop Down Menu
Tagged with: js
CSS experimentations, DropdownMenu
Out of all the things CSS3 menu's can offer you, rounded corners must be among the most boring options they've added to the palette. Hence my boring rounded-corner, drop-shadow clone of all of them, but with the adition of what makes CSS3 menu's really cool (because the corners and drop-shadows could've been solved with really advanced background-image usage), transitions. Cause really, that's the one thing I believe was really lacking in pure CSS drop-downs, it's what'll make the managers happy and the users cry in frustration ;)
This menu has not been improved to work with IE's limited CSS2 selectors, although this could easily be achieved. I had no interrest in doing so as for the purpose of this demonstration it is beside the point.
Menu 1
This first example makes extensive use of CSS3 feature to 'spice' up the appearance, included are, 'border-radius', 'gradient', 'box-shadow' and 'transition'. In combination with some of these properties I've made use of CSS3 specific selector rules, most specifically :last-child, which I don't think existed in CSS2.1.
During the creation of this example I ran into one major limitation with the use of transitions using showing/hiding of elements. Since the 'display' property switching between a hard yes/no value, transitions cannot deal with this. The fading in and out of menu's based solely on opacity becomes a tricky concept. Leaving all elements on 'display:block' while only using opacity to show/hide them would leave the menu's sitting on top of the content, accidental mouse-over revealing entire branches of your menu.
I've resolved this to some satisfaction by 'pre-emptively' setting menu's to display:block with opacity:0. Essentially if the parent of the list-item is in a :hover state, the list of that list-item is set to block. This way the only lists that can be revealed by :hover state are those of equal level. This does impose a minimum of UI 'polution' but nothing easily noticeable, nor of negative impact on the useability. As opposed to setting all lists to display:block as soon as the root-level is in :hover state, which causes side-way mouse-out movement to mouse-in on a new navigation-branch!
The only real down-side of this technique is that a mouse-out of the entire menu immediately switches of the entire branch, without transition. Until browsers become 'aware' of the display-property in transitions, this is the best possible scenario that I could come up with though.
On a side-note
Of possible interrest to know is that I tried to setup my CSS so that the 'basic' setup creates the menu behaviour while subsequent class-definitions on the root-element define the flavour and the texture. In other words, the theme is defined by a separate class-name and the transition also has a separate classname. I did this to be able to create some more flexibility in my menu's. I seem to use them occasionally and this way I hope to be able to reduce rewriting of the code over and again ;). Also I might be able to generate different transitions within this single page without too much copy-pasting...
Menu 2
This second menu is far less exciting as far as CSS3 feature show-casing goes. I was just curious if I could make a menu looking a lot like the OSX default theme. Since (at least on my installation) there's actually no anoying faders at all, it is limited to some subtle use of gradients, boder-radius and box-shadows.
For best possible effect this menu should be stuck to the top of the page and 100% width of the screen, ideally it should look like a menu inegrated to the browser. I predict a thouroughly confused user-base if you should ever do this though :).
Menu 3
Although I had hoped to use the 'clip' property to make a growing/shrinking transition both the pain of working with 'clip' and the apparant lack of transition support have caused me to attempt to make use of the width/height properties instead. Here we run into the problem that browsers like to use absolute values. A transition between 0 and 'auto' is not an option :(. This makes height a serious problem that I can't see I'll overcome. Width is not so much an issue, we already have to provide a fixed width due to the nature of floats/absolute position working together.
Even growing in height was achievable by throwing a transition on the actual <a> element height. This way all the menu-items grow from 0 to 1.3em height and it this effects appears quite acceptable to me. All of this for some 'cheap' transitions without attempting to resort to JavaScript.... It appears to me that none of the existing JavaScript libraries have cause to be worried ;) Transitions in CSS3 are lots of fun, but far from flexible enough to be a true work-horse.
The following filler text was brought to you by Lipsum.com and added to provide plenty of content below my menu's...
What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Why do we use it?
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
Where does it come from?
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.