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,588

Results 501 to 520 of 2,344
4 Oct 2007, 3:14 AM
#501
helpme avatar

helpme

Totally Zenned

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

CSS Dropdown menu for the header- With Categories!

I do not know if this is possible, but I am going to ask anyways...I would like to change the color of the Shopping Cart section? Is there any way to do this? Thanks a ton!

4 Oct 2007, 3:27 AM
#502
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!

helpme:

I do not know if this is possible, but I am going to ask anyways...I would like to change the color of the Shopping Cart section? Is there any way to do this? Thanks a ton!

Can you be more specific? The shopping cart page? The background behind the shopping cart? The shopping cart itself? But whatever it is, the answer is YES, you can do most whatever you want with css.

4 Oct 2007, 12:19 PM
#503
helpme avatar

helpme

Totally Zenned

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

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

jettrue:

Can you be more specific? The shopping cart page? The background behind the shopping cart? The shopping cart itself? But whatever it is, the answer is YES, you can do most whatever you want with css.
On the actual menu I want
Home Catagories Information Contact Us My Account SHOPPING CART
I want the background of the menu (only for Shopping Cart) to change to pink and leave the font white.

Does that make sense? I want to point out the link to the shopping cart.

Thanks

4 Oct 2007, 1:24 PM
#504
bluealice avatar

bluealice

Zen Follower

Join Date:
Jan 2007
Posts:
148
Plugin Contributions:
0

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

Hi Jade, Not sure if you had an answer/suggestion for this. I'm re-posting in case you missed the thread, or my phrasing wasn't too clear: Is it possible to place matching end-cap images on each side of the drop-down menu in order to create a "rounded" corners effect on the ends? Like adding a cell on each end to hold a .gif image...? Here's what I mean: http://www.musecards.com/store/DropDown.gif (If anyone else on this board has figured out how to do this, please let me know. Thanks!)

6 Oct 2007, 11:35 PM
#505
possum avatar

possum

New Zenner

Join Date:
Sep 2007
Posts:
58
Plugin Contributions:
0

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

Hi (to everyone, but mainly jettrue)

I'm sorry to ask this question when you've only just recently covered this off with mauryg. I've double-checked everything that you've mentioned so far and I still can't get the menus to work on IE6.

This question is doubly cheeky because I'm actually using the horizontal version that was contributed by someone else. I'm posting this here because you seem to be using the same techniques and your responses are so helpful.

