jQuery jQuery Combination Menu NOT working

Psionicsin · 01-24-2011, 06:18 PM

I can't figure out what I'm doing wrong with this menu.

I'm trying to integrate this jQuery menu: http://javascript-array.com/scripts/...rop_down_menu/

Into the jQuery menu that I already have established: http://rutholsonphoto.com/rop_testbuild/index.php

...but it's coming out disastrous, and I haven't a clue as to where my problem lies.

The original menu that I was using made the names of the menu's flip backward to a darker text on a lighter colored background. The secondary one was supposed to add drop down functionality to 3 of those menu titles.

Instead it's breaking the styling and forcing everything to be text and to the top-left of the page.

Psionicsin · 01-26-2011, 04:01 PM

Anyone at all, or did I leave out some information that you guys need?

SB65 · 01-26-2011, 06:47 PM

Looked at your linked page and I don't see what you describe - "At a glance" and "About us" etc flip over in the way you describe, but I don't see any broken styling.

Or....is "About Ruth" and "About the staff" the dropdown? If so, then your html is wrong - you have:

Code:

<li>
   <a class="hovermenu" href="#" style="margin-top: -29px;">About Us</a>
   <a class="normalmenu" href="#">About Us</a>
</li>
<ul>
   <li><a href="#">About Ruth</a></li>
   <li><a href="#">About the Staff</a></li>
</ul>

which should be nested:

Code:

<li>
   <a class="hovermenu" href="#" style="margin-top: -29px;">About Us</a>
   <a class="normalmenu" href="#">About Us</a>
   <ul>
      <li><a href="#">About Ruth</a></li>
      <li><a href="#">About the Staff</a></li>
   </ul>
</li>

Try fixing that first.

Psionicsin · 01-27-2011, 01:21 AM

EDIT:

I see what I was doing wrong. I didn't even realize that I had my ul's outside of their respective li's.

But although that's solved, I'm still not getting drop-down functionality.

SB65 · 01-27-2011, 07:35 PM

OK, there's a few things wrong.

Try removing overflow:hidden from #header, and the height setting from #jsddm. With these the dropdowns will always be hidden. The dropdowns are then visible, but your design breaks.

Take the top margin off #navcontainer, that fixes your design somewhat.

Not sure what you want to happen with the top level, but probably not as it now appears...

Psionicsin · 01-29-2011, 11:55 PM

Quote:

Originally Posted by SB65

Try removing overflow:hidden from #header, and the height setting from #jsddm. With these the dropdowns will always be hidden. The dropdowns are then visible, but your design breaks.

And this is what I can't have happen, but I'm not aware of a remedy to fix this as the flip menu wasn't developed by myself.

Quote:

Originally Posted by SB65

Not sure what you want to happen with the top level, but probably not as it now appears...

The titles should flip backward (via the animation already seen), and a dropdown menu should appear also (IF it is tagged to for dropdown function).