basics van een dhtml menu ? - Softwareontwikkeling

woensdag 6 maart 2002 10:37

Acties:

Verwijderd

Topicstarter

Kan iemand mij vertellen wat de basics zijn voor een dhtml dropdown menu ?

Ik heb me suf gezocht naar het meest eenvoudige menu, maar ik kom alleen hele mooie, maar complexe dhtml-menuutjes tegen.

Het enige wat ik wil is een menubar, met daaronder (ge-dropdowned met een mouseover) de items. Niets meer, niet minder. Geen fancy stuff, zoals kleurtjes, fades enz.

woensdag 6 maart 2002 10:42

Acties:

Bosmonster

*zucht*

Basics:

onmouseover -> laat laagje zien met menu
onmouseout -> maak laagje met menu weer onzichtbaar

zoiets?

woensdag 6 maart 2002 10:46

Acties:

Verwijderd

Topicstarter

Yep, alleen bij de mouseout kan ik dus het menu niet benaderen... Die verdwijnt dus ook weer.

woensdag 6 maart 2002 11:06

Acties:

Bosmonster

*zucht*

Mijn basic principe ietsje uitgebreid is (in pseudo-code):

bij creatie:
hideTimer=setTimeout('',0);

onmouseover van menulink:
clearTimeout(hideTimer);
openMenu();

onmouseout van menulink:
hideTimer=setTimeout('sluitMenu()',500);

onmouseover van menulayer:
clearTimeout(hideTimer);

onmouseout van menulayer:
hideTimer=setTimeout('sluitMenu()',500);

woensdag 6 maart 2002 11:15

Acties:

Bosmonster

*zucht*

Nou ik toch de code al bijna uitgeschreven had, hier een werkend voorbeeld:

code:

<html>
<head>
<title>DHTML menu basics</title>
<script type="text/javascript">

hideTimer=setTimeout('',0);

function openMenu(){
    clearTimeout(hideTimer);
    document.getElementById('menudiv').style.visibility="visible";
}

function closeMenu(){
    document.getElementById('menudiv').style.visibility="hidden";
}

</script>
</head>
<body>
<a href="javascript://" onmouseover="openMenu()" onmouseout="hideTimer=setTimeout('closeMenu()',500)">menuutje</a>
<div id="menuDiv"
    style="position:absolute;left:10px;top:35px;width:100px;background-color:#FF0000;visibility:hidden"
    onmouseover="clearTimeout(hideTimer)" 
    onmouseout="hideTimer=setTimeout('closeMenu()',500)"
>
optie 1<br>
optie 2<br>
optie 3<br>
optie 4<br>
optie 5<br>
optie 6
</div>
</body>
</html>

Zit geen xbrowser compatibility in of support voor meerdere menu's. Dat mag je lekker zelf aanprutsen

woensdag 6 maart 2002 12:22

Acties:

Verwijderd

Topicstarter

THX! Ik ga er lekker mee prutsen. Hier moet uit te komen zijn.

woensdag 6 maart 2002 12:24

Acties:

TrailBlazer

Karnemelk FTW

Hee top ik was hier al tijden naar opzoek. Alleen een vraagehet werkt niet in netschaap. En dat is de standaardbrowser hiero

woensdag 6 maart 2002 12:31

Acties:

Clay

cookie erbij?

TrailBlazer:
Hee top ik was hier al tijden naar opzoek. Alleen een vraagehet werkt niet in netschaap. En dat is de standaardbrowser hiero

Bosmonster:
Zit geen xbrowser compatibility in of support voor meerdere menu's. Dat mag je lekker zelf aanprutsen

Is een kleine moeite om dat werkend te krijgen trouwens

Niet alles hoeft toch voorgekauwd te worden?

Instagram | Flickr | "Let my music become battle cries" - Frédéric Chopin

woensdag 6 maart 2002 12:39

Acties:

TrailBlazer

Karnemelk FTW

IK heb dus echt de ballen verstand van DHMTL javascript lukt wel alleen die style shgeets heb ik nooit helemaal begrepeg

woensdag 6 maart 2002 14:31

Acties:

Verwijderd

Topicstarter

Pest is alleen dat ik op deze manier niet nog een menuutje ernaast kan zetten ivm met die timeout. Ik kan dus geen object meegegeven.

woensdag 6 maart 2002 14:33

Acties:

Bosmonster

*zucht*

Het kan wel.. de vraag is alleen hoe... ik denk even na over een toepasbare hint

woensdag 6 maart 2002 14:33

Acties:

Dennis

Op woensdag 06 maart 2002 12:39 schreef TrailBlazer het volgende:
IK heb dus echt de ballen verstand van DHMTL javascript lukt wel alleen die style shgeets heb ik nooit helemaal begrepeg

