right and left columns

[Sculley]

Paul, can this drop down (guest/guest) be done in CSS or easier to use Superfish or something like that?

[Paul O'B]

It's just a standard drop down but you'd need to align the transparent images carefully. Of course IE6 will need either solid images or the alpha image loader filter but that is really clunky on drop downs.

J(ust out for the day now back this evening)

[Sculley]

Cool....is there a page online or on SP for reference? Or, would love to hire you to do it (woops....did I say that?).

[ralph.m]

The Suckerfish method is a popular one (the original, non-JavaScript version of Superfish).

[Sculley]

Thanks Ralph. Isn't that a page about sitemaps?

[ralph.m]

Oops, sorry (fixed now). Must not have hit "copy" hard enough.

Suckerfish method

[Sculley]

Thanks Ralph. I was wondering if there was somewhere that explained standard drop downs so I could give it a try.

Also, do you know why the text on the top of the contact form here won't turn white? Argh, I've tried #left p, .top, and other things but the parent property keeps taking over the size and color only.

[ralph.m]

Thanks Ralph. I was wondering if there was somewhere that explained standard drop downs so I could give it a try.

O, I hoped that's what the link above would do. Well, basically you have an unordered list as your top level links. Within those link items, you can nest another unordered list that has your drop down links.

Then you set up some CSS rules. Basically, you set the nested lists not to display (display:none) or move them way off screen with a negative left setting, for example.

Then you set a rule that when you hover over the top level list items, that nested list jumps into view—by changing the CSS positioning. You tell the nested list to position itself onscreen just below the top level menu item.

Also, do you know why the text on the top of the contact form here won't turn white?

Do you mean yellow? (There's no rule there to make it white.)

The rule that is applying is

.twoColFixRtHdr #mainContent p, .twoColFixRtHdr #mainContent p.mission {
  color: #330000;
  font-size: 0.8em;
  line-height: 1.7em;
  padding: 0 40px 0 30px;
}

That is a more specific rule than

#left p {
  color: #FFFFCC;
}

So change your rule to something like

#mainContent #left p {
  color: #FFFFCC;
}

[Paul O'B]

Hi,

This is an old example of mine but it works well and should be easy to understand. The ony difficult part is that it is a multiple flyout which means that we have to add extra rules because when you set a nested ul to visible all other nested uls will show so you have to turn the others off.

The same thing applies to styles set on one hovered lists so you have to counteract on others. In a multiple flyout you just have to keep track of what's being done on the current menu and then cancel it necessary of the nested one.

It's just basic css that would apply to nested elements but you can get into a mess quite easily.

If you can't make progress I'll knock up a demo that fits your site but I'd like you to try first

[Sculley]

Thank you both.

Ralph, thought it was the lowest one down on the list got priority. Forgot it was the more specific one. Thank you.

Paul....absolutely....I'll give the drop downs a try.

[Sculley]

If you can't make progress I'll knock up a demo that fits your site but I'd like you to try first

I made some progress but styling is terrible. Here it is. (guest/guest). Should look similar to this!

[Paul O'B]

I made some progress but styling is terrible. Here it is. (guest/guest). Should look similar to this!

Well you've got the bare bones working. The rest is just decoration

You want background images on the nested ul and not the individual list items. Use an oversized transparent png for the gradient effect transparency (and just a solid colour for ie6).

The top level will need to have a fixed pixel height as you need to match the gradient exactly for when the rollover shows.

It would be easier to give the dropdowns all the same width rather than fluid width as it is easier to code that way although it is possible to make them adjust to content length but just a bit more fiddly.

I'll have a look at the code later on and see if I can get it closer to what you want.

[Sculley]

Ah, cool. Got some of them.....it's better:

[Paul O'B]

That looks better

To finish it off you'll probably have to float the anchors and give them a height so that the background image meets the sub list. Remember to cancel out anything that you apply on the top level from cascading into the sublist such as the height and the background image on the top level.

To keep the top level highlighted while traversing the sublist you would turn the anchor on via the li:hover and not the a:hover.

li:hover a{background:url( etc....}

Then turn it off for sublists with:
li:hover li a{background:none}

etc.

[Sculley]

Shoot....I'm afraid I'm not following you on that one.

Probably need to change the color when hovering over each subnav item too.

[Paul O'B]

Shoot....I'm afraid I'm not following you on that one.

I was just saying that you need to create a graphic for the top level menu anchor and show it on rollover but you must make sure that you remove it from the nested list anchors at the same time.

Probably need to change the color when hovering over each subnav item too.

I would go with a text color change as you can't change the background colour as that would mess the effect up.

[Sculley]

I just tested the drop downs in IE and they're not even working in IE 9 or 10. I think I'm missing something.

For the top level menu anchor ("About" and "Programs"), can I just use a color?

[Sculley]

I'll have a look at the code later on and see if I can get it closer to what you want.

Still open to this :-)? Not getting this for IE or other things at all. Should I just try Suckerfish?

[Paul O'B]

The menu is working in IE8. IE7 had z-index issues but is working. I haven't checked IE9 but I'll have a look in a minute.

For the top level menu anchor ("About" and "Programs"), can I just use a color?

It would be easier to use a solid background colour for the top menu but of course you will lose the transparent gradient effect.

[Paul O'B]

Hi,

Here are the revised nav rules (note that some of these rules are for further levels and could be removed but will do no harm).

/*==== Begin Main Nav -- header bottom nav ====*/
#header {
    z-index:99
}
ul#nav, ul#nav ul {
    margin:0;
    padding:0;
    list-style-type:none;
}
ul#nav {
    top:127px;
    right:30px;
    list-style-type:none;
    font-family:Arial, Helvetica, sans-serif;
    font-size:1.2em;
    letter-spacing:1px;
    position:absolute;
}
ul#nav li {
    display:inline;
    position: relative;
    float:left;
}
ul#nav a {
    display:inline;
    float:left;
    padding:0 20px;
    height:38px;
    line-height:38px;
    text-decoration:none;
}
ul#nav a, ul#nav a:link, ul#nav a:visited {
    color: #650000;
}
ul#nav .current a {
    color: #FFCB65!important;
    background:transparent!important
}
ul#nav a:focus {
    outline:0;
    color: #650000;
}
/* ----- Drop Downs ----- */
#nav li ul {
    position: absolute;
    width:200px;
    left: -5px;
    top: 38px;
    margin-left:-999em;
    z-index:100;
    background: url(http://www.charlotteswebservices.com/temp/http-equinection/http/images2/background-bg-lg.png) no-repeat 0 -25px;
}
#nav li li {
    width:200px;
}
/* Styles for Menu Items */
ul#nav li li a {
    display: block;
    text-decoration: none;
    color:#ffffcc;
    padding:5px 10px;
    height:auto;
    line-height:normal;
    background:transparent!important;
}
ul#nav li li a:link, ul#nav li li a:visited {
    color:#ffc
}
/* commented backslash mac hiding hack \*/ 
* html ul#nav li a {
    height:1%
}
/* end hack */
/* this sets all hovered lists to red */
#nav li:hover a, #nav li.over a, #nav li:hover li:hover a, #nav li.over li.over a, #nav li:hover li:hover li:hover a, #nav li.over li.over li.over a, #nav li:hover li a:hover, #nav li.over li a:hover, #nav li:hover li:hover li:hover a:hover, #nav li.over li li a:hover, #nav li:hover li:hover li:hover li:hover a:hover, #nav li.over li.over li.over li.over a:hover {
    color: ffffcc;
    background:#f5c417;
}
/* set dropdown to default */
#nav li:hover li a, #nav li.over li a, #nav li:hover li:hover li a, #nav li.over li.over li a, #nav li:hover li:hover li:hover li a, #nav li.over li.over li.over li a {
    color: #ffffcc;
    font-size:.55em;
}
ul#nav li li a:hover {
    color:#000
}
/* Sub Menu Styles */
ul#nav li:hover ul ul, ul#nav li:hover ul ul ul, ul#nav li.over ul ul, ul#nav li.over ul ul ul {
    margin-left:-999em;
}
ul#nav li:hover ul, ul#nav li li:hover ul, ul#nav li li li:hover ul, u#navl li li li li:hover ul, ul#nav li.over ul, ul#nav li li.over ul, ul#nav li li li.over ul {
    margin-left:0;
}
/* ----- Columns ----- */

You also need this for IE6.

<!--[if lt IE 7]>
<script type="text/javascript">

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

</script>
<![endif]-->

I think that's what you were aiming for.

[Sculley]

Wow....this is very advanced. Are you or would you consider teaching a Sitepoint class on advanced navigation (there's another one you did for me). Or, mixed with other advanced elements? I've been hoping for a class like that.

How do get the vertical red lines between nav to come down? I tried a margin-top on the "red" class.

I know this may be way too complicated so if so, that's okay. The yellow block when nav is hovered over was only going to be for the drop downs. No hover for the others just font turns to yellow when page is active. That too complicated.

I see what you mean by using a graphic for the yellow when hovered. Needs to blend more.

I adjusted the drop down margins a bit and increased the size of the drop down bg. Now the top nav yellow isn't matching the margins of the drop downs - left nav margin sticks out and you can see the yellow "box". Change the nav outline margin?

This doesn't work in IE 5 and 6. Guess that's okay.

[Sculley]

Fixed the drop down margin. Looks good.

[Paul O'B]

Wow....this is very advanced. Are you or would you consider teaching a Sitepoint class on advanced navigation (there's another one you did for me). Or, mixed with other advanced elements? I've been hoping for a class like that.

Some of the existing css courses covered navigation if I remember correctly.

How do get the vertical red lines between nav to come down? I tried a margin-top on the "red" class.

Just set the height and line-height of the list element to the same as the anchor and then cancel it out on the submenu.

e.g. Extra code in bold

ul#nav li {
    display:inline;
    position: relative;
    float:left;
    height:38px;
    line-height:38px;
}
ul#nav li li{
    height:auto;
    line-height:normal;
}

I know this may be way too complicated so if so, that's okay. The yellow block when nav is hovered over was only going to be for the drop downs. No hover for the others just font turns to yellow when page is active. That too complicated.

The easiest solution is to add a class to the anchors that you don't want to change colour.

e.g.

<li><a class="nodrop" href="../registration/index.html">register</a><span class="red">|</span></li>

Add that class to all the top level menu anchors that have no submenus.

Then add this code at the end of the navigation styles.

#nav li:hover a.nodrop, 
#nav li.over a.nodrop{background:transparent}

Just set the text colour to what is needed using the class as above when hovered etc.

I see what you mean by using a graphic for the yellow when hovered. Needs to blend more.

I adjusted the drop down margins a bit and increased the size of the drop down bg. Now the top nav yellow isn't matching the margins of the drop downs - left nav margin sticks out and you can see the yellow "box". Change the nav outline margin?

You seem to have moved it all out of position a bit.

Change the nav to left:-7px and change the background colour to match the top of the image.

#nav li ul {
    background: url("../images2/background-bg-lg.png") no-repeat scroll 0 -25px transparent;
  left: -7px;

etc....

/* this sets all hovered lists */
#nav li:hover a, #nav li.over a, #nav li:hover li:hover a, #nav li.over li.over a, #nav li:hover li:hover li:hover a, #nav li.over li.over li.over a, #nav li:hover li a:hover, #nav li.over li a:hover, #nav li:hover li:hover li:hover a:hover, #nav li.over li li a:hover, #nav li:hover li:hover li:hover li:hover a:hover, #nav li.over li.over li.over li.over a:hover {
    color: ffffcc;
    background:#f3be0a;
}

This doesn't work in IE 5 and 6. Guess that's okay.

It works fine in IE6 and even works in ie5.5 providing you have added the js code I gave you to the head of the page (or called the external js file via the conditional comments). There will be a problem with the png image though as IE6 doesn't understand transparent png images as I mentioned ion my earlier post and you should probably swap the png image for a non transparent image for IE6 only (use the * html hack to give ie6 the non transparent image.)

[Sculley]

Some of the existing css courses covered navigation if I remember correctly.

Just basic nav. Not advanced nav like this.

Thanks sooo much Paul. I don't think I'd be able to duplicate w/o a class explaining but looks great!