Hi all first post here be gentle lol!

 

Want I want to know is, is there anywhere that does tutorials for accessible menu's for example I would like to do a CSS tree menu but I have no clue where to start there but creating the list and bits of the CSS.

 

What it is that I want at the end of the day is a menu that expands downwards underneath the parent when the parent is clicks if you see what I mean!

 

If you can work out this gibberish help me please!

I understand, but I wouldn't try and 'create' one yourself - many people have tried, tested and redraft menus to get a good solution.

 

In a recent project, I used: http://www.htmldog.com/articles/suckerfish/dropdowns/ which was pretty lightweight, accessible and useful.

 

Previously I've used: http://www.easymenu.co.uk/ but for some reason a client's machine refused to display the dropdowns - but I could use them everywhere else, so in the end I'd to use the above version.

Andyroid,

 

Drop down menus aren't difficult, but it is quite difficult (i can't even think how) to do an on-click drop down. The current set of browsers doesnt have CSS support for click, and especially not for contextual click.

 

To create an onclick dd would need JavaScript.

 

For a mouseover dd, use a set of <ul> and <li>.

 

Something like this:

!!!!!!!
HTML
!!!!!!!
<ul class="menu">
<li><a href="#">home</a></li>
<li><a href="#">browse</a>
	<ul>
		<li><a href="#">mens</a></li>	
		<li><a href="#">womens</a></li>
	</ul>
</li>
<li><a href="#">help</a>
	<ul>
		<li><a href="#">who are we</a></li>		
		<li><a href="#">faq</a></li>
	</ul>
</li>
</ul>

!!!!!!
CSS
!!!!!!
ul, li	{ display: none; list-style: none; padding: 0px; margin: 0px; } /* hide the ul's, and remove padding, margin, bullets */
ul.menu	{ display: block; } /* show the top menu */

ul.menu li	{ display: block; width: 150px; } /* make them appear vertically */
ul.menu a		{ display: block; padding: 5px; color: #444; text-decoration: none; } /* style the links */

ul.menu li ul		{ display: none; } /* reinforce "sub is hidden" rule */
ul.menu li:hover ul	{ display: block; }/* make the mouseover occur */

ul.menu li ul 		{ position: absolute; } /* this rule makes the sub-items appear 'above' the top menu */

 

this is for a vertical cascading menu, i just wrote it from scratch so i havent tested it and it looks like ****.

just tested it, and yay, i am god... it worked straight away.

 

however, just tweaked it so its styled a bit and the menus appear to the right of the parent:

!!!!!!
new css
!!!!!!
ul, li	{ display: none; list-style: none; padding: 0px; margin: 0px; } /* hide the ul's, and remove padding, margin, bullets */
ul.menu	{ display: block; } /* show the top menu */

ul.menu li	{ display: block; width: 150px; } /* make them appear vertically */
ul.menu a		{ display: block; padding: 5px; color: #444; text-decoration: none; } /* style the links */
ul.menu a:hover, ul.menu > li:hover > a	{ background: #eee; }

ul.menu li ul		{ display: none;  } /* reinforce "sub is hidden" rule */
ul.menu li:hover ul	{ display: block; margin-left: 70px; margin-top: -20px; background: #fff; border: 1px solid #444; }/* make the mouseover occur */

ul.menu li ul 		{ position: absolute; } /* this rule makes the sub-items appear 'above' the top menu */

Thanks guys thats perfect!