Is there a framework to create a navigation with dropdowns?

I’m working on a catalog website.

I would like to create a similar navigation system similar to:

Any idea of what framework to use? I’m working with HTML5. I’m not sure if i should use Divs or lists.

It’s not clear what you mean by “framework for navigation” :confused:

However there is popular “source code” you can learn from. If that’s what you meant, check out suckerfish (yup, that’s the name). It is the defacto standard for coding and styling dropdowns. It is also relatively simple to understand.

If what you were seeking was something that outputs navigation from a database (of dynamic content), then what you are actually looking for is a CMS ( WordPress, Drupal, Joomla!, etc). Once you have decided on the CMS , then you will need a theme or template (files which access the the CMS data and output the HTML) and then you can apply CSS ( see suckerfish) to style to your taste.

I’m working with HTML5. I’m not sure if i should use Divs or lists.

SEMANTICALLY speaking a navigation is a list (UL) of links. HTML5 allows you also to wrap that in a NAV tag, so as to add semantic meaning. Alternatively, you can also use <ul role=‘navigation’></ul>

Thanks for suckerfish. but the behavior i’m looking for is, you click on a h2 link and it will then expand and show links below it. i guess more like a tree style navigation.

1)Suckerfish IS a tree style navigation. And the Semantically correct way of navigation to boot.

  1. there is nothing stopping you , if for some reason (and I hope it’s a good one) you put the H2 within the LIs : <li><h2><a href=“#”>Menu Item</a></h2></li> or if they dont lead anywhere directly: <li><a href=“#”>Menu Item</a></li> But I really do hope you dont intend to do this to cheat Google ( they WILL get PISSED and you will suffer for it!)or simply because of the way the H2 looks ( you can style ANY tag via CSS, that’s what CSS is for)

  2. The only thing you CAN’T do is the CLICK thing ( actually there is a pure CSS3 trick, however it is not semantically correct AND it since it uses CSS3 it will limit your browser support. What you are describing, I think, falls under FUNCTIONALITY, and that is the real of javascript.

jQuery + some CSS can help, tho adding a 180K likbrary to your site ONLY for toggling a menu seems excessive. Still this is the way you’d go about it, after linking the jQuery library, you’d do something like:



$(function() {
	$(".tabMenu h2").click(function(){
			$(this).siblings("ul").first().toggleClass('active');
         });
});

This makes the assumption that the root element of you menu has a class of ‘mainMenu’ and instead of using the rule li:hover ul{} to make things visible you would use .active{}. This is off the top of my head, some fine tuning would be required but that would be the GIST of it.

hope that helps.

thanks dresden. What are you throught on YUI treeview? I think we do want the interaction to feature a click but at the same time it should still work with screen readers. I’ll look into your jquery and css.

What are you throught on YUI treeview? I think we do want the interaction to feature a click but at the same time it should still work with screen readers. I’ll look into your jquery and css.

Tree view would work fine. Note that the markup is the same as SF, tho and the the .js functionality not much different from what I suggested. So the question really is : How big is your project?

We can break it down this way:

*Your entire navigation structure should be present , and properly marked up in the HTML.

*You you then use suckerfish for the dropdown presentation. The main styling difference is you probably dont need the float rules, as you dont want your menu to be horizontal, that easy. Also, instead of :hover you use a class to target ‘clicked’ items.

*You then use jQuery or .js to do some class switching on click.

There are many ways to hide content in CSS, but using Absolute Positioning ( as opposed to display:none; or height:0; + overflow hidden; ) yields the best SEO and screen reader results.

Essentially the default state of the drop down is {position:absolute; left:-999999em; } but I think the latest version of SF already incorporate this technique, which is why I didn’t mention it earlier. In other words, it will always be accessible to screen readers.

The thing is , if you go with treeview or any other frame work, you will be subject to its behavior, and its conventions. A navigation menu is far to simple and to pivotal to rely on an entire frame work to function. If you entire site relies on the YUI already, then fine, it was a labor saving device but for main navigation only?

There is one thing I also don’t like about many ‘cookie cutter’ frameworks. If you note that they work by toggling an active class ( I suggested this as well, but your accessibility question made think a little more). What if you had a regular user who has .js turned off?? then all the menus would be 'stuck shut" since ALL frameworks ( and my suggestion as well) rely on .js ( there is no way around it).

The thing is if you built your own menu you can collapse the menu when .js is active, so users without .js wont get the ‘click’ effect ( as ALL drop downs will be showing) but at least they will be able to navigate ) YUI or other rebuilt frameworks, dont seem to take this into account.



$(function() {
	$(".tabMenu h2").click(function(){
			$(this).siblings("ul").first().toggleClass('active');
         });
});

[/QUOTE]

How does a screen reader interpret the code you provided? A click handler for all the h2s?

you are missing a point about web design: the separation of content ( HTML) from style( CSS), from function (js) … generally speakin the 3 types of code work in tandem but do not ‘affect’ each other.

This is not 100% true across all UAs … which is the big reason developers get migraines , but its a general truism.

For example:
as long as you style (CSS) doesnt use “display:none;” it is read. So an item could be invisible and yet accessible, for screen reader for example.

The concept of a “drop down” for screen reader is a non sequitor. a screen reader reads the HTML of your document , in order , from top to bottom. Period (this is another reason why ALT tags in images are important, btw) . That how it is. Users can , of course , follow links… when the reader get to them… but there is no equivalent ‘visual’ navigation… you can “open an aural drawer” this is just not physically possible.

as far as my jQuery code… and the rest of your question. That is the BEAUTY of jQuery , aside from handling the cross-browser details, .jquery is just a library that aids in .js development; one way it does so is to let you select elements using notation similar to CSS ( seeing this yet?)

