HTML & CSS

OPGAVE TIL HTML & CSS – MIDDEL – HAMBURGERMENU

Opgave 7

Opgave 7 – Del 1

Først skal vi have sat div’er op som skal fungere som rammerne til opslagstavlen

Start med at skrive:
< div class=”navbar”>
<input id=”toggle-1″ type=”checkbox” / >
<label class=”hamburger-1″ for=”toggle-1″>
<div class=”htop div-1″></div>
<div class=”hmeat div-1″></div>
<div class=”hbottom1 div-1″></div>
</label>

</ div>

1. Den første div boks skal have en style direkte i html teksten. Stil dig imellem < div> start og < / div> og tryk på enter et par gange for at holde ordenen og gøre plads til koden der sættes ind senere.

2. Inde i 1. div og skal der laves en input, den kan afsluttes med />

3. Under input skal der være en label, gør som div og stil dig imellem og tryk på enter, for at holde ordenen.

4. I label skal der vlre 3 div bokse, de skal blive til stregerne i hamburgermenuen

Gå derefter ned i CSS’en og lav tilsvarende CSS styles til disse klasser. Se Del 2

Opgave 7 – Del 2

Nu skal der laves CSS styles til id’erne og klasserne

.navbar {
overflow: hidden;
background-color: black;
}

.navbar a {
float: left;
font-size: 13px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
color: white;
}

.navbar a.active {
background-color: purple;
color: white;
}

Vælg de farver du selv ønsker 🙂

Dette er starten af vores navigationsbar, men vi kan ikke se noget endnu.

Opgave 7 – Del 3

Nu skal vi i CSS’en skrive dette ind:

/* Hamburger */
.hamburger-1 {
height: 45px;
margin: 10px;
display: -ms-grid;
display: grid;
grid-template-rows: repeat(3, 1fr);
justify-items: center;
z-index: 120;
}

Bemærk at der arbejdes med grid for at positionere de 
vandrette streger i hamburger menuen.

Opgave 7 – Del 4

Nu skal sætte styles ind i CSS’en for toogle-1og hamburger-1.

.hamburger-1 .div-1 {
background-color: white;
position: relative;
width: 40px;
height: 5px;
margin-top: 7px;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

#toggle-1 {
display: none;
}

#toggle-1:checked + .hamburger-1 .htop {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
margin-top: 22.5px;
}

#toggle-1:checked + .hamburger-1 .hmeat {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
margin-top: -5px;
}

#toggle-1:checked + .hamburger-1 .hbottom1 {
-webkit-transform: scale(0);
transform: scale(0);
}

#toggle-1:checked ~ .menu-1 {
height: 250px;
}

Det vi laver her er at designe striberne i hamburgeren og 
X for luk.

Opgave 7 – Del 5

Nu skal vi op i html’en igen. For der skal nu sættes en <div></div> boks ind, med klassen menu-1. Stil dig under < /label> og før < /div> og skriv dette ind:

< div class=”menu-1″>< /div>

Stil dig nu mellem div boksene og tryk enter. Sæt nu links ind som skal være i menuen:

< div class=”menu-1″>
< a href=”#” class=” link-1″>HOME< /a>
< a href=”#” class=” link-1″>SIDE 1< /a>
  < a href=”#” class=” link-1″>SIDE 2< /a>
  < a href=”#” class=” link-1″>SIDE 3< /a>
  < a href=”#” class=” link-1″>SIDE 4< /a>
</ div>

Sæt gerne en klasse ind på linkene, så vi senere kan lave
en mouseover effekt på dem. Husk at bruge target="_blank"
hvis du bruger rigtige links.

Opgave 7 – Del 6

Nu skal vi ned i CSS’en igen. For der skal nu skal vi sætte ind for menu-1:

/* Menu */
.menu-1 {
width: 100%;
background-color: black;
margin: 0;
display: -ms-grid;
display: grid;
grid-template-rows: 45px repeat(10, 45px);
grid-row-gap: 0px;
padding: 0;
list-style: none;
clear: both;
width: auto;
text-align: left;
height: 0px;
overflow: hidden;
transition: height .4s ease;
z-index: 120;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}

Bemærk at mange er sat til 0, prøv gerne at skive px tal
ind for at se, hvad linjerne gør for din menu.

Opgave 7 – Del 7

Nu skal vi så lave klasse til linksene i CSS’en.

De ser således her ud:

.link-1 {
margin: 0;
padding: 10px 0;
font-weight: 900;
}

.link-1:hover {
background-color: #fff;
color: purple;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}

Husk hvis ikke du har en font-family på, så tilføj denne,
for at se teksten blive fed. Den skal på under den første
klasse.

Her under vises/eksekveres koden

Opgave 7 – Ekstra Opgave

Ekstra opgave:
1. Prøv at flytte hamburgeren til en af siderne.

2. Prøv at lave den responsive, sådan at det er en alm menu når man ser det på PC.

Hint du skal i Opgave 7 – Del 3 tilføje skrive display: none;

Bruge @media til dette til sidst, se BEGYNDER Opgave 6 om basis website for media teksten.

I @media skal du lave max-width på 650px og klassen deri er .hamburger-1 {display:block;}

Du skal lave en tilsvarende @media med min-width på 651px, hvor klassen .menu-1 {display:inline;}