Underviser: Thomas Iversen, A-kasse priser
I denne video skal vi prøve at anvende en stor del af det du har lært igennem de sidste 15 videoer. Det vi skal prøve at lave er en navigationsbar med dropdown-effekt, som udelukkende bygger på CSS og HTML.
Øvelse:
1 - Lav navigationsbaren som vist i videoen. Prøv at style den det bedste du kan, så du får en flot og unik navigationsbar.
Video tags:
<!DOCTYPE html>
<html>
<head>
<title>Lektion 16</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="Lektion16.css">
</head>
<body>
<div id="navMenu">
<ul>
<li><a href="#">Link 1</a> <!--Overordnet link-->
<ul>
<li><a href="#">Underlink 1</a></li> <!--underlink link-->
<li><a href="#">Underlink 2</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="#">Link 2</a>
<ul>
<li><a href="#">Underlink 1</a></li>
<li><a href="#">Underlink 2</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="#">Link 3</a>
<ul>
<li><a href="#">Underlink 1</a></li>
<li><a href="#">Underlink 2</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="#">Link 4</a>
<ul>
<li><a href="#">Underlink 1</a></li>
<li><a href="#">Underlink 2</a></li>
</ul>
</li>
</ul>
<br class="clearfloat" />
</div>
<p>tekst tekst tekst tekst tekst tekst tekst
tekst tekst tekst tekst tekst tekst
tekst tekst tekst teksttekst tekst tekst
teksttekst tekst teksttekst tekst tekst
teksttekst tekst teksttekst tekst tekst
teksttekst tekst teksttekst tekst tekst
teksttekst tekst teksttekst tekst tekst</p>
</body>
</html>
#navMenu {
margin: 0;
padding: 0;
margin-left: auto;
margin-right: auto;
width: 400px;
}
#navMenu ul {
list-style: none;
margin:0;
padding: 0;
line-height: 30px;
}
#navMenu li {
float: left;
margin: 0;
padding: 0;
position: relative;
background-color: #999;
}
#navMenu ul li a {
width: 100px;
height: 30px;
display: block;
color: #fff;
text-decoration: none;
text-align: center;
}
#navMenu ul ul {
position: absolute;
top:30px;
visibility: hidden;
}
#navMenu ul li:hover ul {
visibility: visible;
}
#navMenu a:hover {
background-color: #09F;
color:#000;
}
#navMenu ul li ul li a:hover {
background-color: #0EBFE9;
}
.clearfloat {
clear: both;
}
Det var en rigtig god video, tak for det.
Hej Jeg er nysgerrig efter at vide, hvordan jeg sørger for at min navigationsmenu kommer til at fylde hele siden i bredden. Har du eventuelt en løsning til dette? Tak på forhånd :D
Hej K, Altså du kan ikke finde kildekoden her på siden? Den skulle gerne være her. Prøv at reloade din side med ctrl+f5 eller åben siden i en anden browser - så skulle sektionen med CSS koden gerne være der. Mvh.
Hej jeg hedder K og er 14,5 og syntes det er sjovt at koden men synes denne here lektion er svær så jeg kiggede i beskrivelsen og så kilde koderne og kopirede den første dellen til mit html da jeg kom tilbage for css dellen var den væk? jeg kunne godt tænke mig at vide hvorfor den ikke kan findes på siden eller om man bare skal trykke på en knap jeg overser. hilsen K
Hej Kurt, Du kan centere din menu med margin-auto. Hvis du eksempelvis sætter din #navMenu til: #navMenu { width:400px; margin-left:auto; margin-right:auto; } Så vil den ligge sig i midten af det element du placerer den i :-) Bredden skal være den fulde bredde på din navbar, altså bredden på alle menupunkter lagt sammen. I dette tilfælde er det 400px,
Hvordan får man en centreret menu? Float giver jo kun mulighed for left og right