so: $(“.tabMenu h2”).click([B]function/B

ads a function… that is triggered on click to EVERY H2 that is a child of of any element with the class ‘tabmenu’ , from that point on you get to write the function… how easy or how complex you want it is up to you, and yes you can use even more jquery within that function

Since the H2 would always be followed by the menu list properly formatted code… In my example it’s one oversimplified line: $(this).siblings(“ul”).first().toggleClass(‘active’);
$(this). the clicked element ( not all elements just the clicked one)
.siblings(“ul”) make a list of all of the ULs that are siblings (children of the same parent) of the element clicked
.first()
.toggleClass(‘active’) ( if the return element HAS the class ‘active’ then remove the class, else add the class);

my logic could be off tho… maybe a better code might have been:

$(this).next(“ul”).toggleClass(‘active’) ;

from this point on you can use CSS ( by having a .active{} rule in your style sheet to show, color, reposition, your UL,
In other words you have 100% control of what you target and what i will do and how it will do it, almost as if you had written 100% native code.

I hope I have cleared thing up. :slight_smile:

whipped this up for you:

note the CLEAN HTML; thinking about it, I pondered if the H2 were semantically correct, it seems kinda a heavy empathis to put on a mere navigational item. So I replaced them with EMs.

Just for fun I added extra jQuery functionality ( note that you have FULL CONTROL to edit from the script, which was about 15 with spaces and comments!!!
Functionality desc.:

  1. items toggle
  2. items on same menu level close when another is open
  3. children close when parent is closed

<html>
	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="viewport" content="width=device-width">
		<style type="text/css">
		
.treeMenu   {margin:0; padding:0;  list-style: none;}
.treeMenu ul { padding-left:1.5em}
.treeMenu li {position: relative}
.treeMenu li ul  {position: absolute; left:-999999em}
.treeMenu .active {position: static }
.treeMenu em { margin:0; padding:0;}
.treeMenu{
overflow: hidden;
width: 150px;
background: #ccc;

}
.treeMenu em {  font-size: 100%; display:block; font-weight: bold; font-style: normal}


		</style>
<script type= "text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>	
<script type= "text/javascript"> 
$(function() {
 	$(".treeMenu em").click(function(){
 			theUL=$(this).next("ul");
 			toggleState=theUL.hasClass('active');
 			$('ul', $(this).parent().parent()).removeClass('active');// closes siblings
 			$('ul', $(this).parent()).removeClass('active');// closes children 
 			if (toggleState){
 					$(this).next("ul").removeClass('active'); 
 			}
 			else{
 					$(this).next("ul").addClass('active');
 			}
     });
});					
 					
 					</script>			
		
				<script type="text/javascript"> /* only load jQuery if not present & Google is down */
						if(typeof jQuery == 'undefined') {document.write("<script type=\\"text/javascript\\" src=\\"JS/jquery.min.js\\"></"+"script>");
						var __noconflict = true;}
				</script>	
		
	</head>
	<body>
 

									<ul class='treeMenu'>
										<li><em>therabbit prince</em>
											<ul>
												<li><a href="#">item 1</a></li>
												<li><a href="#">item 2</a></li>
												<li><a href="#">item 3</a></li>
											</ul>
										</li>

										<li><em>events</em>
											<ul>
												<li><a href="#">item 1</a></li>
												<li><em>item 2</em>
													<ul>
														<li><a href="#">sub 1</a></li>
														<li><a href="#">sub 2</a></li>
														<li><a href="#">sub 3</a></li>
													</ul>
												</li>
												<li><em>item 2</em>
													<ul>
														<li><a href="#">sub 1</a></li>
														<li><a href="#">sub 2</a></li>
														<li><a href="#">sub 3</a></li>
													</ul>
												</li>
												<li><a href="#">item 3</a></li>
											</ul>
										</li>
										<li><em>art</em>
											<ul>
												<li><em>item 1</em>
													<ul>
														<li><em>double sub</em>
															<ul>
																<li><a href="#">sub 1</a></li>
																<li><a href="#">sub 2</a></li>
																<li><a href="#">sub 3</a></li>
															</ul>
														</li>
														<li><a href="#">sub 2</a></li>
														<li><a href="#">sub 3</a></li>
													</ul>
												</li>
												<li><em>item 2</em>
													<ul>
														<li><a href="#">sub 1</a></li>
														<li><a href="#">sub 2</a></li>
														<li><a href="#">sub 3</a></li>
													</ul>
												</li>
												<li><a href="#">item 3</a></li>
											</ul>
										</li>
										<li><em>ramblings</em>
											<ul>
												<li><a href="#">item 1</a></li>
												<li><a href="#">item 2</a></li>
												<li><a href="#">item 3</a></li>
											</ul>
										</li>
										<li><em>links</em>
											<ul>
												<li><a href="#">item 1</a></li>
												<li><a href="#">item 2</a></li>
												<li><a href="#">item 3</a></li>
											</ul>
										</li>
										<li><a href="#">contact</a></li>
									</ul>
 	</body>
</html>


Yep you have. You have been extremely helpful :slight_smile:

finally my last question, what about keyboard navigation if i use jquery? i saw jquery accordion ui has it.

Sorry for the late reply.

Almost anything you can do with js, you can do with jQuery ( in fact, if you decide to go the jQ route, you might as well use it for everything… after all you are importing a whole library… so you might as well use it)

So a gain, if you want to add keyboard navigation , just write a key capture script using the jquery functions described in jQuery.com… then you can add navigation with YOUR CHOICE of keys ( even arrow/ tab, etc) , action, etc… and and apply to accordions or anything else you wish; it’s not limited to accordions :slight_smile: