Hierarchical nested categories navigation

[jimmyoneshot]

I have got a script which is able to create hierarchical categories infinitely and display them as items in a ul.

 

What I need now is to get these categories to appear in a hierarchical dropdown i.e. the user clicks a menu and the dropdown drops down, then the categories that don't have any children will simply be displayed whereas the categories that do have children will have an arrow pointing to the right and once hovered over all of their children will be displayed in a new menu with their children and so on a nd so forth. Very similar to the way the windows menu bar works except with more levels.

 

Basically I want it to function sort of like a spry menu bar except it can go down then across etc etc and any further categories and sub categories that are added in will be shown. Can anybody help me out with this or perhaps point me in the direction of a tutorial that helps to avhieve this effect.

 

Heres my code that creates them in an unordered list:--

 

<?php	

$link = mysqli_connect('localhost','','');
mysqli_select_db($link,'mydb');

$query = mysqli_query($link,'SELECT * FROM nested_categories');
while ( $row = mysqli_fetch_assoc($query) ){        
$menu_array[$row['id']] = array('name' => $row['name'],'parent' => $row['parent_id']);
}

function generate_menu($parent){        
$has_childs = false;        

global $menu_array;        

foreach($menu_array as $key => $value){                
	if ($value['parent'] == $parent){ 
                              
		if ($has_childs === false){                                

			$has_childs = true;                                
			echo '<ul id="categories">';                        
		}                        

		echo '<li>'. $value['name'];                        
		generate_menu($key);                        

		echo '</li>';                
	}        
}        
if ($has_childs === true) echo '</ul>';
}

generate_menu(0);

?>

[MMDE]

You don't really need help with php do you?

It sounds like css to me!

 

Just google css drop down menu!

[jimmyoneshot]

Well I assume it's a mix of javascript AND php i.e. combining my php with javascript or could this effect be achived without the use of javascript?

 

Because it's not just a straight drop down, it's a hierarchical dropdown I need.

[jimmyoneshot]

Here's a screenshot of the sort of thing I mean:-

 

http://www.flypig.co.uk/images/screenshots/dmenu.png

[ignace]

I have got a script which is able to create hierarchical categories infinitely

 

That may sound cool but your users will either 1) ignore your website (we don't want to graduate from your website) or 2) stop bothering after they see a third fly-out menu with sub-navigation.

 

Your only concern in whatever you build: USABILITY + google doesn't like websites with too many links on one page

[jimmyoneshot]

Yes but there may not actually be that many categories/sub-categories and there may in fact only be a couple. I simply need to provide thecapabilitiy for the owners of my site to add in as many categories and sub-categories as they want. That's up to them.

 

I have created this functionality but my problem is implementing it into a hierarchical menu similar to the one is this screenshot i.e. down AND across:-

 

http://www.flypig.co.uk/images/screenshots/dmenu.png

 

Can you help me out ignace? I assume javascript would be required for this to mingle into my code? Problem being I've never used it. Do you know of any similar solutions elsewhere that could be applied to the code I currently have?

[ignace]

There's no need for javascript:

 

http://www.cssplay.co.uk/menus/dd_valid.html

[jimmyoneshot]

There's no need for javascript:

 

http://www.cssplay.co.uk/menus/dd_valid.html

 

Thanks Ignace. That does indeed look like the sort of thing I'm after. I found this example done in JavaScript:-

 

http://jdsharp.us/jQuery/plugins/jdMenu/

 

However it is very very coding heavy especially for me considering I am only just starting JavaScript. I never realized such a seemingtly common function would require so much code to be implemented through JavaScript. This is why I love using Flex over HTML as such components are already built in more or less.

 

If I can implement your example that would be perfect.

 

The only thing I'm wondering about your example is if it can be used infinitely or not as I've noticed in your example it only goes 2 levels deep i.e. if you hover over 'DEMOS' a submenu pops up then if you hover over 'Hover/Click' in that menu another sub menu pops up. I'm wondering if it's able to make them submenu items have submenus of their own so on and so forth. I'll give it a try and see what I can come up with. Thanks my friend.