Onze reizen

Bootstrap een menu maken

Na de uitleg over een menu voor versie 3.3.7 en na de uitleg voor versie 4.0.0 staat een link naar een voorbeeldpagina die gebruik maakt van van de uitleg voor die versie + nog wat extraatjes.

Als je een website hebt van meer dan 1 pagina kan je moeilijk verder zonder een vorm van menu.
Dat kan van heel eenvoudig tot in elkaar geneste items zoals onze website, die heeft dus 1 geneste menu. Dat zie je aan het driehoekje achter een menu item.
Dat nesten kan in princiepe zoveel als je wilt, je maakt jezelf het leven er wel niet eenvoudiger op. Mijn maximum is op mijn reizen website dat is
Land --> Provincie --> stad.

Een eenvoudige, met tekst als logo

Met vervolg menu en logo afbeelding.

Zoals je ziet, is dit bijna dezelfde als die van onze website.
Op de website is het eerste vak voor de logonaam of afbeelding weggelaten, dat logo staat toch bovenaan in de header. Hieronder is dat de grijze div samen met de link die er tussen staat.
In het 2de voorbeeld is het woord WebSiteName vervangen door een afbeelding van 100px breed en 24px hoog.
Waarom 24? De ruimte voor tekst of afbeeldingen in je menu bar is 1,5 x de font hoogte en die is bij bootstrap standaard 16px. of 16 x 1,5 = 24px.
Ga je daar toch boven met dat logo dan wordt je menu bar ook hoger.

Een menu in V 3.3.7 of V 4.0.0 is wel een groot verschil, eerst een menu voor 3.3.7.

De gebruikte code voor 3.3.7

<nav class="navbar navbar-default">
   <div class="container">
      <div class="navbar-header">
         <a class="navbar-brand" href="#">WebSiteName</a>
      </div>

       <ul class="nav navbar-nav">
         <li class="active"><a href="#">Home</a></li>
         <li><a href="#">Page 1</a></li>
         <li><a href="#">Page 2</a></li>
         <li><a href="#">Page 3</a></li>
      </ul>

   </div>
</nav>

En wat uitleg

Deze div maakt je volledige menubalk aan.
Plaatst een container in je menubalk.
navbar-header maakt het vakje voor je logo
Deze lijn bevat je logo, tekst of afbeelding.
sluit het vakje voor je logo<

Dit is een standaard lijst met 4 items
item 1
item 2
item 3
item 4
afsluiting van de lijn

Sluit je container div
Sluit je menubalk div.

Op de plaats waar in het linkse gele gedeelte href="#" staat komt je verwijzing naar je pagina vb: href="fotos.html"

Vervolgmenu voor 3.3.7.

Wil je hier in versie 3.3.7 een vervolgmenu dan breek je een <li>xxxxxxx</li> open.
<li>xxxxxxx
zodat hier ruimte onstaat waar je een nieuwe <ul><li></li></ul>constructie kan maken
</li>

Vb. met de <li> voor Page 2

Wat gebeurd er

De <li></li> constructie is opgesplitst. en krijgt de class="dropdown"
In de tag voor de link komt class="dropdown-toggle" data-toggle="dropdown"
En achter de Link tekst <span class="caret"></span>
Dit is terug een standaard lijst
maar de class van de <ul> is
van class="nav navbar-nav"
veranderd naar
class="dropdown-menu"
Afsluiting van de opgesplitste <li>

De menu zoals hierboven voorgesteld is heel goed bruikbaar als je maar één of twee menu items in je menubar hebt staan.
Wat gebeurd er, als je schermbreedte beneden een bepaalde waarde gaat, dan worden de menu itemsin de menubalk onder elkaar geplaatst.
Als dit max. 2 items zijn gaat dat nog wel.
Er bestaat echter een manier om deze menu items te verbergen en pas open te laten gaan als je op het icoontje met de 3 horizontale streepjes klik.
Uiteraard moet de menu dan een beetje aangepast worden. Dat doe ik hieronder.

