schulze/schulzestudio
Archived
1
0
Fork 0
Code Issues Pull Requests 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
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; width: 60px;
background: _palette(accent1); background: _palette(accent1);
margin: 15px 30px; margin: 15px 30px;
@include vendor('transform-origin', '55px 5px');
&.active { &.active {
@include vendor('transform', 'rotate(45deg)'); @include vendor('transform', 'rotate(45deg)');
@include vendor('transform-origin', '55px 5px');
} }
} }
&.bar1.active:first-child { &.bar1:first-child {
@include vendor('transform-origin', '5px 5px'); @include vendor('transform-origin', '5px 5px');
} }

9
src/index.html
View File

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