logo
Welcome Guest! To enable all features please Login. New Registrations are disabled.

Notification

Icon
Error

Options
Go to last post Go to first unread
Erwin  
#1 Posted : Saturday, July 18, 2009 1:43:25 PM(UTC)
Erwin

Rank: Administration

Reputation:

Groups: Moderators, Administration, Member
Joined: 10/8/2008(UTC)
Posts: 44

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 navigation

Important: 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.

Wanna join the discussion?! Login to your Sienn Forum forum account. New Registrations are disabled.

Users browsing this topic
Forum Jump  
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.