Tech­niek

Web Designer Magazine - - Webworkshop -

1. Sli­ding me­nu

Maak het sli­ding me­nu van do­ber­man.co door eerst wat Html-con­tent aan de pa­gi­na toe te voe­gen. Dit wor­den de blok­ken van de me­nu­on­der­de­len. Hier kop­pel je een Ja­vascript-lis­te­ner aan die con­tro­leert of de muis be­weegt. <div id=”block” on­mou­semo­ve=”mo­ver(event)”> <div class=”me­nu”>me­nu 1</div> <div class=”me­nu”>me­nu 2</div> <div class=”me­nu”>me­nu 3</div> <div class=”me­nu”>me­nu 4</div> <div class=”me­nu”>me­nu 5</div> </div>

2. De pa­gi­na op­ma­ken

Voeg nu de on­der­staan­de Css-co­de aan je sty­les­heet toe. In de bo­dy-css zorg je er­voor dat er op de x-as geen ver­bor­gen mar­ge of pad­ding is die over­lapt. De block­css zorgt voor de con­tai­ner waar de me­nu­on­der­de­len in zit­ten. Daar­om stel je de breed­te van dit ele­ment in op 3000 pixels. bo­dy { mar­gin: 0; pad­ding: 0; over­flow-x: hi­d­den; }# #block { width: 3000px; height: 200px; tran­si­ti­on: trans­form 0.7s cu­bic-be­zier(0.36, 0.36, 0.59, 1); po­si­ti­on: ab­so­lu­te; bottom: 0px; }

3. Elk me­nu

Geef elk me­nu­on­der­deel op de pa­gi­na een paar­se ach­ter­grond en een mar­ge aan de lin­ker­kant om ze van el­kaar te schei­den. Plaats de on­der­de­len naast el­kaar om het ‘block’ te vul­len. .me­nu { back­ground: #f39; width: 496px;

4. 5.

Newspapers in Dutch

Newspapers from Netherlands

© PressReader. All rights reserved.