[JS] Converting A Css Menu To A Js Menu Please (RPG-Directory)

Title: [JS] Converting A Css Menu To A Js Menu Please

Nowe - August 10, 2009 12:00 AM (GMT)

Alright, so I've made a CSS menu, but I want it to carry over to javascript. Here's the coding I'm currently using:

CODE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<style>
.netbar ul.cssMenu ul{display:none}
.netbar ul.cssMenu li:hover>ul{display:block}
.netbar ul.cssMenu li:hover{
position:relative;
}
.netbar ul.cssMenu ul{position: absolute;left:-1px;top:98%;}
.netbar ul.cssMenu ul ul{position: absolute;left:98%;top:-2px;}
.netbar ul.cssMenu, .netbar ul.cssMenu ul{
margin:0px;
list-style:none;
padding:0px 3px 3px 0px;
background-color:#89C6E7;
border:1px double #13445E #FFFFFF;
}
.netbar ul.cssMenu {
display:block;
font-size:0;
zoom:1;
float: left;
}
.netbar ul.cssMenu ul{
width:152px;
}
.netbar ul.cssMenu li{
display:block;
zoom:1;
margin:3px 0 0 3px; font-size:0;
float:left;}
.netbar ul.cssMenu a:active, .netbar ul.cssMenu a:focus {
outline-style:none
}
.netbar ul.cssMenu a, .netbar ul.cssMenu li.dis a:hover, .netbar ul.cssMenu li.sep a:hover{
display:block;
vertical-align:middle;
background-color:#89C6E7;
border:1px solid #89C6E7;
text-align:left;
text-decoration:none;
padding:3px;
font:normal 11px Trebuchet MS, Tahoma;
color: #191919;
text-decoration:none;
cursor:pointer;
}
.netbar ul.cssMenu span{
overflow:hidden;
}
.netbar ul.cssMenu ul li {
float:none;
}
.netbar ul.cssMenu ul a, .netbar ul.cssMenu ul li.dis a:hover{
text-align:left;
white-space:nowrap;
}
.netbar ul.cssMenu li.sep{
text-align:left;
padding:0px;
line-height:0;
height:100%;
}
.netbar ul.cssMenu li.sep span{
float:none;
padding-right:0;
width:3px;
height:100%;
display:inline-block;
background-color:#13445E #FFFFFF;
background-image:none;
}
.netbar ul.cssMenu ul li.sep span{
width:100%;
height:3px;
}
.netbar ul.cssMenu li:hover>a{
background-color:#279CC9;
border-color:#15546C #FFFFFF;
border-style:solid;
font:normal 11px Trebuchet MS, Tahoma;
color: #191919;
text-decoration:none;
}
.netbar ul.cssMenu li.dis a {
color: #AAAAAA !important;
}
.netbar ul.cssMenu img {border: none;vertical-align: middle;margin-right:3px;width:16px;
height:16px;
}
.netbar ul.cssMenu ul img {width:16px;
height:16px;
}
.netbar ul.cssMenu img.over{display:none}
.netbar ul.cssMenu li.dis a:hover img.over{display:none !important}
.netbar ul.cssMenu li.dis a:hover img.def {display:inline !important}
.netbar ul.cssMenu li:hover > a img.def {display:none}
.netbar ul.cssMenu li:hover > a img.over {display:inline}
.netbar ul.cssMenu span{
display:block;
background-image:url(netbar.files/arrowmain.gif);
background-position:right center;
background-repeat: no-repeat;
padding-right:11px;}
.netbar ul.cssMenu li:hover>a>span{ background-image:url(netbar.files/arrowmaino.gif);
}
.netbar ul.cssMenu ul span{background-image:url(netbar.files/arrowsub.gif)}
.netbar ul.cssMenu ul li:hover > a span{ background-image:url(netbar.files/arrowsubo.gif);}
.netbar ul.cssMenu li.cssMenui0>a{
background-color:transparent;
background-image:url(netbar.files/styleIE7_n_back.gif);
border-width:0px;
border-style:none;
font:normal 11px Trebuchet MS, Tahoma;
}
.netbar ul.cssMenu li.cssMenui0:hover>a{
background-color:transparent;
background-image:url(netbar.files/styleIE7_o_back.gif);
border-style:none;
font:normal 11px Trebuchet MS, Tahoma;
}
.netbar ul.cssMenum0 {
background-color:transparent;
border-width:0px;
border-style:none;
padding:0px 0px 0px 0px;
width: 100%;
height: 35px;
background-image:url(netbar.files/styleIE7_n_back.gif);
}
.netbar ul.cssMenum0>li>a {
padding:3px;
}
.netbar ul.cssMenum0>li {
margin:0px 0px 0px 0px;
}"
</style>

<div class="netbar">
<ul class="cssMenu cssMenum0">
<li class="cssMenui0"><a href="http://rpgfrontier.net">RPG Frontier</a>
<ul>
<li><a href="http://rpgfrontier.net">Home Page</a></li>
<li><a href="http://rpgfrontier.net/index.php?app=forums&module=extras&section=boardrules">Forum Rules</a></li>
</ul>
</li>
<li class="cssMenui0"><a href="#">Hosting</a>
<ul>
<li><a href="#">RPG Hosting</a>
<ul>
<li><a href="http://rpgfrontier.net/index.php?showforum=8">Hosting Offices</a></li>
<li><a href="http://rpgfrontier.net/index.php?showannouncement=2&f=8">Hosting Rules</a></li>
</ul>
</li>
<li><a href="#">Project Hosting</a>
<ul>
<li><a href="http://rpgfrontier.net/index.php?showannouncement=2&f=8">Project Rules</a></li>
</ul>
</li>
</ul>
</li>
<li class="cssMenui0"><a href="#">General</a>
<ul>
<li><a href="http://rpgfrontier.net/index.php?showforum=5">The Cantina</a></li>
</ul>
</li>
<li class="cssMenui0"><a href="#">Roleplaying</a>
<ul>
<li><a href="http://rpgfrontier.net/index.php?showforum=9">Fantasy</a>
<ul>
<li><a href="http://rpgfrontier.net/index.php?showforum=91">Clockworks</a></li>
<li><a href="http://rpgfrontier.net/index.php?showforum=159">Conquest of Magvel</a></li>
<li><a href="http://rpgfrontier.net/index.php?showforum=">Open Waters</a></li>
<li><a href="http://rpgfrontier.net/index.php?showforum=65">The Secret Tome</a></li>
<li><a href="http://rpgfrontier.net/index.php?showforum=19">Wyrmslayer</a></li>
</ul>
</li>
<li><a href="http://rpgfrontier.net/index.php?showforum=105">Science Fiction</a>
<ul>
<li><a href="http://rpgfrontier.net/index.php?showforum=104">Frontier Wars</a></li>
<li><a href="http://rpgfrontier.net/index.php?showforum=55">Outreach</a></li>
<li><a href="http://rpgfrontier.net/index.php?showforum=92">Torn Worlds</a></li>
</ul>
</li>
</ul>
</li>
<li class="cssMenui0"><a href="#">Projects</a>
<ul>
<li><a href="http://rpgfrontier.net/index.php?showforum=11">Uprising</a>
<ul>
<li><a href="http://rpgfrontier.net/index.php?showforum=15">Arts</a></li>
<li><a href="http://rpgfrontier.net/index.php?showforum=12">Creatures</a></li>
<li><a href="http://rpgfrontier.net/index.php?showforum=13">Quests</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>

I know little to nothing about Javascript, so its why I either need help with it, or I need someone to make it out of the goodness of themself. Thanks all!

Cal - August 10, 2009 01:59 PM (GMT)

Thank you! Your topic has been tagged by one of the Support Staff. We hope your javascript problem is solved soon!

Cal - August 10, 2009 02:00 PM (GMT)

Try around here.

Nowe - August 10, 2009 08:08 PM (GMT)

Lol, google search. As if I hadn't thought of that first :lol:

I found nothing with which I actually liked to work with that was free...

Cal - August 11, 2009 02:38 AM (GMT)

You can refine your search with 'getElementByID', since that's the syntax you'll need to use in order to make a hover class work on something other than an an anchor tag in IE6.

View Full Version: [JS] Converting A Css Menu To A Js Menu Please