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

Results 1,161 to 1,180 of 2,344
26 Aug 2008, 5:27 PM
#1161
chabates avatar

chabates

New Zenner

Join Date:
Apr 2008
Location:
Ontario
Posts:
76
Plugin Contributions:
0

CSS Dropdown menu for the header- With Categories!

Issue i'm having in firefox...

I am using an image for the main nav bar, I deleted all the text in the navigation (i.e. home, catergories, my account....) and I am not using a hover color.

My main bar is 29px high and it is working exactly how i want it to in IE7. The problem is that in FF the submenu is flying out ontop of the image i have for the main nav bar (I believe this is because there is no text). I cannot seem to figure out a way to fix this.

Please help! site in progress at www.newsuncookies.com/store

26 Aug 2008, 5:38 PM
#1162
poosk avatar

poosk

Totally Zenned

Join Date:
Mar 2005
Location:
Helsinki
Posts:
477
Plugin Contributions:
0

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

Ok could someone help with categories_ul creator (whatever it was called)...

Can I somehow (easily) make it to remove link if category wouldn't have products? I don't mean to disable category; the name would still remain in the menu only the link to the category would be disabled until products are added?!

27 Aug 2008, 3:45 AM
#1163
welchyboy avatar

welchyboy

Zen Follower

Join Date:
Apr 2008
Posts:
274
Plugin Contributions:
0

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

Sorry to keep posting about the same darn issue but it still seems to not be fixed. I could have sworn earlier it was displaying right. Can anyone see the problem with alignment on my site in internet explorer. In Firefox I see a blank space at the right end and in IE7 I see Photo Gallery on a second line. I tried cleaning up my top_main.php file which jettrue helped me with and I thought it worked. However after cleaning the cache multiple times and reloading it I see that the issue has still not changed. Does anyone have any thoughts on how to fix this to where the header will display properly. The site is

http://www.wpc-consulting.com/~stxmill/

Thanks

27 Aug 2008, 6:34 PM
#1164
welchyboy avatar

welchyboy

Zen Follower

Join Date:
Apr 2008
Posts:
274
Plugin Contributions:
0

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

OK I have determined why the header works great in IE7 while I am at work. I remote into my home computer and it appears to work on my home computer however when sitting right in front of the computer i see it miss aligned for some reason. Well this could be that when I am at work remoting into my home computer I am viewing this page with a 19 inch wide screen monitor. The widescreen might make a difference. So if this possibly helps anyone solve this issue. It seems as for some reason it is too wide so it has to go to the next line. However if it was a width issue you would think it would do it as well in firefox. Any thoughts on this.

27 Aug 2008, 8:32 PM
#1165
rickiesdiscount avatar

rickiesdiscount

Zen Follower

Join Date:
Jul 2008
Posts:
229
Plugin Contributions:
0

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

jettrue:

The menu isn't causing that problem. It's issues in your css. The home login isn't showing up because of this:

#navMainSearch {
float: right;
}

It needs to be changed to

#navMainSearch {
text-align: right;
}

Hey thanks a lot that fixed the problem

28 Aug 2008, 10:10 AM
#1166
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!

welchyboy:

Sorry to keep posting about the same darn issue but it still seems to not be fixed. I could have sworn earlier it was displaying right. Can anyone see the problem with alignment on my site in internet explorer. In Firefox I see a blank space at the right end and in IE7 I see Photo Gallery on a second line. I tried cleaning up my top_main.php file which jettrue helped me with and I thought it worked. However after cleaning the cache multiple times and reloading it I see that the issue has still not changed. Does anyone have any thoughts on how to fix this to where the header will display properly. The site is

http://www.wpc-consulting.com/~stxmill/

ThanksDid you try decreasing the menu width to 99% instead of 100%?

28 Aug 2008, 9:38 PM
#1167
welchyboy avatar

welchyboy

Zen Follower

Join Date:
Apr 2008
Posts:
274
Plugin Contributions:
0

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

Not sure where to change that. I tried in the top_main.php and the top.php where the flash file and image are located all it did was make the flash file or image smaller. I went into tpl_drop_menu.php and cut a whole like which consists of one button on the header and it fixed in IE. It didn't matter which one i deleted though so it is not a specific button or link on there I just need to figure out how to edit the width of each button or something to shrink them in a little. It also needs to appear similar in both browsers. How can i accomplish this?

28 Aug 2008, 10:06 PM
#1168
welchyboy avatar

welchyboy

