CSS Dropdown menu for the header- With Categories!

cougar:

Gday jettrue

Thanks for the response, could you point in the right direction where this might be done...

Cheers

Cougar:
the stylesheet for the css menu is where you find it. the default is 1000. I wanted an image to overlay the menu, so I changed the Css menu stylesheet to 975 and made sure to set the image i want to overlay at z-index: 1000;

cougar:

Gday jettrue

Thanks for the response, could you point in the right direction where this might be done...

Cheers

Cougar:
you'll find it in stylesheet_header_css_menu.css. the default is 1000. I wanted an image to overlay the menu, so I changed the Css menu stylesheet to 975 and made sure to set the image i want to overlay at z-index: 1000; in stylesheet.css

JetBlue, I have attempted to search this thread before posting. I have not located answers after several hours so here goes.

1. How do you make the level 2 / submenu columns wider?
2. How do I put the search box on the menu bar?

I have been able to make sveral changes to the menu un-aided, but I'm stumpted.

I'm still just starting the site. https://www.medibiz.us any help would be appreciated.

Thanks
David

MediBiz:

JetBlue, I have attempted to search this thread before posting. I have not located answers after several hours so here goes.

1. How do you make the level 2 / submenu columns wider?
2. How do I put the search box on the menu bar?

I have been able to make sveral changes to the menu un-aided, but I'm stumpted.

I'm still just starting the site. https://www.medibiz.us any help would be appreciated.

Thanks
David

1. Change 12em to a wider value in includes/templates/YOUR_TEMPLATE/css/stylesheet_header_menu.css

2. I don't think that's possible, I don't know how.

newagekat:

Cougar:
you'll find it in stylesheet_header_css_menu.css. the default is 1000. I wanted an image to overlay the menu, so I changed the Css menu stylesheet to 975 and made sure to set the image i want to overlay at z-index: 1000; in stylesheet.css

Thanks for response...

Have tried changing all (6 times) the z-index in /includes/templates/my_template(comstock)/css/stylesheet_header_menu.css to various numbers above and below the default of 1000 to no avail.
I cannot find z-index listed in the /includes/templates/my_template(comstock)/css/stylesheet.css where would z-index # be inserted in this file? I have tried a few places where i thought, but still having menu showing behind the page listing in IE7. http://901.com.au/index.php

Cheers

Have included a screen shot to help explain problem better (Only in IE7)

I have a question about white/empty space between rows. I've done my due dilligence in searching this thread first. If I can get this to work correctly I'll gladly describe what I've done for future readers. I'm trying to utalize both CSS Drop Menu and CSS Flyout Menu. I want my customers to always be able to see the categories on the left, but I also want the top drop menus.

Please see https://www.medibiz.us to see what I'm attempting and what my problems look like.

I am using stylesheet_header_menu.css from drop menu as a replacement to flyout menu's stylesheet_categories_menu.css. That is why I'm posting my question here. Because I'm using Drop Menu's code. It is close to working correctly. I'd really appreciate any coding advice.

The vertical drop menu seems to be working fine.

The problems in the horizontal menu:

1. In the sub-level 1, there is white or empty space between the menu rows. This causes problems with mouse overs.
2. The display: block; doesn't seem to work for menu items that have sub-menus.
3. The on-hover for sub-level 1 menu items that contain sub-levels doesn't display the background image.

I've tried for hours before I turned to you all for advice.

I'd be happy to talk about what I've done to get these two menu systems to work together and/or share any code examples.

Thanks for your help.
David

Please ignore my previous request above. I've spent too much time on this already and can only anticipate more problems going forward. So I am going to remove CSS Flyout Menus and just keep CSS Drop Menus.

David

I apologize if this is mentioned previously but I cant seem to find an answer;
Is it possible to change the order in the Information drop down. I would like about_us to be at the top?

I would just like to say, this is a fantastic mod and you really do put in an incredible effort to help those of us who use it. Especially for people like me who don't have any programing skills but get by with their cut and paste skills.
Thank you.

earthcareoptions.co.uk

pfab:

I apologize if this is mentioned previously but I cant seem to find an answer;
Is it possible to change the order in the Information drop down. I would like about_us to be at the top?

I would just like to say, this is a fantastic mod and you really do put in an incredible effort to help those of us who use it. Especially for people like me who don't have any programing skills but get by with their cut and paste skills.
Thank you.

earthcareoptions.co.uk

Yes, open up includes/templates/YOUR_TEMPLATE/common/tpl_drop_menu.php. It should be fairly easy to reorder.

Hi Jade. Thanks for a great contribution.

Am I able to have a different coloured font for the submenus when there is a mouse hover over them versus when they are inactive? I.E the background for my menu is white fading to light grey, with dark grey font #666. I use the same background image for the hover in the submenus, which contrasts nicely with the standard submenu background colour #4f4f4f. However, when the submenu items aren't hovered over the background colour and text are too similar and very dark. I was hoping to change the non hovered text from 666 to plain white or very light grey.

URL below.

https://www.sgtpepper.com.au/store

Brendan

