En effekt som den, du ser i forbindelse med menuen til højre har du sikkert set utallige gange før. Mærkeligt nok ikke hos mig, for på trods af, at jeg har lavet en del af den slags, har jeg aldrig skrevet om det.
Normalt har jeg og de fleste andre lavet den slags ved hjælp af noget JavaScript-styret dynamisk HTML. Det er såmænd ikke en gang særlig svært.
Mit ærinde med dette eksempel er imidlertid et ganske andet. Jeg vil nemlig demonstrere, hvordan du kan lave denne effekt ganske uden brug af JavaScript.
Eksemplet er hentet fra CSS-samuraien Eric Meyers hjemmeside ( www.meyerweb.com). Jeg har så tilpasset det til mit layout.
Som så ofte er det med at få ideen. Ideen her er at forsyne
hvert link i menuen med et span
-element efter
følgende model:
<a href="url">Linktekst<span> Den tekst, der skal vises ved mouseover</span></a>
Hvis vi nu benytter display
-egenskaben, kan vi
fjerne dette span
-element fuldstændigt, som jeg har
forklaret i min artikel om denne egenskab
(Om display-attributten versus visibility
attributten). Og så kan vi benytte linkets hover
-tilstand
til at vise span
-elementet. Smart, ik' Jeg ville ønske,
det var mig der var så opfindsom.
Jeg gengiver her stylesheet'et for menuen i sin helhed, efterfulgt af en række kommentarer.
#links { position: absolute; /* Note 1 */ top: 100px; left: 10px; width: 200px; /* Note 2 */ font-size: 90%; font-family: arial, sans-serif; border-top:1px solid black; /* Note 3 */ } #links a { display: block; /* Note 4 */ font-weight: bold; padding: 5px 10px; margin: 0; border-width: 0 1px 1px 1px; /Note 5 */ border-style:solid; border-color:black; text-decoration: none; color: #1a0099; background: #ffe;} #links a:visited { color: purple; background: #eee;} #links a:hover { color: #fff; background: #257;} #links a span { display: none;} #links a:hover span { display: block; /* Note 6 */ position: absolute; /* Note 7 */ top: 200px; left: 0; width: 190px; border:1px solid black; padding: 5px; margin: 0; background: #ffe; font-weight:normal; font-size: 110%; /* Note 8 */}
#links
er indeholdt i et relativt
positioneret element, #menupalte
,
der tegner den højre spalte i layoutet for denne side.#menuspalte
-elementet. En relativ positionering af
menukassen giver visse vanskeligheder med tegningen af menuen i IE.a
-markøren om fra et inline
element til et blokelement. Et blokelement får den samme bredde som
det overordnede element og indsætter et linieskift efter.span
-elementet skal definitivt positioneres absolut i forhold til
#links
-elementet. Længere nede i artiklen udforsker jeg nogle andre
muligheder.#links
-elementet, der
har en font-size
på 90 procent.
For at få samme størrelse på skriften i span
-elementet er
jeg derfor nødt til at øge font-size tilsvarende.Fremkaldt af nogle diskussioner på Usenet Nyhedsgruppen dk.edb.internet.webdesign og dk.internet.internet.webdesign.html har jeg eksperimenteret lidt med at bruge den samme teknik på et tekststykke, således at en lille tekstboble dukker frem når det aktuelle element har :hover-tilstand.
Ekspanderende tekst:Her er et eksempel på ekspanderende tekst. Tekstboblen fremkommer ved mouseover på det rødbrune tekststykke.
Fidusen ved denne metode i forhold til de andre (title-attributten eller et JavaScript-drevet vis-og-skjul effekt) er 1) at formateringen af tekstboblen er helt i dine egne hænder, samt 2) du ikke skal bruge scripting til at lave det.
span#expand { position:relative; z-index:1; text-decoration:underline; cursor:default; display:inline-block;} span#expand span {display:none;} span#expand:hover span{ display: block; position: absolute; top: 20px; left: 0; width: 190px; text-decoration:none !important; border:1px solid black; padding: 5px; margin: 0; color:#000; background: #ffe; font-weight:normal; font-size: 90%; font-family: arial, sans-serif; z-index:2; line-height:100%; }
Hagen ved dette trick er selvfølgelig, at Internet Explorer ældre
end version 7 ikke kan tolke :hover
-tilstanden på andet end aktive
elementer. Det kan dog ret nemt ordnes ved at bruge Peter Nederhoffs
whatever:hover behavior. Du kan læse om dette på min webside om
CSS dropdown menuer.
I dette tilfælde har jeg indsat et ekstra stylesheet i head-delen af siden:
<!--[if lt IE 7]> <style type="text/css" media="screen"> body {behavior:url(/common/csshover.htc);} </style> <![endif]-->
Desværre har jeg ikke kunnet finde en metode til at fjerne understregningen i den indlejrede span, så den også forsvinder i Internet Explorer. Finder du nøglen, hører jeg gerne om det.
Denne side er senest opdateret: 1. April, 2007