CSS Dropdown menu for the header- With Categories!

jettrue,

I have been experimenting with your drop down menu for a while and really like it. :clap:
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

mauryg:

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. :-)

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? :wacko:

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? :wacko:

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.

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!

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.

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>

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. https://www.lastrap.co.uk/shop

Best regards
Richard Georgiou

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. https://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;}

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

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

OK, I believe I have the structure correct - the menu displays fine on the first level. Unfortunately I've probably done something else dumb and am stumped again...

When you mouse-over one of the main categories, the sub-categories are all there and are generally fine. The problem is that the subs below that do not flyout into their own boxes, instead they are layered on top of the preceding categories.

Below is a screenshot. The 2nd level categories under Hair Accessories should be BANDANAS, BARRETTES, BASICS IN BULK, CLAW CLIPS, FOR TOTS, HAIR STICKS, HEADBANDS, PONYTAIL HOLDERS, SCRUNCHIES, MADE-TO-ORDER, RUNWAY COLLECTION. Everything that is there other than that should be a sub of something else, if that makes any sense. Don't know why it is not popping out.

Here is the code:

<style type="text/css">

#zUL li {
    float:left;
    width:10em;
    position:relative;
}


#zUL li ul {
    visibility:hidden;
    position:absolute;
}


#zUL li:hover ul {
    visibility:visible;
    background-color:#000000; /*change this to any color you want*/
}
</style>

<div id="navMainWrapper">
<div id="navMain">

<ul id="zUL">
<!--Insert your links here-->
<li class="submenu"><a href="http://www.threddies.com/store/index.php?main_page=index&cPath=128">Apparel</a>
</li>


<li class="submenu"><a href="http://www.threddies.com/store/index.php?main_page=index&cPath=125">Bath + Body</a>
</li>

<li class="submenu"><a href="#">Hair Accessories</a>
<ul class="level1">

    <li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_72">Bandanas</a>
    </li>




    <li> <a href="#">Barrettes</a>
      <ul class="level2">
        <li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_68_106">Embellished Barrettes</a></li>
    <li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_68_105">Large Barrettes</a></li>
      </ul>
    </li>





    <li> <a href="#">Basics in Bulk</a>
      <ul class="level2">
        <li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_76_88">Headbands</a></li>
    <li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_76_90">Ponytail Holders</a></li>
    <li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_76_124">Snap Clips</a></li>
      </ul>
    </li>



    <li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_74">Claw Clips</a>
    </li>





    <li> <a href="#">For Tots</a>
      <ul class="level2">
        <li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_70_122">Barrettes</a></li>
    <li> <a href="#">Clips</a>
        <ul class="level3">
        <li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_70_111_119">Embellished</a></li>
        <li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_70_111_115">Flowers</a></li>
        <li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_70_111_117">Gingham</a></li>
        <li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_70_111_116">Polka Dots</a></li>
        <li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_70_111_118">Solid Colors</a></li>
        <li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_70_111_121">Stripes</a></li>
        <li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_70_111_120">Teeny Tiny Clips</a></li>
        </ul>
        </li>
    <li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_70_112">Headbands</a></li>
      </ul>
    </li>





    <li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_73">Hair Sticks</a>
    </li>





    <li> <a href="#">Headbands</a>
      <ul class="level2">
        <li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_65_83">Basics in Bulk</a></li>
    <li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_65_78">Beaded</a></li>
    <li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_65_79">Elastic</a></li>
        <li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_65_80">Fabric</a></li>
    <li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_65_81">Lace</a></li>
    <li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_65_85">Ribbon</a></li>
        <li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_65_137">Scarf Headbands</a></li>
    <li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_65_102">Stretch</a></li>
    <li> <a href="#">Structured</a>
        <ul class="level3">
        <li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_65_86_107">Plastic Headbands</a></li>
        <li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_65_86_123">Skinny Structured Headbands</a></li>
        <li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_65_86_108">Structured Fabric Headbands</a></li>
        <li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_65_86_104">Structured Scarf Headbands</a></li>
        </ul>
        </li>
        <li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_65_82">Woven</a></li>
      </ul>
    </li>





    <li><a href="#">Ponytail Holders</a>
      <ul class="level2">
        <li><a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_66_109">Double-loop Pony Holders</a></li>
    <li><a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_66_95">Basic Pony Holders</a></li>
    <li><a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_66_96">Embellished Pony Holders</a></li>
      </ul>
    </li>




    <li class="submenu"><a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_94">Scrunchies</a></li>




    <li class="submenu"><a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_71">Made-to-order</a></li>





    <li class="submenu"><a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_110">Runway Collection</a></li>
  

</ul>
</li>



<li class="submenu"><a href="http://www.threddies.com/store/index.php?main_page=index&cPath=129">Odds + Ends</a></li>



<li class="submenu"><a href="http://www.threddies.com/store/index.php?main_page=index&cPath=21">Gift Certificates</a></li>



<li class="submenu"><a href="http://www.threddies.com/store/index.php?main_page=index&cPath=77">CLEARANCE!</a></li>



<!--------------end of links-------------->

</ul>

<br class="clearBoth" />

