schulze/schulzestudio
Archived
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

script for menu, css for nav bar and center logo

Browse Source
This commit is contained in:
Thefeli73 2020-01-15 20:07:39 +01:00
parent 329c47ee73
commit 67b3d62b88
3 changed files with 46 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/css/layout/_nav.scss
View File

@ -19,13 +19,22 @@
margin: auto;
line-height: 11px;
> #menuToggle {
> a > #logo > img {
@include vendor('transition', (
'padding #{_duration(transition)} ease',
'height #{_duration(transition)} ease',
'left #{_duration(transition)} ease',
));
position: absolute;
cursor: pointer;
height: 80px;
padding: 10px 23.1px;
left: calc(50% - 40px);
}
> #menuToggle {
display: inline-block;
cursor: pointer;
padding: calc(47px/2);
padding: 23.5px 18.5px;
> span {
&.bar {
@ -36,7 +45,6 @@
'transform #{_duration(transition)} ease',
'transform-origin #{_duration(transition)} ease',
'width #{_duration(transition)} ease',
'margin #{_duration(transition)} ease',
));
}
@ -81,18 +89,27 @@
@include breakpoint('<=medium') {
height: 60px;
> #wrapper > #menuToggle {
padding: calc(35px/2);
> #wrapper {
> span {
&.bar1 {
width: 22px;
@include vendor('transform-origin', '22px 1.5px');
}
> a > #logo > img {
height: 60px;
padding: 7.5px 17.3px;
left: calc(50% - 30px);
}
&.bar2 {
width: 32px;
margin: 8px 0;
> #menuToggle {
padding: 17.5px 14px;
> span {
&.bar1 {
width: 22px;
@include vendor('transform-origin', '22px 1.5px');
}
&.bar2 {
width: 32px;
margin: 8px 0;
}
}
}
}

17
src/index.html
View File

@ -53,15 +53,22 @@
<span class="bar bar2"></span>
<span class="bar bar1"></span>
</div>
<a href="https://schulze.studio">
<picture id="logo">
<source srcset="/img/logo/logo@0.10x.webp" type="image/webp">
<source srcset="/img/logo/logo@0.10x.png" type="image/png">
<img src="/img/logo/logo@0.10x.png" alt="Schulze Studio logo">
</picture>
</a>
</div>
<div id="menu">
dtrhyhrdtrhyhdrthtr
</div>
</nav>
<header>
<picture id="logo">
<source srcset="/img/logo/logo@0.50x.webp" type="image/webp">
<source srcset="/img/logo/logo@0.50x.png" type="image/png">
<img src="/img/logo/logo@0.50x.png" alt="Schulze Studio logo">
</picture>
</header>
<script defer src="/js/main.js"></script>

5
src/js/main.js
View File

@ -1,6 +1,7 @@
//toggle menu burger animation
document.getElementById("menuToggle").addEventListener("click", menuToggle);
//toggle menu burger animation and menu
document.getElementById("menuToggle").addEventListener("mousedown", menuToggle);
function menuToggle() {
document.getElementById("menu").classList.toggle("show"); //shows menu
var bars = document.getElementsByClassName('bar');
for (var i = 0; i < bars.length; i++) {
bars[i].classList.toggle('active');