Menu's in HTML en JavaScript II:

Popup Menu bij de muis

Popup menu's zijn in vele uitvoeringen op internet te vinden. Het gebruik van één ervan wordt hier besproken.
Dit is een bewerking van de oorspronkelijke versie die te vinden is op de site Dynamic Drive in de rubriek "Menu's & Navigation", onder de naam "Pop-it Menu".
De aanpassingen omvatten een iets eenvoudiger inpassing van het JavaScript en de CSS in de HTML-code, alsmede een methode om deze menu's toe te passen als tooltip.

Op deze bladzijde staat een uitgewerkt voorbeeld. De code staat onderaan deze pagina. Je kunt hem ook downloaden voor je eigen gebruik.

• De code bestaat uit de volgende onderdelen:
  1. Een stuk JavaScript voor de definitie van de menus
  2. Een stuk JavaScript om de menus te laten werken
  3. Een style-sheet voor de opmaak van de menu's
  4. Code om een popup menu te laten verschijnen en weer te laten verdwijnen
   
• De items i en ii zijn samengevoegd in de file popupmnu.js.
• De style-sheet voor de opmaak van de menu's staat in de file popupmnu.css.
• Het JavaScript om de menu's te laten werken (ii) hoef je niet te wijzigen. De overige zaken moeten wel worden aangepast.
• Voor het maken van een popup-menu moet je de file popupmnu.js veranderen. Dat doe je als volgt:
  • Je kunt meerdere popup-menu's op één opgeven.
  • De menu's worden in de array linkset gezet.
  • Het eerste menu zet je in linkset[0]. Het tweede menu zet je in linkset[1], het derde menu zet je in linkset[2], enzovoort.
  • Alle menu-items staan achter elkaar in één string. Je kunt zo'n string het beste opbouwen uit kleinere stukken, zoals onderaan deze bladzijde is gedaan. Daardoor hou je beter het overzicht.
  • In de variabele defaultMenuWidth geef je de breedte op van het menu. Op deze bladzijde is 170px gebruikt. Dit kun je aanpassen in de aanroep van showmenu(), waarover later meer.
  • In <a href=....>-tags kun je alles zetten wat binnen een gewone <a>-tag ook mag: HTML, download-file, JavaScript, enz. Kijk uit met event-handlers zoals onMouseOver en onMouseOut.
    Beweeg je muis HIER om te zien hoe dat er uit ziet.
   
• Om het menu vorm te geven moet je de popupmnu.css veranderen. Hiervoor kun je alle geldige attributen gebruiken. De namen van de id's moeten ongewijzigd blijven.
• De attributen visibility:hidden; en position:absolute; in het id #popitmenu moeten ongewijzigd blijven. Wees voorzichtig met z-index.
• Het attribuut display:block in het id #popitmenu a moet ongewijzigd blijven.
   
• Het menu wordt zichtbaar gemaakt met behulp van de event-handler onMouseOver. Hiermee wordt de function showmenu() aangeroepen. Hierbij moet je twee of drie parameters meegeven:
    <

  Naam	Betekenis
  e	Referentie aan het Mouse-object. Je gebruikt hier altijd event (zonder aanhalingstekens). Verander dat niet, anders werkt het niet meer.
  which	Referentie aan een element van de array linkset.
  optWidth	Breedte van het menu, in pixels. Dit is een string, bijvoorbeeld '130px'. De aanhalingstekens horen erbij, evenals px. Deze parameter mag wordt weggelaten. In dat geval wordt de waarde van defaultMenuWidth gebruikt. Als de breedte van het menu te klein is om de hele tekst van een menu-item te bevatten, wordt de tekst over meerdere regels verdeeld.

   
• Het menu verdwijnt weer met behulp van onMouseOut="delayhidemenu()". In delayhidemenu() is een wachttijd van 0,5 seconde geprogrammeerd. Dat is prettiger voor de leesbaarheid.
   
• Elke tag die met onMouseOver en onMouseOut overweg kan, kan worden gebruikt om een popupmenu te laten verschijnen/verdwijnen. Feitelijk zijn dat alle tags waarmee je tekst en/of graphics opmaakt. Volgens de officiële HTML-specificatie werken onMouseOver en onMouseOut niet bij de HTML 4-tags:
  APPLET, BASE, BASEFONT, BDO, BR, FONT, FRAME, FRAMESET, HEAD, HTML, IFRAME, ISINDEX, META, PARAM, SCRIPT, STYLE, TITLE.
  Eigenlijk spreekt dat voor zich. Merk op dat dit betekent dat het óók werkt met de tag BODY. Maar als je dát zou gebruiken verschijnt er een popup als de bladzijde geladen is, en verdwijnt het menu pas weer als de bladzijde wordt verlaten  .
• Hieronder zie je drie voorbeelden van hoe een popup-menu kan worden opgeroepen: Met een dummy hyperlink (<a href="#">....</a>), met een plaatje (<img src="...." ... >) en een table-cell (<td>....</td>).
   

Dummy hyperlink

Hele table-cell

 
• Als je dummy hyperlinks gebruikt zoals in de linker cel (<a href="#">....</a>), is het handig om het attribuut onClick="return false" op te nemen in de <a>-tag. Daarmee voorkom je dat de pagina naar boven scrollt als de link wordt aangeklikt.

Gebruik:

• De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.

De code ziet er als volgt uit:
 
(Zet deze code in de <HEAD>)

<script src="popupmnu.js"></script>
<link rel="stylesheet" href="popupmnu.css">

linkset[0] = '<a href="html-292.htm"
  target="content">Dit popup-menu</a>'
linkset[0] += '<a href="html-293.htm"
  target="content">Pulldown menu Verticaal (Pagina bestaat niet meer)</a>'
linkset[0] += '<a href="html-294.htm"
  target="content">Pulldown menu Horizontaal (Pagina bestaat niet meer)</a>'

onMouseover="showmenu(event,linkset[0])"
onMouseout="delayhidemenu()"

Downloaden:
 
Druk op de knop:  File: voorb292.zip, 2659 bytes.

Opmerking:
 
Je kunt dit ook gebruiken om tooltips mee weer te geven. Maak een menu met één item met daarin de tip. Gebruik bijvoorbeeld een <p>- of <span>-tag om de onMouseOver- en onMouseOut-events in te zetten.