Dutch (Nederlands) translation by Frank van den Heuvel (you can also view the original English article)
De navigatie is een onmisbaar gedeelte van de UI op een website. Ongeacht de grootte — één pagina, of volledig e-commerce — een website moet een navigatie hebben die gebruikers eenvoudig naar de pagina's en secties laat gaan. Na onze vorige tutorial over Material Design Lite Grid, gaan we het in dit gedeelte hebben over een andere component van MDL: de navigatie.
Voordat je begint, eerst de links naar de MDL bibliotheken, dus de stylesheets en JavaScript toevoegen aan de head sectie van de pagina:
1 |
<link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons"> |
2 |
<link href='https://fonts.which is googleapis.com/css?family=Roboto:400,300,300italic,500,400italic,700,700italic' rel='stylesheet' type='text/css'> |
3 |
<link rel="stylesheet" href="//storage.googleapis.com/code.getmdl.io/1.0.1/material.teal-red.min.css" /> |
4 |
<script src="//storage.googleapis.com/code.getmdl.io/1.0.1/material.min.js"></script> |
Nu kunnen we beginnen met het bouwen van de navigatie.
Basis Navigatie
Navigatie in MDL is een subonderdeel van layout, samen met de andere onderdelen zoals de grid, tabs en de footer. De basisvorm van de navigatie in MDL bestaat uit de sitenaam, een paar link menu's, en een off-canvas navigatie.
Om dit te maken, voeg je eerst een lege div toe met daarbinnen de mdl-layout en mdl-js-layout. Deze twee classes zijn vereist. De class mdl-layout past vooraf gedefinieerde stijlen toe die er in principe voor zorgen dat deze UI-component, hoofdzakelijk de navigatie, een juiste layout heeft. Ondertussen, voegt de mdl-js-layout door middel van JavaScript enkele dynamische eigenschappen toe die het mogelijk maken nieuwe elementen en enkele classes te gebruiken waardoor de navigatie gaat functioneren.
1 |
<div class="mdl-layout mdl-js-layout"> |
2 |
</div>
|
Maak nu binnen deze div een header element met als class mdl-layout_ _header .
1 |
<div class="mdl-layout mdl-js-layout"> |
2 |
<header class="mdl-layout__header"> |
3 |
</header>
|
4 |
</div>
|
Daarna maak je een nieuwe div met mdl-layout__header-row. Dit is het element waarin de navigatie wordt geplaatst.
1 |
<div class="mdl-layout mdl-js-layout"> |
2 |
<header class="mdl-layout__header"> |
3 |
<div class="mdl-layout__header-row"> |
4 |
|
5 |
</div>
|
6 |
</header>
|
7 |
</div>
|
Omhul de site naam met een span element met als class mdl-layout-title en een anker tag met een URL die verwijst naar de home pagina. Je kunt meteen de tekst vervangen door het logo van de website.
1 |
<div class="mdl-layout mdl-js-layout"> |
2 |
<header class="mdl-layout__header"> |
3 |
<div class="mdl-layout__header-row"> |
4 |
<span class="mdl-layout-title">Acme</span> |
5 |
</div>
|
6 |
</header>
|
7 |
</div>
|
Maak een div onder de site naam met als class mdl-layout-spacer. Deze div maakt ruimte tussen de site naam en de navigatie en drukt deze eventueel naar de rechterkant van de header.
1 |
<div class="mdl-layout mdl-js-layout"> |
2 |
<header class="mdl-layout__header"> |
3 |
<div class="mdl-layout__header-row"> |
4 |
<span class="mdl-layout-title">Acme</span> |
5 |
<div class="mdl-layout-spacer"></div> |
6 |
</div>
|
7 |
</header>
|
8 |
</div>
|
Nu voegen we het navigatie menu toe onder de spacer gebruikmakend van het nav element.
1 |
<div class="mdl-layout mdl-js-layout"> |
2 |
<header class="mdl-layout__header"> |
3 |
<div class="mdl-layout__header-row"> |
4 |
<span class="mdl-layout-title">Acme</span> |
5 |
<div class="mdl-layout-spacer"></div> |
6 |
<nav class="mdl-navigation"> |
7 |
<a class="mdl-navigation__link" href="#">Home</a> |
8 |
<a class="mdl-navigation__link" href="#">Blog</a> |
9 |
<a class="mdl-navigation__link" href="#">About</a> |
10 |
<a class="mdl-navigation__link" href="#">Contact</a> |
11 |
</nav>
|
12 |
</div>
|
13 |
</header>
|
14 |
</div>
|
Als laatste voeg je een nieuwe div toe met als class mdl-layout__drawer buiten het header element om de off- canvas navigatie te maken.
1 |
<div class="mdl-layout mdl-js-layout"> |
2 |
<header class="mdl-layout__header"> |
3 |
<div class="mdl-layout__header-row"> |
4 |
<span class="mdl-layout-title">Acme</span> |
5 |
<div class="mdl-layout-spacer"></div> |
6 |
<nav class="mdl-navigation"> |
7 |
<a class="mdl-navigation__link" href="#">Home</a> |
8 |
<a class="mdl-navigation__link" href="#">About</a> |
9 |
<a class="mdl-navigation__link" href="#">Contact</a> |
10 |
</nav>
|
11 |
</div>
|
12 |
</header>
|
13 |
<div class="mdl-layout__drawer"> |
14 |
<span class="mdl-layout-title">Acme</span> |
15 |
<nav class="mdl-navigation"> |
16 |
<a class="mdl-navigation__link" href="#">Products</a> |
17 |
<a class="mdl-navigation__link" href="#">Services</a> |
18 |
<a class="mdl-navigation__link" href="#">Portfolios</a> |
19 |
<a class="mdl-navigation__link" href="#">Achievements</a> |
20 |
<a class="mdl-navigation__link" href="#">Blog</a> |
21 |
</nav>
|
22 |
</div>
|
23 |
</div>
|
24 |
</div>
|
Ververs de pagina en de off-canvas navigatie moet meteen werken. Je zult het "hamburger" icoon zien dat de navigatie in en uit schakelt als je erop klikt. Probeer het maar eens:
Echter, zoals je hierboven kunt zien, is de navigatiebalk, alsmede de naam van de site en het navigatie-menu onzichtbaar. MDL verbergt het doelbewust als het wordt weergegeven op tablet grootte beeld vensters. Dit is eigenlijk een weloverwogen beslissing van de MDL-team. Het horizontale menu is slecht aangepast bij horizontaal schalen, vooral als je veel menu's hebt. Op een gegeven moment zal het niet passen in een klein beeldvenster en zal het waarschijnlijk samenvouwen of de andere UI in de navigatie overlappen.
Als je het toch zichtbaar wilt houden in een kleiner beeld venster voeg dan de class mdl-layout--fixed-header toe op dezelfde regel als de mdl-layout class.
1 |
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header"> |
2 |
... more content here ... |
3 |
</div>
|
Deze class zal de navigatie dwingen zichtbaar te blijven op telefoons en tablets.
Toevoegen van een Zoek Functie (Search Form)
Zoek functies (search forms) zijn een veelgebruikt aanvullend element binnen de website navigatie. Ze kunnen, vooral bij uitgebreide navigaties, handig zijn om snel de content te vinden waarnaar je zoekt. Met deze functie is het niet meer dan invullen en op zoek klikken.
Je vindt de complete HTML om de zoekfunctie te bouwen onder het nav element.
1 |
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header"> |
2 |
... more content here ... |
3 |
<nav class="mdl-navigation"> |
4 |
<a class="mdl-navigation__link" href="#">Home</a> |
5 |
<a class="mdl-navigation__link" href="#">About</a> |
6 |
<a class="mdl-navigation__link" href="#">Contact</a> |
7 |
</nav>
|
8 |
<!-- start search form -->
|
9 |
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable"> |
10 |
<label class="mdl-button mdl-js-button mdl-button--icon" for="search-expandable"> |
11 |
<i class="material-icons">search</i> |
12 |
</label>
|
13 |
<div class="mdl-textfield__expandable-holder"> |
14 |
<input class="mdl-textfield__input" type="text" id="search-expandable" /> |
15 |
<label class="mdl-textfield__label" for="search-expandable">Search text</label> |
16 |
</div>
|
17 |
</div>
|
18 |
<!-- end search form -->
|
19 |
... more content here ... |
20 |
</div>
|
Hierbinnen kun je twee verschillende MDL componenten definiëren. Namelijk het Text Field en de Button. De button is zichtbaar als zoek icoon en breidt zich uit naar de zoek functie als erop geklikt wordt.
Een laatste opmerking
De navigatie in MDL is een overweldigend groot onderdeel gezien het aantal variaties dat we voor de verschillende scenario's kunnen maken. In deze tutorial hielden we het simpel en bouwden we een navigatie met enkel de essentiële classes.
De navigatie kan verder worden uitgebreid met hulp classes of door andere onderdelen van MDL toe te voegen. Bijvoorbeeld, we kunnen de navigatie achtergrond transparant maken en een achtergrondafbeelding gebruiken, de off-canvas navigatie op altijd zichtbaar instellen, de navigatie un-sticky maken en zelfs de link menu's vervangen door menu's met Tabs, die nuttig kunnen zijn voor een enkele pagina website.
Echter, dit navigatie component is nogal eigenzinnig.
Bijvoorbeeld, de padding aan de linkerzijde van de navigatie is ingesteld op 72px, wat erop wijst dat de navigatie een off-canvas navigatie met "hamburger icoon" moet hebben. Maar soms hebben we niet meer dan een degelijke navigatie met basis eigenschappen nodig. Toch is de navigatie een solide onderdeel. Ik kijk uit naar verbeteringen en misschien extra functionaliteiten.
In de volgende tutorial, gaan we kijken naar twee onderdelen waarover we het al kort gehad hebben: knoppen en tekstvelden. Tot de volgende keer!
