NemProgrammering.dk logo
Unordicway webhotel

Dropdownmenu udelukkende med med HTML og CSS

VIGTIGT!
Denne artikel er IKKE skrevet af NemProgrammering.dk, men af en af vores brugere! Nemprogrammering.dk tager hverken ansvar eller æren for artikler skrevet af andre end Nemprogrammering.dk - Se videoer og læs artikler lavet af vores PROFESSIONELLE TEAM HER

Skrevet af: Daniel Hedegaard Andersen

Til at starte med i vil jeg vise hvordan koderne ser ud bag menuen. Derefter vil jeg fortælle hvordan man får denne DropDownMenu implementeret på sin egen side.

Trin 1 : Opsættelse af HTML listen til menuen

HTML koden:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DropDownMenu</title>
<link href="DropDownMenu.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<!--Start-->
<div id="navMenu">
<ul>
<li><a href="#">Link 1</a> <!--Overordnet link-->
<ul>
<li><a href="#">Underlink 1</a></li> <!--Underlink til Link 1-->
<li><a href="#">Underlink 2</a></li> <!--Underlink til Link 1-->
<li><a href="#">Underlink 3</a></li> <!--Underlink til Link 1-->
<li><a href="#">Underlink 4</a></li> <!--Underlink til Link 1-->
<li><a href="#">Underlink 5</a></li> <!--Underlink til Link 1-->
</ul> <!--End inner LI list-->
</li> <!--End mail LI list-->
</ul> <!--End main UL list-->
<ul>
<li><a href="#">Link 2</a> <!--Overordnet link-->
<ul>
<li><a href="#">Underlink 1</a></li> <!--Underlink til Link 2-->
<li><a href="#">Underlink 2</a></li> <!--Underlink til Link 2-->
<li><a href="#">Underlink 3</a></li> <!--Underlink til Link 2-->
<li><a href="#">Underlink 4</a></li> <!--Underlink til Link 2-->
<li><a href="#">Underlink 5</a></li> <!--Underlink til Link 2-->
</ul> <!--End inner LI list-->
</li> <!--End mail LI list-->
</ul> <!--End main UL list-->
<ul>
<li><a href="#">Link 3</a> <!--Overordnet link-->
<ul>
<li><a href="#">Underlink 1</a></li> <!--Underlink til Link 3-->
<li><a href="#">Underlink 2</a></li> <!--Underlink til Link 3-->
<li><a href="#">Underlink 3</a></li> <!--Underlink til Link 3-->
<li><a href="#">Underlink 4</a></li> <!--Underlink til Link 3-->
<li><a href="#">Underlink 5</a></li> <!--Underlink til Link 3-->
</ul> <!--End inner LI list-->
</li> <!--End mail LI list-->
</ul> <!--End main UL list-->
<ul>
<li><a href="#">Link 4</a> <!--Overordnet link-->
<ul>
<li><a href="#">Underlink 1</a></li> <!--Underlink til Link 4-->
<li><a href="#">Underlink 2</a></li> <!--Underlink til Link 4-->
<li><a href="#">Underlink 3</a></li> <!--Underlink til Link 4-->
<li><a href="#">Underlink 4</a></li> <!--Underlink til Link 4-->
<li><a href="#">Underlink 5</a></li> <!--Underlink til Link 4-->
</ul> <!--End inner LI list-->
</li> <!--End mail LI list-->
</ul> <!--End main UL list-->
<ul>
<li><a href="#">Link 5</a> <!--Overordnet link-->
<ul>
<li><a href="#">Underlink 1</a></li> <!--Underlink til Link 5-->
<li><a href="#">Underlink 2</a></li> <!--Underlink til Link 5-->
<li><a href="#">Underlink 3</a></li> <!--Underlink til Link 5-->
<li><a href="#">Underlink 4</a></li> <!--Underlink til Link 5-->
<li><a href="#">Underlink 5</a></li> <!--Underlink til Link 5-->
</ul> <!--End inner LI list-->
</li> <!--End mail LI list-->
</ul> <!--End main UL list-->
<br class="clearFloat" />
</div> <!--End navMenu div-->
<!--Stop-->
</div> <!--End wrapper div-->
</body>
</html>

Trin 2 : CSS delen
* Opret filen DropDownMenu.css

Kode:

@charset "utf-8"; /*Sikre du kan skrive æ ø og å*/
#navMenu {
margin:0;
padding:0;
}
#navMenu ul {
margin:0;
padding:0;
line-height:30px;
}
#navMenu li {
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
background:#999; /*Baggrundsfarven for links*/
}
#navMenu ul li a {
text-align:center;
font-family:"Comic Sans MS", cursive; /*Links skrifttype*/
text-decoration:none; /*Fjerner links understregning*/
height:30px; /*Højden på link-bokse*/
width:150px; /*Breden på link-bokse*/
display:block; /*Link i blok*/
color:#FFF; /*Links tekstfarve*/
border:1px solid #FFF;
text-shadow:1px 1px 1px #000; /*Links kant størrelser og farve*/
}
#navMenu ul ul {
position:absolute;
visibility:hidden;
top:32px;
}
#navMenu ul li:hover ul {
visibility:visible;
}
/*****************************************************/
#navMenu li:hover {
background:#09F; /*Overordnet links "mus over" farve*/
}
#navMenu ul li:hover ul li a:hover {
background:#CCC; /*Underlinks "mus over" farve*/
color:#000; /*Underlinks "mus over" tekstfarve*/
}
#navMenu a:hover {
color:#000; /*Links "mus over" tekstfarve mens musen er på linket*/
}
.clearFloat {
clear:both;
margin:0;
padding:0;
}

Indsætning på egen side

For at få menuen ind på sin egen side skal man tilføje alt CSS koden i et CSS dokument og linke til dette dokument på de sider hvor man ønsker menuen skal implementeres. Derefter skal man tage al HTML koden der står mellem <!--Start og <!--Stop og indsætte den der hvor man ønsker sin menu sat ind.

Når du har fulgt disse trin så har du en fin og simpel DropDownMenu på din hjemmeside, som egentlig kun mangler at blive rettet lidt til med hensyn til farver og størrelse. I CSS koderne er der sat en masse noter mellem /* */. Disse noter beskriver, hvad de forskellige koder gør linje for linje og heri kan du selv rette så det passer til dit behov.

Se en demonstration af navigationsbaren her: DEMO