jQuery Menu Question from Newbie

wmholt used Ask the Experts™

I am a SharePoint developer and I have a client that wants to use a jQuery horizontal menu at the top of the UI.  I have only done a couple of things with jQuery before, so I would consider myself a jQuery newbie.

On the horizontal menus that the client has liked on other sites, there are usually three or four tabs across the top, and selecting one of the tabs displays an HTML snippet that appears to be part of the tab. Selecting the next tab displays another HTML page/snippet.

When I look at the source on these pages, it appears that they use jQuery, jQuery UI, or Superfish. Being unfamiliar with the open-source tools and components, I need recommendations about what set of tools I should pursue.  

I plan to do more research, but I am in a hurry at this time and need to present a proposal for the design tools we are going to use this next week.

The web pages using these menus in SharePoint are rather sophisticated examples, but they illustrate what my client is talking about:



I'd appreciate your recommendations on how to accomplish at the least the basic functionality of these horizontal menus using jQuery.  Specifically, what tools you recommend.  Any comments about SuperFish, when it is used, and the drawbacks involved, as well as whether the jQuery UI "tabs" functionality is recommended.  


William Holt

Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
I have extensive experience with jquery and have used both the add-on libraries of UI and Tools.  I have not used Superfish.  

However, I don't think UI, Tools will help you much here.  Looking at the Ferrari menu system, it was as I expected.  It's just good html markup and a small amount of jquery.  Although, to complicate things a bit for you, they appear to be using mootools.

However, if time is of the essence, I can give you a pretty simple framework that you should be able to punch up.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <title>Overlay Goodness</title>
    <script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
		html, body

			font-family: Arial, Arial Unicode MS;
			font-size: .95em;
			height: 100%;
			width: 100%;
			border: 0;
			padding: 20px;
			margin: 0;

		ul.mainmenu {list-style-type:none;}
		ul.mainmenu li {float:left;width:120px;border:solid 1px gray;position:relative;}
		ul.mainmenu li a {text-decoration:none;width:100%;display:block;text-align:center;}
		.submenu {display:none;border:solid 1px gray;padding:2px;width:100px;position:absolute;top:20px;}


	<ul class="mainmenu">
	   <li><a href="home.html" class="sub_link">Home</a></li>
	   <li><a href="ContactUs.html" class="sub_link">Contact Us</a></li>
			 <a href="Services.html" class="sub_link">Services</a>
			 <div class="submenu">
				  <p>This is a section of content that can be viewed under the main menu.</p>

			//set up the slide-down behavior for main menu items
					//hide all submenus
					//slide down the sub menu

					//slide up the sub menu




Open in new window

I should mention that while the above example relies on jquery tools library, I don't use any of the jquery tools methods.  My javascript is plain old jquery.


Hi skrile:

Thank you so much for that.  It really will save a lot of time.  I've looked at MooTools but didn't know what I was getting into with that.  :-)



Problem solved.
The UI and Tools libraries are great to work with.  They save a lot of time and are generally well supported and used by enough people that you usually don't get stuck with too much odd behavior.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial