Zen Cart Logo
Forums / All Other Contributions/Addons / CSS Dropdown menu for the header- With Categories!

CSS Dropdown menu for the header- With Categories!

Views: 615,557

Results 341 to 360 of 2,344
19 Jun 2007, 9:02 PM
#341
jettrue avatar

jettrue

Totally Zenned

Join Date:
Jan 2005
Location:
USA, St. Louis
Posts:
3,651
Plugin Contributions:
5

CSS Dropdown menu for the header- With Categories!

chadderuski:

Jade, do you prefer to split the thread on the two menus systems?

-cj

Maybe I'm confused, but which two menu systems are you referring to? Get Em Fast did work on the vertical css flyout menu in a sidebox, but so far all we've been talking about is the horizontal one that belongs to this thread, no? I know he's talking about getting it to scroll, but that's still related to this mod. What am I missing here, LOL?

19 Jun 2007, 9:06 PM
#342
jettrue avatar

jettrue

Totally Zenned

Join Date:
Jan 2005
Location:
USA, St. Louis
Posts:
3,651
Plugin Contributions:
5

Re: CSS Dropdown menu for the header- With Categories!

Get Em Fast:

Actually, this mod wasn't developed by me, but by DrByte, I think. I just included the rollover images. But seems like after I done that, I inherited it, but there's no support thread for it.

I got the idea from "CSSplay" HERE, and I know it CAN be done......SEE HERE (just found this one), but addapting it to ZC is a little more complicated than I thought....for me, anyway. I'm just learning how to do this menu stuff. But I'm very interested in learning more, and getting this to work with ZC as a new mod. I think a lot of people would like a scrolling flyout menu on their site.....such as you with that loooonngg list of products.
I've just been working on it in my spare time, so it will take me a while, but...I'll get it....eventually.

Like you noticed before, you either get scroll or flyout, but not both. Have you found one that does both? I think limiting the drop down menu to the first level of subcategories, then setting the scroll to only start on level 3, may be the best way to do this.

19 Jun 2007, 9:16 PM
#343
jettrue avatar

jettrue

Totally Zenned

Join Date:
Jan 2005
Location:
USA, St. Louis
Posts:
3,651
Plugin Contributions:
5

Re: CSS Dropdown menu for the header- With Categories!

Get Em Fast:

Actually, this mod wasn't developed by me, but by DrByte, I think. I just included the rollover images. But seems like after I done that, I inherited it, but there's no support thread for it.

I got the idea from "CSSplay" HERE, and I know it CAN be done......SEE HERE (just found this one), but addapting it to ZC is a little more complicated than I thought....for me, anyway. I'm just learning how to do this menu stuff. But I'm very interested in learning more, and getting this to work with ZC as a new mod. I think a lot of people would like a scrolling flyout menu on their site.....such as you with that loooonngg list of products.
I've just been working on it in my spare time, so it will take me a while, but...I'll get it....eventually.

I've done a quick test, try using this in your stylesheet_header_menu.css:

div#dropMenu ul.level3, div#dropMenu ul.level4, div#dropMenu ul.level5 {top: 0; left: 12em; background:#4f4f4f;width:13.3em;height:200px;overflow:auto;}

instead of

div#dropMenu ul.level3, div#dropMenu ul.level4, div#dropMenu ul.level5 {top: 0; left: 12em; background:#4f4f4f;}

Then in classes/categories_ul_generator.php, change $max_level to 2.

19 Jun 2007, 10:01 PM
#344
get_em_fast avatar

get_em_fast

Totally Zenned

Join Date:
Dec 2006
Location:
Seligman, MO U.S.A.
Posts:
2,072
Plugin Contributions:
1

Re: CSS Dropdown menu for the header- With Categories!

Yes, jettrue, this thread HAS only talked about your dropdown menu, as it should, since this IS your support thread for this mod.
The only reason that the other one was even mentioned is the question asked by chadderuski:

chadderuski:

Get Em Fast: That looks really cool. I don't see a solution to also get fly out because you need to leave the hover area to grab the scroll bar.

Also, do you have a separate support thread for your fly out menu? Time to make YOU sweat a little and let Jade rest for a while :smile:

And, the scroll idea came from chad needing it for his long list of categories.
So, I was just trying to adapt one to ZC. It's a little harder than I thought, as I don't write these menus', but I can usually manipulate the Hell out of 'em!

