Som altid, når vi diskuterer CSS-formaterede menuer, er det i stylesheet'et, tricksene gemmer sig.
Html-delen er forholdvis uinteressant, en uordnet liste med nogle indlejrede uordnede lister. Jeg viste html-koden på websiden om dette, HTML-koden til menuen
Ved hjælp af vort stylesehet skal vi nu løse flere opgaver. Jeg er godt klar over, at det ser lidt uoverkommeligt ud, men faktisk er det ret simpelt, især hvis vi tager de vigtigste ting først og trin for trin:
display
-egenskaben none påtrykkes alle de de elementer,
der har en id="subnav[nr]"
.:hover
-tilstand på et hovedmenupunkt udløser visning
af den tilhørende undermenu.<body class="sektion2">
... body.sektion2 #menu li#nav2 a ... { background : #fff; border-bottom : 1px solid #fff; color : #000; }Denne formdeklaration (plus de øvrige, der her er anført med prikker) sørger for, at et link i en
li
med
en id nav2
får de egenskaber, der er skrevet ind i
formregelblokken, men kun hvis den dette link findes på en webside,
der har et klassenavnet sektion2
. Pkt. 6 i listen herunder.... body.sektion2 #menu ul#subnav2 ... { display : inline; left : 20px; position : absolute; top : 40px; }Du kan sikkert se, at denne (disse) formdeklaration(er) er lavet over samme læst. Det er pkt 9 i CSS-kildekoden herunder.
:hover
-tilstanden, hvor jeg ønsker
et farveskift både på topmenuens punkter og på undermenuernes punkter.
Det opnås ved hjælp af pkt 9. Bemærk den høje specficitet, der gør
det nødvendigt at lave formdeklarationer meget specifikke også for
a-markørerne i de indlejrede lister.1. #page { padding:60px 1em 1em 1em; border:1px solid #257; margin-top:35px; _margin-top:36px; /*Forskellig margin til IE og de andre*/ background-color:#fff;} 2. #menukasse { position:absolute; left:1em; top:110px; z-index:2;margin:0 250px 1em 0;} 3. #menu { border-bottom : none; margin : 0; padding-bottom : 19px; padding-left : 10px;} 4. #menu ul, #menu li { font-family:arial,sans-serif; display : inline; list-style-type : none; margin : 0; padding : 0;} 5. #menu a { background : #efefff; border : 1px solid #257; color : #000; float : left; font-size : 14px; line-height : 100%; margin-right : 8px; padding : 2px 10px 2px 10px; text-decoration : none; } 6. body.sektion1 #menu li#nav1 a, body.sektion2 #menu li#nav2 a, body.sektion3 #menu li#nav3 a, body.sektion4 #menu li#nav4 a, body.sektion5 #menu li#nav5 a, body.sektion6 #menu li#nav6 a { background : #fff; border-bottom : 1px solid #fff; color : #000; } 7. #menu li#nav1 a:hover, #menu li#nav1 ul li a:hover, #menu li#nav2 a:hover, #menu li#nav2 ul li a:hover, #menu li#nav3 a:hover, #menu li#nav4 a:hover, #menu li#nav4 ul li a:hover, #menu li#nav5 a:hover, #menu li#nav6 a:hover { color:white; background:#257; } 8. #menu #subnav1, #menu #subnav2, #menu #subnav3, #menu #subnav4, #menu #subnav5, #menu #subnav6 { display : none; width: 90%;} 9. body.sektion1 #menu ul#subnav1, body.sektion2 #menu ul#subnav2, body.sektion3 #menu ul#subnav3, body.sektion4 #menu ul#subnav4, body.sektion5 #menu ul#subnav5, body.sektion6 #menu ul#subnav5 { display : inline; left : 20px; position : absolute; top : 40px; /* her sættes afstanden fra toppen af browservinduet til overkanten af undermenuen */ } 10. body.sektion1 #menu ul#subnav1 a, body.sektion2 #menu ul#subnav2 a, body.sektion3 #menu ul#subnav3 a, body.sektion4 #menu ul#subnav4 a, body.sektion5 #menu ul#subnav5 a, body.sektion6 #menu ul#subnav6 a { background : #fff; border : 1px solid #369; color : #000; font-size : smaller; line-height : 10px; margin-right : 4px; padding : 2px 10px 2px 10px; text-decoration : none; }
Den sidste større opgave er at sikre, at topmenuens underkant falder nøjagtigt sammen med overkanten af #page-elementet, der indeholder artikelstoffet.
Jeg gennemgår hovedpunkterne omkring dette i mit eksempel på en
fanebladsmenu. Da jeg
her bruger float
-egenskaben på a
-markøren er
det her vigtigt at betænke, at det også er a
-markøren der
skal dimensioneres, og ikke ul
- eller
li
-markøren.
Webdesign - illustreret håndbog
Webdesign med XHTML
– 2 gode bøger om webdesign
Køb dem hos forlaget Globe A/S