CSS Dropdown menu for the header- With Categories!

gsallen101289:

I hesitated posting but I have been unable to find the answer.

1. How Can I add my own parent menu listing and then add child, sub-categories? Is this done with the categories_ul_generator? If so is there anywhere in this thread that describes how?

2. In my menu the text must read CONTACT_US. When editing to Contact Us (No underscore) in tpl_drop_menu.php something breaks and I lose the site.

I do appreciate any help!

Exactly what are you trying to achieve? Contact Us is ALREADY in this menu. If you don't see it, you've got the wrong menu.

Using CONTACT_US as an example. Goal is to remove the underscore. Any menu tab that contains more than one word is requiring an underscore between each word.

Here is a current screenshot

Yes, if you're linking to Zen-Cart files such as Contact Us, then in includes/templates/YOUR_TEMPLATE/common/tpl_drop_menu.php you will see how it was added:

<li><a href="<?php echo zen_href_link(FILENAME_CONTACT_US, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CONTACT_US; ?></a></li>

Then to keep it from showing in the Menu as CONTACT_US, you will see that the entry is defined in includes/languages/english/extra_definitions/YOUR_TEMPLATE/headermenu.php as

define('HEADER_TITLE_CONTACT_US','Contact Us');

But............like I say, that's for using pre-existing Zen-Cart files, such as the Contact Us Page. For adding Top-Level links of your own that does NOT use pages, just add your link in the tpl_drop_menu.php Something like:

<li class="submenu"><a href="your_top-level_link.php">My Link</a></li>
<ul class="level2">
<li><a href="your_second-level_link.php">My Link 2</a></li>
<li><a href="your_third-level_link.php">My Link 3</a></li>
</ul>

hope this helps.

gsallen101289:

Here is a current screenshot

Just a thumbnail. We can't see anything in it.

Thank you for the information. I think I may have solved the problem..