Just so there's no more confusion, I'll start a support thread for the flyout menu.....even though I didn't create it., just updated it to include images. I have found out from experience in this forum, if you update it......you own it!........at least all the questions concerning it.
I just hope I can answer all of them.

20 Jun 2007, 1:14 PM
#345
chadderuski avatar

chadderuski

Totally Zenned

Join Date:
Apr 2006
Location:
Dark Side of the Moon
Posts:
986
Plugin Contributions:
0

Re: CSS Dropdown menu for the header- With Categories!

jettrue:

Maybe I'm confused, but which two menu systems are you referring to? Get Em Fast did work on the vertical css flyout menu in a sidebox, but so far all we've been talking about is the horizontal one that belongs to this thread, no? I know he's talking about getting it to scroll, but that's still related to this mod. What am I missing here, LOL?

Get Em Fast cleared this up a couple posts down. Yes, I was talking about doing some additional mod work on Get Em Fast's mod with images, but didn't want to use your thread to discuss that.

20 Jun 2007, 1:29 PM
#346
chadderuski avatar

chadderuski

Totally Zenned

Join Date:
Apr 2006
Location:
Dark Side of the Moon
Posts:
986
Plugin Contributions:
0

Re: CSS Dropdown menu for the header- With Categories!

Jade, that is a good compromise solution.

Oh! But I think I have an Idea that will make this work!!!! (for some browsers)

Here is the trick:

http://www.cssplay.co.uk/boxes/scrollbars.html

Put the scroll bar on the left! The sub menus can then still fly out right. I have not had a chance to test this yet, as it JUST occurred to me.

20 Jun 2007, 1:38 PM
#347
get_em_fast avatar

get_em_fast

Totally Zenned

Join Date:
Dec 2006
Location:
Seligman, MO U.S.A.
Posts:
2,072
Plugin Contributions:
1

Re: CSS Dropdown menu for the header- With Categories!

O.k. Just so there's no more confusion about which questions get asked where, I started a support thread for the CSS Flyout Menu HERE.
Hope this clears everything up.

20 Jun 2007, 1:53 PM
#348
jettrue avatar

jettrue

Totally Zenned

Join Date:
Jan 2005
Location:
USA, St. Louis
Posts:
3,651
Plugin Contributions:
5

Re: CSS Dropdown menu for the header- With Categories!

chadderuski:

Jade, that is a good compromise solution.

Oh! But I think I have an Idea that will make this work!!!! (for some browsers)

Here is the trick:

http://www.cssplay.co.uk/boxes/scrollbars.html

Put the scroll bar on the left! The sub menus can then still fly out right. I have not had a chance to test this yet, as it JUST occurred to me.

I played around with this, and it doesn't quite work as expected, at least in Firefox. Yes, you can get the scroll bar on the left, but the next menu doesn't fly out as it should. Though you actually can "see" the next menu, its very buggy. Here's as far as I got:

div#dropMenu ul.level3 {top: 0; left: 12em; background:#4f4f4f;unicode-bidi:bidi-override;direction:rtl;height:200px;width:13.3em;overflow:auto;}
div#dropMenu ul.level4, div#dropMenu ul.level5 {top: 0; left: 12em; background:#4f4f4f;overflow:visible;}

the above code replaces:

div#dropMenu ul.level3, div#dropMenu ul.level4, div#dropMenu ul.level5 {top: 0; left: 12em; background:#4f4f4f;}
9 Jul 2007, 1:11 AM
#349
sbonge avatar

sbonge

New Zenner

Join Date:
Apr 2007
Posts:
21
Plugin Contributions:
0

Re: CSS Dropdown menu for the header- With Categories!

You have an awesome template. I wish I would have given you the $390 dollars I had given to Template Monster for something that doesn't work.

Anyway...I will look more at the other items you have for the next websites.

Here is my question..

My website is https://www.bongeenterprises.com (direct page is
http://bongeenterprises.com/store/index.php?main_page=about_us&zenid=f9785cdf5c30cd4b033351f1e3489287

When I go to the "about us" page, the page shows up on the top of the page... "
HEADING_TITLE and on the bar (maybe called breadcrumb) it says "NAVBAR_TITLE"

Where are these items located so I can change the "NAVBAR_TITLE" to "About Us" and how do I get the "Heading_title" to change to something else or can I get rid of it for the top of this page?

Cheers and GREAT work!!

Scott

"

9 Jul 2007, 1:35 AM
#350
jettrue avatar

jettrue

Totally Zenned

