dhtml menu vraagje [Archief]

Volledige versie bekijken : dhtml menu vraagje

roelywoely

%Europe/Berlin %813 %2005, 20:31

Hoi,

www.roel.fh-net.com/extra/sevewaeg/menu/menu.html

ik heb nu een menu van www.dynamicdrive.com (smart folding menu tree) maar als ik een mapje open, moet het mapje dat al open was weer dicht gaan. dus er moet elke keer maar 1 mapje open kunnen staan.. weet iemand hoe dit moet/kan iemand de code voor mij maken/bewerken??

alvast bedankt

kevinrommen

%Europe/Berlin %844 %2005, 21:15

ik kan je op dit moment hier niet mee helpen omdat ik het te druk heb met monteren. Maar 1 minuutje om misschien iets anders te gebruiken heb ik wel. Ik heb hier een klaar rollover menu. Deze kan je zo gebruiken. de opmaak staat in de css en de lijsten staan in de html. Het derde filetje is om het ook werkend te krijgen in explorer dus die er gewoon bij latens staan. dit is een fout in internet explorer ( firefox rules )

kevin

roelywoely

%Europe/Berlin %866 %2005, 21:47

bedankt :) maar dit bedoel k niet :P
zie het voorbeeld, hij moet uitklappen

kevinrommen

%Europe/Berlin %867 %2005, 21:48

ja dat begreep ik wel maar dacht dat je dit misschien mooier zou vinden. :) ik ga weer verder want zo schiet het niet op haha

roelywoely

%Europe/Berlin %882 %2005, 22:10

haha evengoed bedankt...
hij moet dus verticaal zijn want horizontaal heb ik niet veel plek... voor degene die me willen helpen, bedankt!

kevinrommen

%Europe/Berlin %920 %2005, 23:05

als je hem aanpast dan kan je hem ook zo maken dat hij naar beneden gaat... en dat de rest ook naar beneden gaat.... je kan de posities aanpassen... je doet soort van reverse engineren door hem beetje af te breken als je begrijpt wat ik bedoel....

en un ben ik toch beetje aan het nadenken wat je ook kan doen is een horizontaal menu maken wat dan niet zo heel breed hoeft te zijn met een menu zoals dit zodat het over de rest heenvalt zoals hier: http://www.atvscorpio.nl/new/

kevin

roelywoely

%Europe/Berlin %642 %2005, 16:25

sorry, maar ik heb egt een verticaal menu nodig...
en hoe kan je de posities etc.. dan aanpassen?

kevinrommen

%Europe/Berlin %619 %2005, 15:51

dan zal je de css moeten aanpassen.

htp://home.aim.avans.nl/bemb/

dit is kleine tut over css ik weet niet of je het kent.

roelywoely

%Europe/Berlin %847 %2005, 21:20

ik ken css al, maar dat bedoel k niet. ik heb wel een oplossing gevonden, zie www.sparta18.com
zij hebben het menu wat ik bedoel. het is gemaakt met div, maar ik snap de code niet... zou iemand hem uit kunnen leggen? 8~

<div class="menu">
<div id="m2" class="menuHoek">

<a href="?menu_id=1&page_id=1" target="" class="menuLink" onClick="return switchMenu('2',false,true);" title="Home">Home</a>
</div>
<div id="2" style="display:;" class="submenu">
</div>
<div id="m3" class="menuLeeg">
<a href="?menu_id=14&page_id=13" target="" class="menuLink" onClick="return switchMenu('3',false,true);" title="Nieuws">Nieuws</a>
</div>
<div id="3" style="display:none;" class="submenu">

</div>
<div id="m4" class="menuLeeg">
<a href="?menu_id=11&page_id=0" target="" class="menuLink" onClick="return switchMenu('4',true,false);" title="Informatie">Informatie</a>
</div>
<div id="4" style="display:none;" class="submenu">
<div class="menuLinksub"><a href="?menu_id=13&page_id=0" class="menuLinksub" target="" onClick="return switchIt('4.1',false);" title="Algemeen">Algemeen</a></div>
<div id="4.1" style="display:none" class="subsubmenu">
<div class="menuLinksubsub"><a class="menuLinksubsub" href="?menu_id=38&page_id=12" target="" title="Lidmaatschap">Lidmaatschap</a></div>

