02-01-2010

Menu´en - side 1 - css´en

At lave en menu som dén i venstre kolonne, er noget af et arbejde som kan tage dage, så jeg vil nøjes med at gengive koderne fra mit stylesheet (css) med enkelte kommentarer, og så kan du selv modificere den til din egen hjemmeside

Menu´en er bygget op som en css-modificeret uordnet liste (<ul>), som er identificeret som menu (ved at give den et id, kan man have en anden <ul> på siden, som f.eks. menu-listerne her på aqualex.dk).

Som sagt er det at lave en menu en omfattende proces, så koderne til denne er delt op på 5 sider - for overskuelighedens skyld... Du kan gå videre til næste side, fra bunden af denne.

Men som sagt - menuen er modificeret i mit eksterne StyleSheet og ser således ud (med kommentarer):

div#leftcol ul {
  position: relative;
  margin-left: auto;
  margin-top: 0px;
  margin-bottom: 0px;
  padding: 0;
  width: 145px;
  background-image: url(../images/leftmenubag.gif);
}

Kommentar:

Ikke så meget at snakke om - ovenstående kode bestemmer blot den overordnede størrelse og placering af menuen. Det eneste er background-image som er en gif-fil jeg har lavet for at give knapperne "dybde". Man kan sagtens blot angive en farve, men så hedder linien f.eks.:

background-color: #00349a;

div#leftcol ul fortæller at den er special-syet til min venstre kolonne-division, som hedder leftcol.

div#leftcol li {
  position: relative;
  list-style: none;
  margin: 0px;
  border-bottom: 1px solid #fff;
}

Kommentar:

Her er værd at lægge mærke til 2 ting:

list-style er sat til none, for eller får man en sort prik foran teksten, hvilket er standard, og det ser jo ikke pænt ud i en knap-menu

I border-bottom har jeg lavet en 1 pixel hvid streg, for at adskille knapperne og som man ikke lægger mærke til ude i indholdsruden.

div#leftcol li:hover {
  background-color: #bbb;
  color: #00349a;
  }

Kommentar:

li:hover definerer den handling som skal ske, når man fører musen henover knappen.

background-color får knappen til at skifte fra min gif-fil til grå, og color definerer den farve teksten skal ha´ (som så bliver blå).

div#leftcol li.sub {
  background-image:url("../images/arrow.gif");
  background-position:right center;
  background-repeat:no-repeat;
  }

Kommentar:

Nu har vi også klassificeret vores <li> med class´en .sub, og det skal vi bruge dér hvor knappen har under-knapper.

background-image:url("../images/arrow.gif"); siger at der skal en billed-fil på - her en pil som jeg har lavet og døbt arrow.gif.

background-position:right center; placerer pilen i højre side, og i midten oppefra og ned.

background-repeat:no-repeat;-kommandoen forhindrer at vi får mere end én pil i knappen.

div#leftcol li a {
  display: block;
  padding: 3px;
  color: #fff !important;
  font-weight: bold;
  font-family: arial , "sans serif";
  font-size: 12px;
  text-align: center;
  text-decoration: none;
  width:94%;
  }

Kommentar:

Nu laves selve linket i vores <li>-markør, og det første vi støder på er display: block;. Den er der for at også Microsoft´s browser kan finde ud af, at skifte hele knappens baggrundsfarve, samt at gøre linket aktivt blot musen kommer indenfor knappens kanter.

padding: sætter afstanden mellem tekst og knappens kanter.

color: laver tekstfarven til hvid, MEN - kommandoen !important gennemtvinger den hvide tekst, da den ellers ville blive orange, som de andre links her på aqualex.dk.

Vi springer de almindelige tekst-definationer over, og går direkte til text-align:, som centrerer teksten i knappen. Den kan sættes til left eller right, MEN - sættes den til right er vi grundet pilen i højre side af knappen, nødsaget til at sætte en anden padding-defination, da teksten ellers vil dække for pilen. Vi må så specificere alle afstandende således:

padding-top: 3px 15px 3px 3px;

Ovenstående er kortforms-udgaven, og sætter de 4 afstande i rækkefølgen: Med uret startende med toppen.

text-decoration: er sat til none, da vi ikke ønsker en understregning af teksten, som jo er standard for links.

div#leftcol li a:hover {
  display: block;
  padding: 3px;
  color: #00349a !important;
  font-weight: bold;
  font-family: arial , "sans serif";
  font-size: 12px;
  text-align: center;
  text-decoration: none;
  width:94%;
  }

Kommentar:

Nøjagtig det samme som foregående, hvor eneste ændring er tekstfarven, som nu skifter til blå, når musen er henover knappen (den røde tekstlinie).

div#leftcol ul a {
  width: 94%;
  }

Kommentar

Blot en defination på bredden af linket i menuen.

div#leftcol ul ul {
  position: absolute;
  top: 2px;
  left: 99%;
  width: 100%;
  display:none;
  }

Kommentar:

Herover defineres de underliggende knapper som en <ul> indlejret i den overordnede <ul>.

position: skal være absolute - da underknapperne skal "gå ind over" teksten i indholdsruden uden at "skubbe" til det hele.

top: "sænker" under-knappen 2 pixel i forhold til den overordnede knap.

left: lader underknappen gå lidt ind over den overordnede knap. Den er her sat til 99% hvilket må være maksimum. Sættes den til til over 100%, bliver der et tomt mellemrum, og underknappen forsvinder jo øjeblikkeligt, når musen forlader den overordnede knap.

display: sættes til none, da vi ikke ønsker at alle underknapperne skal være synlige, før musen føres henover den overordnede knap.

div#leftcol ul.niveau1 li.sub:hover ul.niveau2,
div#leftcol ul.niveau2 li.sub:hover ul.niveau3,
div#leftcol ul.niveau3 li.sub:hover ul.niveau4,
div#leftcol ul.niveau4 li.sub:hover ul.niveau5 {
  display:block;
  }

Kommentar:

Ikke så meget at skrive om:
div#leftcol ul.niveau1 skal hover ul.niveau2
div#leftcol ul.niveau2 skal hover ul.niveau3 osv. osv.

Her er lavet op til 5 niveauer, selvom der her på aqualex.dk kun bruges 3, men så er de der... Der kan laves lige så mange niveauer som man kan have plads til på sin skærm (og har behov for).

Dét var en ordentlig smøre, og hvis du vil bruge css-koden til din egen hjemmeside, har jeg lavet en txt-fil som du kan åbne HER (åbner nyt vindue). Du skal så blot markére teksten og sætte den ind i et tomt dokument i f.eks NotePad eller NoteBook (eller anden tekst-editor). Gem den som en css-fil, så du selv kan modificere og eksperimetere med den.

Hvordan man laver "pop-up"-oplysningsboksen, må du for overskuelighedens skyld vente med til vi kommer til side 3.

Men en css-fil gør det jo ikke alene - der skal skam også skrives en HTML-kode dér hvor menuen skal være, og hvordan vi skriver den, gennemgår vi på den næste side►

powered by FreeFind


Valid XHTML 1.0 Transitional Valid CSS! Servermarket Poecilia Scandinavia BilleskoWs Web-uniWers FlazArt Webdesign