NemProgrammering.dk logo
NemProgrammering.dk Trustpilot

Navigationsbar med dropdown-effekt udelukkende med HTML og CSS

Lad NemProgrammering.dk´s eksperter lave din hjemmeside for dig
Vi tilbyder professionel hjælp til udvikling af hjemmesider og webshops . Læs mere om vores ydelser her!

Information om denne video

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:

Denne video relaterer til emner såsom: CSS kursus for begyndere, CSS guides, Lær CSS fra bunden, CSS video-tutorials, introduktion til CSS, navigationsbar med CSS.

Her har du kildekoden

<!-- HTML filen: -->
<!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="css.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>    
        

Her har du kildekoden

/* CSS filen */
#navMenu {
    margin: 0;
    padding: 0;
    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 {
    height: 30px;
    width: 100px;
    display: block;
    text-decoration: none;
    text-align: center;
    color: #FFF;
}
#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;  
    color: #000;
}

.clearfloat {
    clear: both;
    margin:0;
    padding: 0;
}
        

Spørgsmål og kommentarer

Har du et spørgsmål eller en kommentar til denne video/artikel? Så skriv herunder! Alternativt kan du kontakte os på vores forum, hvor en masse hjælpsomme personer sidder klar til at hjælpe.

Url´er bliver automatisk omdannet til links (nofollow).

kommentar på NemProgrammering.dk - lav din egen hjemmeside
Thomas    2017-04-19

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,


kommentar på NemProgrammering.dk - lav din egen hjemmeside
Kurt Hansen    2017-04-11

Hvordan får man en centreret menu? Float giver jo kun mulighed for left og right


Forum stats

  • 1146 Antal brugere
  • 1611 Antal emner
  • 8069 Antal indlæg

Deltag selv!

Nyt fra vores bloggere

Besøg vores webbureau

WordPress Hjemmeside

Nyheder

  • Lær, hvordan du kommer til tops i Google og får flere kunder med vores nye SEO kursus for begyndere. Læs mere her!
  • Du kan nu lære avanceret WordPress her på siden. Lær at tilpasse dit tema samt udvikle dit eget plugin! Lœs mere...
  • Nu kan du også lære at bruge Photoshop fra bunden! Se med her: Photoshop kursus
  • Du kan ikke drive et velfungerende udviklingsmiljø uden hurtigt bredbånd. Se vores artikel om Billig Bredbånd
  • Vil du blive bedre til Google Sheets? Så kan du med fordel se vores nye Google Sheets kursus!