Hi Jade,
Thanks for a great mod! I love it.:smile:
I read through a lot of threads, but I couldnot find a good answer to my question.
I want the top bar of the menu and the dropdown menus to align to the left and right beneath each other.
I managed to fix this in the stylesheet_header_menu.css by adjusting the padding for the #divdropMenu ul to:
padding: 0 0 0 .6em; and the padding for the div#dropMenu li a to:
padding: .6em 0 .6em 1em;
I also changed the width 3 times from 12em to 13.8em. So far so good. Everything aligns to the left and beneath each other.
The only thing is that the hover of the dropdown menus isn't a complete hover. It misses a little bit on the left. I have no idea where I can change that. Can you help me?
Here is my testsite: http://www.jomedio.nl/zencart-menu/index.php?main_page=index

Johanna

Ok I have figured it out. I added the text align center to the dropmenu.
For everybody that wants the code.

Change the #divdropmenu ul to:

div#dropMenu ul {
margin:0;
padding: 0 0 0 .2em;
text-align:center;
Change the div#dropMenu li a to:

div#dropMenu li a {
display: block;
/* Hides from IE5-mac */
height: 1%;
/* End hide from IE5-mac */
padding: .6em 0 .6em 0.4em;
text-decoration: none;
text-transform:uppercase;
color:#ffffff;
text-align:left;
border-right:1px solid #ffffff;

**Change the 12em to 14.2em(3 times)**That's it!

Johanna:smile:

I'm relatively new and I don't use an FTP program. Where exactly do I install this? In the /includes folder? Sorry. v_v

~Indi

Scratch that, I figured it out....in order to have different coloured font for my level 1 items (the links people see without hovering) I added the following line to stylesheet_header_menu.css

div#dropMenu ul.level1 a {padding: 0.5em 0 0.5em 0.25em;color: #666; text-transform:none;}

Hi.
I am having problems displaying subcategories. They do not appear in the drop down menu. If you have time please have a look.

Am I missing something simple?

Thank you

http://earthcareoptions.co.uk

libralion:

Hi Jade,
Thanks for a great mod! I love it.:smile:
I read through a lot of threads, but I couldnot find a good answer to my question.
I want the top bar of the menu and the dropdown menus to align to the left and right beneath each other.
I managed to fix this in the stylesheet_header_menu.css by adjusting the padding for the #divdropMenu ul to:
padding: 0 0 0 .6em; and the padding for the div#dropMenu li a to:
padding: .6em 0 .6em 1em;
I also changed the width 3 times from 12em to 13.8em. So far so good. Everything aligns to the left and beneath each other.
The only thing is that the hover of the dropdown menus isn't a complete hover. It misses a little bit on the left. I have no idea where I can change that. Can you help me?
Here is my testsite: http://www.jomedio.nl/zencart-menu/index.php?main_page=index

Johanna
Change this section to this:

div#dropMenu ul {
margin:0;
padding: 0;
text-align:center;
}

Then remove this padding:

padding: 0.5em 0 0.5em 0.25em;

pfab:

Hi.
I am having problems displaying subcategories. They do not appear in the drop down menu. If you have time please have a look.

Am I missing something simple?

Thank you

http://earthcareoptions.co.uk

Yes, you're missing something simple. Read the readme.txt! :cool:

jettrue:

Yes, you're missing something simple. Read the readme.txt! :cool:

Hi J

I cant seem to find the problem. I have followed the instructions and have read the read me file so many times that my eyes will need surgical correction.

The simplicity of what I am missing is way beyond me :blink:

Thanks

P

pfab:

Hi J

I cant seem to find the problem. I have followed the instructions and have read the read me file so many times that my eyes will need surgical correction.

The simplicity of what I am missing is way beyond me :blink:

Thanks

P

From the readme (I can tell this is your issue, because your menu works fine in firefox):

5. For full compatibility with IE browsers prior to IE7, you can add the sample code within the "additions to .htaccess" file to your ROOT folder's .htaccess file (if no file exists, you can create one. NOTE- if you were looking in your root folder, the .htaccess file would belong right above the "admin" folder). For example:

.htaccess <-- .htaccess belongs here
admin
cache
download
editors
email
etc.

FIRST check your includes/configure.php file to see if your website is defined as "http://www.yoursite.com" or "http://yoursite.com". Be sure to change "yoursite" to your actual site name.

If your website is defined as "http://www.yoursite.com" enter this into your root folders .htaccess file:

RewriteEngine On
RewriteCond %{HTTP_HOST} ^yoursite.com$ [NC]
RewriteRule ^(.*)$ http://www.yoursite.com/$1 [R=301,L]

If your website is defined as "http://yoursite.com" enter this into your root folders .htaccess file:

RewriteEngine On
RewriteCond %{HTTP_HOST} ^www.yoursite.com$ [NC]
RewriteRule ^(.*)$ http://yoursite.com/$1 [R=301,L]

And be sure to add this to the end of your .htaccess file:

the following makes sure the correct mime type is sent for the .htc file

AddType text/x-component .htc