Join Date:
Jan 2005
Location:
USA, St. Louis
Posts:
3,651
Plugin Contributions:
5

Re: CSS Dropdown menu for the header- With Categories!

sbonge:

You have an awesome template. I wish I would have given you the $390 dollars I had given to Template Monster for something that doesn't work.

Anyway...I will look more at the other items you have for the next websites.

Here is my question..

My website is https://www.bongeenterprises.com (direct page is
http://bongeenterprises.com/store/index.php?main_page=about_us&zenid=f9785cdf5c30cd4b033351f1e3489287

When I go to the "about us" page, the page shows up on the top of the page... "
HEADING_TITLE and on the bar (maybe called breadcrumb) it says "NAVBAR_TITLE"

Where are these items located so I can change the "NAVBAR_TITLE" to "About Us" and how do I get the "Heading_title" to change to something else or can I get rid of it for the top of this page?

Cheers and GREAT work!!

Scott

"
I'm guessing that you used the about us mod to add the about us page to your site? It looks like you're missing a language file:
includes/languages/english/YOUR_TEMPLATE/about_us.php

9 Jul 2007, 7:07 AM
#351
sbonge avatar

sbonge

New Zenner

Join Date:
Apr 2007
Posts:
21
Plugin Contributions:
0

Re: CSS Dropdown menu for the header- With Categories!

Jettrue:

Thank you....soooo much.

Scott

9 Jul 2007, 4:25 PM
#352
francocauter avatar

francocauter

Zen Follower

Join Date:
Jun 2007
Location:
Milton Keynes UK
Posts:
153
Plugin Contributions:
0

Re: CSS Dropdown menu for the header- With Categories!

Hi jettrue
I have put in the files in my site in all sorts of ways but still I cannot make the categories drop menu to appear.
I am using the contemporary green template but modified it.
You can see it www.aromaegusto.co.uk
I would appreciate much if you can help me
Thanks a bundle
francocauter

9 Jul 2007, 6:49 PM
#353
jettrue avatar

jettrue

Totally Zenned

Join Date:
Jan 2005
Location:
USA, St. Louis
Posts:
3,651
Plugin Contributions:
5

Re: CSS Dropdown menu for the header- With Categories!

francocauter:

Hi jettrue
I have put in the files in my site in all sorts of ways but still I cannot make the categories drop menu to appear.
I am using the contemporary green template but modified it.
You can see it www.aromaegusto.co.uk
I would appreciate much if you can help me
Thanks a bundle
francocauter

Hmm, I'm not sure what you have uploaded right now. Also, what do you mean by "all sorts of ways"... there's only one way they should go.

Please re-read the readme.txt, get the files uploaded in the correct spot. Be sure to change all folders named "YOUR_TEMPLATE" to your actual template name. Do not upload my copy of includes/templates/YOUR_TEMPLATE/common/tpl_header.php

Instead, when all other files are uploaded, open up YOUR copy of includes/templates/YOUR_TEMPLATE/common/tpl_header.php, and paste this:

<!--bof-drop down menu display-->

<?php require($template->get_template_dir('tpl_drop_menu.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_drop_menu.php');?>

<!--eof-drop down menu display-->

after:

<!--eof-optional categories tabs navigation display-->
12 Jul 2007, 10:43 PM
#354
sbonge avatar

sbonge

New Zenner

Join Date:
Apr 2007
Posts:
21
Plugin Contributions:
0

Re: CSS Dropdown menu for the header- With Categories!

I have read until my eyes are falling out. Sorry if this is already posted, but I appreciate you help.

I am wanting to see if I can add ONE other link on the right of my "shopping cart" link. I am wanting a link to my forum.

My website is www.bongeenterprises.com

My forum is www.bongeenterprises.com/forum

Thanks

Scott

22 Jul 2007, 1:50 PM
#355
alex_clarke avatar

alex_clarke

Totally Zenned

Join Date:
Mar 2006
Posts:
909
Plugin Contributions:
1

Re: CSS Dropdown menu for the header- With Categories!

Hi jettrue,

Nice contribution! Very easy to install and works well. However, I was wondering if it's possible to list the top menu items as my categories, which would then expand to show the relevant sub categories.

So far I've managed to get rid of all the other top menu items (by commenting out the code), but I'm a little stuck now.

Any ideas?

Thanks again for a great contribution! :)

22 Jul 2007, 3:55 PM
#356
jettrue avatar

jettrue

Totally Zenned