Een in-uitklapbare + vervolgmenu voor 3.3.7

<nav class="navbar navbar-default">
   <div class="container">
   <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>

      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
      </button>

   </div>

   <div class="collapse navbar-collapse" id="myNavbar">

      <ul class="nav navbar-nav">
         <li class="active"><a href="#">Home</a></li>
         <li><a href="#">Page 1</a></li>
         <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
               Page 2<span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
               <li><a href="#">Page 2-1</a></li>
               <li><a href="#">Page 2-2</a></li>
               <li><a href="#">Page 2-3</a></li>
            </ul>
         </li>
         <li><a href="#">Page 3</a></li>
      </ul>
   </div>
   </div>
</nav>

Wat is er veranderd?

De gele delen zijn die van het eerste voorbeeld hierboven.
De groene zijn de uitbreiding voor de vervolgmenu's
Dat blijft allemaal onveranderd.
Er moet enkel iets toegevoegd worden.

In de gele <div class="navbar-header"> moet je nu het oranje deel bijplaatsen.
Met <button type="button enz....> de 3 spans tot </button> creëer je het icoontje met de 3 horizontale streepjes.

Verder komt je de volledige ul - li constructie tussen een div te staan met de class="collapse navbar-collapse" id="myNavbar"

Voorbeeldpagina voor menu onder versie 3.3.7 met enkele varianten hierop

De gebruikte code voor 4.0.0 met vervolgmenu

<nav class="navbar navbar-expand-sm bg-light navbar-light">
    <a class="navbar-brand" href="#">WebSiteName</a>
    <ul class="navbar-nav">
       <li class="nav-item"> <a class="nav-link" href="#" class="scroll"> Page 1</a></li>
       <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">Page 2</a>
          <div class="dropdown-menu">
             <a class="dropdown-item" href="#">Page 2-1</a>
             <a class="dropdown-item" href="#">Page 2-2</a>
             <a class="dropdown-item" href="#">Page 2-3</a>
          </div>
       </li>
       <li class="nav-item"><a class="nav-link" href="#" class="scroll">Page 3></a></li>
    </ul>
</nav>

En wat uitleg

De menubalk wordt ook hier aangemaakt in een nav tag met de class="navbar" er zijn nog 2 andere classes aan toegevoegd nl navbar-expand-sm en bg-light
De class navbar-expand-sm zorgt ervoor dat je menu kan in en uitklappen. Er staat achteraan sm dit bepaald vanaf welke schermbreedte je menu moet in of uiklappen. i.p.v. sm kunnen er andere letters staan.
-xl dan gaat het in werking voor schermen van 1200px en kleiner,
-lg werkt vanaf 992 pixels
-md is voor schermen kleiner dan 768
-sm werkt bij 576 en kleiner
laat je deze letters weg dan werkt het voor schermen van 376 of kleiner

Deze 5 getallen zijn telkens de breedte waarop bootstrap de layout aanpast. Jij veranderd de layout van je pagina niet met deze opgave, je bepaald enkel op welk van die waarden ook je menu moet overgaan naar de ingeklapte versie, en dat hangt af van de hoeveelheid menu items die je gebruikt.
Hier op de website heb ik het op md staan omdat bij de volgende stap (sm) de items al een tijd onder elkaar zijn komen te staan.

bg-light bepaalt je achtergrond kleur. Je hebt volgende kleuren bg-primery succes bg-info bg-warning bg-danger beg-secondary bg-dark en bg-light
Dat zijn gewoon voorgedefinieerde achtergrondkeuren. je kan die zowat overal gebruiken.
navbar-light gebruikt donkere tekst en met navbar-dark gebruik je lichte tekst. Zonder opgave van deze class is het lichte tekst.

<a class="navbar-brand" href="#">WebSiteName</a> Dit mag je dus weglaten zie versie 3.3.7

