CSS popop uden JavaScript

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.

Stylesheet

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 */}
Note 1
Hele menukassen #links er indeholdt i et relativt positioneret element, #menupalte, der tegner den højre spalte i layoutet for denne side.
Jeg kan derfor positionere menukassen absolut i forhold til #menuspalte-elementet. En relativ positionering af menukassen giver visse vanskeligheder med tegningen af menuen i IE.
Note 2
Jeg har givet menuen en absolut bredde i pixel. Det kan lade sig gøre at arbejde med procenter eller em-størrelser her, men så skal det gennemføres 100 procent, og jeg synes det er lidt for bøvlet til en demo.
Note 3
Tegner toppen af menukassen.
Note 4
Denne formregel laver 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.
Note 5
Denne og de to følgende formregler tegner resten af kasserne rundt om hvert enkelt link.
Note 6
Også span-elementet skal ændres fra at være et inline-element til et blokelement.
Note 7
Og span-elementet skal definitivt positioneres absolut i forhold til #links-elementet. Længere nede i artiklen udforsker jeg nogle andre muligheder.
Note 8
span-elementet er barnebarn af #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.

Inline popop

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.

Stylesheet'et

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%;
}

Kommentarer

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