Hi! This mod is Great! I'm trying to 'light up' the different dropMenu's (div#dropMenu li a:hover) when hovered, so that their color changes from dark blue to light blue.. I've tried emulating this effect with opacity settings but I cant get it right. Any help would be terriffic, I'm pretty much stuck here...

https://www.develop.centuriongames.se

Thanks!
Jacob

I am using ZC 1.3.7 and just installed all of the CSS Flyout Header files but nothing is showing up. I have been through the file structure several times to make sure that I have in fact put everything where it is supposed to go and everything seems to be in place. Only the Catagory tabs I already had in place are visible, but no drop down menu. Is there something I have to turn on or turn off in the admin to get it to show up?

My site: http://www.monumentsplus.com

Thank you.

GraniteMan44:

I am using ZC 1.3.7 and just installed all of the CSS Flyout Header files but nothing is showing up. I have been through the file structure several times to make sure that I have in fact put everything where it is supposed to go and everything seems to be in place. Only the Catagory tabs I already had in place are visible, but no drop down menu. Is there something I have to turn on or turn off in the admin to get it to show up?

My site: http://www.monumentsplus.com

Thank you.I think you are posting in the wrong support thread.. the "CSS Flyout Header" is a completely different menu module..

Soniccc:

Hi! This mod is Great! I'm trying to 'light up' the different dropMenu's (div#dropMenu li a:hover) when hovered, so that their color changes from dark blue to light blue.. I've tried emulating this effect with opacity settings but I cant get it right. Any help would be terriffic, I'm pretty much stuck here...

www.develop.centuriongames.se

Thanks!
Jacob

From dark blue to light blue. After looking at your site, I assume you're talking about the background color and NOT the font color, correct?

If so, then add this to your stylesheet:

This will change the Main Menu ONLY upon hover:

#dropMenu ul.level1>li:hover {
   background: #87ceeb;
}

Now this will change colors on ALL LEVELS upon hover:

#dropMenu ul.level1 li:hover {
   background: #87ceeb;
}
```Hope this helps.

P.S. opacity wouldn't change the color, anyway. It would just make it transparent to a certain degree depending on what your setting was.

Thanks! would never have figured this out myself. I had no idea I needed to code the site with a > sign. I don't know how to thank you. THANKS!

Soniccc:

Thanks! would never have figured this out myself. I had no idea I needed to code the site with a > sign. I don't know how to thank you. THANKS!

You're quite welcome. Glad to be of some help.

is it possible to set individual width of each dropmenu?

Each one individually where each one that drops will be a different width, such as Hem Sub-cats dropping down to be 12em wide, while Information Sub-cats drop down to be 14em wide?............. then........No. Sorry.

But......you CAN control it on a whole Level functionality, though......So..........if you're just wanting to make each one of your White dropdown parts as wide as your Blue "buttons", then Yes. Find these sections in the css:

div#dropMenu ul ul li {/*border: 1px solid #CCC;*/width:14em;z-index:1000;}

and:

div#dropMenu ul.level1 li.submenu:hover ul.level2, 
div#dropMenu ul.level2 li.submenu:hover ul.level3,
div#dropMenu ul.level3 li.submenu:hover ul.level4,
div#dropMenu ul.level4 li.submenu:hover ul.level5,
div#dropMenu ul.level5 li.submenu:hover ul.level6,
div#dropMenu ul.level6 li.submenu:hover ul.level7,
div#dropMenu ul.level7 li.submenu:hover ul.level8 {position: absolute; width: 14em;display:block;z-index:1000;}

And change the width in BOTH of those to 14em. That should make those levels as wide as your buttons.

Now, when you do that, then it's going to stack your 3rd level on top of your 2nd level. So, you'll want to find this section and edit it to be 14em, also:

div#dropMenu ul.level3, 
div#dropMenu ul.level4, 
div#dropMenu ul.level5, 
div#dropMenu ul.level6, 
div#dropMenu ul.level7,
div#dropMenu ul.level8{top: 0; left: 12em; background:#fff;}

That will push the 3rd level over to the edge of the 2nd level.

Hope this helps.

Thanks!!! Does this mean I may assign width to top-menu "Hem" to suit text-width of 'Hem'!? I've seen this on many pages and it looks beautiful!

To make the 'buttons' ONLY as wide as the text? You can do that if you really want to, as the longer words will start to wrap on you. And you'll never get it down to the size of a 3 letter word without TOTALLY messing it up.
Shoot, I though you had it looking pretty good the way it is, now.........................
This section here:

div#dropMenu li {
    position:relative;
    list-style:none; 
    margin:0; 
    float:left; 
    line-height:1em;
    width:16.667%;
    *width:16.649%;
    }

You'll have to play around with it to get it the exact width you want.

Thanks for the hint! I think I've found a way by assigning each #dropMenu an individual id# in tpl_drop_menu.php like this:

<div id="dropMenuWrapper"> <div id="dropMenuWrapperb"> <div id="dropMenuWrapperc"> <div id="dropMenuWrapperd"> <div id="dropMenu"> <div id="dropMenu1"> <ul class="level1"> <li class="submenu"><a href="<?php echo zen_href_link(FILENAME_DEFAULT); ?>"><?php echo HEADER_TITLE_CATALOG; ?></a> <ul class="level2"> </ul> </li> <div id="dropMenu2"> <li class="submenu"><a href="<?php echo zen_href_link(FILENAME_SITE_MAP); ?>"><?php echo HEADER_TITLE_CATEGORIES; ?></a> <?php

This seems to work.. (I need to learn some php coding though...)

Thanks for the contribution!. Much appreciated. It just what I am looking for. I am trying to understand the code and have a few questions:

• For some reason the contact us drop down list does not appear. Looking at tmp_drop_menu there should be a drop down list for contact us as well as the shopping cart.

• In the categories_ul_generator file there are a couples of lines

  var $document_types_list = ' (3) ';
  // acceptable format example: ' (3, 4, 9, 22, 18) '

What does this document_types_variable_do?

_ How do I get the ez_ pages to appear in the menu. I think if I want to delete what appears in the menu, I need to adjust the tmp_drop_menu but as far as adding the ez_pages, I am not sure how to proceed.

• For some reason after "Information" , nothing else on the loads. I have attached a copy of my website so you can see what I am referring to.

Thanks for your time. Tom :cool:

Dear Friends,

I'm using Zen Cart v1.3.9g. I installed CSS Dropdown menu for the header- With Categories! But the old static categories menu is also there. Maybe, this is not the right place for this message, but if someone can help me to disable this, it'll be very nice. Also I wanna dissable the Home and Login on the left upper corner, but I don't know how. Here is my site, so you can take a look at this.

Thanks a lot

Dario:smartalec:

http://www.robinjsstore.com

ramada:

Dear Friends,

I'm using Zen Cart v1.3.9g. I installed CSS Dropdown menu for the header- With Categories! But the old static categories menu is also there. Maybe, this is not the right place for this message, but if someone can help me to disable this, it'll be very nice. Also I wanna dissable the Home and Login on the left upper corner, but I don't know how. Here is my site, so you can take a look at this.

Thanks a lot

Dario:smartalec:

http://www.robinjsstore.comand you are right.. this support thread is not the right place to post this.. You should start your own thread to get help on this..