logo   CSS til listemenu




CSS-koden til en CSS-menu består af to typer selektorer blandede mellem hinanden:


  • Struktur selektorer
    Selektorer til opbygning af menuens struktur
  • Visuelle selektorer
    Selektorer til tilførsel af størrelser, farver, mouseover etc.

Nedenfor vises:


xCSS strukturdata for "vandret" menu
xCSS strukturdata for "lodret" menu
xIndsættelse af strukturdata for ekstra undermenu.
xSelektorer pr listeniveau til indsættelse af farver etc.
xForklaringer til de enkelte selektorer.
xSamlet vandret menu (CSS og UL-liste) med både strukturelle og visuelle selektorer.


Den samlede menu viser, hvordan selektorerne af overskuelighedsmæssige årsager bør placeres efter hinanden, samt giver en forklaring til deres indhold. Både CSS-delen og HTML-delen allernederst kan klippes og klistres og bruges som grundlag for en vandret menu.


Såfremt der kun skal bruges en undermenu kan selektorerne "ul ul", "ul ul li" og "ul ul li a" udelades. Selektorerne "ul ul ul" og "ul ul ul li a" skal da hver have fjernet et "ul".


Såfremt kun hovedmenuen skal anvendes kan selektorerne "", "", "ul ul ul" samt "ul ul ul li a" også undværes.




CSS strukturdata for "vandret" menu


Strukturelle CSS data til menu med vandret hovedmenu og 2 lodrette undermenuer. x


Værdierne i nav-selektoren, samt farver og borders er dog kun medtaget af informative årsager.


nav{
margin: 50px auto;
text-align: center;
}

ul {
position: relative;
display: inline-block;
list-style: none;
border: 1px solid black;
}

ul li{
float: left;
}

ul li a {
display: block;
padding: 25px 40px;
color: red;
text-decoration: none;
}

nav ul:after {
content: ""; clear: both; display: block;
}

ul li:hover > ul {
display: block;
}

ul ul {
display: none;
padding: 0;
position: absolute;
top: 100%;
}

ul ul li {
float: none;
position: relative;
}

ul ul li a{
color: green;
}

ul ul ul {
position: absolute;
left: 100%;
top:0;
}

ul ul ul li a{
color: orange;
}




CSS strukturdata for "lodret" menu


Strukturelle CSS data til menu med lodret hovedmenu og 2 lodrette undermenuer. x


Værdierne i nav-selektoren (bortset fra "position: relative;"), samt farver og borders er dog kun medtaget af informative årsager.


NAV-boksen må ikke indgå i den strukturelle opbygning af siden, men skal ligge "løst" indeni en strukturel div-box.


nav{
position: relative;
margin-left: 450px;
margin-top: 200px;
}

ul {
position: absolute;
list-style: none;
border: 1px solid black;
}

ul li a {
display: block;
padding: 25px 40px;
color: red;
text-decoration: none;
}

nav ul:after {
content: ""; clear: both; display: block;
}

ul li:hover > ul {
display: block;
}

ul ul {
display: none;
padding: 0;
position: absolute;
top: 0;
left: 100%;
}

ul ul li {
float: none;
position: relative;
}

ul ul li a{
color: green;
}

ul ul ul {
position: absolute;
left: 100%;
top:0;
}

ul ul ul li a{
color: orange;
}




Indsættelse af strukturdata for ekstra undermenu.


Strukturelle CSS data til tredie undermenu. Den indsættes fysisk mellem undermenu 1 (ul ul) og undermenu 2 (ul ul ul).x


Selektorerne "ul ul ul" og "ul ul ul li a" i den eksisterende menu skal have tilføjet er ekstra "ul".


ul ul ul {
display: none;
padding: 0;
position: absolute;
left: 100%;
top: 0;
}

ul ul ul li {
float: none;
position: relative;
}

ul ul ul li a{
color: blue;
}




Indsættelse af farver, gradienter, kanter etc.


For hver liste i en menu kan farver, gradienter, kanter etc. vedligeholdes via 5 selektorer. Disse er:


ULVedligehold for hele listen
UL LIVedligehold for linierne listen.
UL LI aVedligehold for teksterne i linierne.
UL LI:hoverVedligehold for linierne i listen ved mouse-over.
UL LU a:hoverVedligehold for teksterne i linierne ved mouse-over.


De af dem, der ikke er etableret i forvejen, kan indsættes i deres plads i "hierarkiet" og tilpasses til det aktuelle behov.




Samlet menu (vandret) med strukturelle og visuelle selektorer.





Mens det næppe betyder så meget for browseren, hvilken orden selektorerne står i i CSS-filen, skønnes det væsentligt for det visuelle overblik over og forståelse af funktionaliteten i en menu at selektorerne står i logisk rækkefølge.


