Menu (javascript)

Bassos · 30 jun 2005

Hallo,

ik heb een probleem met het onderstaand menu. Ik zou willen dat de tabel die uitklapt er rechts naast komt te staan ipv er onder. Is dit mogelijk door op een of andere manier het javascipt aan te passen of zoiets dergelijks. Of kan ik beter een heel nieuw script gebruiken (liever niet natuurlijk)?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Menu</title>

<style>


table{
font-family:verdana;
font-size:9pt;
color:#FFFFFF;
}
a{color:#FFFFFF;text-decoration:none;font:bold
}
a:hover{color:#000060
}
td.menu{background:#000060
}
table.menu
{
font-size:100%;
position:absolute;
visibility:hidden;
}
</style>

<base target="_blank">


</head>

<body>

<script language="JavaScript">
function toonmenu(elmnt)
{
document.all(elmnt).style.visibility="visible"
}
function verstopmenu(elmnt)
{
document.all(elmnt).style.visibility="hidden"
}
</script>

<table width="100px">
<tr bgcolor="#CC0000">
<td onmouseover="toonmenu('site1')" onmouseout="verstopmenu('site1')">
<a href="http://www.leejoo.nl">Topper</a><br />
<table class="menu" id="site1" width="130%">
<tr><td class="menu"><a href="pag1.htm">Regelementen</a></td></tr>
<tr><td class="menu"><a href="pag2.htm">ZIGO 4 financieel</a></td></tr>
<tr><td class="menu"><a href="pag3.htm">Wasmeensen</a></td></tr>
<tr><td class="menu"><a href="pag4.htm">Skivakantie</a></td></tr>
</table>
</td>
</tr>
<tr bgcolor="#CC0000">
<td onmouseover="toonmenu('site2')" onmouseout="verstopmenu('site2')">
<a href="http://www.leejoo.nl">Klassementen</a><br />
<table class="menu" id="site2" width="130%">
<tr><td class="menu"><a href="pag1.htm">Stand</a></td></tr>
<tr><td class="menu"><a href="pag2.htm">Topscorer</a></td></tr>
<tr><td class="menu"><a href="pag3.htm">Assits</a></td></tr>
<tr><td class="menu"><a href="pag4.htm">Zeis</a></td></tr>
</table>
</td>
</tr>
<tr bgcolor="#CC0000">
<td onmouseover="toonmenu('site3')" onmouseout="verstopmenu('site3')">
<a href="http://www.leejoo.nl">Foto's</a><br />
<table class="menu" id="site3" width="130%">
<tr><td class="menu"><a href="pag1.htm">Outfit</a></td></tr>
<tr><td class="menu"><a href="pag2.htm">Verjaardag OOO</a></td></tr>
<tr><td class="menu"><a href="pag3.htm">Carnaval</a></td></tr>
<tr><td class="menu"><a href="pag4.htm">Ewijk</a></td></tr>
</table>
</td>
</tr>
</table>

</body>
</html>

aaajeetee · 30 jun 2005

Dit heeft niets met javascript te maken, meer met html-tabellen.
Pruts eens wat met die tabellen en td's enzo, maar ik ken dit script en ik zou gewoon een nieuwe nemen (van leejoo, staan er ook wel een paar op die doen wat jij wil volgens mij

Japie82 · 30 jun 2005

Wat je ook kan doen is het submenu een vaste positie geven vanaf links, omdat deze toch al absolute gepositioneerd is.

Dus:

PHP:

table.menu
{
font-size:100%;
position:absolute;
left: 105px;
visibility:hidden;
}

En dan de <br /> verwijderen na elke link in het normale menu, dan voorkom je dat het submenu een regel lager komt.

Bassos · 1 jul 2005

Japie daar heb ik denk wat aan. Ik zal eens wat gaan knutselen aan de code.

ps. als ik een scriptje kon vinden dat ik kan gebruiken dan had ik niet zo moeilijk gedaan om deze te veranderen :thumb:

