Responsive
Web Navigatie
Op deze pagina geef ik via een voorbeeld uitleg hoe je een responsive menu maakt.
Is het moeilijk, ik denk van niet. Een menu is eigenlijk niks anders als een lijst met linken en in een verticaal menu staan ze onder elkaar en in een horizontaal menu staan ze naast elkaar.
Wij gaan ons hier bezig houden met een horizontaal menu met submenus en dat op kleinere schermen verticaal wordt. Om een mooi menu te maken kun je de linken het best in een ongeorderde lijst zetten.
We gaan eerst het HTML document maken.
HTML Pagina
We gaan beginnen met de HTML pagina te maken.
Type of kopiëer de onderstaande code naar een nieuw document en sla deze op als index.html.
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<title></title>
<!-- viewport is noodzakelijk om een goede responsive pagina te bouwen Het verteld de ontvanger hoe te reageren op de site.-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Hier de omschrijving va je pagina" />
<link rel="icon" href="favicon.png" sizes="32x32"/>
<link rel="stylesheet" href="./style.css"/>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
</head>
<body>
<!--Menu-->
<a class="toggle" href="javascript:void(0)">Menu</a>
<ul class="navbar">
<li><a class="active" href="index.html">Home</a></li>
<li class="dropdown">
<a href="javascript:void(0)">Dropdown 1</a>
<ul class="dropdown-menu">
<li><a href="#">Pagina Link 1</a></li>
<li><a href="#">Pagina Link 1</a></li>
<li><a href="#">Pagina Link 1</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0)">Dropdown 2</a>
<ul class="dropdown-menu">
<li><a href="#">Pagina Link 2</a></li>
<li><a href="#">Pagina Link 2</a></li>
<li><a href="#">Pagina Link 2</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
<!--Scripts-->
<script src="./scripts.js"></script>
</body>
</html>
De belangrijkste code is het volgende in het <head> </head> gedeelte
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Deze meta zorgt er voor dat de ontvangende browser de instellingen in jouw code uitvoert in de verschillende breekpunten.
Als we de pagina starten in je browser ziet het er ongeveer zo uit:
Het is een menu maar laten we het horizontaal maken met een CSS document.
CSS Pagina
Type of kopiëer de onderstaande code naar een nieuw document en sla deze op als style.css in de zelfde map als je HTML pagina.
*,
*::before,
*::after {
box-sizing: border-box;
}
*,
::after,
::before{
box-sizing:border-box;
}
body,
html{
font-family:Verdana,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
font-size:1rem;
line-height:1.5;
background-color:#fff;
color:#000;
text-align:left;
}
article,
aside,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section{
display:block;
}
body{
margin:0
}
Om te beginnen moeten we alle elementen een box-sizing van border-box geven, dit is belangrijk voor het maken van een responsive pagina.
*, *::before, *::after {box-sizing: border-box;} *, ::after,::before {box-sizing:border-box;}
Vervolgens gaan we het font bewerken, de achtergrond en tekst kleur bewerken.
body, html {font-family: Verdana, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 1rem;line-height: 1.5;background-color: #fff;color: #000;text-align: left;}
Dan zorgen we dat de volgende elementen als een blok worden weergegeven.
article, aside, figcaption, figure, footer, header, hgroup, main,nav, section{display: block;}
Ons werkveld moet geen marge hebben.
body{margin:0}
Type of kopiëer de onderstaande code in het style.css document en sla het op.
/* */
/* NAVBAR */
/* */
a.toggle{
display: block;
padding: 20px;
color: #FFFFFF;
background: #0000FF;
text-decoration: none;
position: sticky;
top: 0;
}
a.toggle::after{
content:"\2630";
float: right;
font-weight: bold;
font-size: 1.5rem;
}
a.toggle.responsive::after{
content:"\2716";
float: right;
font-weight: bold;
font-size: 1.5rem;
}
a:hover.toggle{
text-decoration: underline;
}
Denk erom, altijd eerst ontwerpen voor mobiel!
Daarom beginnen we met de link knop voor het openen en sluiten van het verticale menu (in de mobiel is het menu verticaal)
Als we de pagina starten in je browser ziet het er ongeveer zo uit:
Als je er op klikt gebeurt er niks, we moeten eerst het menu gedeelte maken en daarna een Jquery javascript om alles te laten werken.
Type of kopiëer de onderstaande code in het style.css document en sla het op.
ul.navbar{
display: none;
padding: 16px;
list-style: none;
background: #0000FF;
margin: 0;
position: sticky;
top: 55px;
z-index: 1000;
}
ul.navbar li{
display: block;
position: relative;
line-height: 21px;
text-align: left;
}
ul.navbar li a{
display: block;
padding: 8px 16px;
color: #FFFFFF;
text-decoration: none;
}
ul.navbar li a:hover:not(.active){
text-decoration: underline;
}
ul.navbar li.dropdown a::after{
content:"\A0\A0\25BC";
float:right;
}
ul.navbar li.dropdown.clickbtn a::after{
content:"\A0\A0\25B2";
float:right;
}
ul.navbar li ul.dropdown-menu{
margin: 0;
padding: 0;
min-width: 100%;
background: #f4f4f4;
box-shadow: 2px 4px #adb5bd;
display: none;
position: absolute;
z-index: 999;
left: 0;
}
ul.navbar li ul.dropdown-menu a {
color: #000000 !important;
}
ul.navbar li ul.dropdown-menu a::after{
content: "";
}
ul.navbar li.clickbtn ul.dropdown-menu a::after{
content: "";
}
ul.navbar li ul.dropdown-menu li{
display: block;
}
ul.navbar .active{
border: 1px solid;
}
Dit is het eigenlijke menu. Het bestaat dus uit een lijst ul en die gaan we bewerken. Om te beginnen maken we eerst de lijst niet zichtbaar
display: none;, geven we het een padding van 16px, padding: 16px;, schakelen de list style uit list-style: none;,
geven het een achtergrondkleur background: #0000FF;, geven het geen margin margin: 0;, zorgen ervoor dat het altijd aan de top blijft
plakken position: sticky;top: 55px; en als laatste zorgen we ervoor dat het menu altijd boven de rest staat z-index: 1000;
Dan gaan we het lijstonderdeel bewerken li. zichtbaar als blok display: block;, de positie relatief en een lijnhoogte van 21px
position: relative;line-height: 21px; en de tekst wordt links uitgelijnt text-align: left;
Daarna gaan we de linken ul.navbar li a en de dropdown ul.navbar li.dropdown bewerken.
Als we de pagina starten in je browser ziet het er ongeveer zo uit:
Nu moeten we het menu nog horizontaal maken op een groter scherm.
Type of kopiëer de onderstaande code in het style.css document en sla het op.
@media (min-width:768px){
ul.navbar{
display: block !important;
position: sticky;
top: 0;
}
ul.navbar li{
display: inline-block;
}
a.toggle{
display: none;
}
}
Het breekpunt is 768 pixels @media (min-width:768px)
We beginnen met het zichtbaar maken van het menu ul.navbar{display: block !important;position: sticky;top: 0;}
Dan zorgen we er voor dat de linken achter elkaar staan ul.navbar li{display: inline-block;}
En dan zorgen we er voor dat de link knoppen voor het openen en sluiten van het menu niet zichtbaar meer zijn a.toggle{display: none;}
Als we de pagina starten in je browser ziet het er ongeveer zo uit:
Verklein je browser om het effect te zien. Op je smartphone grootte ziet het er ongeveer zo uit
Nu moeten we de boel nog aan het werken krijgen en daarvoor hebben we een Jquery javascript bestand nodig.
Jquery JS Pagina
Type of kopiëer de onderstaande code in een nieuw bestand scripts.js en sla het op in de zelfde map als de overige bestanden.
//dropdown menu
$(document).ready(function(){
// Show hide popover
$(".dropdown").click(function(){
$(this).toggleClass("open").toggleClass('clickbtn').find(".dropdown-menu").slideToggle("fast");
$(".open").not($(this)).find(".dropdown-menu").slideUp("fast");
$(".open").not($(this)).toggleClass('clickbtn').removeClass("open");
});
});
$(document).click(function (e) {
e.stopPropagation();
var container = $(".dropdown");
//check if the clicked area is dropDown or not
if (container.has(e.target).length === 0) {
$('.dropdown-menu').slideUp("fast");
$(".open").toggleClass('clickbtn').removeClass("open");
}
})
//navbar
$(document).ready(function(){
$("a.toggle").click(function(){
$("ul.navbar").slideToggle("fast");
$("a.toggle").toggleClass("responsive");
});
});
Over de uitleg van dit Jquery javascript verwijs ik naar de volgende site's:
Nu moet alles werken en zien je schermen er zo uit:
