Dag 4 - dagsorden: Formål: I skal lære at lave menuer I Tekst/CSS-baserede menuer 1. Lodret menu med mouse-over-effekt 2. Vandret menu med mouse-over-effekt.

Præsentationer af emnet: "Dag 4 - dagsorden: Formål: I skal lære at lave menuer I Tekst/CSS-baserede menuer 1. Lodret menu med mouse-over-effekt 2. Vandret menu med mouse-over-effekt."— Præsentationens transcript:

1 Dag 4 - dagsorden: Formål: I skal lære at lave menuer I Tekst/CSS-baserede menuer 1. Lodret menu med mouse-over-effekt 2. Vandret menu med mouse-over-effekt 3. Vandret menu med drop-down-effekt til undermenu II Grafik-baserede menuer 5. Image-maps 6. Mouse-over-effekter til billeder III Den første php-sætning: include Lav en global menu til sitet og inkluderér på alle sider 160911 helf KEA

2 1. Lodret menu med mouse-over-effekt Opskrift 1.Lav en div-boks med id="menu” 2.Lav menuen som en ul-liste med li-elementer og menu-links inden i. 3.Style listen, så liststyle:none og padding:0 4.Style links med display: block og width:ønsket bredde. 5.Style links, så de har korrekt farve, baggrundsfarve etc 6.Lav en css-regel for a:hover for mouseovereffekten 160911 helf KEA

3 2. Vandret menu med mouse-over-effekt Opskrift 1. Lav først en lodret menu med mouse-over- effekt 2. Style menuens li-tags, så de har display:table-cell 160911 helf KEA

4 3. Vandret menu med dropdown-effekt Opskrift 1.Tag udgangspunkt i en vandret menu 2.Tilføj undermenuer som ul-lister lige efter menupunkternes links 3.Style undermenuen li-punkter, så de har display:none (hvis de vises vandret) 4.Giv undermenuen stylen display:none 5.Lav udfoldseffekten ved at style menupunkternes hovers’ undermenuliste, så den har display:block 6.For at undgå at undermenuen skubber: style den med position:absolute 160911 helf KEA

5 4. Imagemap Med et image-map, kan man gøre forskellige områder af et billede klikbare Man kan lave sin menu som et imagemap – altså et klikbart billede. Eksempel: Generator: http://www.image-maps.com/http://www.image-maps.com/ 160911 helf KEA

6 5. Mouse-over-effekter til billeder.menupunkt{ background-image: url(Butterfly.gif); width:150px; height:150px }.menupunkt:hover img {display:none} … 250211 helf KEA

7 III. php-include Menuen skal ind på alle sider Hvis man copy-paster er det: Besværligt Upraktisk, hvis der kommer ændringer Man kan lægge menuens styling over i style.css Selve koden til menuen, kan man lægge i en fil (uden doctype eller html- head- og body-tags Og så kan man få php til at hente koden ind, hvor man skal bruge den: For at få det at virke skal filer, som bruger php-include have efternavnet.php 250211 helf KEA