1 / 7

Dag 4 - dagsorden :

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

vinny
Download Presentation

Dag 4 - dagsorden :

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation 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 IIGrafik-baserede menuer 5. Image-maps 6. Mouse-over-effekter til billeder IIIDen 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 • Lav en div-boks med id="menu” • Lav menuen som en ul-liste med li-elementer og menu-links inden i. • Style listen, så liststyle:noneog padding:0 • Style links med display: blockog width:ønsket bredde. • Style links, så de har korrekt farve, baggrundsfarve etc • 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 • Tag udgangspunkt i en vandret menu • Tilføj undermenuer som ul-lister lige efter menupunkternes links • Style undermenuen li-punkter, så de har display:none (hvis de vises vandret) • Giv undermenuen stylendisplay:none • Lav udfoldseffekten ved at style menupunkternes hovers’ undermenuliste, så den har display:block • 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: <imgsrc="bild.jpg" alt="alternative text" usemap="#mapname" /> <mapname="mapname"> <areashape="rect" coords="9,372,66,397" href="http://xx.dk.org/" /> </map> Generator: http://www.image-maps.com/ 160911 helf KEA

  6. 5. Mouse-over-effekter til billeder <style type="text/css"> .menupunkt{ background-image: url(Butterfly.gif); width:150px; height:150px } .menupunkt:hoverimg {display:none} </style> … <div class="menupunkt"> <imgsrc="Butterfly.png" /> </div> 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: <?phpinclude"menu.html"; ?> For at få det at virke skal filer, som bruger php-include have efternavnet .php 250211 helf KEA

More Related