Bassos · 1 jul 2005

Het lukt nog niet helemaal. Het menuutje dat uitklapt komt nog net iets lager uit dan de bedoeling is. Ik kan wel een top: 15 px; meegeven, maar dan komen ze allemaal op de bovenste regel uit. Enig idee hoe ik dit op kan lossen of een goed alternatief. De bedoeling is dat het op deze site ---> www.zigo4.nl <--- toegepast gaat worden.

Dit is de code nu:

PHP:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Menu</title>

<style>
<!-- verander hieronder het lettertype en de kleuren -->

table{ 
font-family:verdana; 
font-size:9pt; 
color:#FFFFFF;
}
a{color:#FFFFFF;text-decoration:none;font:bold
}
a:hover{color:#000060
}
td.menu{background:#000060
}
table.menu
{
font-size:100%;
position:absolute;
left: 108 px;
visibility:hidden;
}
</style>

<base target="_blank">
<!-- verander hierboven de target in de framenaam waar de links in moeten openen -->

</head>

<body>

<script language="JavaScript">
function toonmenu(elmnt)
{
document.all(elmnt).style.visibility="visible"
}
function verstopmenu(elmnt)
{
document.all(elmnt).style.visibility="hidden"
}
</script>


<table width="100px">
<tr bgcolor="#CC0000">
<td onmouseover="toonmenu('site1')" onmouseout="verstopmenu('site1')"><a>Topper</a>
<table class="menu" id="site1" width="130%">
<tr><td class="menu"><a href="pag1.htm">dhdfhdh</a></td></tr>
<tr><td class="menu"><a href="pag2.htm">rdhdfh</a></td></tr>
<tr><td class="menu"><a href="pag3.htm">ruhhhd</a></td></tr>
<tr><td class="menu"><a href="pag4.htm">rtjhfjjh</a></td></tr>
</table>
</td>
</tr>
<tr bgcolor="#CC0000">
<td onmouseover="toonmenu('site2')" onmouseout="verstopmenu('site2')"><a>Klassementen</a>
<table class="menu" id="site2" width="130%">
<tr><td class="menu"><a href="pag1.htm">rhjfhfh</a></td></tr>
<tr><td class="menu"><a href="pag2.htm">rurudrtu</a></td></tr>
<tr><td class="menu"><a href="pag3.htm">ruyrur</a></td></tr>
<tr><td class="menu"><a href="pag4.htm">uyhtruy</a></td></tr>
</table>
</td>
</tr>
<tr bgcolor="#CC0000">
<td onmouseover="toonmenu('site3')" onmouseout="verstopmenu('site3')"><a>Foto's</a>
<table class="menu" id="site3" width="130%">
<tr><td class="menu"><a href="pag1.htm">sgsgsdg</a></td></tr>
<tr><td class="menu"><a href="pag2.htm">sghgsdg</a></td></tr>
<tr><td class="menu"><a href="pag3.htm">shfhdfh</a></td></tr>
<tr><td class="menu"><a href="pag4.htm">hdfhfjhgf</a></td></tr>
</table>
</td>
</tr>
</table>

</body>
</html>

jeroendenoot · 2 jul 2005

Je kunt het ook zo doen:

PHP:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Menu</title>

<style>
<!-- verander hieronder het lettertype en de kleuren -->

table{ 
font-family:verdana; 
font-size:9pt; 
color:#FFFFFF;
}
a{color:#FFFFFF;text-decoration:none;font:bold
}
a:hover{color:#000060
}
td.menu{background:#000060
}
table.menu
{
font-size:100%;
position:absolute;
left: 108 px;
visibility:hidden;
}
</style>

<base target="_blank">
<!-- verander hierboven de target in de framenaam waar de links in moeten openen -->

</head>

<body>

<script language="Javascript">
function toonmenu(elmnt)
{
document.all(elmnt).style.visibility="visible"
}
function verstopmenu(elmnt)
{
document.all(elmnt).style.visibility="hidden"
}
</script>


