Never Bored Games
Friday, March 21, 2008
Cross browser compatable drop down menu
1. First step is to include this javascript on your page.
/* Function for the hover menu */
sfHover = function()
{
var sfEls = document.getElementById("tiles").getElementsByTagName("LI");
for (var i=0; i < onmouseover="function()" onmouseout="function()" classname="this.className.replace(new" b="" if="" onload="">
2. Next, include this css
/** Drop Down Menu (http://www.krowland.net/tutorials/boxer_tutorial.html) **/
#wrapper {
padding: 0;
margin: 0;
width: 100%;
}
#menu {
font-size: 1.0em;
}
#tiles, #tiles ol {
list-style: none;
padding: 0;
margin: 0;
}
#tiles li {
float: left;
}
#tiles a {
display: block;
color: #333;
text-decoration: none;
}
#menu li:hover, #menu li.sfhover {
background-position: 0% -148px;
}
#menu li:hover a, #menu li.sfhover a {
background-position: 100% -148px;
color: #c4683d;
}
#tiles li ol {
position: absolute;
margin-top: -12px;
left: -999em;
width: 160px;
w\idth: 160px;
color: #c4683d;
}
#tiles li.daddy {
background: url("../images/rightarrow.gif") 90% 50% no-repeat;
}
#tiles ol.left li.daddy {
background: url("../images/leftarrow.gif") 5% 50% no-repeat;
padding-left: 2em;
}
#tiles li ol li {
width: 160px;
w\idth: 160px;
color: #c4683d;
padding: 3px 5px;
font-size: 10px;
background: url(/images/sb_dropdown_02.gif) no-repeat 0 0;
}
#tiles li ol.left li {
width: 160px;
w\idth: 160px;
padding-left: 2em;
}
#tiles li ol li a {
background: transparent;
color: #c4683d;
}
#tiles li ol ol {
margin: -2em 0 0 17.5em;
mar\gin: -2.1em 0 0 16.7em;
border: 1px solid #999;
}
#tiles li ol.left ol {
margin-left: -16.5em;
mar\gin-left: -17.8em;
}
#tiles li:hover ol ol, #tiles li:hover ol ol ol, #tiles li.sfhover ol ol,
#tiles li.sfhover ol ol ol {
left: -999em;
}
#tiles li:hover ol, #tiles li li:hover ol, #tiles li li li:hover ol,
#tiles li.sfhover ol, #tiles li li.sfhover ol, #tiles li li li.sfhover ol {
left: auto;
}
#tiles li:hover ol a, #tiles li li:hover ol a, #tiles li li li:hover ol a,
#tiles li.sfhover ol a, #tiles li li.sfhover ol a,
#tiles li li li.sfhover ol a {
color: #c4683d;
}
#tiles li:hover ol.left, #tiles li.sfhover ol.left {
margin-left: -7.7em;
mar\gin-left: -11.2em;
}
#menu #tiles li ol li:hover, #menu #tiles li ol li.sfhover {
background: url(/images/sb_dropdown_02_hover.gif) no-repeat 0 0;
width: 160px;
}
#menu #tiles li ol li:hover a, #menu #tiles li ol li.sfhover a {
color: #c4683d;;
}
#menu #tiles li ol li:hover ol li, #menu #tiles li ol li.sfhover ol li {
background: #F1F1F1;
}
#menu #tiles li ol li:hover ol li a , #menu #tiles li ol li.sfhover ol li a {
color: #c4683d;
}
#menu #tiles li ol li ol li:hover, #menu #tiles li ol li ol li.sfhover {
background: #f1ebdd;
}
#menu #tiles li ol li ol li:hover a , #menu #tiles li ol li ol li.sfhover a {
color: #c4683d;
}
#menu #tiles li ol li.daddy:hover {
/*background: #f1ebdd url("../images/rightarrow_over.gif") 90% 50% no-repeat;*/
}
#menu #tiles li ol.left li.daddy:hover {
/*background: #f1ebdd url("../images/leftarrow_over.gif") 5% 50% no-repeat;*/
}
/********************/
3. Last, here's the html code to make it all happen
Title 1
Face
Lips
Eyes
Body
posted by Jon @
8:19 AM
0 Comments
0 Comments:
Post a Comment
<< Home
Contributors
Jon
Game Guy
Tamina
Previous Posts
Sign up for free MP3 hosting at mp3crib.com
First Blog
Subscribe to
Posts [
Atom
]
0 Comments:
Post a Comment
<< Home