Zen Follower

Join Date:
Apr 2008
Posts:
274
Plugin Contributions:
0

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

OK I have figured it out... I edited the stylesheet_header_menu.css and changed this part of it.

	/* Firefox Setting for Width */
	width:14.280%;
	/* IE Setting for Width */
	*width:14.290%;
	}

The two width's in this code. I added the comments because changing one I found out didn't do anything for the other browser. so I had to change both of them to get it to look nearly the same in both types of browsers. Don't change this width here or it will actually decrease the entire width of the navagation bar instead of the actual links on it. Thanks for everyone's help especially yours Jade much appreciated for your time and patiences.

div#dropMenu {
	width:100%;
	margin:0 auto;
    text-align:center;
29 Aug 2008, 1:28 PM
#1169
poosk avatar

poosk

Totally Zenned

Join Date:
Mar 2005
Location:
Helsinki
Posts:
477
Plugin Contributions:
0

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

MSIE 6 doesn't display list items inline.. any idea how to fix it?

cheers

29 Aug 2008, 8:23 PM
#1170
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!

poosk:

MSIE 6 doesn't display list items inline.. any idea how to fix it?

cheers

Does this happen at my test site

http://www.zencart137.jadetrue.com

If not, reupload the original stylesheet_header_menu.css, and make sure you read the readme that gives instructions on making this compatible with all versions of IE>

30 Aug 2008, 12:18 AM
#1171
bsteinagel avatar

bsteinagel

Zen Follower

Join Date:
Sep 2007
Location:
Neenah, WI
Posts:
112
Plugin Contributions:
0

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

I have the Column Layout Grid mod installed and it seems that it's fussy about changes being made to the tpl_drop_menu.php file. What I'm trying to do is add a sublink to the top level "Tips & Tricks" link of my website. Whenever I modify the code to tpl_drop_menu.php to add that sublink, it screws up the spacing of my images on the Landscape gallery of my site. None of the other galleries are effected. After removing the code and reverting to the original tpl_drop_menu.php file, the problem goes away. Here's the code before I modified the tpl drop menu file:

<li class="submenu"><a href="<?php echo zen_href_link(FILENAME_DEFAULT); ?>"><?php echo HEADER_TITLE_INFORMATION; ?></a>
              <ul class="level2">
			    <?php if (DEFINE_SHIPPINGINFO_STATUS <= 1) { ?>
                <!-- <li><a href="<?php echo zen_href_link(FILENAME_SHIPPING); ?>"><?php echo HEADER_TITLE_SHIPPING_INFO; ?></a></li> -->
				<?php } ?>
				<?php if (DEFINE_PRIVACY_STATUS <= 1)  { ?>
                <!-- <li><a href="<?php echo zen_href_link(FILENAME_PRIVACY); ?>"><?php echo HEADER_TITLE_PRIVACY_POLICY; ?></a></li> -->
				<?php } ?>
				<?php if (DEFINE_CONDITIONS_STATUS <= 1) { ?>
               <!-- <li><a href="<?php echo zen_href_link(FILENAME_CONDITIONS); ?>"><?php echo HEADER_TITLE_CONDITIONS_OF_USE; ?></a></li> -->
				<?php } ?>
		   <!--<li><a href="<?php echo zen_href_link(FILENAME_ABOUT_US); ?>"><?php echo HEADER_TITLE_ABOUT_US; ?></a></li>-->
                <?php if (DEFINE_SITE_MAP_STATUS <= 1) { ?>
               <!-- <li><a href="<?php echo zen_href_link(FILENAME_SITE_MAP); ?>"><?php echo HEADER_TITLE_SITE_MAP; ?></a></li> -->
                <?php } ?>
                <?php if (MODULE_ORDER_TOTAL_GV_STATUS == 'true') { ?>
                <li><a href="<?php echo zen_href_link(FILENAME_GV_FAQ, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_GV_FAQ; ?></a></li>
                <?php } ?>
                <?php if (MODULE_ORDER_TOTAL_COUPON_STATUS == 'true') { ?>
                <li><a href="<?php echo zen_href_link(FILENAME_DISCOUNT_COUPON, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_DISCOUNT_COUPON; ?></a></li>
                <?php } ?>
                <?php if (SHOW_NEWSLETTER_UNSUBSCRIBE_LINK == 'true') { ?>
                <li><a href="<?php echo zen_href_link(FILENAME_UNSUBSCRIBE, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_UNSUBSCRIBE; ?></a></li>
                <?php } ?>
                <?php require(DIR_WS_MODULES . 'sideboxes/' . $template_dir . '/' . 'ezpages_drop_menu.php'); ?>
              </ul>
            </li>

