CSS Dropdown menu for the header- With Categories!

[Still Crazy]

Me Again!

I would like to add a manufacturers list to the drop down menu such that each manufacturers products could be listed in a similar manner to the categories drop down.

I could add the new category in the HTML:

<li class="submenu">MAMUFACTURERS</a>
  <ul class="level2">
    <li><a href="index.php?main_page=index&amp;cPath=2">This Manufacturer</a></li>
    <ul class="level3">
        <li class="submenu"> <a href="index.php?main_page=index&amp;cPath=4">Product 1</a></li>
        <li class="submenu"> <a href="index.php?main_page=index&amp;cPath=4">Product 2</a></li>
        <li class="submenu"> <a href="index.php?main_page=index&amp;cPath=4">Product 3</a></li>
      </ul>
    <li class="submenu"><a href="index.php?main_page=index&amp;cPath=3">That Manufacturer</a> 
      <ul class="level3">
        <li class="submenu"> <a href="index.php?main_page=index&amp;cPath=4">Product 1</a></li>
        <li class="submenu"> <a href="index.php?main_page=index&amp;cPath=4">Product 2</a></li>
        <li class="submenu"> <a href="index.php?main_page=index&amp;cPath=4">Product 3</a></li>
      </ul>
    </li>
  </ul>
</li>

But longer term that would be difficult to maintain. I had hoped to be able to assign products to manufacturers in some way rather than input each one individually, and the whole menu be built dynamically.

So, what is the best "Zen like " way to do this?

Many thanks!

[jettrue]

Me Again!

I would like to add a manufacturers list to the drop down menu such that each manufacturers products could be listed in a similar manner to the categories drop down.

I could add the new category in the HTML:

<li class="submenu">MAMUFACTURERS</a>
  <ul class="level2">
    <li><a href="index.php?main_page=index&amp;cPath=2">This Manufacturer</a></li>
    <ul class="level3">
        <li class="submenu"> <a href="index.php?main_page=index&amp;cPath=4">Product 1</a></li>
        <li class="submenu"> <a href="index.php?main_page=index&amp;cPath=4">Product 2</a></li>
        <li class="submenu"> <a href="index.php?main_page=index&amp;cPath=4">Product 3</a></li>
      </ul>
    <li class="submenu"><a href="index.php?main_page=index&amp;cPath=3">That Manufacturer</a> 
      <ul class="level3">
        <li class="submenu"> <a href="index.php?main_page=index&amp;cPath=4">Product 1</a></li>
        <li class="submenu"> <a href="index.php?main_page=index&amp;cPath=4">Product 2</a></li>
        <li class="submenu"> <a href="index.php?main_page=index&amp;cPath=4">Product 3</a></li>
      </ul>
    </li>
  </ul>
</li>

But longer term that would be difficult to maintain. I had hoped to be able to assign products to manufacturers in some way rather than input each one individually, and the whole menu be built dynamically.

So, what is the best "Zen like " way to do this?

Many thanks!

Hi!

Sorry, I don't have a simple answer for this, and don't have a simple solution. If I were planning to design this, I'd perhaps start by looking at includes/classes/categories_ul_generator.php and includes/modules/sideboxes/maufacturers.php. However, I don't have the time to develop this mod, and I feel it would probably be fairly complicated. So for now, manual is the way to go....

[Still Crazy]

Hi Jade, thanks for your quick response.

Your answer is not what I wanted, but was what I expected if you see what I mean!

I have already spent some time experimenting with the categories_ul_generator.php file, so will continue to do this now I know that I am working in the right area.

In the short term I will probably hard code the links - I think it will be worth the effort as I believe there could be some SEO advantages if used correctly ;)

Thanks again.

[jettrue]

Hi Jade, thanks for your quick response.

Your answer is not what I wanted, but was what I expected if you see what I mean!

I have already spent some time experimenting with the categories_ul_generator.php file, so will continue to do this now I know that I am working in the right area.

In the short term I will probably hard code the links - I think it will be worth the effort as I believe there could be some SEO advantages if used correctly ;)

Thanks again.

I would create a new file, perhaps called manufacturers_ul_generator.php and wouldn't try to get the manufacturers to mix in with the categories code. GOOD LUCK!

[paul3648]

I've just gone through this lengthy thread and am surprised no one has mentioned the way the menu scrolls downwards but without the background color so the scrolled menu item is hard to see.

I've seen this in all the examples posted, including Jade's.

If you make the browser window smaller, or increase the font size, the menu will scroll in an (I think) undesirable way.

I would prefer to have the individual menu items scroll, so that "Check Out" (for example) would be on two lines, while maintaining the relative overall width of the menu.

I've checked the css file and fiddled with a few things but I can't see what's controlling the height of the menu and why it won't allow scrolling.

Even if it scrolled, but with the same background colour, that would be a bit better.

