Comments on: Attempting White House style navigation using jQuery and 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.

By: Pete

Pete — Wed, 02 Jun 2010 23:57:16 +0000

“When hovering over a main navigation item, a sub-menu normally appears below and to the right of it’s parent. What about if the parent was at the right-hand side of the screen?” I have been looking for a solution for this problem for days, and finally stumbled upon your solution, good work. I think you’re right, though, there’s probably a better / more efficient way to do it. If you do find a better solution, will you post here?

By: Dposorio

Dposorio — Fri, 28 May 2010 01:55:30 +0000

Thanks for commenting, visitor. I appreciate it. On the right/left thing, there’s probably a better way to achieve it, but thanks either way.