So far I have:

  • Added the extra .htaccess code to the bottom of the root/includes/.htaccess file (I also added it to root/.htaccess because I wasn't sure where it was supposed to go)
  • Made sure that the extra css file starts with
    body {
    behavior: url(includes/csshover.htc);
    }
  • Made sure that V2.02.060206 of csshover.htc is in the root/includes directory

Are there any other things that I need to do? Any help would be great because i was supposed to be launching the site tomorrow :shocking: Here's the site https://www.possumbooks.com

Possum.

P.S. My template is built on Cherry Zen --- thanks for the HUGE headstart.

7 Oct 2007, 3:17 PM
#506
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!

possum:

Hi (to everyone, but mainly jettrue)

I'm sorry to ask this question when you've only just recently covered this off with mauryg. I've double-checked everything that you've mentioned so far and I still can't get the menus to work on IE6.

This question is doubly cheeky because I'm actually using the horizontal version that was contributed by someone else. I'm posting this here because you seem to be using the same techniques and your responses are so helpful.

So far I have:

  • Added the extra .htaccess code to the bottom of the root/includes/.htaccess file (I also added it to root/.htaccess because I wasn't sure where it was supposed to go)
  • Made sure that the extra css file starts with
    body {
    behavior: url(includes/csshover.htc);
    }
  • Made sure that V2.02.060206 of csshover.htc is in the root/includes directory

Are there any other things that I need to do? Any help would be great because i was supposed to be launching the site tomorrow :shocking: Here's the site https://www.possumbooks.com

Possum.

P.S. My template is built on Cherry Zen --- thanks for the HUGE headstart.

In the categories_menu.css, it starts like this:

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

remove the */ right before body, see if that helps.

And the .htaccess changes only need to be in root/.htaccess

Cute site!

7 Oct 2007, 3:20 PM
#507
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!

helpme:

On the actual menu I want
Home Catagories Information Contact Us My Account SHOPPING CART
I want the background of the menu (only for Shopping Cart) to change to pink and leave the font white.

Does that make sense? I want to point out the link to the shopping cart.

Thanks

Sure, since the shopping cart link is already using the style "noLine" you can style it however you want in the stylesheet. Try adding this to your stylesheet_header_menu.css:

div#dropMenu li a.noLine {background-color:#d3bacd;}

Of course using whatever color you prefer. :smile:

7 Oct 2007, 3:26 PM
#508
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!

bluealice:

Hi Jade, Not sure if you had an answer/suggestion for this. I'm re-posting in case you missed the thread, or my phrasing wasn't too clear: Is it possible to place matching end-cap images on each side of the drop-down menu in order to create a "rounded" corners effect on the ends? Like adding a cell on each end to hold a .gif image...? Here's what I mean: http://www.musecards.com/store/DropDown.gif (If anyone else on this board has figured out how to do this, please let me know. Thanks!)

Sure, its possible, though I don't know how easy. What I would do is give the first and last menu item its own css style, maybe like this:

In includes/templates/YOUR_TEMPLATE/common/tpl_drop_menu.php, change this:

<li class="submenu"><a href="<?php echo zen_href_link(FILENAME_DEFAULT); ?>"><?php echo HEADER_TITLE_CATALOG; ?></a>

to this:

<li class="submenu" id="leftCap"><a href="<?php echo zen_href_link(FILENAME_DEFAULT); ?>"><?php echo HEADER_TITLE_CATALOG; ?></a>

and then change the last link:

        <li class="submenu" id="rightCap"><a class="noLine" 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 id="rightCap"><a class="noLine" href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a></li>

And then in the css, give #leftCap and #rightCap their own background images.

Your menu is still broken into two lines in Firefox... I posted some new css here:
http://www.zen-cart.com/forum/showpost.php?p=439680&postcount=484

which should fix the issue.

7 Oct 2007, 5:15 PM
#509
helpme avatar

helpme

Totally Zenned

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

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

jettrue:

Sure, since the shopping cart link is already using the style "noLine" you can style it however you want in the stylesheet. Try adding this to your stylesheet_header_menu.css:

div#dropMenu li a.noLine {background-color:#d3bacd;}

Of course using whatever color you prefer. :smile:

Ok, that worked, however as strange as this is it only stays that way if something isn't in the shopping cart.
I actually have another question not related but I am sure you will know what to do! My wordpress side box is missing the side frames. Where would this be?

Thanks your awesome.....

7 Oct 2007, 5:32 PM
#510
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!

helpme:

Ok, that worked, however as strange as this is it only stays that way if something isn't in the shopping cart.
I actually have another question not related but I am sure you will know what to do! My wordpress side box is missing the side frames. Where would this be?

Thanks your awesome.....

In includes/templates/YOUR_TEMPLATE/common/tpl_drop_menu.php, make sure the shopping cart section looks like this (see the class="noLine" in two places):

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

I would contact the wordpress sidebox creator about that. IT looks like the wordpress sidebox is missing the usual zencart tag of :

class="sideBoxContent"

That is what controls the side frames in the template you are using.
8 Oct 2007, 12:13 PM
#511
billybonds avatar

billybonds

Zen Follower

Join Date:
Nov 2003
Location:
UK
Posts:
102
Plugin Contributions:
0

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

Hello

Well it looks as if jettrue is the person to talk to so here goes...

Although this has been asked and answered I still cannot get it to work so maybe I am missing something?

I have installed the horizontal dropdown menu and it is not working in ie6.

I have double checked that all files have been uploaded correctly (including includes/csshover.htc) and

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

is at the top of stylesheet_header_menu.css

is there anything else that I may have missed?

Thanks,

Jim.

8 Oct 2007, 1:18 PM
#512
possum avatar

possum

New Zenner

Join Date:
Sep 2007
Posts:
58
Plugin Contributions:
0

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

THANKYOU!!!

My dropdowns are now working in IE6! Luckily nobody was around to see my embarassing victory dance.

Heaven's knows where the extra /* came from.

Really appreciate you taking the time to have a look. You've saved what's left of my sanity.

Possum.

8 Oct 2007, 2:21 PM
#513
bluealice avatar

bluealice

Zen Follower

Join Date:
Jan 2007
Posts:
148
Plugin Contributions:
0

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

Hello Jade/JetTrue,

Not sure if you had an answer/suggestion for this.

 **Is it possible to place matching end-cap images on each side of the drop-down menu in order to create rounded corners on the 2 end boxes? **

... Like adding a cell on each end to hold a .gif image...?

Here's an image of what I'm trying to achieve: http://www.musecards.com/store/DropDown.gif

PS: If you're not sure how to do this, please let me know so I don't keep posting the same question. Would hate to be a pest but I just have no way of knowing of you're bypassing on replying to my question. Thanks...

PPS: If anyone else knows how to do this, pls. share, and I will do the same if I figure out how. Thanks!

8 Oct 2007, 2:44 PM
#514
bluealice avatar

bluealice

Zen Follower

Join Date:
Jan 2007
Posts:
148
Plugin Contributions:
0

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

Awesome. Thanks so much for the thorough reply.

I'll play with that code it & also see if I can fix the FF problem. I use FF too and it's looking okay, but haven't tested on other computers to be sure.

Thanks again!

AW

jettrue:

Sure, its possible, though I don't know how easy. What I would do is give the first and last menu item its own css style, maybe like this:

In includes/templates/YOUR_TEMPLATE/common/tpl_drop_menu.php, change this:

<li class="submenu"><a href="<?php echo zen_href_link(FILENAME_DEFAULT); ?>"><?php echo HEADER_TITLE_CATALOG; ?></a>

to this:

<li class="submenu" id="leftCap"><a href="<?php echo zen_href_link(FILENAME_DEFAULT); ?>"><?php echo HEADER_TITLE_CATALOG; ?></a>

and then change the last link:

        <li class="submenu" id="rightCap"><a class="noLine" 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 id="rightCap"><a class="noLine" href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a></li>

And then in the css, give #leftCap and #rightCap their own background images.

Your menu is still broken into two lines in Firefox... I posted some new css here:
http://www.zen-cart.com/forum/showpost.php?p=439680&postcount=484

which should fix the issue.

8 Oct 2007, 8:37 PM
#515
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!

bluealice:

Hello Jade/JetTrue,

Not sure if you had an answer/suggestion for this.

 **Is it possible to place matching end-cap images on each side of the drop-down menu in order to create rounded corners on the 2 end boxes? **

... Like adding a cell on each end to hold a .gif image...?

Here's an image of what I'm trying to achieve: http://www.musecards.com/store/DropDown.gif

PS: If you're not sure how to do this, please let me know so I don't keep posting the same question. Would hate to be a pest but I just have no way of knowing of you're bypassing on replying to my question. Thanks...

PPS: If anyone else knows how to do this, pls. share, and I will do the same if I figure out how. Thanks!
Nevermind, I see you already saw my reply.

8 Oct 2007, 8:39 PM
#516
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!

billybonds:

Hello

Well it looks as if jettrue is the person to talk to so here goes...

Although this has been asked and answered I still cannot get it to work so maybe I am missing something?

I have installed the horizontal dropdown menu and it is not working in ie6.

I have double checked that all files have been uploaded correctly (including includes/csshover.htc) and

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

> 
> is at the top of stylesheet_header_menu.css
> 
> is there anything else that I may have missed?
> 
> Thanks,
> 
> Jim.

Could I see a link?
9 Oct 2007, 3:17 PM
#517
directdesign avatar

directdesign

New Zenner

Join Date:
Sep 2007
Posts:
14
Plugin Contributions:
0

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

Pleease Help,

I have installed your Mod to my website https://www.directdesignonline.com and now all my sideboxes and page images are gone it looks like the script ends after the dropdown menu if that makes since. When i add

<!--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-->

then after I install that in my tpl_header.php everything goes away and if I take it out everything is back. Any suggestions.

Thanks

10 Oct 2007, 1:28 AM
#518
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!

directdesign:

Pleease Help,

I have installed your Mod to my website https://www.directdesignonline.com and now all my sideboxes and page images are gone it looks like the script ends after the dropdown menu if that makes since. When i add

<!--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-->

then after I install that in my tpl_header.php everything goes away and if I take it out everything is back. Any suggestions.

Thanks

You have to be very careful when adding and pasting code. Make sure you're not writing over an important chunk. Also, watch out for those hidden HTML tags:

<!-- Hidden Stuff here-->

It looks like you have an extra --> on your site. If you don't pay close attention, those hidden tags done wrong will cause havoc. What you had happen is of course not default behavior, so something went wrong when you added it.

10 Oct 2007, 6:03 PM
#519
billybonds avatar

billybonds

Zen Follower

Join Date:
Nov 2003
Location:
UK
Posts:
102
Plugin Contributions:
0

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

Hi jettrue

Thanks for getting back to me. I'm re-installing the site and have reached the dropdown menu stage, again with the same problem in ie6.

So the url is http://www.africanart&masks.com

One thing I'm not sure of is where you mention the .htaccess file. I have includes/.htaccess but do NOT have root/.htaccess.

I'm not sure that this would be the problem anyway since my understanding is that the modifications are to do with using and not using www. in the url.

(It also wraps now in ie6 using version 1.3, which it did not in version 1.2)

Thanks for your help,

Jim.

10 Oct 2007, 7:58 PM
#520
homsteadmom avatar

homsteadmom

New Zenner

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

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

I'm using your drop menu and love it. :smile: But I need a little help...
I've installed a wordpress blog and the integration mod for it. That was a pain :frusty: but finaly got it. But I'd really like to have the blog accessible from the drop menu not the side boxes. However I have no idea how to set that up....If someone could point me in the right direction I'd appreciate it!!

Thanks,