<div class="menuLinksubsub"><a class="menuLinksubsub" href="?menu_id=39&page_id=39" target="" title="Contributie">Contributie</a></div>
<div class="menuLinksubsub"><a class="menuLinksubsub" href="?menu_id=42&page_id=42" target="" title="Regels">Regels</a></div>
<div class="menuLinksubsub"><a class="menuLinksubsub" href="?menu_id=43&page_id=43" target="" title="Berichtgeving">Berichtgeving</a></div>
<div class="menuLinksubsub"><a class="menuLinksubsub" href="?menu_id=41&page_id=41" target="" title="Diverse">Diverse</a></div>
</div>
<div class="menuLinksub"><a href="?menu_id=12&page_id=11" class="menuLinksub" target="" onClick="" title="Bestuur">Bestuur</a></div>

<div class="menuLinksub"><a href="?menu_id=40&page_id=40" class="menuLinksub" target="" onClick="" title="Wedstrijdsecretariaat">Wedstrijdsecretariaat</a></div>
<div class="menuLinksub"><a href="?menu_id=37&page_id=38" class="menuLinksub" target="" onClick="" title="Commissies">Commissies</a></div>
<div class="menuLinksub"><a href="?menu_id=10&page_id=9" class="menuLinksub" target="" onClick="" title="Contact">Contact</a></div>
</div>
<div id="m5" class="menuLeeg">
<a href="?menu_id=4&page_id=0" target="" class="menuLink" onClick="return switchMenu('5',true,false);" title="Jeugd">Jeugd</a>
</div>

<div id="5" style="display:none;" class="submenu">
<div class="menuLinksub"><a href="?menu_id=23&page_id=24" class="menuLinksub" target="" onClick="" title="Algemeen">Algemeen</a></div>
<div class="menuLinksub"><a href="?menu_id=25&page_id=26" class="menuLinksub" target="" onClick="" title="A-jeugd">A-jeugd</a></div>
<div class="menuLinksub"><a href="?menu_id=24&page_id=25" class="menuLinksub" target="" onClick="" title="B-jeugd">B-jeugd</a></div>
<div class="menuLinksub"><a href="?menu_id=26&page_id=27" class="menuLinksub" target="" onClick="" title="C-jeugd">C-jeugd</a></div>
<div class="menuLinksub"><a href="?menu_id=27&page_id=28" class="menuLinksub" target="" onClick="" title="D-jeugd">D-jeugd</a></div>

<div class="menuLinksub"><a href="?menu_id=28&page_id=29" class="menuLinksub" target="" onClick="" title="E-jeugd">E-jeugd</a></div>
<div class="menuLinksub"><a href="?menu_id=29&page_id=31" class="menuLinksub" target="" onClick="" title="F-jeugd">F-jeugd</a></div>
<div class="menuLinksub"><a href="?menu_id=74&page_id=71" class="menuLinksub" target="" onClick="" title="Keepers">Keepers</a></div>
<div class="menuLinksub"><a href="?menu_id=30&page_id=32" class="menuLinksub" target="" onClick="" title="Pinkstertoernooi">Pinkstertoernooi</a></div>
</div>
<div id="m6" class="menuLeeg">
<a href="?menu_id=6&page_id=7" target="" class="menuLink" onClick="return switchMenu('6',false,true);" title="Dames">Dames</a>

</div>
<div id="6" style="display:none;" class="submenu">
</div>
<div id="m7" class="menuLeeg">
<a href="?menu_id=5&page_id=0" target="" class="menuLink" onClick="return switchMenu('7',true,false);" title="Senioren">Senioren</a>
</div>
<div id="7" style="display:none;" class="submenu">
<div class="menuLinksub"><a href="?menu_id=31&page_id=33" class="menuLinksub" target="" onClick="" title="Algemeen">Algemeen</a></div>

