Solved

Using cool menus.

Posted on 2004-09-21
12
534 Views
Last Modified: 2012-08-13
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-family:arial,helvetica; font-size:12px}
.clCMEvent{position:absolute; z-index:300; width:100%; height:100%; clip:rect(0,100%,100%,0); left:0; top:0; visibility:hidden}
.clCMAbs{position:absolute; width:10; height:10; left:0; top:0; visibility:hidden}

.clT,.clTover,.clS,.clSover,.clS2,.clS2over{position:absolute; overflow:hidden; width:130; height:25; cursor:pointer; cursor:hand}
.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:#cddbeb;} /*background-color:#CDDBEB*/
.clSover,.clS2over{color:#003366;} /*#FCCE55*/
.clSover,.clS2over,.clTover,.clB,.clBar{layer-background-color:#336699; background-color: none;} /* layer-background-color:#336699; background-color: #C6D3E3 controls top level*/
/*clTover is the top bar. */
.clB{position:absolute; visibility:hidden; z-index:300}
.clBar{position:absolute; width:10; height:10; visibility:hidden; }


Thanks, Josh.
0
Comment
Question by:JoshNYC128
  • 6
  • 5
12 Comments
 
LVL 49

Expert Comment

by:Roonaan
ID: 12116384
As far as I remember from CoolMenu's the border wasn't actually generated using the css border-property but by on extra div with a certain padding and background-color as seemingly act like a border. Is this still correct in the version you are using?

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-
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 12116740
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:absolute; visibility:hidden; background-color:green; layer-background-color:green}
.clLevel1border{position:absolute; visibility:hidden; background-color:green; layer-background-color:green}
.clLevel2border{position:absolute; visibility:hidden; background-color:green; layer-background-color:green}

Sean
0
 

Author Comment

by:JoshNYC128
ID: 12116813
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.
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 12116832
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
0
 

Author Comment

by:JoshNYC128
ID: 12120013
i'm using the same vertical pulldowns as shown on
http://www.dhtmlcentral.com

Thanks,
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 12122835
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
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

Author Comment

by:JoshNYC128
ID: 12126050
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,.clTover,.clB,.clBar{layer-background-color:#336699; background-color: none;}

Thanks, Josh
0
 

Author Comment

by:JoshNYC128
ID: 12126065
Oh i forgot to mention.  Can you simulate my design on your css code?  

Josh.
0
 
LVL 31

Accepted Solution

by:
seanpowell earned 500 total points
ID: 12126294
On their code? No - way over bloated and extremely difficult to work with.

Let's keep it simple:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS/JS Driven Menu System</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">

/* First and Second Level UL tags */

#nav, #nav ul
{
      padding: 0;
      margin: 0;
      list-style: none;
      line-height: 1;
}

/* First Level Links */

#nav li
{
      float: left;
}

#nav li a
{
      width: 115px;
      display: block;
      color: #003366;
      text-decoration: none;
      background-color: #ffffff;
      padding: 4px;
      font:bold 12px arial, sans-serif;
      text-align:center;
}

#nav li a:hover
{
      color: #C20000;
      background-color: #ffffff;
}

/* Second Level Links */

#nav li li
{
      float: left;
}

#nav li li a
{
      /* no need to repeat common styles from #nav li a above */
      width: 156px;
      color: #336699;
      background-color: #CDDBEB;
      font:bold 11px arial, sans-serif;
      text-align:left;
}
      
#nav li li a:hover
{
      color: #003366;
      background-color: #ffffff;
}

/* Hide the drop-downs until mouseover */
      
#nav li ul
{
      position: absolute;
      left: -999em;
      width: 164px;
}
      
/* Show the drop-downs on mouseover */      

#nav li:hover ul, #nav li.sfhover ul
{
      left: auto;
}

</style>

<script type="text/javascript">
<!--

function sfHover()
{
      var sfEls = document.getElementById("nav").getElementsByTagName("li");
      for (var i=0; i<sfEls.length; i++)
      {
            sfEls[i].onmouseover=function()
            {
                  this.className+=" sfhover";
            }
            sfEls[i].onmouseout=function()
            {
                  this.className=this.className.replace(new RegExp("sfhover\\b"), "");
            }
      }
}

//-->
</script>

</head>
<body onload="sfHover();">

<ul id="nav">
      <li><a href="#">COMPANY</a>
      <ul>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Mission</a></li>
      </ul></li>
      <li><a href="#">MANUFACTURING</a>
      <ul>
                <li><a href="#">Chinese</a></li>
                <li><a href="#">Domestic</a></li>
      </ul></li>
      <li><a href="#">SOLUTIONS</a>
      <ul>
                <li><a href="#">Customer Communications</a></li>
                <li><a href="#">Logistics</a></li>
                <li><a href="#">Trans Teams</a></li>
      </ul></li>
      <li><a href="#">MARKETS</a>
      <ul>
                <li><a href="#">Communications</a></li>
                <li><a href="#">Computer</a></li>
                <li><a href="#">Consumer</a></li>
                <li><a href="#">Industrial</a></li>
                <li><a href="#">Medical</a></li>
      </ul></li>
</ul>

</body>
</html>


Thanks,
Sean
0
 

Author Comment

by:JoshNYC128
ID: 12128002
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
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 12128235
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
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 12128261
...sorry, forgot the link to where this all started:
http://www.htmldog.com/articles/suckerfish/dropdowns/

Have fun :-)
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Basic CSS issues 6 20
FTP File permissions 1 31
Hovering effect 9 29
can't display bootstrap glyphs in select menu 4 17
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now