Nedenfor er vist den logiske rækkefølge for selektorerne til denne menu. En tilsvarende rækkefølge vil kunne etableres for selektorerne til andre menuer.


Endvidere vises forklaringer til de enkelte selektorer.


SelektorAnvendelse
Menuens statiske del
xnavPlacering af menufladen (menuens "forreste" liste) i forhold til NAV-boksen.
xnav ulMenufladens form, udstrækning, farve og placering under scroll.
xnav ul.marginMargin rundt om menufladen.
xnav ul liPlacering af de enkelte menupunkter
xnav ul li:hoverDe enkelte menupunkter ved "mouse over".
xnav ul li aTeksten i de enkelte menupunkter
xnav ul li:hover aDe enkelte menupunkter ved "mouse over".
xnav ul:afterDe enkelte menupunkter efter "mouse over".
Menuens første drop down menu. (Kun nødvendige når menuen indeholder undermenuer)
xnav ul li:hover > ulViser undermenuer knyttet til et menupunkt.
xnav ul ulDens "underlag": Form, udstrækning, farve og placering under scroll.
xnav ul ul liPlacering af de enkelte menupunkter
xnav ul ul li aTeksten i de enkelte menupunkter
xnav ul ul li a:hoverDe enkelte menupunkter ved "mouse over"
Menuens anden drop down menuer. (Kun nødvendig, når menuen indeholder denne undermenu)
xnav ul ul ulOpsætning til undermenu 2.




nav


Nav er som en del af sidens struktur den divboks, hvori menuen er placeret. Den er derfor oftest placeret i css-filen i denne kapacitet og ikke som en integraret del af menuen.


Placering af menufladen (menuens "forreste" liste) i forhold til NAV-boksen.

  • margin
    Vertikal afstand NAV-boksen (her simuleret af hr-linierne).
  • text-align
    Horisontal placering i NAV-boksen.


nav {
margin: 10px auto;
text-align: center;
}




nav ul


Menufladens form, udstrækning, farve og placering under scroll.


  • background
    Menufladens baggrund, når ikke "mouse over".
  • box-shadow
    Skygge bagved menufladen på både hoved- og undermenuer.
  • padding
    ?????
  • border-radius
    Radius i afrundingen af hjørnerne på menufladen
  • list-style
    Fjernelse af "prikkerne" foran listens punkter.
  • position
    Menuen kan forskydes xxpx fra som basis placering med bl.a. 'top', 'left'.
  • display
    Ændrer HTML-teknisk listen fra at være et blok-element til at være et inline-element. (Ellers fylder den fra side til side.)


nav ul {
background: limegreen;
background: linear-gradient(to top, limegreen 10%, green 100%);
box-shadow: 0px 0px 30px rgba(0,0,0,0.50);
padding: 0 20px;
border-radius: 10px;
list-style: none;
position: relative;
display: inline-table;
}




nav ul.margin


Margin rundt om menufladen.


  • background
    Margin rundt om menufladen.


nav ul.margin {
margin-left:130px;
}




nav ul li


  • float
    Får menupunkterne til at flyde til venstre efter hinanden. Uden den bliver menuen vertikal på en sådan måde, at undermenuerne ikke kan bruges.


nav ul li {
float: left;
}




nav ul li:hover


  • background
    Menupunkternes baggrundsfarve ved mouse over. Giver også baggrundsfarve til menupunkter i undermenuerne, der åbner for en yderligere undermenu - når disse er åbnede.


nav ul li:hover {
background: red;
background: linear-gradient(to top, orange 0%, red 40%);
}




nav ul li:hover > ul


  • display
    Ved mouse over et menupunkt åbnes for visning af tilknyttede undermenuer. HTML-teknisk vises den som et blok-element.


nav ul li:hover > ul {
display: block;
}




nav ul li a


  • display
    Menupunkternes a-tags defineres HTML-teknisk som blok-elementer.
  • padding
    Padding udenom menupunkternes tekster i hovedmenuen. Bestemmer menufladens størrelse.
  • color
    Farve på mnenupunkternes tekster.
  • text-decoration
    Undertrykker "linkunderstregning" i både hoved- og undermenuer.


nav ul li a {
display: block;
padding: 25px 40px;
color: red;
text-decoration: none;
}




nav ul li:hover a


  • color
    Farve på tekster i både hoved- og undermenuer ved mouseover.


nav ul li:hover a {
color: yellow;
}




nav ul:after


  • content
    Sætter CSS content-propertyen til værdien blank.
  • clear
    Nulstiller floats
  • display
    Menuen defineres HTML-teknisk som et blok-element.


nav ul:after {
content: "";
clear: both;
display: block;
}




nav ul ul


  • display
    Sikrer, at første og dermed også efterfølgende undermenuer ikke vises default, men kun i forbindelse med mouse over.


