Een uitschuif menu met jQuery maken

Soms is er ruimte te kort op je website, of wil je extra informatie tonen die alleen op aanvraag getoond wordt. Dan is het makkelijk om een menu te hebben die kan uitschuiven. In dit artikel ga ik bespreken hoe je zo'n menu zelf in elkaar kunt zetten.

De HTML opbouw

De HTML is vrij eenvoudig, en ziet er als volgt uit:

  1. <div id="top-menu">
  2.         <div id="top-menu-content">
  3.                 Hier komt de content van het menu.
  4.         </div>
  5.         <div id="top-menu-label">
  6.                 Label
  7.         </div>
  8. </div>

Ook de CSS is relatief eenvoudig opgebouwd:

  1. div#top-menu {
  2.         position: fixed;
  3.         z-index: 9999;
  4.         background: #fff;
  5. }
  6.  
  7. div#top-menu-label {
  8.         background: #fff;
  9.         position: absolute;
  10.         width: 100px;
  11.         height: 25px;
  12.         left: 50%;
  13.         margin-left: -50px;
  14. }

Het daadwerkelijke verbergen van de content gaan in de volgende stap met jQuery doen. Dan blijft enkel het labeltje zichtbaar.

Het jQuery gedeelte

Eerst zorgen we ervoor dat de content verborgen wordt. Dat doen we op deze manier:

  1. $top_menu_content = $("div#top-menu-content").outerHeight() * -1;
  2. $("div#top-menu").data('margin-top', $top_menu_content).css('margin-top', $top_menu_content);

De * -1 wordt gebruikt om het een negatief te maken. Deze waarde wordt weer opgeslagen met behulp van de data functie, zodoende kan deze in een later stadium weer uitgelezen worden.

Het tonen en verbergen bij het over het label gaan wordt gedaan met de hover functie. Vervolgens wordt de animate gebruikt voor het effect. Dat brengt vervolgens deze code:

  1. $("div#top-menu").hover( function () {
  2.         $("div#top-menu").animate({
  3.                 marginTop: 0
  4.         }, 200);
  5. }, function () {
  6.         $("div#top-menu").animate({
  7.                 marginTop: $("div#top-menu").data('margin-top')
  8.         }, 200);
  9. });

Voorbeelden

Standaard voorbeeld

Menu aan de onderkant

Menu aan de zijkant

Onclick in plaats van een hover

Onclick en een mouseout

Schuif effect