<table width="100px">
<tr bgcolor="#CC0000">
<td onmouseover="toonmenu('site1')" onmouseout="verstopmenu('site1')"><a>Topper</a>
<table class="menu" id="site1" style="top:15px;" width="130%">
<tr><td class="menu"><a href="pag1.htm">dhdfhdh</a></td></tr>
<tr><td class="menu"><a href="pag2.htm">rdhdfh</a></td></tr>
<tr><td class="menu"><a href="pag3.htm">ruhhhd</a></td></tr>
<tr><td class="menu"><a href="pag4.htm">rtjhfjjh</a></td></tr>
</table>
</td>
</tr>
<tr bgcolor="#CC0000">
<td onmouseover="toonmenu('site2')" onmouseout="verstopmenu('site2')"><a>Klassementen</a>
<table class="menu" id="site2" style="top:33px;" width="130%">
<tr><td class="menu"><a href="pag1.htm">rhjfhfh</a></td></tr>
<tr><td class="menu"><a href="pag2.htm">rurudrtu</a></td></tr>
<tr><td class="menu"><a href="pag3.htm">ruyrur</a></td></tr>
<tr><td class="menu"><a href="pag4.htm">uyhtruy</a></td></tr>
</table>
</td>
</tr>
<tr bgcolor="#CC0000">
<td onmouseover="toonmenu('site3')" onmouseout="verstopmenu('site3')"><a>Foto's</a>
<table class="menu" id="site3" style="top:51px;" width="130%">
<tr><td class="menu"><a href="pag1.htm">sgsgsdg</a></td></tr>
<tr><td class="menu"><a href="pag2.htm">sghgsdg</a></td></tr>
<tr><td class="menu"><a href="pag3.htm">shfhdfh</a></td></tr>
<tr><td class="menu"><a href="pag4.htm">hdfhfjhgf</a></td></tr>
</table>
</td>
</tr>
</table>
</body>
</html>

Bassos · 3 jul 2005

Het werkt perfect. Alleen vraag ik me af of het ook toepasbaar is bij mijn site. Is het niet zo als iemand met een andere resolutie mijn site bekijkt. Het menu dan helemaal ergens anders uit komt? Of als je bijvoorbeeld het venster klein hebt staan? Ik heb niet zo veel ervaring met het plaatsen van een menuutje zo. Ik bedoel met het positioneren ervan doormiddel van het opgeven van pixels waar het moet komen te staan.

??????

jeroendenoot · 3 jul 2005

Dat is inderdaad lastig. Maar kun je niet gewoon dat ene doen wat je eerst had? Die paar pixels dat het submenu naar beneden staat is toch niet zo erg? Of wel...?

Bassos · 4 jul 2005

Ja dat vind ik inderdaad wel erg. Dat is net het ene wat een site onafgewerkt maakt....

jeroendenoot · 4 jul 2005

Oké, dan ga ik nog even verder met zoeken...

Bassos · 4 jul 2005

Maar je weet niet ofdat problemen op gaat leveren als ik het op de manier doe zoals jij beschreef hierboven??

jeroendenoot · 4 jul 2005

Ik denk het niet. En anders kom je er zo achter.

Het beste kun je het gewoon proberen. En als het niet lukt dan vraag je het maar weer...

Bassos · 4 jul 2005

Ja ok ik zal het straks ook wel even proberen, maar ik zit nu even niet achter mijn thuis pc

Menu (javascript)

Bassos

Gebruiker

aaajeetee

Meubilair

Japie82

Verenigingslid

Bassos

Gebruiker

Bassos

Gebruiker

jeroendenoot

Terugkerende gebruiker

Bassos

Gebruiker

jeroendenoot

Terugkerende gebruiker

Bassos

Gebruiker

jeroendenoot

Terugkerende gebruiker

Bassos

Gebruiker

jeroendenoot

Terugkerende gebruiker

Bassos

Gebruiker

Nieuwste berichten

Wij waarderen jouw privacy