Commit c4a5d3c6 authored by Dennis Dominik Schöpf's avatar Dennis Dominik Schöpf
Browse files

Reowrk menu (mobile and overall hover effects)

parent 01193ea6
......@@ -21,10 +21,14 @@
<li><a href="/">Über Mich</a></li>
<li><a href="/">Kontakt</a></li>
</ul>
<button id="menu-trigger">
<span class="menu-bar"></span>
<span class="menu-bar"></span>
<span class="menu-bar"></span>
<button
id="menu-trigger"
class="hamburger hamburger--slider"
type="button"
>
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
</nav>
<section id="hero">
......
......@@ -23,10 +23,10 @@ function handleMenuButtonClick(event) {
function openMenu() {
menu.classList.add('open');
menuTrigger.classList.add('open');
menuTrigger.classList.add('is-active');
}
function closeMenu() {
menu.classList.remove('open');
menuTrigger.classList.remove('open');
menuTrigger.classList.remove('is-active');
}
......@@ -54,14 +54,35 @@ header {
width: 100%;
background-color: rgba(255, 255, 255, 0.95);
display: flex;
justify-content: center;
padding: 2rem 0;
border-top: 1px solid $accent-color-reg;
justify-content: flex-start;
padding: 2rem 0 2rem 2rem;
border-top: 1px solid $dark-color-lightened;
&:hover {
background-color: $primary-color;
color: $bright-color;
}
}
@include breakpoint(800px) {
&:hover {
color: $primary-color;
border-bottom: 2px solid $primary-color;
}
}
&.active {
border-bottom: 1px solid $primary-color;
color: $primary-color;
@include breakpoint(0, 800px) {
&:hover {
color: $bright-color;
}
}
@include breakpoint(800px) {
border-bottom: 2px solid $primary-color;
}
}
}
}
......
#menu-trigger {
height: 2.8rem;
width: 3.6rem;
border: 0;
outline: 0;
padding: 0;
background-color: transparent;
position: relative;
margin-right: 1.5rem;
display: none;
.menu-bar {
position: absolute;
@include breakpoint(0, 800px) {
display: block;
width: 100%;
height: 0.3rem;
background-color: $primary-color;
&:nth-child(1) {
top: 0;
}
&:nth-child(2) {
top: 50%;
transform: translateY(-50%);
}
&:nth-child(3) {
bottom: 0;
}
}
&.open {
.menu-bar:nth-child(1) {
transform: rotate(45deg);
transform-origin: 0;
}
.menu-bar:nth-child(2) {
display: none;
}
& > .hamburger-box > .hamburger-inner {
background-color: $primary-color;
.menu-bar:nth-child(3) {
transform: rotate(-45deg);
transform-origin: 0;
&::before,
&::after {
background-color: $primary-color;
}
}
}
// External scss
@import '../node_modules/hamburgers/_sass/hamburgers/hamburgers.scss';
@import './reset';
@import './variables';
@import './globals';
......
$primary-color: #00aeef;
$secondary-color: #43ad4d;
$dark-color: #000000;
$dark-color-lightened: #999;
$bright-color: #ffffff;
$accent-color-bright: #fffbd8;
$accent-color-reg: #c7eaf9;
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment