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

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

Track this topic | Email this topic | Print this topic

Nowe

Posted: Aug 10 2009, 12:00 AM

QUOTE

Runs With Scissors
Group Icon

Group: Member
Posts: 281
Member No.: 3,952
Joined: 13-July 07

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!

--------------------

PM EMAIL WWW MSN

TOP

Cal	Posted: Aug 10 2009, 01:59 PM QUOTE
PHP Developer Group: Member: Elite Posts: 1,697 Member No.: 3,524 Joined: 11-June 07	Thank you! Your topic has been tagged by one of the Support Staff. We hope your javascript problem is solved soon! --------------------
	PM EMAIL WWW ICQ AIM TOP

Cal	Posted: Aug 10 2009, 02:00 PM QUOTE
PHP Developer Group: Member: Elite Posts: 1,697 Member No.: 3,524 Joined: 11-June 07	Try around here. --------------------
	PM EMAIL WWW ICQ AIM TOP

Nowe	Posted: Aug 10 2009, 08:08 PM QUOTE
Runs With Scissors Group: Member Posts: 281 Member No.: 3,952 Joined: 13-July 07	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... --------------------
	PM EMAIL WWW MSN TOP

Cal	Posted: Aug 11 2009, 02:38 AM QUOTE
PHP Developer Group: Member: Elite Posts: 1,697 Member No.: 3,524 Joined: 11-June 07	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. --------------------
	PM EMAIL WWW ICQ AIM TOP

0 User(s) are reading this topic (0 Guests and 0 Anonymous Users)

0 Members:

« Next Oldest | Unsolved Support | Next Newest »

Affiliates