<div class="menuLinksub"><a href="?menu_id=32&page_id=34" class="menuLinksub" target="" onClick="return switchIt('7.2',true);" title="Periodetitels">Periodetitels</a></div>
<div id="7.2" style="display:none" class="subsubmenu">
<div class="menuLinksubsub"><a class="menuLinksubsub" href="?menu_id=33&page_id=35" target="" title="Periode 1">Periode 1</a></div>
<div class="menuLinksubsub"><a class="menuLinksubsub" href="?menu_id=34&page_id=36" target="" title="Periode 2">Periode 2</a></div>
<div class="menuLinksubsub"><a class="menuLinksubsub" href="?menu_id=35&page_id=37" target="" title="Periode 3">Periode 3</a></div>
</div>
</div>

<div id="m9" class="menuLeeg">
<a href="?menu_id=3&page_id=0" target="" class="menuLink" onClick="return switchMenu('9',true,false);" title="Wedstrijden">Wedstrijden</a>
</div>
<div id="9" style="display:none;" class="submenu">
<div class="menuLinksub"><a href="?menu_id=46&page_id=3" class="menuLinksub" target="" onClick="" title="Programma">Programma</a></div>
<div class="menuLinksub"><a href="?menu_id=47&page_id=45" class="menuLinksub" target="" onClick="" title="Uitslagen">Uitslagen</a></div>
<div class="menuLinksub"><a href="?menu_id=49&page_id=57" class="menuLinksub" target="" onClick="return switchIt('9.4',true);" title="Verslagen">Verslagen</a></div>

<div id="9.4" style="display:none" class="subsubmenu">
<div class="menuLinksubsub"><a class="menuLinksubsub" href="?menu_id=59&page_id=56" target="" title="Senioren">Senioren</a></div>
<div class="menuLinksubsub"><a class="menuLinksubsub" href="?menu_id=57&page_id=54" target="" title="Dames">Dames</a></div>
<div class="menuLinksubsub"><a class="menuLinksubsub" href="?menu_id=58&page_id=55" target="" title="Veteranen">Veteranen</a></div>
<div class="menuLinksubsub"><a class="menuLinksubsub" href="?menu_id=50&page_id=48" target="" title="A-jeugd">A-jeugd</a></div>
<div class="menuLinksubsub"><a class="menuLinksubsub" href="?menu_id=52&page_id=49" target="" title="B-jeugd">B-jeugd</a></div>

<div class="menuLinksubsub"><a class="menuLinksubsub" href="?menu_id=53&page_id=50" target="" title="C-jeugd">C-jeugd</a></div>
<div class="menuLinksubsub"><a class="menuLinksubsub" href="?menu_id=54&page_id=51" target="" title="D-jeugd">D-jeugd</a></div>
<div class="menuLinksubsub"><a class="menuLinksubsub" href="?menu_id=55&page_id=52" target="" title="E-jeugd">E-jeugd</a></div>
<div class="menuLinksubsub"><a class="menuLinksubsub" href="?menu_id=56&page_id=53" target="" title="F-jeugd">F-jeugd</a></div>
</div>
</div>
<div id="m10" class="menuLeeg">

<a href="?menu_id=15&page_id=0" target="" class="menuLink" onClick="return switchMenu('10',true,false);" title="Sponsors">Sponsors</a>
</div>
<div id="10" style="display:none;" class="submenu">
<div class="menuLinksub"><a href="?menu_id=18&page_id=19" class="menuLinksub" target="" onClick="" title="Algemeen">Algemeen</a></div>
<div class="menuLinksub"><a href="?menu_id=17&page_id=17" class="menuLinksub" target="" onClick="" title="Hoofdsponsor">Hoofdsponsor</a></div>
<div class="menuLinksub"><a href="?menu_id=60&page_id=59" class="menuLinksub" target="" onClick="" title="Tribune">Tribune</a></div>
<div class="menuLinksub"><a href="?menu_id=61&page_id=58" class="menuLinksub" target="" onClick="" title="Scorebord">Scorebord</a></div>

