Webshop

CMS menubalk

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.

Aanmaken van een CMS pagina

Om een menubalk aan te maken middels CMS dien je een CMS pagina op te maken als onderstaand:

cms-menubalk

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 erop dat je een CMS groep koppelt
  • Bij multi-language shops let je op de juist gekozen taal
  • Let erop dat je geen tekst invult bij ‘Titel’, omdat deze tekst anders wordt afgedrukt boven de artikelgroepenbalk

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:

cms-menubalk

Om de artikelgroepenbalk op te maken zijn er 3 HTML elementen die we hiervoor gebruiken:

  1. <ul> vertegenwoordigt een niet gesorteerde bulletlijst
  2. <li> vertegenwoordigt een rij in de lijst
  3. <a> vertegenwoordigt een link in de rij

Stap 1:

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>.

Stap 2:

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:

  1. Link naar de homepage: <li class=”active”><a class=”menubar-top menubar-home” href=”/”><i class=”fa fa-home”></i></a></li>
  2. Link naar een HTML pagina: <li><a class=”menubar-top” href=”/categorieen/820/kantoorartikelen.html”>Kantoorartikelen</a></li>
  3. Link naar een website: <li><a class=”menubar-top” href=”https://www.logic4.nl/” target=”_blank”>Logic4</a> </li>

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”

Resultaat

cms-menubalk

Heb je na het lezen van dit artikel nog vragen?

Neem dan contact op met Customer Solutions door een melding in te dienen via logic4.topdesk.net
Geschreven door
Heeft dit artikel geholpen?
1
0

Nieuws

Over Logic4

Logic4 ontwikkelt en implementeert een alles-in-één oplossing voor bedrijfssoftware en e-commerce. Als enige partij in Nederland bieden we een totaalpakket voor webshop, voorraad, artikelbeheer, kassa, inkoop, orderverwerking, CRM, facturatie, boekhouding, B2B/B2C, managementinformatie en meer. Onze klanten zijn (middel)grote groothandels, vakhandels en retailers. Zij profiteren voor een vast maandelijks bedrag van een volledig geïntegreerde frontoffice en backoffice en continue gratis doorontwikkeling.