Comments on: Make a Mega Drop-Down Menu with jQuery

By: Samuel

Samuel — Mon, 08 Jun 2009 16:48:24 +0000

Anyone know how to set the width for each element? I want to add a bg image to each link but it gets cut off by the lenght of the text i have in each .

By: jj

jj — Fri, 05 Jun 2009 09:28:58 +0000

I can only assume that the example design given was dictated by not being able to remove top margins from the UL.

I like the menu but it does mean it cannot be slotted nicely into any other design without allowing for the 20px top margin.

By: drale

drale — Thu, 04 Jun 2009 20:01:10 +0000

Sojan80,

I put an ID on the last two items that go off the screen and gave them negative left positioning. However I can’t get the right side of the drop down to be lined up with the right side of the menu item in both IE and FF. I line it up in one browser, its off by a few pixels in the other.

By: vkelman

vkelman — Tue, 02 Jun 2009 00:24:34 +0000

I only know that Office 2007 menu is awful. It’s a major step back from a standard and simple Office 2003 menu. Really hard to find what you need, you never sure which main menu bar link to click. My daughter told me to uninstall Office 2007 from her machine because she cannot find anything. If “mega” menu is something like that, I strongly disagree with usability guru Jakob Nielsen. The less pictures and other unnecessary graphical elements are in a menu – the better it is.

By: JJ

JJ — Fri, 29 May 2009 10:30:37 +0000

Two outstanding issues:

IE6 – menu stacks up if you zoom so is unusable.
ul margins: ul#menu has a white-space margin top and bottom that I can’t get rid of so can’t integrate it into a design.
Setting ul#menu to margin:0 causes first top level link in the menu to ride up to top right of the box.

How do you fix the menu width and remove top and bottom margins?

By: ChrisJ

ChrisJ — Thu, 28 May 2009 08:34:39 +0000

People: Don’t whinge about the menu ‘timing’ and other minor ‘issues’… Just adapt the code supplied to fit your requirment.
Raena toom the time to give us a tutorial… Take the time to make it work for your ‘real world project’ and if you can’t be bothered to be creative and learn how to write/customise something for yourself then you should probably give up web design/development and go be a postman/mailman (or woman) instead… its the easy life you crave (and yes I have worked in mail delivery so don’t bother trying to say it’s hard)

Thanks for the tutorial Raena… it was a good start point and INSPIRATION for my own learning. :)

By: aardvarked

aardvarked — Fri, 22 May 2009 10:18:14 +0000

CeeVee:

All you have to do is add some styling for the right attribute in your css, it’s just positioning. You will need a separate class or id for each one you want to move inwards and you will just have to play around with the right property until you get the correct position.

By: Joe

Joe — Thu, 14 May 2009 17:15:58 +0000

This menu immediately breaks and is unusable in IE if you zoom the text. The main links just stack up on top of each other. Unfortunately I didn’t find this out until I had spent several hours styling my sample menu.

No way this can be used as is on a real web site.

By: Jessica45

Jessica45 — Tue, 05 May 2009 01:00:03 +0000

CeeVee,
It worked on my site, but used it only once in the navigation panel. I didn’t use it for every button.

By: CeeVee

CeeVee — Mon, 04 May 2009 19:14:30 +0000

BTW, an example of what I am referring to and what I am trying to rectify can be found here:

http://asitv.com/jquery/menu6/

Rollover the Uniforms or Weapons pull down and you’ll see how the content doesn’t quite fit. Thanks again in advance to anyone who can help.