<div class="menuLinksub"><a href="?menu_id=19&page_id=20" class="menuLinksub" target="" onClick="" title="Shirtsponsors">Shirtsponsors</a></div>
<div class="menuLinksub"><a href="?menu_id=20&page_id=21" class="menuLinksub" target="" onClick="" title="Bordsponsors">Bordsponsors</a></div>
<div class="menuLinksub"><a href="?menu_id=21&page_id=22" class="menuLinksub" target="" onClick="" title="Balsponsors">Balsponsors</a></div>
<div class="menuLinksub"><a href="?menu_id=73&page_id=46" class="menuLinksub" target="" onClick="" title="Jas Sponsors">Jas Sponsors</a></div>
<div class="menuLinksub"><a href="?menu_id=22&page_id=23" class="menuLinksub" target="" onClick="" title="Begunstigers">Begunstigers</a></div>
</div>

<div id="m12" class="menuLeeg">
<a href="?menu_id=66&page_id=0" target="" class="menuLink" onClick="return switchMenu('12',true,false);" title="Foto's">Foto's</a>
</div>
<div id="12" style="display:none;" class="submenu">
<div class="menuLinksub"><a href="?menu_id=70&page_id=67" class="menuLinksub" target="" onClick="" title="Senioren">Senioren</a></div>
<div class="menuLinksub"><a href="?menu_id=71&page_id=68" class="menuLinksub" target="" onClick="" title="A-Jeugd">A-Jeugd</a></div>
<div class="menuLinksub"><a href="?menu_id=69&page_id=66" class="menuLinksub" target="" onClick="" title="B-Jeugd">B-Jeugd</a></div>

<div class="menuLinksub"><a href="?menu_id=67&page_id=64" class="menuLinksub" target="" onClick="" title="E-Jeugd">E-Jeugd</a></div>
<div class="menuLinksub"><a href="?menu_id=68&page_id=65" class="menuLinksub" target="" onClick="" title="F-Jeugd">F-Jeugd</a></div>
</div>
<div id="m13" class="menuLeeg">
<a href="?menu_id=72&page_id=61" target="" class="menuLink" onClick="return switchMenu('13',false,true);" title="Kalender">Kalender</a>
</div>
<div id="13" style="display:none;" class="submenu">

</div>
<div id="m14" class="menuLeeg">
<a href="?menu_id=8&page_id=10" target="" class="menuLink" onClick="return switchMenu('14',false,true);" title="Gastenboek">Gastenboek</a>
</div>
<div id="14" style="display:none;" class="submenu">
</div>
<div id="m16" class="menuLeeg">
<a href="?menu_id=9&page_id=8" target="" class="menuLink" onClick="return switchMenu('16',false,true);" title="Links">Links</a>

</div>
<div id="16" style="display:none;" class="submenu">
</div>
</div>

mknol

%Europe/Berlin %941 %2005, 23:36

lord Greystoke

%Europe/Berlin %427 %2005, 11:14

Het principe:

Javascript functie om menus open/dicht te klappen

<script type="text/javasript">
function show_hide(id)
{
// vorige menu inklappen met check of er een vorig menu is
if(typeof prevmenu != undefined) prevmenu.style.display = 'none';

// huidige submenu selecteren en openen
theElement = document.getElementById(id);
theElement.style.display = '';

// huidige als vorig submenu instellen
prevmenu = theElement;
}
</script>

je HTML:

<a href="#" onclick="show_hide('subhome')">Home</a>
<div id="subhome" style="display:none"> blablblbla</div>
<a href="#" onclick="show_hide('submenu2')">Menuitem 2</a>
<div id="submenu2" style='"display:none">jaja</div>

succes

roelywoely

%Europe/Berlin %588 %2005, 15:06

dus ik plaats de javascript in de head tags, html in de body, dan gebeurt er niks...?
zou je een voorbeeld kunnen geven? daar heb ik genoeg aan.. ;)

heel erg bedankt!!!!

lord Greystoke

%Europe/Berlin %379 %2005, 10:06

Hi, had gisteren wat typefoutjes gemaakt (javasript b.v.)
Hieronder de werkende code

<script type="text/javascript">
function show_hide(id)
{
// vorige menu inklappen met check of er een vorig menu is
if(typeof prevmenu != "undefined") prevmenu.style.display = 'none';

// huidige submenu selecteren en openen
theElement = document.getElementById(id);
theElement.style.display = '';

// huidige als vorig submenu instellen
prevmenu = theElement;
}
</script>

