Je kunt een menubalk configureren door bij Paginaconfiguratie een ‘Artikelgroepenbalk’ toe te voegen als website element of door in het CMS een menubalk op te bouwen en deze toe te voegen aan de paginaconfiguratie. Dit artikel legt uit hoe je het CMS element moet aanmaken.
Om een menubalk aan te maken middels CMS dien je een CMS pagina op te maken als onderstaand:
De pagina hoeft er natuurlijk niet exact hetzelfde uit te zien als hierboven, maar er zijn een aantal zaken waar je op moet letten:
LET OP: zet het vinkje bij ‘Zichtbaar op website’ aan wanneer je over meerdere webshops beschikt.
Nadat de technische gegevens van de CMS pagina zijn ingevuld, dienen we deze ook daadwerkelijk content mee te geven:
Om de artikelgroepenbalk op te maken zijn er 3 HTML elementen die we hiervoor gebruiken:
Maak de bulletlijst open- en sluit-tags aan: <ul></ul>. Om de juiste styling mee te geven aan de bulletlijst dienen we een ‘class=”menubar-holder”‘ mee te geven aan de openingstag van <ul>. Het systeem weet daardoor dat de bulletlijst een artikelgroepenbalk moet worden en geen doorsnee bulletlijst. Het resultaat hiervan is <ul class = “menubar-holder”></ul>.
Voeg nu voor elke link/optie in de menubalk een list item toe: <li></li>. Binnen een list item dien je vervolgens een link verwijzing te maken, waardoor je de mogelijkheid krijgt om er op te klikken. Dit doe je door een hyperlink tag toe te voegen <a></a>. Door de link daadwerkelijk ergens naar te verwijzen voorzie je de openingstag van een href: <a href=”https://www.logic4.nl”>Logic4></a>. In dit voorbeeld hebben we een link naar de website van Logic4 gemaakt.
Je kunt naar allerlei zaken linken met een href. In bovenstaande afbeelding hebben we 3 verschillende verwijzingen gebruikt:
LET OP: om de link naar de homepage te voorzien van een ‘Home’ icoontje dien je de class=”menubar-top menubar-home” toe te voegen aan de <a> tag en dien je een <i> tag aan te maken die je voorziet van de class: class=”fa fa-home”