nav ul ul {
display: none;
}


  • background
    Baggrundsfarve i undermenuer
  • border-radius
    Radius i afrundingen af hjørnerne på undermenu-blokkene (ikke de enkelte mnupunkter).
  • padding
    Padding udenom menuknapperne i undermenuerne
  • position
    Placerer undermenuens øverste punkt direkte over nederste punkt i foregående menupunkt. Kan flyttes derfra med 'left', 'right', 'top' og 'bottom'.
  • top
    Procentuel placering af overkant af første undernemu i forhold til overkant af hovedmenuen. Må ikke være over 100%, da undermenuerne så mister kontakt med hovedmenuen og ikke fungerer.


nav ul ul {
background: orange;
border-radius: 0px;
padding: 0;
position: absolute;
top: 100%;
}




nav ul ul li


  • float
  • border-top
    Farvekant langs toppen af menupunkter i undermenuerne.
  • border-bottom
    Farvekant langs toppen af menupunkter i undermenuerne.
  • position
    ????????


nav ul ul li {
float: none;
border-top: 1px solid purple;
border-bottom: 1px solid white;
position: relative;
}




nav ul ul li a


  • padding
    Padding udenom menupunkternes tekster i undermenuerne. Bestemmer menufladens størrelse. Den bredeste tekst i undermenuen bestemmer menuens bredde.
  • color
    ????????????


nav ul ul li a {
padding: 15px 40px;
color: lawngreen;
}




nav ul ul li a:hover


  • background
    Baggrundsfarve ved mouse over på undermenuerne.


nav ul ul li a:hover {
background: limegreen;
}




nav ul ul ul


  • position
    Placerer undermenuens øverste punkt direkte over nederste punkt i foregående menupunkt. Kan flyttes derfra med 'left', 'right', 'top' og 'bottom'.
  • left
    Hvor mange % venstre side af ul ul ul skal være placeret til højre for venstre side af ul ul. Må ikke være over 100%, da ul ul ul så mister kontakt med ul ul og ikke fungerer.
  • top
    Hvor mange % overkant af ul ul ul skal være placeret under overkant af det linkgivende menupunkt i ul ul. Må ikke være over 100%, da ul ul ul så mister kontakt med ul ul og ikke fungerer


nav ul ul ul {
position: absolute;
left: 100%;
top:0;
}




Samlet CSS til menu.


En samlet CSS-opsætning til den ovenfor beskrevne menu ser sådan ud:


nav {
margin: 10px auto;
text-align: center;
}

nav ul {
background: limegreen;
background: linear-gradient(to top, limegreen 10%, green 100%);
box-shadow: 0px 0px 30px rgba(0,0,0,0.50);
padding: 0 20px;
border-radius: 10px;
list-style: none;
position: relative;
display: inline-table;
}

nav ul.margin{
margin-left: 130px;
}

nav ul li {
float: left;
}

nav ul li:hover {
background: red;
background: linear-gradient(to top, orange 0%, red 40%);
}

nav ul li a {
display: block;
padding: 25px 40px;
color: red;
font-family: arial;
font-size: .8em;
text-decoration: none;
}

nav ul li:hover a {
color: yellow;
}

nav ul:after {
content: ""; clear: both; display: block;
}

nav ul li:hover > ul {
display: block;
}

nav ul ul {
background: orange;
border-radius: 0px;
padding: 0px;
position: absolute;
top: 100%;
}

nav ul ul {
display: none;
}

nav ul ul li {
float: none;
border-top: 1px solid purple;
border-bottom: 1px solid white;
position: relative;
}

nav ul ul li a {
padding: 15px 40px;
color:blue;
}

nav ul ul li a:hover {
background: greenyellow;
}

nav ul ul ul {
position: absolute;
left: 100%;
top: 0;
}





UL-liste til menu.


I ovenstående menu er benyttet denne ul-liste:


<nav>
   <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Tutorials</a>
      <ul>
         <li><a href="#">Photoshop</a></li>
         <li><a href="#">Illustrator</a></li>
         <li><a href="#">Web Design</a>
         <ul>
            <li><a href="#">HTML</a></li>
            <li><a href="#">CSS</a></li>
            <li><a href="#">DHTML</a>
            <ul>
               <li><a href="#">javaScript</a></li>
               <li><a href="#">jQuery</a></li>
               <li><a href="#">Server side</a>
            <ul>
               <li><a href="#">PHP</a></li>
            </ul>
            </li>
         </ul>
         </li>
      </ul>
      </li>
   </ul>
   </li>
   <li><a href="#">Articles</a>
   <ul>
      <li><a href="#">Web Design</a></li>
      <li><a href="#">User Experience</a></li>
   </ul>
   </li>
   <li><a href="#">Inspiration</a></li>
   </ul>
</nav>




















x
x