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

script, html and css for menu button

Browse Source
This commit is contained in:
Thefeli73 2020-01-15 16:16:31 +01:00
parent d510f7cad3
commit 7c90e3e644
3 changed files with 13 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -17,14 +17,14 @@
width: 60px;
background: _palette(accent1);
margin: 15px 30px;
@include vendor('transform-origin', '55px 5px');
&.active {
@include vendor('transform', 'rotate(45deg)');
@include vendor('transform-origin', '55px 5px');
}
}
&.bar1.active:first-child {
&.bar1:first-child {
@include vendor('transform-origin', '5px 5px');
}

9
src/index.html
View File

@ -47,10 +47,10 @@
<body>
<nav id="nav">
<div onclick="function myfunction(){var element = document.getElementsByClassName('bar'); element.classList.add('active');}">
<span class="bar bar1 active"></span>
<span class="bar bar2 active"></span>
<span class="bar bar1 active"></span>
<div onclick="menuToggle();">
<span class="bar bar1"></span>
<span class="bar bar2"></span>
<span class="bar bar1"></span>
</div>
</nav>
@ -62,5 +62,6 @@
</picture>
</header>
<script defer src="/js/main.js"></script>
</body>
</html>

6
src/js/main.js Normal file
View File

@ -0,0 +1,6 @@
function menuToggle() {
var bars = document.getElementsByClassName('bar');
for (var i = 0; i < bars.length; i++) {
bars[i].classList.toggle('active');
}
}