De 2 gele lijnen en al wat er tussen staat is in wezen weer een standaard lijst. Enkel de vervolg menu is met andere tags.
De <ul> krijgt de class="navbar-nav"

De <li> bevat een menu item dus geven we dat aan met de class="nav-item"
de <a> bevat een link en dat geven we aan met de class="nav-link" en ook de class="scroll" moet toegevoegd worden.
Je mag die 2 classen ook in één zetten dus class="nav-link scroll"

Een li voor een vervolgmenu krijgt ook de class="nav-item" maar ook de class="dropdown" dus class="nav-item dropdown"
De link <a> krijgt de class="nav-link" en daarbij de class="dropdown-toggle" dus class="nav-link dropdown-toggle"
Verder moet aan die link nog een id toegevoegd worden, een id is hetzelfde als een class maar een id kan je maar aan 1 element toevoegen id="navbardrop"
en tenslotte ook nog data-toggle="dropdown" .
Het eigenlijke dropdown deel staat in een div met als class="dropdown-menu"
In deze div staan in gewone links je dropdown items. Aan elke link moet je dan de class="dropdown-item" toevoegen.

Deze menu in-uitklapbaar maken.

Na het grijze deel en voor de ul voeg je volgende code toe.

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="collapsibleNavbar">
en sluit de div af na de </ul>
</div>

Een in-uitklapbare + vervolgmenu voor versie 4.0.0 beta2

<nav class="navbar navbar-expand-sm bg-light navbar-light">
   <a class="navbar-brand" href="#">WebSiteName</a>
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
      <span class="navbar-toggler-icon"></span>
   </button>
   <div class="collapse navbar-collapse" id="collapsibleNavbar">
      <ul class="navbar-nav">          <li class="nav-item"> <a class="nav-link" href="#" class="scroll"> Page 1</a></li>
            <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">Page 2</a>
               <div class="dropdown-menu">
                  <a class="dropdown-item" href="#">Page 2-1</a>
                  <a class="dropdown-item" href="#">Page 2-2</a>
                  <a class="dropdown-item" href="#">Page 2-3</a>
               </div>
            </li>
         <li class="nav-item"><a class="nav-link" href="#" class="scroll">Page 3></a></li>
      </ul>
   </div>
</nav>

Voorbeeldpagina voor menu onder versie 4.0.0 met enkele varianten hierop

En als slot van deze lange uitleg de die je op mijn pagina's ziet. Het zijn ook navigatie zaken dus ook voor deze pagina.

Tot versie 3.3.7 was die mogelijkheid ingebouwd en je doet dit met,

<ul class="pager">
<li><a href="#">Vorige</a></li>
<li><a href="#">Volgende</a></li>
</ul>

Links de code voor de 3.3.7 pager
Bootstrap zelf bezit de css hiervoor.

Versie 4.0.0 kent pager niet meer, maar je kan dit zelf toevoegen.
Ik heb wat uitgeprobeerd en onderstaande code komt het dichtste bij de pager van versie 3.3.7
Op de plaats waar je ook pager van versie 3.3.7 zou zetten plaats je nu,

<div>
   <a href="mailformulier.html"><div class="vorige pager">Vorige</div></a>
   <a href="voornemens.html"><div class="volgende pager">Volgende</div></a>
   <div class="clearfix" ></div>
</div>

Lijn 2 en 3 maakt je knoppen aan

de 5de lijn verwijder de floats.

En dan voor versie 4.0.0 je eigen stylesheet,

.pager{
width: 100px;
background-color: #fff;
height: 35px;
padding: 5px 5px;
text-align: center;
margin: 10px 0;
border-radius: 15px;
}

.pager a{
text-decoration: none;
}

.pager:hover{
background-color: #555;
color: #fff;
}

.vorige{
float: left;
}

.volgende{
float: right;
}

.clearfix{
clear: both;
}