Stylesheets zijn niet zo moeilijk. DHTML is een combinatie van javascript, html en css en is wel een stukje moeilijker, ook al snap je javascript prima. Ligt hem gewoon in het feit dat een objectmodel helemaal kennen niet gemakkelijk is, zeker als je dan ook nog crossbrowser applicaties moet schrijven.

Verder kan ik vertellen dat op www.brainjar.com een prachtig menu staat, dat trouwens op een iets andere manier werkt dan dat hier waarschijnlijk de bedoeling is. In dat menu namelijk moet eerst worden geklikt alvorens een menu zichtbaar wordt, en dat maakt ook meteen een hele andere programmeerstructuur nodig (die in mijn ogen simpeler is).

Maar de tip die Bosmonster gaf kun je hier zeker bij gebruiken, verander in dat menu van brainjar de onclick event naar onmouseover en verander een aantal functies. Hier is het dus nodig om de timer in te bouwen. Verder kan ook het stukje code wat er voor zorgt dat het menu verdwijnt zodra je erbuiten klikt verdwijnen, dit gebeurt namelijk automatisch zodra je met timers werkt.

Owja, het is ook belangrijk dat als je met meerdere menu's naast elkaar werkt, je de ene direct laat verdwijnen zodra er een volgende tevoorschijn komt.

Dus bij een onmouseover moet je ook controleren of er reeds een menu is opengeklapt. Hiervan kun je dus ook de timer uitschakelen en het menu per direct laten verdwijnen met

code:

1	document.getElementById('menudiv').style.visibility="hidden";

Deze methode werkt trouwens niet in Netscape idd (versie 4). Komt omdat getElementById daarin niet wordt ondersteund. Gebruik daarvoor in de plaats:

code:

1	document.layers.all.menudiv.style.visibility = "hidden";

Al kan ik je niet garanderen dat dat laatste werkt, omdat de CSS ondersteuning in NS4 ook nogal slecht is. Mocht je er toch niet uitkomen, probeer dan eens wat scripts op www.hotscripts.com, of kijk bijvoorbeeld naar het menu van www.tweakers.net.

Succes!

woensdag 6 maart 2002 14:45

Acties:

Bosmonster

*zucht*

Omdat ik in een goeie bui ben vandaag dan, nu met multi-menu support

code:

<html>
<head>
<title>DHTML menu basics</title>
<script type="text/javascript">

hideTimer=setTimeout('',0);
activeMenu=null;

function openMenu(menu){
    clearTimeout(hideTimer);
    closeMenu();
      document.getElementById(menu).style.visibility="visible";
      activeMenu=menu;
}

function closeMenu(){
    if(activeMenu!=null){
        document.getElementById(activeMenu).style.visibility="hidden";
        activeMenu=null;
    }
}

</script>
</head>
<body>
<a href="javascript://" onmouseover="openMenu('menuDiv1')" onmouseout="hideTimer=setTimeout('closeMenu()',500)">menuutje</a> 
<a href="javascript://" onmouseover="openMenu('menuDiv2')" onmouseout="hideTimer=setTimeout('closeMenu()',500)">menuutje2</a>

<div id="menuDiv1"
    style="position:absolute;left:10px;top:35px;width:100px;background-color:#FF0000;visibility:hidden"
    onmouseover="clearTimeout(hideTimer)" 
    onmouseout="hideTimer=setTimeout('closeMenu()',500)"
>
optie 1<br>
optie 2<br>
optie 3<br>
optie 4<br>
optie 5<br>
optie 6
</div>

<div id="menuDiv2"
    style="position:absolute;left:68px;top:35px;width:100px;background-color:#0000FF;visibility:hidden"
    onmouseover="clearTimeout(hideTimer)" 
    onmouseout="hideTimer=setTimeout('closeMenu()',500)"
>
optie 1<br>
optie 2<br>
optie 3<br>
optie 4<br>
optie 5<br>
optie 6
</div>

</body>
</html>

Of misschien heb ik gewoon geen zin in het werk dat ik eigenlijk moet doen..

woensdag 6 maart 2002 14:55

Acties:

Verwijderd

Topicstarter

Bosmonster, Je bent een geweldenaar !!! Dikke Vette Hulde.

Nu heb ik alle basics bij elkaar. Mijn volgende stap is, om het geheel database-driven te maken. Maar da's een eitje

Nogmaal THNX!

woensdag 6 maart 2002 15:24

Acties:

TrailBlazer

Karnemelk FTW

Op woensdag 06 maart 2002 14:55 schreef runningman het volgende:
Bosmonster, Je bent een geweldenaar !!! Dikke Vette Hulde.

Nu heb ik alle basics bij elkaar. Mijn volgende stap is, om het geheel database-driven te maken. Maar da's een eitje

Nogmaal THNX!

I second that.
Je stijgt met stip op mijn favoriete Tweakers lijst ( iet dat die er is of zo maar THX)

woensdag 6 maart 2002 15:42

Acties:

Verwijderd

