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; margin: auto;
line-height: 11px; line-height: 11px;
> #menuToggle { > a > #logo > img {
@include vendor('transition', ( @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; display: inline-block;
cursor: pointer; cursor: pointer;
padding: calc(47px/2); padding: 23.5px 18.5px;
> span { > span {
&.bar { &.bar {
@ -36,7 +45,6 @@
'transform #{_duration(transition)} ease', 'transform #{_duration(transition)} ease',
'transform-origin #{_duration(transition)} ease', 'transform-origin #{_duration(transition)} ease',
'width #{_duration(transition)} ease', 'width #{_duration(transition)} ease',
'margin #{_duration(transition)} ease',
)); ));
} }
@ -81,18 +89,27 @@
@include breakpoint('<=medium') { @include breakpoint('<=medium') {
height: 60px; height: 60px;
> #wrapper > #menuToggle { > #wrapper {
padding: calc(35px/2);
> span { > a > #logo > img {
&.bar1 { height: 60px;
width: 22px; padding: 7.5px 17.3px;
@include vendor('transform-origin', '22px 1.5px'); left: calc(50% - 30px);
} }
&.bar2 { > #menuToggle {
width: 32px; padding: 17.5px 14px;
margin: 8px 0;
> 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 bar2"></span>
<span class="bar bar1"></span> <span class="bar bar1"></span>
</div> </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> </div>
</nav> </nav>
<header> <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> </header>
<script defer src="/js/main.js"></script> <script defer src="/js/main.js"></script>

5
src/js/main.js
View File

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