diff --git a/README.md b/README.md index 193d2a3..f45b6cb 100644 --- a/README.md +++ b/README.md @@ -1,23 +1,23 @@ -# Opdracht beschrijving - -## Eindresultaat -Programmeer de volgende transitie van hamburger naar kruisje wanneer de gebruiker met de muis over het menu beweegt: - -![Hamburger icoon animatie](./hamburger-icoon-animatie.gif) - -## Randvoorwaarden -* Het hamburger-menu bestaat uit één basis-element en twee pseudo-elementen -* De transities worden tweezijdig toegepast (zowel van niet-hover => hover als van hover => niet-hover) - -## Stappenplan -1. Pak de content van EdHub over transities erbij. -2. Maak een container om de menu-balkjes heen in de HTML. We willen namelijk dat de animatie begint als de gebruiker zijn muis _ergens_ over het gehele "vierkant" beweegt, niet alleen over het middelste balkje. -3. Geef die container voor nu even een border in een gekke kleur zodat je goed ziet tot waar hij rijkt. De bedoeling is dat hij precies om de drie balkjes heen staat. -4. Als de gebruiker over de container hovert, willen we dat het middelste balkje langzaam verdwijnt. -5. Tevens mag het bovenste balkje naar beneden draaien en het onderste balkje naar beneden - -## Gratis tips 🤘🏻 (alleen kijken als je vastloopt!) -* _Tip bij stap 3_: haal de margin van het `#menu` element weg en vervang het door padding op het `#container` element -* _Tip bij stap 4_: focus je eerst op de begin- en eindstaat voor je je bezig houdt met transities. Het begin is een zichtbaar balkje. Het eind is een onzichtbaar balkje. -* _Tip bij stap 4 - vervolg_: als je de `opacity` aanpast doe je dat voor het basis element, en automatisch ook voor de pseudo-elementen. Niet ideaal dus, want de buitenste heb je nog nodig. Ga eens op zoek naar wat je kunt doen met de _kleur_ van het middelste balkje. -* _Tip bij stap 5_: Benieuwd hoe je elementen kunt draaien? Google eens op `CSS transform Property` +# Opdracht beschrijving + +## Eindresultaat +Programmeer de volgende transitie van hamburger naar kruisje wanneer de gebruiker met de muis over het menu beweegt: + +![Hamburger icoon animatie](./hamburger-icoon-animatie.gif) + +## Randvoorwaarden +* Het hamburger-menu bestaat uit één basis-element en twee pseudo-elementen +* De transities worden tweezijdig toegepast (zowel van niet-hover => hover als van hover => niet-hover) + +## Stappenplan +1. Pak de content van EdHub over transities erbij. +2. Maak een container om de menu-balkjes heen in de HTML. We willen namelijk dat de animatie begint als de gebruiker zijn muis _ergens_ over het gehele "vierkant" beweegt, niet alleen over het middelste balkje. +3. Geef die container voor nu even een border in een gekke kleur zodat je goed ziet tot waar hij rijkt. De bedoeling is dat hij precies om de drie balkjes heen staat. +4. Als de gebruiker over de container hovert, willen we dat het middelste balkje langzaam verdwijnt. +5. Tevens mag het bovenste balkje naar beneden draaien en het onderste balkje naar beneden + +## Gratis tips 🤘🏻 (alleen kijken als je vastloopt!) +* _Tip bij stap 3_: haal de margin van het `#menu` element weg en vervang het door padding op het `#container` element +* _Tip bij stap 4_: focus je eerst op de begin- en eindstaat voor je je bezig houdt met transities. Het begin is een zichtbaar balkje. Het eind is een onzichtbaar balkje. +* _Tip bij stap 4 - vervolg_: als je de `opacity` aanpast doe je dat voor het basis element, en automatisch ook voor de pseudo-elementen. Niet ideaal dus, want de buitenste heb je nog nodig. Ga eens op zoek naar wat je kunt doen met de _kleur_ van het middelste balkje. +* _Tip bij stap 5_: Benieuwd hoe je elementen kunt draaien? Google eens op `CSS transform Property` diff --git a/index.html b/index.html index f76d8a4..b767dfa 100644 --- a/index.html +++ b/index.html @@ -1,11 +1,13 @@ - - - - - - Les 4 - Opdracht transitie hamburger icoon naar kruisje - - - - + + + + + + Les 4 - Opdracht transitie hamburger icoon naar kruisje + + +
+ +
+ \ No newline at end of file diff --git a/styles.css b/styles.css index ab5bb1c..552ec70 100644 --- a/styles.css +++ b/styles.css @@ -1,33 +1,54 @@ -:root { - --menu-bar-width: 60px; - --menu-bar-height: 10px; -} - -#menu { - background-color: #D84282; - position: relative; - width: var(--menu-bar-width); - height: var(--menu-bar-height); - margin: 100px; -} - -#menu::before, -#menu::after { - background-color: #D84282; - display: block; - content: ""; - width: var(--menu-bar-width); - height: var(--menu-bar-height); - position: absolute; -} - -#menu::before { - left: 0; - top: -20px; -} - -#menu::after { - left: 0; - top: 20px; -} - +:root { + --menu-bar-width: 60px; + --menu-bar-height: 10px; +} + +#container { + background-color: white; + border: aqua 10px solid; + padding: 20px 0; + position: absolute; +} + +#menu { + background-color: #D84282; + position: relative; + width: var(--menu-bar-width); + height: var(--menu-bar-height); +} + +#menu::before, +#menu::after { + background-color: #D84282; + content: ""; + width: var(--menu-bar-width); + height: var(--menu-bar-height); + position: absolute; +} + +#menu::before { + left: 0; + top: -20px; +} + +#menu::after { + left: 0; + top: 20px; +} +#container:hover #menu { + background-color: white; +} + +#container:hover #menu::before { + transform: translateY(20px) rotate(45deg); +} + +#container:hover #menu::after { + transform: translateY(-20px) rotate(-45deg); +} + +#menu, +#menu::before, +#menu::after { + transition: all .2s ease-in-out; +} \ No newline at end of file