JoshNYC128
asked on
Using cool menus.
So i'm using coolmenu's and I don't want the border on every cell. Every cell has a border that is linked to the back-ground layer of the top. If for instance i change the back-ground layer and it will not only change the border color but the top bar color. I want to rid this and just have the matching color of what i have in the cells. In another words removing the border.
Here is the source of the CSS file. If this isn't clear or you want more of the code just respond and i'll put it up online.
TD,P,B,INPUT,DIV{font-fami
.clCMEvent{position:absolu
.clCMAbs{position:absolute
.clT,.clTover,.clS,.clSove
.clT,.clTover{padding: 4px; font-size:12px; font-weight:bold}
.clT{color:#003366; } /*top level text color*/
.clTover{color:#c20000;} /*#FCCE55*/
.clS,.clSover{padding: 2px; font-size:11px; font-weight:bold}
.clS2,.clS2over{padding: 2px; font-size:11px;}
.clS,.clS2{color: #336699; background-color:#cddbeb; layer-background-color:#cd
.clSover,.clS2over{color:#
.clSover,.clS2over,.clTove
/*clTover is the top bar. */
.clB{position:absolute; visibility:hidden; z-index:300}
.clBar{position:absolute; width:10; height:10; visibility:hidden; }
Thanks, Josh.
Here is the source of the CSS file. If this isn't clear or you want more of the code just respond and i'll put it up online.
TD,P,B,INPUT,DIV{font-fami
.clCMEvent{position:absolu
.clCMAbs{position:absolute
.clT,.clTover,.clS,.clSove
.clT,.clTover{padding: 4px; font-size:12px; font-weight:bold}
.clT{color:#003366; } /*top level text color*/
.clTover{color:#c20000;} /*#FCCE55*/
.clS,.clSover{padding: 2px; font-size:11px; font-weight:bold}
.clS2,.clS2over{padding: 2px; font-size:11px;}
.clS,.clS2{color: #336699; background-color:#cddbeb; layer-background-color:#cd
.clSover,.clS2over{color:#
.clSover,.clS2over,.clTove
/*clTover is the top bar. */
.clB{position:absolute; visibility:hidden; z-index:300}
.clBar{position:absolute; width:10; height:10; visibility:hidden; }
Thanks, Josh.
In the local version I have, the border color is set with these, depending on the levels being used. I'd need to know what release you're using to know how it differs...
.clLevel0border{position:a
.clLevel1border{position:a
.clLevel2border{position:a
Sean
.clLevel0border{position:a
.clLevel1border{position:a
.clLevel2border{position:a
Sean
ASKER
Hi guys, I'm using Version 4.0_beta.
Sean, I'm not sure where your using those border stylesheets. I've looked through these few sheets but i don't see anything.
Josh.
Sean, I'm not sure where your using those border stylesheets. I've looked through these few sheets but i don't see anything.
Josh.
Hmmm - that's odd.
They still appear to be listed in that version:
http://www.dhtmlcentral.com/projects/coolmenus/examples/menu1.html
Can you point me to the specific menu script and then we can customize it for you?
Sean
They still appear to be listed in that version:
http://www.dhtmlcentral.com/projects/coolmenus/examples/menu1.html
Can you point me to the specific menu script and then we can customize it for you?
Sean
ASKER
Those menu's are just nuts... 475 lines of javascript that can be handled in 12.
I don't (at the moment) see where that's being generated. While I'm looking, feel free to look at this posted at my site.
http://www.pdgmedia.com/code/menus/css_multiple.html
I don't (at the moment) see where that's being generated. While I'm looking, feel free to look at this posted at my site.
http://www.pdgmedia.com/code/menus/css_multiple.html
ASKER
Sean, I'm trying to have drop downs similar to a site www.solectron.com
Here is a link of my own personal webspace with the drop downs i have right now and the way they are acting. http://bingweb.binghamton.edu/~jspinde2/pulldown/default.html
See the lines in the space. I don't want those lines. I want them to be the same exact color as the cells. I can make them solid by changing the background-color: property i can get it to be solid. However the top part of the bar changing also. And i don't want this to happen.
.clSover,.clS2over,.clTove
Thanks, Josh
Here is a link of my own personal webspace with the drop downs i have right now and the way they are acting. http://bingweb.binghamton.edu/~jspinde2/pulldown/default.html
See the lines in the space. I don't want those lines. I want them to be the same exact color as the cells. I can make them solid by changing the background-color: property i can get it to be solid. However the top part of the bar changing also. And i don't want this to happen.
.clSover,.clS2over,.clTove
Thanks, Josh
ASKER
Oh i forgot to mention. Can you simulate my design on your css code?
Josh.
Josh.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Your the man sean. Do you mind explaining a little about the code and if it is cross browser compliant. And what the use of the javascript is doing and that regular expression part.
Thanks,
Josh
Thanks,
Josh
No problem...
Cross-browser? Completely, even more so than the other one, and loads in a 10th of the time. :-)
The deal with the code is pretty basic actually:
1. We create a list, and then use CSS to display it in a horizontal menu and remove the default bullets.
2. We create a nested list, for whichever items require a drop-down.
3. We use CSS to initially hide that nested list:
/* Hide the drop-downs until mouseover */
#nav li ul
{
position: absolute;
left: -999em;
width: 164px;
}
4. And then some more CSS to pull it back into view onmouseover:
/* Show the drop-downs on mouseover */
#nav li:hover ul, #nav li.sfhover ul
{
/* this sets the left hand edge equal to the left hand edge of whatever list item it's in... */
left: auto;
}
5. In Mozilla, Opera, Konqueror, Safari, etc, the menu is complete. This line from #4 above: [ #nav li:hover ul ] says: when the mouse is hovering on the top list item, apply the CSS styles to the nested ul tag, and voila, we have a fully functional, easy to configure drop-down that works beautifully and can still be read and navigated even if the user has all CSS and javascript turned off. (Not so with the coolmenus...)
6. This is where the 3 year-old Internet Explorer shows up for a last drink after the bar has closed down. And why we need the javascript.
Since IE can "only" apply the CSS hover rule to <a> tags, we need to trick it into applying the hover on <li> tags as well, in order for this menu to work. The javascript, in a nutshell says, "For any li tags within a container with an id of nav, call the onmouseover function when applying the class sfhover". (And then remove it onmouseout.)
And that's really all there is. Hopefully it will become your best friend, as it certainly has mine :-)
Sean
Cross-browser? Completely, even more so than the other one, and loads in a 10th of the time. :-)
The deal with the code is pretty basic actually:
1. We create a list, and then use CSS to display it in a horizontal menu and remove the default bullets.
2. We create a nested list, for whichever items require a drop-down.
3. We use CSS to initially hide that nested list:
/* Hide the drop-downs until mouseover */
#nav li ul
{
position: absolute;
left: -999em;
width: 164px;
}
4. And then some more CSS to pull it back into view onmouseover:
/* Show the drop-downs on mouseover */
#nav li:hover ul, #nav li.sfhover ul
{
/* this sets the left hand edge equal to the left hand edge of whatever list item it's in... */
left: auto;
}
5. In Mozilla, Opera, Konqueror, Safari, etc, the menu is complete. This line from #4 above: [ #nav li:hover ul ] says: when the mouse is hovering on the top list item, apply the CSS styles to the nested ul tag, and voila, we have a fully functional, easy to configure drop-down that works beautifully and can still be read and navigated even if the user has all CSS and javascript turned off. (Not so with the coolmenus...)
6. This is where the 3 year-old Internet Explorer shows up for a last drink after the bar has closed down. And why we need the javascript.
Since IE can "only" apply the CSS hover rule to <a> tags, we need to trick it into applying the hover on <li> tags as well, in order for this menu to work. The javascript, in a nutshell says, "For any li tags within a container with an id of nav, call the onmouseover function when applying the class sfhover". (And then remove it onmouseout.)
And that's really all there is. Hopefully it will become your best friend, as it certainly has mine :-)
Sean
...sorry, forgot the link to where this all started:
http://www.htmldog.com/articles/suckerfish/dropdowns/
Have fun :-)
http://www.htmldog.com/articles/suckerfish/dropdowns/
Have fun :-)
On the other hand, just using a quicksearch on the color value of the border didn't reveal the location on to where the border-color has been set?
regards
-r-