1 / 15

Menuer

Menuer. https:// join.me / stefangrage. Agenda. Opsamling opgaver Tips/ husk Menuer : vertikal , harmonika ) Menuer : horisontal , dropdown) Menuer : CSS sprites. Opsamling. Mange sites bredere end min skærm ! En del døde links Store billedfiler

xannon
Download Presentation

Menuer

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. Menuer https://join.me/stefangrage

  2. Agenda • Opsamlingopgaver • Tips/ husk • Menuer: vertikal, harmonika) • Menuer: horisontal, dropdown) • Menuer: CSS sprites

  3. Opsamling • Mange sites bredere end min skærm! • En del døde links • Store billedfiler • Linjelængder (husk 50-75 anslag, 130% linjehøjde) • Placeringafindhold…

  4. Menu 1Vertikal menu 1 • Lad oskiggepåmenuenpåkeaweb…

  5. Menu 2keaweb med ul’er • Lad osmodificeremenuen • Brug <ul> <li></li> </ul> struktur • Hvorfor? For bedre at kunne style menuen, specieltnår der skal laves harmonika/dropdown menuer

  6. Menu 3Vertikalharmonika • Lav en harmonika menu – dvs. en vertikal menu, der kanfolde sig ud • Den driller lidt, nårdetkommertil usability – specielthvis der er mange undermenupunkter…

  7. Øvelse 1 • Lav en (flot) vertikalnavigationsmenu

  8. menu 4Horisontal menu • Lad oskiggepåmenuenpå “billedoptimeringssitet”

  9. Menu 5 - centreretHorisontal menu 2 • Lad oscentreremenuenpåbilledoptimeringssitet

  10. Menu 6Horisontal menu 3 • Lavos lave menuenpåbilledoptimeringsom, så den ligger I en <ul>

  11. Menu 7 - Horisontal med Dropdown • Lad os lave en horisontal menu med dropdown • Deterfaktiskbåde en horisontalog en vertikal menu!

  12. Øvelse 2 • Lav en (flot) horisontal dropdown-menu

  13. Menu 8 CSS sprites • CSS kanbrugestil at lave en lidt mere fancy navigation • Teknikken bag er at lave et billede (I Photoshop), hvor der erforskelligtudseende for a, a:hover, a:active mm. • Nårbrugerenkørermusenhenover, rykker man billedets position via css

  14. Øvelse 3 • Lav en CSS-sprites navigationsmenu

  15. Arbejd! Arbejd! • Arbejdvidere med jeresprojekter – ogmenuer!

More Related