Join Date:
Jan 2005
Location:
USA, St. Louis
Posts:
3,651
Plugin Contributions:
5

Re: CSS Dropdown menu for the header- With Categories!

sbonge:

I have read until my eyes are falling out. Sorry if this is already posted, but I appreciate you help.

I am wanting to see if I can add ONE other link on the right of my "shopping cart" link. I am wanting a link to my forum.

My website is www.bongeenterprises.com

My forum is www.bongeenterprises.com/forum

Thanks

Scott

Sure, you could do that easily, add this:

  <li><a href="http://bongeenterprises.com/forum">Forum</a></li>

after:```

<?php if ($_SESSION['cart']->count_contents() != 0) { ?>
  <li class="submenu"><a href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a>

    <ul class="level2">

      <li><a href="<?php echo zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>"><?php echo HEADER_TITLE_CHECKOUT; ?></a></li>

    </ul>

  </li>

  <?php } else { ?>

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

  <?php } ?>

Then, now that your menu is longer, you'll need to change the width of the items to percentages so that it doesn't break into two lines in some browsers:

So, first, you need to change div#dropMenu li to this:

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


Then change div#dropMenu li a to this:

div#dropMenu li a {display: block; padding: .6em 0 .6em 0;text-decoration: none; text-transform:uppercase; color:#005f00; text-align:center; border-right:1px solid #005f00; border-left:1px solid #005f00;}


Then change div#dropMenu ul.level2 to this:

div#dropMenu ul.level2 {top: 2.17em; background:#FFFFFF;z-index:1000;left:0;}

22 Jul 2007, 4:32 PM
#357
jettrue avatar

jettrue

Totally Zenned

Join Date:
Jan 2005
Location:
USA, St. Louis
Posts:
3,651
Plugin Contributions:
5

Re: CSS Dropdown menu for the header- With Categories!

Alex Clarke:

Hi jettrue,

Nice contribution! Very easy to install and works well. However, I was wondering if it's possible to list the top menu items as my categories, which would then expand to show the relevant sub categories.

So far I've managed to get rid of all the other top menu items (by commenting out the code), but I'm a little stuck now.

Any ideas?

Thanks again for a great contribution! :)

You should use this mod instead:

http://www.zen-cart.com/index.php?main_page=product_contrib_info&cPath=40_47&products_id=523

It does what you are looking for.

22 Jul 2007, 6:14 PM
#358
alex_clarke avatar

alex_clarke

Totally Zenned

Join Date:
Mar 2006
Posts:
909
Plugin Contributions:
1

Re: CSS Dropdown menu for the header- With Categories!

Thanks for the speedy reply.

I originally looked at that contribution, but didn't realise it did what I wanted!

Thanks for pointing me in the right direction. :)

25 Jul 2007, 3:35 PM
#359
mask2011 avatar

mask2011

New Zenner

Join Date:
Jul 2007
Posts:
43
Plugin Contributions:
0

Re: CSS Dropdown menu for the header- With Categories!

I've been trying to get the drop-down function to work, but seem to have problems in IE6.. When I view my test environment at:

http://www.stoelwinder.net/tryorbuy/

I can see the drop downs perfectly using Firefox, but IE6 just shows the top-menu items, no drop-down..

I've done a fair amount of customization and am a total newbie, but was pretty proud to have reached this point by customizing Acadame :P Unfortunately, it's now not 100% working anymore..

Any suggestions what could've caused this break? I've created a .htaccess in tryorbuy folder but no success, should it have been somewhere else? Thanks for your suggestions!

25 Jul 2007, 6:01 PM
#360
jettrue avatar

jettrue

Totally Zenned

Join Date:
Jan 2005
Location:
USA, St. Louis
Posts:
3,651
Plugin Contributions:
5

Re: CSS Dropdown menu for the header- With Categories!

mask2011:

I've been trying to get the drop-down function to work, but seem to have problems in IE6.. When I view my test environment at:

http://www.stoelwinder.net/tryorbuy/

I can see the drop downs perfectly using Firefox, but IE6 just shows the top-menu items, no drop-down..

I've done a fair amount of customization and am a total newbie, but was pretty proud to have reached this point by customizing Acadame :P Unfortunately, it's now not 100% working anymore..

Any suggestions what could've caused this break? I've created a .htaccess in tryorbuy folder but no success, should it have been somewhere else? Thanks for your suggestions!

I guess I should put this at the top of the readme.txt... be sure to upload includes/csshover.htc. :cool: