PDA

Click to See Complete Forum and Search --> : CSS Hover Menu

kdub718
02-12-2008, 07:08 PM
I'm having a hard time getting this css to work the way i want... I have attached a .jpg of what i want it to look like and do when i hover over the portfolio section. Is this possible? I think I understand the image roll overs but not the horizontal drop with the image roll overs... I have been messing with this for a week now trying to get it to do what i want but with no luck... any help would be much appreciated.

thanks
Centauri
02-12-2008, 07:38 PM
This should be easy enough to do using the normal suckerfish method (http://www.htmldog.com/articles/suckerfish/dropdowns/) - the main changes to that article would be the width of the submenu <ul> and you may need to explicitly control the left position of each dropdown <ul> individually through classes.

If you can link to what you have online so far, we could advise further.
kdub718
02-12-2008, 07:45 PM
thanks for your quick response.

I'm not sure if this is what you mean or not.


<ul>
<li ><a href='HOME' ><span >HOME</span></a></li>
<li ><a href='ABOUT' ><span >ABOUT</span></a></li>
<li ><a href='SERVICES' ><span >SERVICES</span></a></li>
<li ><a href='PORTFOLIO' ><span >PORTFOLIO</span></a></li>
<li ><a href='CONTACT' ><span >CONTACT</span></a></li>
<li ><a href='LAB' ><span >LAB</span></a></li>
</ul>
</div>


html, body {
margin: 0px;
padding: 0px;
}

body {
text-align: center;
}

#menu {
float:left;
width:100%;
background:#000;
font-size:80%;
line-height:normal;
border-bottom:0px solid #666;
}
#menu ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#menu li {
display:inline;
margin:0;
padding:0;
}
#menu a {
float:left;
background:url("../images/tableftF.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#menu a span {
float:left;
display:block;
background:url("../images/tabrightF.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#666;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#menu a span {float:none;}
/* End IE5-Mac hack */
#menu a:hover span {color:#FFFFFF;}
#menu a:hover {background-position:0% -42px;}
#menu a:hover span {background-position:100% -42px;}
Centauri
02-12-2008, 11:47 PM
Yes, code is fine. Could you attach the two images (via advanced button on reply)? - would make it easier to make sure I don't miss something.
kdub718
02-13-2008, 12:31 AM
I don't see an advanced button anywhere... So I'm not sure what you mean about that. However I changed the images to .jpg's so that i could attach them . I also am very cerious if i can have the hover state be active on the page its on.. so the tab is up... if that makes sense... i guess first thing is first. Thanks alot for your help.
Frank62
02-13-2008, 03:54 AM
K.,

I would advise against horizontally folding out horizontal menus. The reason is that most modern menus are written without (much) javascript, and do not have a possibility to have the menu stay a while on mouse-out. That means that one has to be very precise with the pointer, and people don't like that.

If you still want it, I would suggest to combine the info on the Son of Suckerfish site with that of this site: http://www.dynamicdrive.com/style/csslibrary/category/C1/P0/ .

Let us know how it's working out.
Centauri
02-13-2008, 07:35 AM
Had a play with this, and the code got complex-looking reasonably quick, but is fairly straightforward. If you had a look at the suckerfish article I linked to before, you will notice the dropdowns are additional nested lists, but they can only be included inside the top level <li>s and not the <a>s. Therefore, they need to be activated on the <li> hover, which IE6 cannot normally do - hencethe suckerfish javascript. As hover needs to go on the <li>s anyway, the background images can be moved up a level to the <li>s and <a>s, thereby eliminating the need for the spans.

Indicating the current page can be done by giving each menu item a class, and giving each page body element a unique id, and then matching these in the css - so if the page body id is "pghome" and the menu item class is "navhome", then the css can match those and display an alternate state.

The html, including nested lists, can be :<!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>
<script type="text/javascript" src="sfhover.js"></script>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body id="pghome">
<ul id="menu">
<li class="navhome"><a href='HOME' >HOME</a>
<ul>
</ul></li>
<li class="navabout"><a href='ABOUT' >ABOUT</a>
<ul>
</ul></li>
<li class="navserv"><a href='SERVICES' >SERVICES</a>
<ul>
</ul></li>
<li class="navport"><a href='PORTFOLIO' >PORTFOLIO</a>
<ul>
<li><a href="#">PHOTOS</a></li>
<li><a href="#">SCETCHES</a></li>
<li><a href="#">MISC</a></li>
</ul></li>
<li class="navcont"><a href='CONTACT' >CONTACT</a>
<ul>
</ul></li>
<li class="navlab"><a href='LAB' >LAB</a>
<ul>
</ul></li>
</ul>
</body>
</html>

The sfhover.js file to make IE behave is :sfHover = function() {
var sfEls = document.getElementById("menu").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);
I changed some ofthe sizes (heights mainly) to em units so that the second level can be positioned properly, and came up with this css :* {
margin: 0;
padding: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
#menu {
background:#000;
font-size:80%;
border-bottom: 1.7em solid #FCD609;
padding:0.7em 10px 1px 50px;
position: relative;
height: 1.9em;
}
* html #menu {
padding-bottom: 0px;
}
#menu li {
list-style:none;
float: left;
background:url("images/tableft.jpg") no-repeat left top;
padding:0 0 0 4px;
border-bottom: 1px solid #000;
}
#menu a {
float:left;
text-decoration:none;
background:url("images/tabright.jpg") no-repeat right top;
padding:0 15px 0 6px;
color:#666;
line-height: 1.9em;
}
#menu a:hover {
color:#FFFFFF;
}
#pghome .navhome, #pgabout .navabout,
#pgserv .navserv, #pgport .navport,
#pgcont .navcont, #pglab .navlab,
#menu li:hover, #menu li.over {
background-position:0% -42px;
border-color: #EEBF17;
}
#menu li:hover, #menu li.over {
border-color: #FCD609;
}
#pghome .navhome a, #pgabout .navabout a,
#pgserv .navserv a, #pgport .navport a,
#pgcont .navcont a, #pglab .navlab a,
#menu li:hover a, #menu li.over a {
background-position:100% -42px;
}
#menu ul {
position: absolute;
top: 2.6em;
left: -999em;
background-color: #FCD609;
margin-top: 1px;
height: 1.7em;
}
#menu .navhome ul {
padding-left: 0;
width: 40em;
}
#menu .navabout ul {
padding-left: 5em;
width: 35em;
}
#menu .navserv ul {
padding-left: 11em;
width: 29em;
}
#menu .navport ul {
padding-left: 16em;
width: 24em;
}
#menu .navcont ul {
padding-left: 22em;
width: 18em;
}
#menu .navlab ul {
padding-left: 27em;
width: 13em;
}
#menu ul li, #menu ul a {
background: none;
padding: 0 5px;
line-height: 1.7em;
border: 0;
}
#pghome .navhome ul,
#pgabout .navabout ul,
#pgserv .navserv ul,
#pgport .navport ul,
#pgcont .navcont ul,
#pglab .navlab ul {
left: 0;
}
#menu li:hover ul, #menu li.over ul {
left: 0;
z-index: 100;
}
t is late here to go through all that, but any questons just ask.
kdub718
02-13-2008, 01:44 PM
so its not quite working... this is the final html and css that i had that was in the right position and seemed to work and look the way i was wanting it to except for the portfolio 2nd lvl and the images working with the hover state (where they look like a folder tab not with the black line under).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link href="css/sub_styles.css" rel="stylesheet" type="text/css" />

<style>startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace»
(" over", "");
}
}
}
}
}
window.onload=startList;

</style>

<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="0" valign="top" background="images/08_BG.jpg" bgcolor="#FFFFFF"><table width="400" height="603" border="0" align="center" cellpadding="0" cellspacing="0">
<tr valign="top">
<th width="209" height="146" scope="col"><img src="images/08_Layout_02.jpg" width="209" height="108" /><br /></th>
<th width="630" scope="col"><table width="582" border="0" align="right" cellpadding="0" cellspacing="0">
<tr align="right">
<th width="0" height="109" valign="bottom" scope="col"><div id='menu'>
<ul>
<li ><a href='HOME' ><span >HOME</span></a></li>
<li ><a href='ABOUT' ><span >ABOUT</span></a></li>
<li ><a href='SERVICES' ><span >SERVICES</span></a></li>
<li ><a href='PORTFOLIO' ><span >PORTFOLIO</span></a></li>
<li ><a href='CONTACT' ><span >CONTACT</span></a></li>
<li ><a href='LAB' ><span >LAB</span></a></li>
</ul>
</div></th>
</tr>
</table></th>
</tr>

<tr valign="top">
<th colspan="2" scope="col"><img src="images/08_Layout_08.jpg" width="772" height="434" /></th>
</tr>
</table></td>
</tr>
</table>
<br />
<div align="center">
</div>
</body>
</html>

html, body {
margin: 0px;
padding: 0px;
}

body,td,th {
font-family: Arial, Helvetica, Verdana, Georgia;
color: #777777;
}
body {
text-align: center;
background-color: #000;
}

#menu {
float:none;
width:100%;
background:;
font-size:10px;
line-height:normal;
border-bottom:0px solid #000;
}
#menu ul {
margin:0;
list-style:none;
}
#menu li {
display:inline;
margin:0;
padding:0;
}
#menu a {
float:left;
background:url("../images/tableft.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#menu a span {
float: ;
display: block;
background:url("../images/tabright.gif") no-repeat right top;
padding:5px 18px 4px 14px;
color:#000;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#menu a span {float:none;}
/* End IE5-Mac hack */
#menu a:hover span {color:#FFFFFF;}
#menu a:hover {background-position:0% -42px;}
#menu a:hover span {background-position:100% -42px;}


I tried using what you gave me but i couldn't get it positioned and when i changed sizing to make it look the way i have it it got all messed up... I'm not sure why? I appreciate your help on this. I have been pulling my hair out to get it to look and work like I imagined.

Frank:
I think I understand what you mean... kinda... maybe not really... lol... your saying to a vertical drop? because of the .js? for mouse over purpose?
Frank62
02-13-2008, 02:40 PM
K.,

What I mean is this. The old multi-level menus used to be based on (sometimes heavy) javascripts, which javascripts gave the possibility to set a delay before the foulded-out submenu would fold back in again. Thus, if one would 'slide off' the menu with the pointer, one could 'come back on' again.

With the modern menus, that is no longer the case - onMouseOut == subMenuGone. And in horizontal menus that fold out horizontally, one easily slides off the submenu.
kdub718
02-13-2008, 04:51 PM
So I fixed up the images and everything the way it works and looks the best now. I changed the hover images to work the way i want them too now without having to put in a line. on hover the image changes to make it look like a tab and it works nicely... (or so i think)... I think its a lot cleaner... I'll re-attach the images. I still had the problem with the code moving everything around when trying to apply what you showed me... it made it go all the way across the screen. I have it at a size that works best the way the code sits right now. So anymore help would be much appreciated.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link href="css/sub_styles.css" rel="stylesheet" type="text/css" />

<style>startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace»
(" over", "");
}
}
}
}
}
window.onload=startList;

</style>

<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="0" valign="top" background="images/08_BG.jpg" bgcolor="#FFFFFF"><table width="400" height="603" border="0" align="center" cellpadding="0" cellspacing="0">
<tr valign="top">
<th width="209" height="146" scope="col"><img src="images/08_Layout_02.jpg" width="209" height="108" /><br /></th>
<th width="630" scope="col"><table width="517" border="0" align="right" cellpadding="0" cellspacing="0">
<tr align="right">
<th width="0" height="109" valign="bottom" scope="col"><div id='menu'>
<ul>
<li ><a href='#' ><span >HOME</span></a></li>
<li ><a href='#' ><span >ABOUT</span></a></li>
<li ><a href='#' ><span >SERVICES</span></a></li>
<li ><a href='#' ><span >PORTFOLIO</span></a></li>
<li ><a href='#' ><span >CONTACT</span></a></li>
<li ><a href='#' ><span >LAB</span></a></li>
</ul>
</div></th>
</tr>
</table></th>
</tr>

<tr valign="top">
<th colspan="2" scope="col"><img src="images/08_Layout_08.jpg" width="772" height="434" /></th>
</tr>
</table></td>
</tr>
</table>
<br />
<div align="center">
</div>
</body>
</html>

html, body {
margin: 0px;
padding: 0px;
}

body,td,th {
font-family: Arial, Helvetica, Verdana, Georgia;
color: #777777;
}
body {
text-align: center;
background-color: #000;
}

#menu {
float:none;
width:100%;
background:;
font-size:10px;
line-height:normal;
border-bottom:0px solid #000;
}
#menu ul {
margin:0;
list-style:none;
}
#menu li {
display:inline;
margin:0;
padding:0;
}
#menu a {
float:left;
background:url("../images/tableft.gif") no-repeat left top;
margin:0;
padding:0 0 0 6px;
text-decoration:none;
}
#menu a span {
float: ;
display: block;
background:url("../images/tabright.gif") no-repeat right top;
padding:5px 18px 4px 13px;
color:#000;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#menu a span {float:none;}
/* End IE5-Mac hack */
#menu a:hover span {color:#FFFFFF;}
#menu a:hover {background-position:0% -22px;}
#menu a:hover span {background-position:100% -22px;}


So this is the best i have so far... I still just need the 2nd row in the portfolio. Unless you guys have a better idea?
Centauri
02-13-2008, 05:10 PM
Can you put this online somewhere? Using the above code, and the graphics you provided earlier, it doesn't work that well so I am not sure exactly what you are after.

The javascript you have in the code is in error due to being in style tags instead of script tags, and referes to an element with an id of "nav", which doesn't exist in your code....

I also don't understand why any of this is in tables - there is no tabualr data here.....
kdub718
02-13-2008, 05:56 PM
yah that java doesn't need to be in there... that was from a script css nav tut that i was following awhile ago and doesn't need to be there... I removed it and it still works and looks that same.. I believe i have it in the table becuase I want it confined in a certain area of the page. does that make sense? do you have aim?
Centauri
02-13-2008, 09:47 PM
No AIM access. If you can zip the graphics used on the page, and attach the zip file either here, or via PM if you prefer, I will be able to see what you are doing, and be able to offer some ideas to fit in.
kdub718
02-16-2008, 03:54 PM
what about a vertical?