script, html and css for menu button
This commit is contained in:
parent
d510f7cad3
commit
7c90e3e644
@ -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');
|
||||
}
|
||||
|
||||
|
@ -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
6
src/js/main.js
Normal 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');
|
||||
}
|
||||
}
|
Reference in New Issue
Block a user