CSS med dropdown
ForordJeg har selv haft problemer med, at finde en ordenlig tutorial til, at lave en dropdown menu, som ikke krævede JavaScript eller jQuery.Så her er min version. :-) Indholdsfortegnelse1.0 Indhold1.1 pseudo:classes 1.2 XHTML:div class&id 1.3 Dropdown effect! 2.0 Downloads Dette er min første tutorial, men jeg vil dække det banale indenfor opsætning af menuer, først vandret, med dropdown og senere en lodret menu med dropdown. Dette er en simpel tutorial, som skal lede til inspiration og videre afprøvning. - dette er testet i alle browser, og virker hos alle og for I.E 7+. Jeg opfordrer til at downloade ConTEXT, det er bedre end notepad, og gratis. Jeg foreslår også, at du enten har photoshop, så du har den fulde farveplatte, med HEX værdierne, eller andre. Resultatet: Her Der ligger intet JavaScript, i denne tutorial. 1.0 Indhold- pseudo:classes - xhtml: div class & id - css 1.1 pseudo:classesOkay, pseudo:classes er et syntax der kan bruges på næsten alt. nogle få eksempler vil være, fx:
Okay, noget forklaring. Her er noget meget enkelt style der kører over hhv. a:hover, a:active og p:first-child. Det er ligegyldigt, hvilken rækkefølge du tilføjer detaljer til paragrafs og headings, men med links, bliver det anderledes. Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective!! - taget fra w3schools.com.Note: a:active MUST come after a:hover in the CSS definition in order to be effective!! Note: Pseudo-class names are not case-sensitive. a:visited - angiver detajler omkring besøgte links. a:hover - angiver detajler for links, du holder musen over. p:first-child - det alle første <p> element i dit html dokument. Det er vigtigt at det kommer med, fordi at browserne læser forskelligt.. 1.2 XHTML:div class&idNu begynder vi, at tilføje noget mere indhold til html fil(er(ne))
Okay, så jeg har smidt en div class ind i koden. Der findes to former for div: ID og CLASS. ID skrives i CSS med et #ditnavn, hvorimod at CLASS skrives med . ditnavn . Grunden til, at jeg putter min menu ind i en div class er pga. at a:visited og a:hover går på alle links. så CSS filen bliver udvidet:
Jeg opstiller altid mine menuer i "nested" opstillinger, altså i et punktopstilling: så koden kommer til at se således ud:
Okay, så vores a:visited og a:hover virker også her. Men her tænker du allerede, hvordan får jeg det der til at blive en menu? watch and learn. ul -> li -> a er alle sammen placeret inde i .menu og derfor, kan vi lave noget specielt for alt hvad der ligger inde i kassen ".menu"
.menu ul er <ul> -> </ul> inde i <div class="menu"> -> </div> hvis du løbende tester, så vil du se, at kuglerne er fjernet, og teksten er flyttet mere ind og ned ad. Det padding er, det er den afstand der er fra et objekt til et andet. list-style:none; eller list-style-type:none; fjerner kuglerne.
Der er nu tilføjet to ekstra værdier, som er gældende for .menu ul <li> -> </li> og <a href ...> -> </a> .. nu sker der noget. Det der er tilføjet, er er ved <li> elementerne, er en bredde på 120 pixels, og hvert enkelt <li> element er rykket -1 pixel til venstre, pga. kanten der kommer, så det ikke ser dumt ud. Okay, så nu er de store tabs i fikset, nu skal vi ha en drop down funktion. Jeg skal gøre mig kortfattet her. 1.3 Dropdown effect!Nu vil vi godt ha' et dropdown. Der er noget der skal tænkes på her: for hvert <li></li> du har i .menu, kan du lægge en under menu ind.
Hvad der er lagt til, er en ekstra listed <ul> ind før afslutningen på <li>. Den er synlig, og den skal gøres usynlig, når vi ikke holder musen på. - pseudo:classes!
Vi har som sagt, en ekstra listed <ul>, og som standart, skal den være usynlig! så derfor: .menu ul li ul { visibility: hidden; }, den gør at .menu <ul> <ul> bliver skjult. Når vi så holder musen på ITEM 1, så udløses følgende funktion: .menu ul li:hover ul { visibility: visible; }, som så viser <ul> elementets indhold. For at få den nogenlunde centreret under, så gør vi sådan her: .menu ul li ul li { position:relative; left:-30px; width: 95px; z-index:2; } .. prøv nu, at rette .menu til følgende:
;-) 2.0 DownloadsDownload 1. : 1.-, 2. paragraf og link a:visited, a:hover: http://doozey.dk/tut/1.txt Download 2.: Med listed indhold http://doozey.dk/tut/2.txt Download 3.: Listed inhold med padding og list-style:none; http://doozey.dk/tut/3.txt Download 4.: Listed inhold med styling på menu tabs; http://doozey.dk/tut/4.txt Download 5.: Listed inhold med submenu, uden styling http://doozey.dk/tut/5.txt Download 6.: Listed inhold med submenu, med styling http://doozey.dk/tut/6.txt Download 6.: Listed inhold med submenu, med styling, 2 drop down http://doozey.dk/tut/7.txt Sidst redigeret 23:36 16/08/2010 |
|
Kommentarer
Giv din mening tilkende om denne artikel, eller læs andres.Har du spørgsmål eller brug for hjælp til denne artikel henvises du til forummet.
| havde selv samme problem ;) men har det ikke mer xd |
Oprettet af:
|
| Nice nok. 4/5. Vil bruge det næste gang jeg skal lave noget med dropdown. Tak :) |
Oprettet af:
|
| Der er intet at downloade. Siderne er lukket ned ? |
Oprettet af:
|