and here is the same code after with the changed portion hilighted:

<li class="submenu"><a href="<?php echo zen_href_link(FILENAME_DEFAULT); ?>"><?php echo HEADER_TITLE_INFORMATION; ?></a>
              <ul class="level2">
			   <li><a href="<?php echo zen_href_link (FILENAME_CHOOSING_A_TRIPOD_SYSTEM); ?>"><?php echo HEADER_TITLE_CHOOSING_A_TRIPOD_SYSTEM; ?></a></li>
			    <?php if (DEFINE_SHIPPINGINFO_STATUS <= 1) { ?>
                <!-- <li><a href="<?php echo zen_href_link(FILENAME_SHIPPING); ?>"><?php echo HEADER_TITLE_SHIPPING_INFO; ?></a></li> -->
				<?php } ?>
				<?php if (DEFINE_PRIVACY_STATUS <= 1)  { ?>
                <!-- <li><a href="<?php echo zen_href_link(FILENAME_PRIVACY); ?>"><?php echo HEADER_TITLE_PRIVACY_POLICY; ?></a></li> -->
				<?php } ?>
				<?php if (DEFINE_CONDITIONS_STATUS <= 1) { ?>
               <!-- <li><a href="<?php echo zen_href_link(FILENAME_CONDITIONS); ?>"><?php echo HEADER_TITLE_CONDITIONS_OF_USE; ?></a></li> -->
				<?php } ?>
		   <!--<li><a href="<?php echo zen_href_link(FILENAME_ABOUT_US); ?>"><?php echo HEADER_TITLE_ABOUT_US; ?></a></li>-->
                <?php if (DEFINE_SITE_MAP_STATUS <= 1) { ?>
               <!-- <li><a href="<?php echo zen_href_link(FILENAME_SITE_MAP); ?>"><?php echo HEADER_TITLE_SITE_MAP; ?></a></li> -->
                <?php } ?>
                <?php if (MODULE_ORDER_TOTAL_GV_STATUS == 'true') { ?>
                <li><a href="<?php echo zen_href_link(FILENAME_GV_FAQ, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_GV_FAQ; ?></a></li>
                <?php } ?>
                <?php if (MODULE_ORDER_TOTAL_COUPON_STATUS == 'true') { ?>
                <li><a href="<?php echo zen_href_link(FILENAME_DISCOUNT_COUPON, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_DISCOUNT_COUPON; ?></a></li>
                <?php } ?>
                <?php if (SHOW_NEWSLETTER_UNSUBSCRIBE_LINK == 'true') { ?>
                <li><a href="<?php echo zen_href_link(FILENAME_UNSUBSCRIBE, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_UNSUBSCRIBE; ?></a></li>
                <?php } ?>
                <?php require(DIR_WS_MODULES . 'sideboxes/' . $template_dir . '/' . 'ezpages_drop_menu.php'); ?>
              </ul>
            </li>

I also have some before and after pictures to show you how the image spacing gets messed up after inserting the new code for the sublink:

Before

After

What's weird is that after refreshing the page, the spacing corrects itself. But if I click on the Landscapes link under Gallery from another page, the spacing is askew.
Thanks to all those who can shed some light on this for me.

Brad

30 Aug 2008, 9:33 AM
#1172
bsteinagel avatar

bsteinagel

Zen Follower

Join Date:
Sep 2007
Location:
Neenah, WI
Posts:
112
Plugin Contributions:
0

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

Hello,

After adding a top level category to my menu, I'm now having problems getting it centered on the page. You can see my site by using the link in my signature if you need to check out my code.

Any help is greatly appreciated, and I have searched this thread for answers to my issue but haven't found anything that works yet.

Thanks,
Brad

2 Sep 2008, 9:27 AM
#1173
ces avatar

ces

Zen Follower

Join Date:
Nov 2004
Location:
West Mids, England
Posts:
199
Plugin Contributions:
0

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

Hi Jade

Have you tested IE8 on ZenCart yet?

I've just downloaded the beta2 and tried it out because I have heard it sometimes 'breaks' sites designed for IE6/IE7!

Tested it on my site: https://www.NicheLocks.com and it does break the dropdown menu.

Also tried http://www.zencart137.jadetrue.com/ and although it works better, it is still not perfect.

