CSS Dropdown menu for the header- With Categories!

[mauryg]

jettrue,

I have been experimenting with your drop down menu for a while and really like it.
I have a request for future development. I use a lot of EZpages and it would be very useful if the "chaptered" pages could be put into a second level flyout. In other words, if the first page in a chaptered set would appear in the drop down and the other pages would be in a flyout. I can see there might be a problem since zencart doesn't really distinguish between the first and other pages in the set, except by sort order. Or would it be better (easier) to clone the drop menu for the Define Pages and do it manually?

Maury

[jettrue]

Or would it be better (easier) to clone the drop menu for the Define Pages and do it manually?

Maury

That's what I would do. :-)

[threddies.com]

Maybe there's something wrong with me that I can't figure this out...

On the example site (http://www.zencart137.jadetrue.com), under "Testing Category 2", you can access 2 levels of subcategories.

I need to do the same thing.

However, when I try making another unordered list within another, nothing displays right...

What's the secret?

[jettrue]

Maybe there's something wrong with me that I can't figure this out...

On the example site (http://www.zencart137.jadetrue.com), under "Testing Category 2", you can access 2 levels of subcategories.

I need to do the same thing.

However, when I try making another unordered list within another, nothing displays right...

What's the secret?

I'm confused.... the drop down menu is automatic... as you add subcategories, that subcategory will show up automatically.... I think I'm misunderstanding you.

[threddies.com]

If I use the structure that is provided and just plug my info in, everything looks and works correctly. No problem.

If I try to add in a sublevel under a sublevel, all I get is plain text. It does not display as a link, and the text itself does not pop out of the 1st sublevel - it displays layered on top of it.

This is what I'm doing:

<!--Insert your links here-->
  <li><a href="#">1st Set of Links</a>
    <ul>
      <li><a href="testing sublevel">testing sublevel</a>

    <ul>
      <li><a href="testing subsublevel">subsub level</a>

</li></ul>
      <li><a href="Link 12">Link 1.2</a></li>
      <li><a href="Link 13">Link 1.3</a></li>
    </ul>
  </li>

I appreciate your help!

[jettrue]

If I use the structure that is provided and just plug my info in, everything looks and works correctly. No problem.

If I try to add in a sublevel under a sublevel, all I get is plain text. It does not display as a link, and the text itself does not pop out of the 1st sublevel - it displays layered on top of it.

I appreciate your help!

No, you're not giving them the correct styles. View the source of the site to see the styles that are applied within the drop down menu.

It should be like this:

<li class="submenu"><a href="link.htm">MAIN DROP DOWN</a>
  <ul class="level2">
    <li class="submenu"> <a href="link.htm">First Under Drop Down</a>
      <ul class="level3">
        <li class="submenu"> <a href="link.htm">Sub under First Drop Down</a>
          <ul class="level4">
            <li> <a href="link.htm">Sub Sub Under First Drop Down</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</li>

[rgeorgiou]

Hi All,

I've removed various items from the drop down menu by removing lines from the tpl_drop_menu.php file.

All is now great accept that my menu is now left justified. I need it to be in the centre. I know I've bugger*d something up but for the life of my I can't work out what.

I'm a total mupet when it comes to php so please be gentle with me!

Here's a link to the page in question. www.lastrap.co.uk/shop

Best regards
Richard Georgiou

[jettrue]

Hi All,

I've removed various items from the drop down menu by removing lines from the tpl_drop_menu.php file.

All is now great accept that my menu is now left justified. I need it to be in the centre. I know I've bugger*d something up but for the life of my I can't work out what.

I'm a total mupet when it comes to php so please be gentle with me!

Here's a link to the page in question. www.lastrap.co.uk/shop

Best regards
Richard Georgiou

All you did was mess up the commenting out of the colors.

the top of the file should look like this:

body {
behavior: url(includes/csshover.htc);
}

/*green
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover {color: #4f4f4f!important;background:#D5E88F;}
*/

/*blue*/
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover, div#dropMenu ul.level2 a:hover {color: #ffffff!important;background:#6C99D9;}

[rgeorgiou]

My word, what amazing speed you reply with, and what accuracy...

You'd never get that quality of service with a commercial product.

In your debt
Richard Georgiou

[mauryg]

Jettrue,
I wouldn't have thought of that, but then it's your mod. I was able to correct the shift problem by modifying the CSS:

stylesheet_header_menu.css (line 41)

div#dropMenu ul.level1 {background:#4F4F4F none repeat scroll 0%;
float:left;
margin:0pt auto;
text-align:center;
width:70em;
z-index:1000;
}

change to:

div#dropMenu ul.level1 {
background:#4F4F4F none repeat scroll 0%;
float:left;
margin:0pt auto;
text-align:center;
width:54em;
z-index:1000;
padding-left: 16em;
}

Looks even better when you remove the "|" separators from the menu. Of course, you would have to play with the numbers if you added more items to the level 1 menu.

Any comments on this approach?

Maury