BTW - very nice menu otherwise

[jettrue]

I've just gone through this lengthy thread and am surprised no one has mentioned the way the menu scrolls downwards but without the background color so the scrolled menu item is hard to see.

I've seen this in all the examples posted, including Jade's.

If you make the browser window smaller, or increase the font size, the menu will scroll in an (I think) undesirable way.

I would prefer to have the individual menu items scroll, so that "Check Out" (for example) would be on two lines, while maintaining the relative overall width of the menu.

I've checked the css file and fiddled with a few things but I can't see what's controlling the height of the menu and why it won't allow scrolling.

Even if it scrolled, but with the same background colour, that would be a bit better.

BTW - very nice menu otherwise

I cannot see this issue. I've tried to replicate what you're experiencing in Firefox and IE7, and do not see any issue. Though I'm not really understanding exactly what you are talking about.

What browser are you seeing this issue, and can I see your website? What do you mean by saying they "scroll"?

[paul3648]

What browser are you seeing this issue, and can I see your website? What do you mean by saying they "scroll"?

Maybe "scroll" is the wrong word - wrap? It happens with IE and Firefox.

I made a mistake about your site, Jade (http://www.zencart137.jadetrue.com/). This menu does not have this problem - seems to be a static length.

Here's a screen shot of my site with a reduced sized browser window. Since the menu text is white, when the menu wraps below, the background color is very light, making it hard to see the menu entry "Gifts":

[jettrue]

Maybe "scroll" is the wrong word - wrap? It happens with IE and Firefox.

I made a mistake about your site, Jade (http://www.zencart137.jadetrue.com/). This menu does not have this problem - seems to be a static length.

Here's a screen shot of my site with a reduced sized browser window. Since the menu text is white, when the menu wraps below, the background color is very light, making it hard to see the menu entry "Gifts":

Its not a static length, I have just left enough extra space on the menu. You have too many things on that row. Either you need to reduce the amount of items on the row, decrease the menu's default font size, or decrease the spacing between each item so that the wrap doesn't occur. You would adjust includes/templates/YOUR_TEMPLATE/css/stylesheet_header_menu.css.

[paul3648]

Its not a static length, I have just left enough extra space on the menu. You have too many things on that row. Either you need to reduce the amount of items on the row, decrease the menu's default font size, or decrease the spacing between each item so that the wrap doesn't occur. You would adjust includes/templates/YOUR_TEMPLATE/css/stylesheet_header_menu.css.

I was just looking at the source of your site, and you've got a couple of background images that are 2000px wide, so that's what's preventing your menu from wrapping.

I suppose I could something similar on my site, but my preference is to have the individual menu items wrap, so that the whole menu bar would become thicker (higher - bigger from top to bottom...)

It doesn't really matter how many items are on the menu, because at some point if the user reduces the size of the browser window far enough, or increases the size of the font (something I do all the time, which is why this is a problem for me) the menu bar will run out of space and wrap.

BTW - have you looked at your site in Firefox? There isn't any bottom scroll bar when you reduce the size of the browser window or increase the font size. The scroll bar appears correctly in IE.

[jettrue]

I was just looking at the source of your site, and you've got a couple of background images that are 2000px wide, so that's what's preventing your menu from wrapping.

I suppose I could something similar on my site, but my preference is to have the individual menu items wrap, so that the whole menu bar would become thicker (higher - bigger from top to bottom...)

It doesn't really matter how many items are on the menu, because at some point if the user reduces the size of the browser window far enough, or increases the size of the font (something I do all the time, which is why this is a problem for me) the menu bar will run out of space and wrap.

BTW - have you looked at your site in Firefox? There isn't any bottom scroll bar when you reduce the size of the browser window or increase the font size. The scroll bar appears correctly in IE.

Because I designed the site to increase in size when someone increases their font, that is why I have the really wide images (so they increase without distorting). As far as my menu not wrapping, I think its because of the width of my center section that is preventing it, not the 2000px wide images (else the scroll bar would start much earlier?) I think that perhaps your menu is just a *smidge* too long, and the right padding of the last menu item is what is forcing the wrap when the site is resized. Just try for grins removing the last item on your menu to see if the issue goes away.

You may also be able to decrease the spacing on the last menu item by giving it a special class like class="lessSpace" and give it a padding-right:0; value in the stylesheet_header_menu.css. I should probably put that in effect on the next update of the template... but anyway, I'd still like to see your site, and see if I can help more effectively.

I have looked at my site in Firefox, and the scroll bars work fine; they weren't working because of some code I was testing out, but that is removed now. The code in question is not in the download file, it was just on my test site.

I'm sorry to say that I won't spend a significant amount of time finding out how to make the menu wrap the way you're looking for, as I think having the drop down menu on two lines may impede its functionality (and I don't know if I can make it work), however if you figure it out and it works well, feel free to share it here.