Dyanmic horizontal navigation menu + dropdown

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Dyanmic horizontal navigation menu + dropdown

Post by Chris Corbyn »

See this: http://www.cssplay.co.uk/menus/dd_valid.html

It's *almost* exactly what I'm looking for, except that each item in the menu (DEMOS, MENUS, LAYOUTS, BOXES...) will not be a fixed-width :( Does anybody have any links to other menus like this which will also allow for variable-width menu items? The pull-down part will always be the same width as the box it comes from (like in this example) so that should make it easier.

By variable width I do not mean that I'll know what width it is neither... it'll just stretch to accommodate it's contents.

I have no issues with this depending upon JavaScript since it's just an interface enhancement, but it has to work in IE6/7 since that's what our clients are mostly using (god damn schools!).

Just thought I'd throw this out here in case someone else has any pointers.
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post by superdezign »

I've never successfully done it without a fixed width before. Maybe if you give the parent element a set padding, and the child a width of 100%.... Then again, the child has to be absolutely positioned in order to work, so that probably wouldn't work.

Not entirely sure if you can.
User avatar
AKA Panama Jack
Forum Regular
Posts: 878
Joined: Mon Nov 14, 2005 4:21 pm

Post by AKA Panama Jack »

Ick...

That's a horrible menu and it doesn't work in all browsers. Damned nasty...

I use a modified Suckertree dynamic menu. The original Suckertree CSS menu was fixed width but I changed it to allow for dynamic width on the level 1 menus. I did have the dropdowns dynamic width but things got dicey when you went to a third level selection. :)

I have a plugin for the next version of Template Lite that allows you to create dynamic CSS menus using the code but just haven't released it yet.

http://templatelite.sourceforge.net/

Here is a demo page for the Template Lite plugin...

http://templatelite_forums.aatraders.com/template_lite/demo/test.php

I know I posted about it two months ago but I have been busy with many other things the past two months. :?
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post by Chris Corbyn »

OK thanks for the tips guys :) I've decided that I'll simplify the issue a little after reading this. To clarify, we put a breadcrumb trail along the top of the window in our application. One of our clients wants each item in that trail to produce a tree-menu dropdown when you mouseover it, displaying all children of that page recursively. I think I'll take a halfway-house option and have the tree only one the "Start" item which is always visible and always in the same place, then have basic pulldowns on the others. This is almost what we have now anyway :)
Post Reply