Comments on: Attempting White House style navigation using jQuery and Superfish

By: Good

Good — Fri, 09 Mar 2012 22:45:05 +0000

hi, good tutorial, Im updating the styling and look of my menu and this was helpful!

You might want to check out your site here:

http://nwfco.org/

There are some little things you might want to check into on the front page not quite right (Im on firefox).

Thanks

By: Andrew

Andrew — Mon, 20 Feb 2012 16:43:03 +0000

That’s a great article! I have bookmarked it for future reference. I’m playing around with Mojo Portal. It’s a .Net based CMS with support for superfish.

By: Dposorio

Dposorio — Tue, 10 Jan 2012 02:57:43 +0000

Thanks for the feedback Francis!

By: Francis

Francis — Fri, 06 Jan 2012 04:03:10 +0000

Ahh just what I need. I’ve been looking for an easy tutorial on how to mimic whitehouse.gov’s top navigation menu.

After completing a website from a client project, they wanted more and saw whitehouse.gov. Oh well, clients are the lifeblood in business so I’m excited to try this out!

Will let you know and link your site to my site. Thanks for sharing Dposorio!

By: Dposorio

Dposorio — Wed, 07 Dec 2011 04:02:35 +0000

Hi Kristen,

Adding the 3rd level menu item shouldn’t be so bad. It would all be specified in the style sheet.

– You would not comment anything out before line # 9 as shown after example 2 in the post.
– You would still apply “background: none;” as shown after example 3.
– You’d just make sure that any left padding or left margin applied on 3rd ul was in line with its parent ul.
– And you’d set the “font weight: bold” on the 2rd, but not the 3th ul.

By: Kristen

Kristen — Tue, 06 Dec 2011 15:06:52 +0000

In your example you hid the 3rd and 4th level menus, but what if I want them to display as they do on whitehouse.gov (where the 2nd and 3rd level items appear in the same dropdown menu; the 2nd level items are bolded whereas the 3rd level items are not)?

By: Istemci

Istemci — Mon, 10 Jan 2011 16:33:02 +0000

I think, there is no need to use Superfish and Superfish's complex CSS for to create a menu like whitehouse.gov. It can be done easily with using couple of JQuery code and simple CSS. An that simple JQuery code can solve the align of right items problem itself. Tested on Opera, Firefox, Chrome and IE8. Check this out.


 
 


#main-menu, #main-menu * {
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-family: Georgia;
}
#main-menu {
	background-color: #185087;
	width: 100%;
	float: left;
	font-size: 12px;
}
#main-menu li {
	border: none;
	display: block;
	float: left;
}
#main-menu a {
	color: #eee;
	text-decoration: none;
	padding: 7px 39px;
	display: block;
	font-weight: bold;
}
#main-menu li.hover a {
	background-color: #fff;
	color: #185087;
	border-top: 3px solid #bd1e12;
	padding-top: 4px;
}
#main-menu ul {
	width: 500px;
	display: none;
	position: absolute;
	z-index: 10;
	border-bottom: 3px solid #bd1e12;
	background-color: #fff;
	padding: 5px 0;
}
#main-menu li.hover ul li {
	width: 250px;
}
#main-menu li.hover ul a {
	color: #185087;
	border: none;
	font-weight: normal;
	text-decoration: none;
}
#main-menu li.hover ul a:hover {
	text-decoration: underline;
}





	
		BLOG
	
	
		PHOTOS & VIDEOS
		
			Photo Galleries
			Live Streams
			Video
			Podcasts
		
	
	
		BRIEFING ROOM
		
			Photo Galleries
			Live Streams
			Video
			Podcasts
		
	




$(document).ready(function(){
	var menu_item_length	= $('#main-menu>li').length;
	$('#main-menu>li').each(function(i) {
		if (i>(menu_item_length/2))
			$(this).find('ul').css('margin-left', $(this).width()-$(this).find('ul').width());
	});
	$('#main-menu>li').hover(
		function() {
			$(this).addClass('hover');
			$(this).find('ul').css('display', 'block');
		},
		function() {
			$(this).removeClass('hover');
			$(this).find('ul').css('display', 'none');
		}
	);
});

By: Dposorio

Dposorio — Thu, 03 Jun 2010 05:17:13 +0000

No, I haven’t come across Supposition before. I wish I had played with it from the start. Thanks for sharing!

By: Pete

Pete — Thu, 03 Jun 2010 04:40:09 +0000

I use a CMS that also assigns unique IDs to everything but doesn’t publish those ID’s on the frontend so it does make your solution difficult to implement using that CMS.

Not sure if you’ve already seen this…

http://users.tpg.com.au/j_birch/plugins/superfish/supposition-test/index.html

… but it looks like work on it has stalled since 2008.

By: Dposorio

Dposorio — Thu, 03 Jun 2010 01:22:57 +0000

Hey Pete – yes, of course, I’ll post a better solution if I find it. And, thanks for the feedback. I’m currently working this into a custom WordPress theme. Luckily, WP assigns unique IDs to everything, including top-level menu items. This makes implementing this somewhat awkward solution easier.