Creating an Ul Li DropDown menu (UL-DD)
This document is created with this menu as a base:
http://www.htmldog.com/a...es/suckerfish/dropdowns/ It’s basic HTML and CSS, basically no javascript. There is only a tiny bit of javascript needed for IE6 and below, because IE6 and below doesn’t understand the pseudo hover class on other elements then A.
What to do:We are going to build a default 2-level DropDown. It’s going to drop DOWN from Top.
Start with putting the
Menu Ul Main to a TD or a DIV in the webcreator.
To that
Menu Ul Main you put an
Menu Ul Sub.
Now we have build a 2 level structure in the webcreator.
Of course as with every item in the webcreator, you give the 2 menu items an understandable classname. For example
ddtoptobottom. If we give it this classname, the webcreator will automatically add “main” to it, so the classname will be in your source:
ddtoptobottommain!! If you use an XHTML 1.1 doctype, remember that your CSS is case-sensitive. !!There is one thing special; you also have to give the
Menu Ul Main an
id. This is needed for the javascript later on. We give it the id
navigationImportant: put on the
menu ul main al submenu’s open (otherwise they don’t appear if you hover over them).
We are going to use a separate Free CSS in this web-template. This part is needed for the actual dropdown/move part. We are not going to use it for the design/makeup of the menu-items themselves.
Give the Free CSS a understandable name, so you’ll know it is used for your UL-DD.
The Free CSS part is going to look like this:
Code:
.ddtoptobottommain, .ddtoptobottommain ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
}
.ddtoptobottommain a {
display: block;
width: 128px;
}
.ddtoptobottommain li { /* all list items */
float: left;
/* width: 128px; Put this in the webcreator at the li-Item-Link of the Menu Ul SUB otherwise it will inherit it constantly */
}
.ddtoptobottommain li ul { /* second-level lists */
position: absolute;
width: 128px;
left: -999em; /* using left instead of display to hide menus because display: none isnt read by screen readers */
margin-left: 0px;
margin-top: 0px;
}
.ddtoptobottommain li ul ul { /* third-and-above-level lists */
margin: -1.2em 0 0 -10em;
}
/*Show the submenu DIRECTLY INSIDE the selecte LI tag*/
.ddtoptobottommain li:hover > ul {
left: auto;
}
.ddtoptobottommain .sfhover{
left: auto;
}
li.sfhover ul {
left: auto;
}
/*Fix for IE7*/
.ddtoptobottommain li:hover {
position: static;
}
This following code will Drop your Submenu items to the left: (and of course you know what to do to drop them to the right, just put the margin-left and top to a positive value.)
Code:. ddtoptobottommain li ul { /* second-level lists */
position: absolute;
width: 128px;
left: -999em; /* using left instead of display to hide menus because display: none isnt read by screen readers */
margin-left: -124px;
margin-top: -30px;
}
And this will sort out everything for those browsers that fully support the :hover pseudo class, but for IE6 and below we need to implement a little trick:
The javascript:
TIP: put it in the global javascript file of your website, so it is always accessible. This file can be found at
DEVELOPMENT > Global Functions > Global javascript file.
Code:
sfHover = function() {
var sfEls = document.getElementById("navigation").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
After this it’s is designing your dropdownmenu. You have to do this in the webcreator. And remember, if you do something, and you see no effect, don’t forget to delete the code you just added, otherwise you will get lost in the code.
One thing which is very important is inheritance. Be sure you know what inherits what. For more information check this website (http://www.htmldog.com/articles/suckerfish/dropdowns/ ), and the links to other CSS-info-pages on it.
That’s it, good luck!
I'm only human, so if I made any errors, please tell me, I'll correct them.