Web Site Menu

[inventikon]

Hello All,

I would like to build a menu like the one from Huawei.com

I saw something similar on some other web sites too. Does anyone know if there is a script or how to get something like that running?

Thank you.

Best Regards,
Ovi

 

[ronaldroe]

There are probably so jQuery scripts out there. They seem to be using a script called SSNavigationScript. I can't really find any information on it. Thing is, though you don't really need jQuery to do that. You can do it with CSS. Go here: http://www.webdesignforum.com/15191-css-only-dropdown-menu.html

Then, just put divs inside the list items on the dropdown part. If you want to add transitions, just use CSS3 transitions. That way, users with javascript off still get navigation.

 

[LeeHarris]

Its best to use jquery for a menu like this. You can use css3, but you will have cross browser compatability problems.

Download the latest version of jquery - http://jquery.com/ and then set up a custom jquery file and insert something like this to animate your drop down:

$("#nav li ul").css({display: "none"}); // Opera Fix
	$("#nav li").hover(function(){
        $(this).find('ul:first').css({visibility: "visible",display: "none"}).show(200);
        },function(){
        $(this).find('ul:first').css({visibility: "hidden"});
        });
}

Have fun ;o)

 

[ronaldroe]

Its best to use jquery for a menu like this. You can use css3, but you will have cross browser compatability problems.

I see your point here, but we've had this conversation before on here. I'm not one to cater to the "JavaScript turned off" crowd, but they would have zero navigation under those circumstances. CSS2 pseudo-selectors can get the basic job done, and are fully cross-browser compatible. From there, you can sprinkle some CSS3 goodness on top for compliant browsers.

My thought if you're hooked on the JS idea would be to wrap a linked stylesheet in <noscript> tags, and have that stylesheet contain the necessary CSS to make the navigation at least work.