<div onclick="show_hide('subhome')">Home</div>
<div id="subhome" style="display:none">home 1<br>home 2<br>etc.</div>
<div onclick="show_hide('submenu2')">Menuitem 2</div>
<div id="submenu2" style="display:none">menu 2 <br>menu 3<br>etc.</div>

roelywoely

%Europe/Berlin %749 %2005, 18:59

thx...!!!

roelywoely

%Europe/Berlin %838 %2005, 21:07

uhm.. ik moet nog 2 dingen hebben.. hehe P)
Er moet een plaatje voor elk uitklapbaar woord komen te staan. Als je erop klikt veranderd het plaatje. Als je er weer op klikt klapt het menu weer in en veranderd het plaatje terug... Zon beetje als dit:

http://roel.fh-net.com/extra/sevewaeg/menu/menu.html

Als ik iets voor je kan doen, zeg je het maar ;)

lord Greystoke

%Europe/Berlin %480 %2005, 12:31

roelywoely

%Europe/Berlin %814 %2005, 20:33

eeh bedankt, maarre hij doet t niet helemaal zoals ik het zou willen :)
- plaatje veranderd niet als hij uitgeklapt is
- er kunnen meerdere dingen uitgeklapt worden, de andere moet weer dichtgaan als er een opent
- als je op een onderdeel klikt als hij open is, gaat hij niet dicht

alvast bedankt ;)

lord Greystoke

%Europe/Berlin %644 %2005, 16:27

Haha, ok, was weer een typefoutje getElementByid (moet ById zijn)
Heb de code nog wat verder uitgebouwd, denk dat je dit wel OK vind:

<script type="text/javascript">
function show_hide(id)
{
// huidige submenu
theElement = document.getElementById('sub'+id);
theImage = document.getElementById('img'+id);

// vorige menu inklappen met check of er een vorig menu is
if(typeof prevmenu != "undefined" && prevmenu != theElement) prevmenu.style.display = 'none';
if(typeof previmg != "undefined" && previmg != theImage) previmg.src = 'plus.gif';

if(theElement.style.display == 'none')
{
theElement.style.display = '';
// plaatje switchen
theImage.src = 'min.gif';
}
else
{
theElement.style.display = 'none';
theImage.src = 'plus.gif';
}

// huidige als vorig submenu instellen
prevmenu = theElement;
previmg = theImage;
}
</script>

<div onclick="show_hide('home')"><img src="plus.gif" id="imghome">Home</div>
<div id="subhome" style="display:none">home 1<br>home 2<br>etc.</div>
<div onclick="show_hide('menu2')"><img src="plus.gif" id="imgmenu2">Menuitem 2</div>
<div id="submenu2" style="display:none">menu 2 <br>menu 3<br>etc.</div>

roelywoely

%Europe/Berlin %690 %2005, 17:34

je bent egt geweldig!! bedankt!! als ik iets voor je kan doen zeg je het maar

baco333

%Europe/Berlin %443 %2008, 11:39

Het topic is al van een tijdje geleden maar ik hoop dat iemand mijn kan helpen.

Ik heb het menu compleet werkend en wil het nu gaan includen in een php pagina.
Nu wil ik het menu op de laatst gekozen subid open laten verschijnen als de pagina opnieuw geopend word. wie weet hier een functie voor?

Terror-web

%Europe/Berlin %448 %2008, 11:46

Misschien verstandig om je hele HTML (van het menu) hier te plaatsen. Ik denk dat je dan meer reacties krijgt.. ;)

baco333

%Europe/Berlin %464 %2008, 12:09

<!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>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Menu</title>


<link rel="stylesheet" type="text/css" href="menu.css" media="screen" />

<script type="text/javascript">
function show_hide(id)
{

// vorige menu inklappen met check of er een vorig menu is
if(typeof prevmenu != "undefined") prevmenu.style.display = 'none';

// huidige submenu selecteren en openen
theElement = document.getElementById(id);
theElement.style.display = '';

// huidige als vorig submenu instellen
prevmenu = theElement;

}
</script>

</head>

<body>



<div class="hoofdmenu" id="Home" onclick="show_hide('subhome')"><b>Home</b>
</div>