www.dynamicdrive.com

hehe

donderdag 7 maart 2002 13:29

Acties:

TrailBlazer

Karnemelk FTW

Op woensdag 06 maart 2002 14:33 schreef ddc het volgende:

[..]

Deze methode werkt trouwens niet in Netscape idd (versie 4). Komt omdat getElementById daarin niet wordt ondersteund. Gebruik daarvoor in de plaats:
code:
1
document.layers.all.menudiv.style.visibility = "hidden";

enig idee waar ik het object model van netscape kan vinden die klotesite van netscape helpt me ook niet echt veel verder

donderdag 7 maart 2002 13:50

Acties:

Bosmonster

*zucht*

http://developer.netscape.com/docs/manuals/communicator/dynhtml/index.htm

en vandaaruit kom je redelijk ver...

en anders natuurlijk voorebelden van anderen.. ontleed Javascripts/DHTML van andere developers en je ziet 9 van de 10 keer hoe je iets kan doen.

donderdag 7 maart 2002 13:55

Acties:

TrailBlazer

Karnemelk FTW

Op donderdag 07 maart 2002 13:50 schreef Bosmonster het volgende:
http://developer.netscape.com/docs/manuals/communicator/dynhtml/index.htm

en vandaaruit kom je redelijk ver...

en anders natuurlijk voorebelden van anderen.. ontleed Javascripts/DHTML van andere developers en je ziet 9 van de 10 keer hoe je iets kan doen.

had hem al gevonden

vrijdag 8 maart 2002 16:12

Acties:

Mercarra

Bosmonster, ik heb je menuutje gebruikt (na natuurlijk visuele aanpassingen) Hiet ziet er allemaal cool uit, maar ik heb een probleem.

(Als jij trouwens replyed en zegt dat ik me maar moet verdiepen in javascript, ccs, enz, dan geef ik je groot gelijk, ik heb echter niet veel tijd om me er echt in te verdiepen)

Maar als je me zou willen helpen: Ik wil de menubalk zelf in frame1 en de uitklapgedeeltes in een frame2 eronder. Ik krijg dit echter niet voor elkaar. Het lijkt me dat een simpel target="framename" moet kunnen, maar dit werkt dus niet.

(ik heb 1 uur lang gegoogled, maar ik kon niets vinden)

Canon EOS 6D / Samyang 14mm f/2.8 / 17-40mm f/4.0 / 35mm f/1.4 / 50mm f/1.4 / 85mm f/1.8 / 70-200mm f/4 IS mercarra.nl

vrijdag 8 maart 2002 16:21

Acties:

Bosmonster

*zucht*

sorry.. no frames-support from Bossie..

zaterdag 9 maart 2002 01:22

Acties:

Verwijderd

Helaas werkt het volgende niet:

code:

1	margin-left: 2px;

Is er nog een andere methode om de links in de uitklapmenu's een klein beetje naar rechts te schuiven? Ben er nu al mee bezig geweest, flink wat aanpassingen gedaan (borders e.d.), maar blijf nu ff haken op bovenstaande.

Wat doe ik verkeerd?

edit:

Ben er al uit. Door een extra div-je rond de menuitems te zetten, kom je al een heel eind

. Het geeft toch meer voldoening als je er zelf uitkomt.

zaterdag 9 maart 2002 02:02

Acties:

gitaarwerk

Plays piano,…

zijn er nog meer tutorial sites te vinden over dhtml?

als webdesigner moet ik tog wel wat meer weten dan alleen graphics en html

Ontwikkelaar van NPM library Gleamy

zaterdag 9 maart 2002 10:01

Acties:

Muppet

GT: Beestig

http://www.dthmlcentral.com
http://webfx.eae.net/
http://www.w3schools.com

There is no art to find the minds construction in the face

vrijdag 5 maart 2004 14:37

Acties:

Verwijderd

Nou heb ik dus een pulldown menu gemaakt. Met behulp van divjes. Probleem is dat wanneer ik een andere resolutie gebruik dat de aligning van deze menuutjes niet meer kloppen omdat ze vanaf de body zijn berekend. Ik heb mijn website namelijk in het midden van de pagina gecentreerd.

Nou heb ik gehoord dat je met behulp van een div, percentages vanaf deze div kunt berekenen. Dus dat ik mijn site in het midden zet, een divje erom heen, en dat ik dan vanaf de zijkant van de site (niet de body), componentjes kan uitlijnen. Zodat de plaats van deze componentjes altijd het zelfde blijft, en niet afhankelijk wordt van de resolutie. Mits ik wel bijvoorbeeld een site maak van 760px breed en niet rekening hou met een resolutie minder dan 800:600.

Iemand een id?

vrijdag 5 maart 2004 14:38

Acties:

Verwijderd

Ja, dit is wat je wil: http://www.mezzoblue.com/archives/2004/03/04/positioning_/

Pagina: 1

Reageer