Re: CSS Dropdown menu for your header- With Categories!
Hi there and thanks for a fantastic mod! I've modified the menu quite heavily, but found no way of creating a "tree". What I basically want to do is...
Code:
Menu header 1
|_ Submenu A
|_ Item A
|_ Item B
|_ Item C
|_Submenu B
|_Submenu C
|_Submenu D
|_ Item A
|_ Item B
|_ Item C
How do I create the tree branches for Item A-B-C? This has nothing to do with categories, as I've already removed them, but with ordinary menu items. Categories seems to rely on ul_generator, I want to go way more simple and hard code it in there.
Re: CSS Dropdown menu for your header- With Categories!
Quote:
Originally Posted by
scrap
Hi there and thanks for a fantastic mod! I've modified the menu quite heavily, but found no way of creating a "tree". What I basically want to do is...
Code:
Menu header 1
|_ Submenu A
|_ Item A
|_ Item B
|_ Item C
|_Submenu B
|_Submenu C
|_Submenu D
|_ Item A
|_ Item B
|_ Item C
How do I create the tree branches for Item A-B-C? This has nothing to do with categories, as I've already removed them, but with ordinary menu items. Categories seems to rely on ul_generator, I want to go way more simple and hard code it in there.
Bump. Noone?
Re: CSS Dropdown menu for your header- With Categories!
Hi,
I need some help getting my styling right with this mod.
Biggest issue is with the sub-cats. When they show up, the borders are not long enough on either sides and the name of the cats are not centered at all - they favor the top portion of the space. Also when they come up, they are about halfway up the 'block' of the main cats.
The main cats are ok, but I would like them to be more centered in their blocks, they favor the top. Also for 'Gift Catalog, when you hover the mouse over it, the bottom border disappears!
I guess the best thing I can do is to give a link to my site, so that you can see what I'm saying: http://www.a u t o m o t i v e a c e.com. The site is currently down for maint' don't worry about that.
Also here is the css, I have made some changes (in an attempt to custom style it!) which have comments by them:
Code:
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: #005599/*ffffff*/!important;background:#eeeeee/*005599 6C99D9 116eb9*/;text-decoration:underline/*added*/;}
/*red
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover, div#dropMenu ul.level2 a:hover {color: #ffffff!important;background:#DC262E;}
*/
/*grey
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover, div#dropMenu ul.level2 a:hover {color: #4f4f4f!important;background:#D5D5D5;}
*/
#dropMenuWrapper {
width:100%;
height:42px;/*25px*/
margin:0;
font-size:9px;/*11px*/
/*background-color: #eeeeee;/*added*/
}
div#dropMenu { /*width of top level categories across the top*/
width:100%;/*750px*/
margin:0 auto;
text-align:;/*center*/
z-index:1000;
position:relative;
}
div#dropMenu ul {
margin:0;
padding:0;
}
div#dropMenu li {
position: relative;
list-style: none;
margin: 0;
float: left;
line-height:1em;/*1em adjusts the height of the menu items*/
width:10%;/*added*/
*width:9.8%;/*added*/
}
div#dropMenu ul.level1 {
width:100%;/*750px*/
margin:0 auto;
text-align:center;/*center*/
background:#eeeeee;/*4f4f4f 005599*/
height:38px;/*25px adjusts the height of the color*/
z-index:1000;
border-top:2px solid #00008b;/*added 005599*/
border-bottom:2px solid #00008b;/*added 005599*/
}
div#dropMenu li:hover {}
div#dropMenu li.submenu {}
div#dropMenu li.submenu:hover {}
div#dropMenu li a {display: block; padding: 7px 5px/*25px*/;text-decoration: none; text-transform:uppercase; color:#005599/*ffffff*/; text-align:center/*center*/; border-right:1px solid #005599/*ffffff*/; border-left:1px solid #005599/*added ffffff*/; border-bottom: 0px solid #005599/*added*/;height:26px/*added*/;}
div#dropMenu>ul a {width: auto;}
div#dropMenu ul ul {position: absolute; width: 13em;display: none;}
div#dropMenu ul ul li {border-bottom: 1px solid #116eb9/*ccc*/; width:13em/*13*/;padding:4px 0/*added*/;}
div#dropMenu li.submenu li.submenu {}
div#dropMenu ul.level1 li.submenu:hover ul.level2,
div#dropMenu ul.level2 li.submenu:hover ul.level3,
div#dropMenu ul.level3 li.submenu:hover ul.level4,
div#dropMenu ul.level4 li.submenu:hover ul.level5 {display:block;z-index:1000;}
div#dropMenu ul.level2 {top: 2.17em; background:#eeeeee/*4f4f4f 005599*/;z-index:1000;}
div#dropMenu ul.level3, div#dropMenu ul.level4, div#dropMenu ul.level5 {top: 0; left: 13em; background:#eeeeee/*4f4f4f 005599*/;}
div#dropMenu ul.level2 a {padding: 0.5em 0.25em;color:#005599/*white ffffff*/; text-transform:none;} /* this is text color on drop-down submenu */
div#dropMenu ul.level2 a:hover {color:#4f4f4f/*005599*/;}
Any help is greatly appreciated!
Re: CSS Dropdown menu for your header- With Categories!
my dropdown menu isn't working on ie !!! I mean submenus don't show up!!!
my website is alepia.ch
Re: CSS Dropdown menu for your header- With Categories!
http://www.purelypoultry.com/
I only want one layer of categories to show in the Dropdown box.
Right now if you hover to Products-> books it will show several sub categories of books. I would like the Dropdown menu to only show books and then you can click on books and go to the books page and select the subcategories.
This would eliminate 20 links from every page and if they are subcategories they do not need to be linked from every page.
I am trying to lower the number of links from each page to less than 100 because google says they want less than 100 links on each page.
Re: CSS Dropdown menu for your header- With Categories!
Can we get some help here?
Re: CSS Dropdown menu for your header- With Categories!
Hi,
I just uploaded all the files, but I can't see the menu. I think I must have turned something off ages ago when I set the site up. Can you tell me what I've turned off?
www.imaginart.com.au
Thanks!
Kind Regards,
Brian
Re: CSS Dropdown menu for your header- With Categories!
I have just been told to turn on the Categories-Tabs Menu. This has done something...but not sure if it is what I'm after??? It certainly turned something on, but it is above the header (I thought it would be under) and it isn't a drop down type menu. So, there is either a different menu I need to turn on, or that is it and I now have a problem with the mod itself re positioning and not being a drop down.
Quote:
Originally Posted by
Brian Flanagan
Hi,
I just uploaded all the files, but I can't see the menu. I think I must have turned something off ages ago when I set the site up. Can you tell me what I've turned off?
www.imaginart.com.au
Thanks!
Kind Regards,
Brian
Re: CSS Dropdown menu for your header- With Categories!
I don't think jettrue has been around lately, unfortunately.
As well as uploading all the files, did you insert the lines of code into the header file?
Sorry I can't be more specific at the moment but I'm doing this from memory and it's been quite a while since I installed this mod. I'm sure all the instructions are in the readme.
Craig
Re: CSS Dropdown menu for your header- With Categories!
Thanks. Turns out I was putting the header info too high up in the file. I moved it down and it fixed the issue.