Good news is, it works fine in 'compatability' mode.

Love to hear your thoughts.

Craig

2 Sep 2008, 1:15 PM
#1174
0be1 avatar

0be1

Totally Zenned

Join Date:
Sep 2004
Location:
Murfreesboro, TN
Posts:
479
Plugin Contributions:
0

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

Not sure if this is possible but I thought I would post anyway...

First off the MOD seems to be AWESOME, GREAT work!!! :clap:

Secondly the site in question is:

http://www.bornagaintechnologies.org

Now the question.

According to the readme file on how to setup I did not like the additional outcome. I did not like the links appearing in the header above the css menu (even though I had the links turned off in layout settings). Also I was hoping to somehow replicate the custom sidebox information into the menus so for example the sidebox that says corporate supporters would go under categories.

Would there also be a way to distinguish which ezpage could (would) go under a different part of the menu?

I understand that you are building the categories part of the menu by pulling in the categories, but we do not currently sell anything and have used zc for more of a CMS than anything. We would like to use your mod, but if we cannot do these things without extensive coding we understand. We just took everything out of categories and used the blank sideboxes contrib for cleaner administration.

tia for the answers :smile:

Sincerely,

0be1

2 Sep 2008, 2:00 PM
#1175
0be1 avatar

0be1

Totally Zenned

Join Date:
Sep 2004
Location:
Murfreesboro, TN
Posts:
479
Plugin Contributions:
0

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

One more thing...

I need to turn off the shopping cart and my account links as well.

thanks again

0be1

2 Sep 2008, 2:31 PM
#1176
slck avatar

slck

New Zenner

Join Date:
Jul 2008
Posts:
9
Plugin Contributions:
0

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

Hi all,

I installed the CSS Dropdown menu with no problems. Then I removed the backgrounds from all the lines in the .css file, because I want my menu to be transparent:

div#dropMenu ul.level2 { ackground:#4f4f4f; z-index:1000; position:absolute; left:0; }

However, in IE7, the drop-down menu section disapears when moving the mouse down after the 3rd or the 4th line.
In FireFox it works well.

I added the .htaccess lines but still no good.
On http://www.zencart137.jadetrue.com/ it's all good.

Any ideas how this should be fixed?

P.S.: Sorry if the topic had been discussed, but 118 pages are a lot to read..

Thank you in advance.

2 Sep 2008, 2:37 PM
#1177
0be1 avatar

0be1

Totally Zenned

Join Date:
Sep 2004
Location:
Murfreesboro, TN
Posts:
479
Plugin Contributions:
0

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

Slck;

Not sure if you knew this or not, but to trim down an elephant like a 118 pages, you can search for key words within the threads by click on search thread. With that said I did so for missing mouse and came up with the following:

http://www.zen-cart.com/forum/showthread.php?p=455974&highlight=mouse+missing#post455974

I hope this helps :smile:

Sincerely,

0be1

2 Sep 2008, 2:41 PM
#1178
slck avatar

slck

New Zenner

Join Date:
Jul 2008
Posts:
9
Plugin Contributions:
0

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

Yes, thank you for the search tip.

However, I discovered that the problem is caused by removing a background attribute in the .css file.

My idea is to make the menu transparent. Any ideas how that could be achieved?

2 Sep 2008, 9:05 PM
#1179
100asa avatar

100asa

Totally Zenned

Join Date:
Oct 2006
Location:
Italy
Posts:
636
Plugin Contributions:
0

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

I think that this question has been made many times, but I am sorry I did not found it. I use very pleased with this menu very fast and beautiful on my site 100asa.it, but the flash banner covering the drop-down menu. How do to solve? (I've try with wmode=trasparent not work)

2 Sep 2008, 11:31 PM
#1180
chabates avatar

chabates

New Zenner

Join Date:
Apr 2008
Location:
Ontario
Posts:
76
Plugin Contributions:
0

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

Sorry i think my question got lost in the thread:

Issue i'm having in firefox...

I am using an image for the main nav bar, I deleted all the text in the navigation (i.e. home, catergories, my account....) and I am not using a hover color.

My main bar is 29px high and it is working exactly how i want it to in IE7. The problem is that in FF the submenu is flying out ontop of the image i have for the main nav bar (I believe this is because there is no text). I cannot seem to figure out a way to fix this.

Please help! site in progress at www.newsuncookies.com/store

I have tried fiddling around with alot of values and can't seem to figure out why it does this in firefox and not internet explorer