Thursday, December 23, 2010

Dropdown-menu, "dropdown" for short.
It is a top link, that you need to move your mouse over to reveal a menu of links. Often used in the navigation of a website, to allow for more links in less space.

Tuesday, June 29, 2010

In the middle of my current work flood I had another idea involving dropdowns, it seems my brain can't stop thinking about it until it's solved. Where the "fixed width" limitation has been my current gripe with my dropdown.
The new experimental solution seems to work in IE5-7 and Firefox.
This method uses line alignment and inline-block to create a dropdown, it's 100% functional for all browsers if the dropdown links are horizontally aligned, but needs work for vertical alignment, For those who think IE6 does not support inline-block, well, it does :P
Here is a sample of what I have so far, move your mouse over the "main" link and then down.

/*WIDTH (!IMPORTANT)*/
/*change each width value below, else the dropdown will stop working (:hover will still work in modern browsers because of the opera fix)*/
/*set the link width here*/
.nav .link,
.nav a {
width:9em; /*same as width*/
}
.nav ul li {
/*force ie8 to float-drop*/
max-width:9em; /*same as width*/
}
/*set the sublink left shift width here (same as width)*/
.nav ul ul {
/*move the sublinks to the side, so they dont overlap*/
left:9em; /*same as width*/
}
.nav li.reversed ul { /*reverse the direction of sublinks for the last dropdown*/
left:auto;
right:9em; /*same as width*/
}
/*add the negative value of "width - 1px" here (because css can't do math)*/
/*or (width - 0.063em) where 0.063em is 1px on 16px base size*/
.nav a {
/*makes the links very thin, so that the sublinks can hide inside the main link*/
/*!IMPORTANT: if you want a width of 9em, then you will have to change the value below to 8.937em (because: 9 - 0.063 = 8.973)*/
margin-right:-8.937em; /*make this width - 1px*//*or width - 0.063em (0.063 = 1px)*/
}

/*HEIGHT*/
.nav {
height:1.563em; /*you could remove this and clear the float differently, but to me this makes the most sense*/
}
.nav a {
padding:.2em 0; /*apply padding to links, to vertically center them, be careful with horizontal padding in IE5, correct width must be maintained*/
}
.nav a.main {
height:1.563em; /*needs to be the same as the persistent background trick and so that the sublevels are properly aligned*/
line-height:1.563em; /*not really necessary, but in this specific case it vertically centers the main link text*/
overflow:hidden; /*making it more bulletproof*/
padding:0; /*remove the padding that was applied above*/
}
.nav ul {
padding-top:1.563em; /*persistent background trick*/
margin-top:-1.563em; /*persistent background trick*/
}
.nav ul ul {
position:relative; /*so that it can be moved top/left*/
top:-1.563em; /*this is the sole reason why the main links must have a fixed height*/
}

/*Dropper Dropdown*/
/*supports up to 4 sub-levels in IE5-7, more can be added*/
/*modern browsers already support any amount of sublevels*/
/*made by Timo Huovinen*/

It has just some extra classes and css rules, to make life easier for those who need this, I have also removed some of the sublevels to make it look neater.

Terms of use:

The software referenced within this license is distributed free of charge and free from any warranty. It may be used freely for any purpose whatsoever. The author created and released this work because he is genuinely a Nice Person!

The author sincerely hopes that end users enjoy and appreciate the hard work that went into creating it, and would appreciate being referenced in future modifications of the code since it was based on the author’s original concept and work.

Users are nonetheless encouraged to provide reciprocity whenever possible as it provides positive reinforcement and encouragement to the author. Furthermore, the minimum reciprocation I ask is to leave a ‘thank you’ comment in the area below:

ul.nav ul.sub li {
clear: left; /* must clear any immediately preceding LI.has-sub */
}
ul.nav ul.sub li.has-sub {
float: left; _display: inline;
_clear: none; /* (5) don't clear any immediately preceding LI.has-sub in IE6 since clearing is not necessary anyway in this browser,
* and doing so on an LI.has-sub causes breakage when there are at least two consecutive submenu items both with subsubmenus;
* however, we keep the clear on other LIs to work around another bug in which, whenever the first item of a submenu is an
* li.has-sub with clear:none and the second item is a normal LI, a one-item-high vertical gap appears before normal LI
* unless it has clear:left */
margin-top: -10000px; /* (1) set offscreen distance */
height: 25px; /* height of child A... */
height: 10025px; /* (3) ...which IE6 expands by 10000 to enclose its child A */
}

/*HEIGHT*/
.nav {
height:1.563em;/*you could remove this and clear the float differently, but to me this makes the most sense*/
}
.nav a {
padding:.2em 0;/*apply padding to links, to vertically center them, be careful with horizontal padding in IE5, correct width must be maintained*/
}
.nav a.main {
height:1.563em;/*needs to be the same as the persistent background trick and so that the sublevels are properly aligned*/
line-height:1.563em;/*not really necessary, but in this specific case it vertically centers the main link text*/
overflow:hidden;/*making it more bulletproof*/
padding:0;/*remove the padding that was applied above*/
}
.nav ul {
padding-top:1.563em;/*persistent background trick*/
margin-top:-1.563em;/*persistent background trick*/
}
.nav ul ul {
position:relative;/*so that it can be moved top/left*/
top:-1.563em;/*this is the sole reason why the main links must have a fixed height*/
}

/*WIDTH (!IMPORTANT)*/
/*change each width value below, else the dropdown will stop working (:hover will still work in modern browsers because of the opera fix)*/
/*set the link width here*/
.nav .link,
.nav a {
width:9em;/*same as width*/
}
.nav ul li {
/*force ie8 to float-drop*/
max-width:9em;/*same as width*/
}
/*set the sublink left shift width here (same as width)*/
.nav ul ul {
/*move the sublinks to the side, so they dont overlap*/
left:9em;/*same as width*/
}
.nav li.reversed ul {/*reverse the direction of sublinks for the last dropdown*/
left:auto;
right:9em;/*same as width*/
}
/*add the negative value of "width - 1px" here (because css can't do math)*/
/*or (width - 0.063em) where 0.063em is 1px on 16px base size*/
.nav a {
/*makes the links very thin, so that the sublinks can hide inside the main link*/
margin-right:-8.937em;/*make this width - 1px*//*or width - 0.063em*/
}

/*Dropper Dropdown*/
/*supports up to 4 sub-levels in IE5-7, more can be added*/
/*modern browsers already support any amount of sublevels*/
/*made by Timo Huovinen*/

How it works:

Same as the simplified dropdown but i have nested the dropdowns, now any link hovered withing the dropdown expands, causing a float drop for every level

Info:

This dropdown was created because of my hate of javascript based dropdowns.
This dropdown serves to proove that it is indeed possible to create a true css only dropdown.
It took about a month to make the dropdown (from idea to reality), and a week to simplify it with the help of Paul and another week to make it multilevel.
And another several months to reach it's current state.
It was also featured as a quiz on Paul's CSS quizzes on Sitepoint (my forum's alias is YuriKolovsky).

Terms of use:

The software referenced within this license is distributed free of charge and free from any warranty. It may be used freely for any purpose whatsoever. The author created and released this work because he is genuinely a Nice Person!

The author sincerely hopes that end users enjoy and appreciate the hard work that went into creating it, and would appreciate being referenced in future modifications of the code since it was based on the author’s original concept and work.

Users are nonetheless encouraged to provide reciprocity whenever possible as it provides positive reinforcement and encouragement to the author. Furthermore, the minimum reciprocation I ask is to leave a ‘thank you’ comment in the area below: