CSS Menu Help Please

@grimmylinaMay 08.2008

Hello,

I found this menu by Stu Nicholls:

~~[url]~~http://www.cssplay.co.uk/menus/flyout_wall.html[/url]

I tried to adapt it to my site:

~~[url]~~http://www.catalinahotel.com/allie/v2/index_copy.html[/url]

Couple of questions:

1.) Can everybody see it properly?
2.) Is it a good choice?
3.) I got the first 2 links to work properly (maybe because there are no sub-levels). On the 3rd (Amenities) I’m having trouble. I was trying to get the rollover to work for “pool” but haven’t been able to.

There’s a line in the css that points to a face1.gif…face2.gif, etc. I am not sure what that points to. Could that be my problem? ?

Thanks!!

Allie

to post a comment

CSS

14 Comments(s) _↴

@KDLAMay 09.2008 — #In Firefox/Windows, when you attempt to hover over the second level links, they disappear once the cursor is moved from the first level to hover the second level.

@WebJoelMay 09.2008 — #I noticed a missing !doctype, and several unexpected "</a>"s, and the usual dismissable 'warnings' (about 45 of them).

When I placed borders upon all block-level elements, I noted that there seems to be alot going on here. Hmm... might take some time to sort out.

@CentauriMay 09.2008 — #Not sure why you are messing about with all those images and subsequent classnames. The Stu Nicholls' method of illegally nesting tables inside <a> links with conditional comments is very messy and not recommended - the suckerfish method is much better and cleaner. You also have a very confusing text and structure that does not match the graphics at all.

Consider this demo - no graphics at all :

[CODE]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>Untitled Document</title>
 <style type="text/css">
 <!--
 #nav, #nav ul {
 margin: 0;
 padding: 0;
 width: 208px;
 }
 #nav li {
 list-style: none;
 position: relative;
 margin-bottom: 4px;
 float: left;
 width: 100%;
 }
 #nav a {
 text-decoration: none;
 display: block;
 height: 30px;
 line-height: 30px;
 padding-left: 20px;
 color: #FFFFFF;
 font-weight: bold;
 font-family: Georgia, "Times New Roman", Times, serif;
 font-size: 14px;
 border-right: 4px solid #FFF;
 }
 #nav li a:hover {
 background-color: #ED2124;
 }
 #nav .top1 a {
 background-color: #867D78;
 }
 #nav .top2 a {
 background-color: #867D78;
 }
 #nav .top3 a {
 background-color: #958C85;
 }
 #nav .top4 a {
 background-color: #9C938C;
 }
 #nav .top5 a {
 background-color: #A79D94;
 }
 #nav .top6 a {
 background-color: #B0A69D;
 }
 #nav .top7 a {
 background-color: #BAADA5;
 }
 #nav .top8 a {
 background-color: #C1B5A9;
 }
 #nav .top9 a {
 background-color: #CBBDB2;
 }
 #nav .top10 a {
 background-color: #DED0C5;
 }
 #nav .top11 a {
 background-color: #DDDBCE;
 }
 #nav .top12 a {
 background-color: #E7E4D1;
 }
 #nav ul {
 position: absolute;
 top: 0px;
 left: -999em;
 }
 #nav li:hover ul, #nav li.sfhover ul {
 left: 208px;
 }
 -->
 </style>
 <!--[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+=" sfhover";
 }
 sfEls[i].onmouseout=function() {
 this.className=this.className.replace(new RegExp(" sfhover\b"), "");
 }
 }
 }
 if (window.attachEvent) window.attachEvent("onload", sfHover);
 </script>
 <![endif]-->
 
 </head>
 
 <body>
 <ul id="nav">
 <li class="top1"><a href="#">about us</a></li>
 <li class="top2"><a href="#">catalina manifesto</a></li>
 <li class="top3"><a href="#">amenities</a>
 <ul>
 <li><a href="#">rooms</a></li>
 <li><a href="#">pool</a></li>
 <li><a href="#">bikes</a></li>
 <li><a href="#">bamboo garden</a></li>
 </ul>
 </li>
 <li class="top4"><a href="#">calendar of events</a>
 <ul>
 <li><a href="#">link</a></li>
 <li><a href="#">link</a></li>
 </ul>
 </li>
 <li class="top5"><a href="#">catalina red book</a>
 <ul>
 <li><a href="#">link</a></li>
 <li><a href="#">link</a></li>
 <li><a href="#">link</a></li>
 </ul>
 </li>
 <li class="top6"><a href="#">book it</a></li>
 <li class="top7"><a href="#">meetings/events</a></li>
 <li class="top8"><a href="#">maxine's bistro</a></li>
 <li class="top9"><a href="#">kung fu sushi</a>
 <ul>
 <li><a href="#">link</a></li>
 <li><a href="#">link</a></li>
 </ul>
 </li>
 <li class="top10"><a href="#">press</a></li>
 <li class="top11"><a href="#">virtual tour</a></li>
 <li class="top12"><a href="#">catalinalife</a></li>
 </ul>
 </body>
 </html>
 [/CODE]

Much easier to change and maintain. The css and javascript should be linked to external files.

@grimmylinaauthorMay 09.2008 — #Yeah, I see the disappearing sublevel menu too. I don't know why that is happening because it doesn't seem to happen on his??

They want me to use images because they want the greys in the menu to all be different and they want to use a specific font too. But there's no real good way to do that in css is there?

Thank you everyone for your feedback. Thanks Centauri for the example!!!! I will try it out and show it ot them.

@CentauriMay 09.2008 — #They want me to use images because they want the greys in the menu to all be different and they want to use a specific font too.[/QUOTE]

The different grey shades is not a problem, as demonstarted in the example, but if they want to start using gradients or something, then it might be an issue. If the font in question is what is currently in the graphics, then it seems pretty close to the Georgia font I used in the example. You might make the client aware that using graphics will slow the site loading down, and markedy increase the amount of coding required to make it properly accessible.

@KDLAMay 09.2008 — #The different grey shades is not a problem, as demonstarted in the example, but if they want to start using gradients or something, then it might be an issue. [/QUOTE]

All you'd need to do is create several gradient backgrounds, assign ids to the <li> (or <a>) and apply the various backgrounds. I have to do that all the time.

(Using Centauri's code):

<i>
 </i>#nav a {
 text-decoration: none;
 display: block;
 height: 30px;
 line-height: 30px;
 padding-left: 20px;
 color: #FFFFFF;
 font-weight: bold;
 font-family: Georgia, "Times New Roman", Times, serif;
 font-size: 14px;
 border-right: 4px solid #FFF;
 background-repeat: repeat-x;
 background-color: #eee;}/*this is a gray to use in case images don't load*/
 }
 #nav a#light {background-image: url(ltgray.jpg);}
 #nav a#med {background-image: url(medgray.jpg);}

@grimmylinaauthorMay 09.2008 — #Thanks guys!!!! I will try that out right now...will let you know how it goes.

@grimmylinaauthorMay 09.2008 — #Perfect!!!!

http://www.catalinahotel.com/allie/v2/index_copy.html

Thank you Centauri & KDLA!!!!!!

@KDLAMay 09.2008 — #(You may want to set the height to "em" rather than "px" -- if you resize the text, the <li>'s height isn't expanding to accommodate the text size.)

@CentauriMay 09.2008 — #To prevent the dropout when hovering between submenu items in IE, put a background on the <ul> - common IE bug.

[CODE]#nav, #nav ul {
 margin: 0;
 padding: 0;
 width: 208px;
 [COLOR="Red"]background: #FFF;[/COLOR]
 }[/CODE]

@grimmylinaauthorMay 09.2008 — #Question....who would resize the text? The px on the:

#nav a {

text-decoration: none;

display: block;

height: 30px;

line-height: 30px;

padding-left: 20px;

color: #FFFFFF;

font-family: "Century Gothic", Arial, Helvetica, sans-serif;

font-size: 12px;

border-right: 4px solid #FFF;

}

Also, looked up dropout in Yahoo. That means some of the text just disappears in IE? Sorry, just want to understand the reasoning behind the code. Helps me for next time. : ))))

@CentauriMay 10.2008 — #People with deteriated eyesight would want to resize text to be able to read the site, but as the line-height as well as the height on the <a>s is set, the resize would have to be large to cause problems.

The dropout I refer to is when hovering between submenu items in IE, the flyout dissappears when the mouse moves over the gaps between the <a>s, as IE doesn't seem to recognise this is still part of the parent <li> unless the dropdown <ul> has a background.

@grimmylinaauthorMay 10.2008 — #Ohhh....I added the dropout code. So I guess there's no way to make the change for the text resize...

@CentauriMay 10.2008 — #Well, the height and line height of the <a>s could be specified in ems if you like - that would make the menu totally flexible to accommodate any text size, but the total height of the menu will also vary with text size which could break the whole page layout. If two steps of text resize doesn't break the layout,that usually satisfies me.

Also in #CSS _↴

shift first td column on top and rest below it in mobile view automatically stack uploaded images in html Same CSS code just in one line - how?

Success!

Help @grimmylina spread the word by sharing this article on Twitter...

Tweet This

CSS Menu Help Please

14 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

CSS Menu Help Please

14 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

14 Comments(s) _↴

Also in #CSS _↴