My Site Menu

This could rightfully go under several different technology listings, but I think the bulk of the cool stuff is done in javascript, so here we are. As a developer and avid net user, I know how important a website's navigation can be. It is one of the most notable things about any given site, as it is one of the few parts with which users are FORCED to interact. To that end, I set out to create a simple, attractive menu so that curious users could explore this meager little site of mine. The site itself is built in .NET, so right off the bat, I have that in my tool kit. That would probably be sufficient, but I wanted something a little slicker. Thus I've thrown in a touch of javascript, and some strategic use of CSS to make what I feel is an elegant menu. I scoured the net for ideas and with the right combination of borrowing and tweaking, came up with what you see over there on the left. And now, I'm gonna teach you how to do it too.

Source

Right off the bat, I'll just give you all the files you'll need to re-create this project yourself. You'll have to do the server-side stuff yourself, but all of the jQuery, HTML, and CSS you'll need is right here in this handy project file. Go to town!

• The MeadMiracle Menu Project

Credit Where Credit Is Due

As I stated above, a lot of this is borrowed. What I am documenting here is the combination/tweaking of what I found. Here is a list of sources for things that I used to create this menu:

• Bedrich Rios' article "How To Create A 'Mootools Homepage' Inspired Navigation Effect Using jQuery"
  A substantial portion of this menu design came from Bedrich's tutorial, so he deserves a substantial portion of the credit.
• Jesus Carrera's Collapsor jQuery Plug-in
  This is employed to create the open/close effect for the sub-menus. This is an excellent plug-in which I strongly recommend.

HTML Structure

Let's start with the HTML structure. Now, since I'm using .NET, I have some handy tools available to me out of the box, like XML site maps, SiteMapDataSource controls and repeaters to generate all the structure for me. That part isn't very interesting, because it's all pretty generic, out of the box functionality. Maybe if a bunch of people contact me and say "What's the deal, how did you do this?!?" I'll write about it, but for now, I'm just going to show you the HTML result:

This is the rendered menu code for this page. There two bits of fancywork that go on behind the scenes. The first is that the code-behind determines where to stick the little green arrow image. This is a simple matter of matching the link URL with the URL of the current request. The second (and more important for the overall menu functionality) is determining what classes go where. Each <li> gets a "sliding-element" class, which is easy. The important ones are the "activePage" and "selectedSlider" classes. The "activePage" class is applied to the menu item that matches the current page, done at the same time that the arrow is inserted. The truly important bit is applying the "selectedSlider" class to a main menu item that contains a link with the "activePage" class. Actually doing this is fairly trivial, but it is important that it happens. This class is how the menu knows to load that menu portion as open.

The CSS

Being a functionality developer, I usually find the CSS portion of a site to be the least interesting. However, it is infinitely important to the end user as it defines how the user will see the site. That out of way, here are the important CSS rules for my menu:

Nothing super fancy here, at least not to my mind. The menu itself is just a nested <ul>, so it's really just a matter of re-styling the list items. <h3> tags in list items are given a light background, while links are given a darker background. The link for the current page is turned green, while links for an open sub-menu and hovered-over links are turned yellow. One thing that is critical is to use margin-left to indent the sub-menus, NOT padding-left. Because the IE box model is different from every other browser, using padding instead of margin will cause the menu to indent differently in IE. If the sub-menu is indented too far, it might push into the content when the pop-out animation is performed, causing the content of your site to be pushed over as well. Other than that, you can tweak this portion without really affecting the functionality of the menu.

The jQuery (a.k.a. The Meat)

This is where all the fancy work happens. From this point on, almost all of the work is done by two jQuery plug-ins:

• The Collapsor plug-in (borrowed from Jesus Carrera)
• The Slider plug-in (created by me, adapted from Bedrich Rios' "sliding_effect.js" script)

With jQuery and these two plug-ins on your side, here is all the code that you will need to create your slick menu:

There is A LOT going on here, so let me explain. First, we select all of the links in sliding elements in the menu. Next we perform both plug-in functions on these elements, both with just the default settings. Finally, we filter down to the "selectedSlider" (which there should only ever be either 0 or 1 of), select the <ul> that follows it (which should be the nested list related to it) and show this list. This last part is to cause the nested list to default to open if we happen to be on a page stored in it (as we are now).

Collapsor

This particular bit is probably best explained by Jesus Carrera's documentation of his own plug-in. Essentially, what it does is finds <ul>s nested within other <ul>s and hides them. It then makes the <li> within which the sub <ul> is nested a trigger to show/hide the nested list. There are also some options which allow you to do things like set the show/hide speed, and designate the element to look for as something other than <ul>s. For my purposes though, the default settings were quite adequate.

Slider

Here's where the bounce-out effect of the menu comes from. As stated at the beginning, I borrowed heavily from Bedrich Rios' article "How To Create A 'Mootools Homepage' Inspired Navigation Effect Using jQuery" to create this plug-in. His script has the menu bounce in when the page loads, but I didn't care for this effect, so I removed it from my plug-in. If you think you might want it, visit Bedrich's article and check his original script to see how to implement it. The main effect of this plug-in is to add an animation effect to all selected elements. These elements are assumed to be anchors, but there is nothing explicitly preventing them from being something else. The animation effect is a simple one, adding some extra padding to the element when the mouse hovers over it, and resetting the padding to normal when the mouse moves away. My unique addition to this (other than converting it to a plug-in) was to allow for elements that should remain extended when they are clicked. This is achieved by searching for anchors whose "href" attribute end with a string that designates them as menu roots. By default this is "#", but can be changed through the settings. Additionally, the plug-in searches for menu items that should begin as extended, allowing it to interact with the Collapsor plug-in to create the sub-menu effect.

Slider Settings