Horizontaal inschuivende menu's met Sidr
Sidr is een jQuery-plug-in waarmee je van de zijkant inschuivende menu's kunt maken.
Hier links zie je een knop. Als je daar op klikt schuift de hele pagina naar rechts en schuift er een menu naar binnen.
Dat gebeurt ook als je op de knop rechts klikt.
Op deze pagina wordt uitgelegd hoe je dat doet. De code van het voorbeeld kun je downloaden om zelf te gebruiken.
N.B.: De links in de menu's doen niets.
- Er worden drie items besproken:
- De oorsprong van het script.
- De werking van het script, in algemene termen.
- Gebruiken in je eigen site.
- De oorsprong van het script
- Het script is gemaakt door Alberto Varela. Je kunt het script van zijn website downloaden.
- Het script staat ook op GitHub.
- In de downloadfile staat een directory dist. Deze bevat alle benodigde bestanden voor het maken van deze menu's. De rest kun je negeren.
- De inspiratie en de bron voor deze pagina: Webdesigner magazine nr. 61, pag. 64 e.v. Dit blad wordt
sinds eind november 2017 niet meer gemaakt.
- De werking van het script
- Er wordt niet heel diep ingegaan op de werking van het script.
- Bij het laden van de pagina staan beide menu's buiten het document. De jQuery $(document).ready-function kent een paar eigenschappen toe aan de id's "left-menu" en "right-menu". Een van de eigenschappen is name. Je bent verplicht om die een waarde te geven, anders werkt het niet.
- Als je side:'right' opgeeft, komt het menu van rechts naar binnen schuiven, anders wordt de default-instelling side:'left' gebruikt.
- De kleurstelling van het menu is donker. Je kunt dat veranderen in een licht thema, door het CSS-bestand jquery.sidr.dark.min.css te vervangen door jquery.sidr.light.min.css.
- Andere kleuren kun je instellen door jquery.sidr.dark.css of jquery.sidr.light.css te gebruiken, en daar in te wijzigen.
- De CSS-bestanden bevatten een aantal schijnbaar overbodige klassen. Verwijder die niet, want Sidr gebruikt die om de
menu-elementen netjes op te maken.
- De buttons verwijzen naar de locaties in de code #sidr-left resp. #sidr-right. Die worden door de $(document).ready-function gemaakt. Bij het actief worden van zo'n link wordt het menu het beeld in geschoven.
- Als je op een menu-item klikt, verdwijnt dat ineens, zonder animatie. Dat is logisch want het script verwacht een hyperlink,
die zonder wachttijd (door een animatie) getoond moet worden.
- Behalve het bovenstaande zijn er nog meer opties, waaronder speed. Daarmee stel je de tijd in waarmee het menu inschuift,
in milliseconden. Bij het rechter menu is 1500 ingesteld. Default is 1000 ms; dat is bij het linker menu gebruikt.
- Gebruiken in je eigen site
- Download de code van de Sidr-website.
- Kies welk thema je wil: licht of donker. Link het betreffende stylesheet in de <head>.
- Voeg hier ook CSS bij voor het opmaken van de knoppen om de menu's op te roepen
- Omdat dit is een jQuery-plug-in is, heb je jQuery nodig. Op deze site is versie 1.10.2 gebruikt. Je betrekt hem het beste van een CDN.
- Link het JavaScript van Sidr, direct na de link naar jQuery.
- Maak een structuur aan zoals hier onder is aangegeven, voor een 'linker' of een 'rechter' menu, of allebei. Zet dat helemaal aan het begin van de <body>. Zet je eigen links in de menu's.
- Maak, helemaal aan het einde van de <body> een $(document).ready-function aan voor een 'linker' of een 'rechter' menu, of allebei. Zie hieronder.
Gebruik:
- De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.
De code van het voorbeeld ziet er als volgt uit:
(Zet dit in de <HEAD>).
<link rel="stylesheet" href="css/jquery.sidr.dark.min.css">
<style>
button { color:navy; font-size:120%; font-weight:bold }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script src="jquery.sidr.min.js"></script>
(Zet dit in de <BODY>, direct na de <body>-tag).
<div id="sidr-left">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Links #1</a></li>
<li><a href="">Links #2</a></li>
<li><a href="">Links #3</a></li>
</ul>
</div>
<div id="sidr-right">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Rechts #1</a></li>
<li><a href="">Rechts #2</a></li>
<li><a href="">Rechts #3</a></li>
<li><a href="">Rechts #4</a></li>
</ul>
</div>
(Zet dit in de <BODY>, op de plaats waar de knoppen moeten verschijnen.
<button id="left-menu" href="#sidr-left"
style="float:left;margin-right:30px"> Menu links </button>
<button id="right-menu" href="#sidr-right"
style="float:right;margin-left:30px"> Menu rechts </button>
(Zet dit in de <BODY>, direct vóór de </body>-tag).
<script>
$(document).ready(function() {
$('#left-menu').sidr({
name: 'sidr-left'
});
$('#right-menu').sidr({
name: 'sidr-right',
side: 'right',
speed: 1500
});
});
</script>
Downloaden:
Druk op de knop:
File: voorb454.zip, 790 bytes.
