Menu´en - side 3 - css´en til Pop-up

Det geniale ved denne pop-up-metode er, at den genereres udelukkende ved hjælp af css, og ikke javascript som søgemaskinerne ikke kan læse.

Vi starter med at lave en span-class i vores StyleSheet (css), identificeret specielt til linksene/knapperne i den venstre kolonne som jo hedder leftcol:

div#leftcol ul a span {
  display: none;
  }

Kommentar:

Vores knapper er jo lavet i en uordnet liste, derfor ul, og a er vores link, og endelig er span "navnet" på funktionen.

display: er sat til none, da den ikke skal være synlig hele tiden...

div#leftcol ul a:hover span {
  display: block; /* ER forklaret på side 1 */
  position: absolute; /* SKAL den være... */
  top: 0px;
  left: 150px;
  width: 160px; /* bredde på boks */
  border: 2px solid #00349a;
  padding: 3px; /* tekstafstand til bokskant */
  background-color: #ffd; /* boksens baggrundsfarve */
  font-family: verdana , "sans serif"; /* skrift-type */
  font-size: 10pt; /* tekst-størrelse */
  color: #000; /* tekst-farve */
  text-align: center; /* vandret tekst-justering */
  font-weight: normal;
  }

Kommentarer:

a:hover-funktionen får boksen til at poppe op, når musen føres henover knappen.

Al tekst mellem /* og */ er kommentarer, som ingen indflydelse har på genereringen af boksen - det gælder forøvrigt i alle StyleSheets. Så hvis du vil ha´ oplysningsbokse i din menu, kan du bare markere og kopiere...

top: er sat til 0px hvorved boksens øverste kant er lig med knappens.

left: er sat til 150px, og er en margin i forhold til knappens venstre kant, og da vores knap er 145px bred, giver det lidt luft på 5 pixels.

border: definerer kanten om boksen, her 2px bred, solid/ubrudt og blå.

font-weight: definere skrift-stilen, og kan udover normal være:
bold = fed, italic = kursiv, underline = understreget.

Vil du både ha´ skriften i fed og i kursiv, skrives definationen således:

font-weight: bold , italic;

Jeg har lavet en færdig css-fil som du kan åbne HER (åbner nyt vindue). Du skal så blot markére teksten og sætte den ind i din css-fil med menuen.

Men vi skal også skrive noget HTML-kode i vores links-knapper, og det gør vi på næste side►

◄Tilbage