</div>
</div>
```I'm thinking it has something to do with these "submenu" and "level2" etc classes maybe?  I don't know where they're coming from to be quite honest....

Thanks again for all your help - it is so much appreciated!  I'd love to get this great mod working right...

threddies.com:

OK, I believe I have the structure correct - the menu displays fine on the first level. Unfortunately I've probably done something else dumb and am stumped again...

When you mouse-over one of the main categories, the sub-categories are all there and are generally fine. The problem is that the subs below that do not flyout into their own boxes, instead they are layered on top of the preceding categories.

Below is a screenshot. The 2nd level categories under Hair Accessories should be BANDANAS, BARRETTES, BASICS IN BULK, CLAW CLIPS, FOR TOTS, HAIR STICKS, HEADBANDS, PONYTAIL HOLDERS, SCRUNCHIES, MADE-TO-ORDER, RUNWAY COLLECTION. Everything that is there other than that should be a sub of something else, if that makes any sense. Don't know why it is not popping out.

I'm thinking it has something to do with these "submenu" and "level2" etc classes maybe? I don't know where they're coming from to be quite honest....

Thanks again for all your help - it is so much appreciated! I'd love to get this great mod working right...
I'm curious. Why are you doing this all by hand? Are those your categories? This mod does that all by itself.

Also, look closer at the code I posted for you. Every <li> except for the last submenu, should be like this:

But again I have to ask... why in the world would you do it by hand? LOL!

jettrue:

I'm curious. Why are you doing this all by hand? Are those your categories? This mod does that all by itself.

LOL I think there is something wrong with me...

Here goes the dumbest question yet...

HOW does it do it all by itself?? What the heck have I been doing all morning?

Looking at the Readme, right... I edited the bg color, edited the links, pushed the files over. (well, they're not over right now, but ya know)

When you say "edit the links", you do mean to fill them in just as indicated in the original file, right? I started by doing that, but ran into trouble when I tried to get the links to go another level or two deeper... the example which you provided in the file only went one deep.

What the heck did I do? Leave it to me to take something super easy and make it complicated... :laugh:

threddies.com:

LOL I think there is something wrong with me...

Here goes the dumbest question yet...

HOW does it do it all by itself?? What the heck have I been doing all morning?

Looking at the Readme, right... I edited the bg color, edited the links, pushed the files over. (well, they're not over right now, but ya know)

When you say "edit the links", you do mean to fill them in just as indicated in the original file, right? I started by doing that, but ran into trouble when I tried to get the links to go another level or two deeper... the example which you provided in the file only went one deep.

What the heck did I do? Leave it to me to take something super easy and make it complicated... :laugh:
No, the mod MAKES the drop down menu. Automatically. If you uploaded every file, turned on the ezpages_drop_menu.php sidebox in the admin (under Tools, Layout Boxes Controller), BAM the menu appears.

At first I thought you just wanted to add a single drop down to the drop down. But then I realized you were recreating the entire menu!

Also you are probably not using my version, as my version does not indicate to fill in any links. There's a version right after mine in the download section that says "Paul's version". His tpl_drop_menu.php gives you an example on HOW to add additional links if you should need them, but it STILL automatically creates the menu. I'm guessing you didn't turn the side box on.

Also, "Paul's Version", creates EACH category as a drop down menu, whereas mine has a lot of miscellaneous drop downs, with ONE drop down called "Categories" which then lists all the categories (you can see mine in action here - https://www.zencart137.jadetrue.com). BOTH options work, its just up to you which one you want to use. Also, Paul's version doesn't come with a support thread, so you are welcome to be here.

jettrue:

Also you are probably not using my version, as my version does not indicate to fill in any links.

And there we have the problem.

Downloaded your version instead and everything auto-populated like a beautiful dream. Now just have to figure out why my header image is smushed, which I think I saw something about in another post.

Thanks again for dealing with me! It's so great that you maintain this support thread :yes:

threddies.com:

And there we have the problem.

Downloaded your version instead and everything auto-populated like a beautiful dream. Now just have to figure out why my header image is smushed, which I think I saw something about in another post.

Thanks again for dealing with me! It's so great that you maintain this support thread :yes:

If you read the readme.txt file on installing my version, there is this section:

3. If you have heavily modified your includes/templates/YOUR_TEMPLATE/common/tpl_header.php, instead of uploading the tpl_header.php included in this download, you can simply add this to your header where you'd like the css menu to appear:

That could be your problem with the logo. If you made any changes to your old tpl_header.php, you'll probably want to reload your old version, and simply paste the code above into the file. The best place to add it is right after:

Got it looking lovely. Thanks so much for all of your help Jettrue - it is truly appreciated!!!

Hello I am new to Zen but I love it, I'd sure like someone knowledgeable to help with a few things if possible. I have spent days reading threads and unfortunately the main thing that boggles my mindis trying to upload mass products and categories. i am currently getting some help from a friend that is having me create a db in access to import, but I know there has got to be an easier way and i cant seem to find or figure out easy populate. The reason I replied to this thread though is because I have installed the drop down menu and I truly loved it. But unfortunately I have changed my design idea and cannot use it for one of the carts i have installed it in and i cant seem to be able to disable it. If you could please help i would greatly appreciate it.

donrisdesigns:

Hello I am new to Zen but I love it, I'd sure like someone knowledgeable to help with a few things if possible. I have spent days reading threads and unfortunately the main thing that boggles my mindis trying to upload mass products and categories. i am currently getting some help from a friend that is having me create a db in access to import, but I know there has got to be an easier way and i cant seem to find or figure out easy populate. The reason I replied to this thread though is because I have installed the drop down menu and I truly loved it. But unfortunately I have changed my design idea and cannot use it for one of the carts i have installed it in and i cant seem to be able to disable it. If you could please help i would greatly appreciate it.

I PM'd you a response as well, but all you need to do is remove this from includes/templates/YOUR_TEMPLATE/common/tpl_header.php:

Hello all, great mod, I was wondering if I could get some help.

I have this mod currently installed on my site, and it seems to conflict with Hoverbox2. When I click on one of my products, the resulting window is obstructed slightly by the CSS menu - what I want is for the resulting image window to be in front of everything. You can have a look at: the chop haus DOT com

Also, there seems to be an extra little box with nothing in it at the right hand side of my CSS horizontal menu - any idea how to get rid of that? :cry:

Regards,
Matt