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:
CSS strukturdata for "vandret" menu
CSS strukturdata for "lodret" menu
Indsættelse af strukturdata for ekstra undermenu.
Selektorer pr listeniveau til indsættelse af farver etc.
Forklaringer til de enkelte selektorer.
Samlet 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.
Værdierne i nav-selektoren, samt farver og borders er dog kun medtaget af informative årsager.
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).
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:
UL
Vedligehold for hele listen
UL LI
Vedligehold for linierne listen.
UL LI a
Vedligehold for teksterne i linierne.
UL LI:hover
Vedligehold for linierne i listen ved mouse-over.
UL LU a:hover
Vedligehold 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.
Selektor
Anvendelse
Menuens statiske del
nav
Placering af menufladen (menuens "forreste" liste) i forhold til NAV-boksen.
nav ul
Menufladens form, udstrækning, farve og placering under scroll.
nav ul.margin
Margin rundt om menufladen.
nav ul li
Placering af de enkelte menupunkter
nav ul li:hover
De enkelte menupunkter ved "mouse over".
nav ul li a
Teksten i de enkelte menupunkter
nav ul li:hover a
De enkelte menupunkter ved "mouse over".
nav ul:after
De enkelte menupunkter efter "mouse over".
Menuens første drop down menu. (Kun nødvendige når menuen indeholder undermenuer)
nav ul li:hover > ul
Viser undermenuer knyttet til et menupunkt.
nav ul ul
Dens "underlag": Form, udstrækning, farve og placering under scroll.
nav ul ul li
Placering af de enkelte menupunkter
nav ul ul li a
Teksten i de enkelte menupunkter
nav ul ul li a:hover
De enkelte menupunkter ved "mouse over"
Menuens anden drop down menuer. (Kun nødvendig, når menuen indeholder denne undermenu)
nav ul ul ul
Opsæ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;
}