<div class="hoofdmenu" onclick="show_hide('submenu2')">
<b>Computers</b>
</div>





<div class="sub" id="submenu2" style="display:none">

<p><a href="menu.html">Desktop Pc's</a></a></p>
<p><a href="menu.html">Notebooks</a></p>
<p><a href="menu.html">Handheld Pc's</a></p>
<p><a href="menu.html">Garantie uitbreiding</a></p>
</div>

<div class="hoofdmenu" onclick="show_hide('submenu3')">

<b>Beeldschermen</b>
</div>
<div class="sub" id="submenu3" style="display:none">

<p><a href="menu.html">LCD 17inch</a></p>
<p><a href="menu.html">LCD 19inch</a></p>
<p><a href="menu.html">LCD 20inch</a></p>
<p><a href="menu.html">LCD 21inch</a></p>
<p><a href="menu.html">LCD 22inch</a></p>
<p><a href="menu.html">LCD 24inch</a></p>
<p><a href="menu.html">LCD 26inch</a></p>
<p><a href="menu.html">LCD 28inch</a></p>
<p><a href="menu.html">LCD 3xinch</a></p>
<p><a href="menu.html">LCD Accesoires</a></p>

</div>

<div class="hoofdmenu" onclick="show_hide('submenu4')">

<b>Componenten</b>
</div>
<div class="sub" id="submenu4" style="display:none">

<p><a href="menu.html">Behuizing</a></p>
<p><a href="menu.html">Moederborden</a></p>
<p><a href="menu.html">Proccessor</a></p>
<p><a href="menu.html">Geheugen</a></p>
<p><a href="menu.html">Grafische kaarten</a></p>
<p><a href="menu.html">Video -capture</a></p>
<p><a href="menu.html">TV Kaarten</a></p>
<p><a href="menu.html">Geluidskaarten</a></p>
<p><a href="menu.html">Lan adapters</a></p>
<p><a href="menu.html">Draadloze lan adapters</a></p>
<p><a href="menu.html">Harde schijven IDE</a></p>
<p><a href="menu.html">Harde schijven SATA</a></p>
<p><a href="menu.html">Harde schijven extern</a></p>
<p><a href="menu.html">DVD speler</a></p>
<p><a href="menu.html">DVD schrijver</a></p>
<p><a href="menu.html">Flash-card reader</a></p>
<p><a href="menu.html">Toetsenborden</a></p>
<p><a href="menu.html">Muizen</a></p>

</div>

<div class="hoofdmenu" onclick="show_hide('submenu5')">

<b>Netwerken</b>
</div>
<div class="sub" id="submenu5" style="display:none">

<p><a href="menu.html">Lan adapter</a></p>
<p><a href="menu.html">Draadloze lan adapters</a></p>
<p><a href="menu.html">Routers / Modems</a></p>
<p><a href="menu.html">Switches</a></p>
<p><a href="menu.html">Netwerk camera's</a></p>
<p><a href="menu.html">Webcams</a></p>
<p><a href="menu.html">USB hubs / controllers</a></p>
<p><a href="menu.html">USB kabels</a></p>
<p><a href="menu.html">Netwerk Kabels / Accesoires</a></p>
<p><a href="menu.html">UMTS /GRPRS</a></p>
<p><a href="menu.html">Sim Kaarten</a></p>
<p><a href="menu.html">Nas servers</a></p>
<p><a href="menu.html">Internet/ADSL</a></p>
</div>

<div class="hoofdmenu" onclick="show_hide('submenu6')">

<b>Opslag</b>
</div>
<div class="sub" id="submenu6" style="display:none">

<p><a href="menu.html">Harde schijven IDE</a></p>
<p><a href="menu.html">Harde schijven SATA</a></p>
<p><a href="menu.html">Harde schijven extern</a></p>
<p><a href="menu.html">DVD speler</a></p>
<p><a href="menu.html">DVD schrijver</a></p>
<p><a href="menu.html">Flash-card reader</a></p>
<p><a href="menu.html">Nas servers</a></p>
<p><a href="menu.html">USB sticks</a></p>
</div>

</body>

</html>