Skip to content

Instantly share code, notes, and snippets.

@wadadanet wadadanet/hamburger.pug
Last active Oct 11, 2019

Embed
What would you like to do?
より正確なハンバーガーメニューアイコン
.hamburger: span
// https://www.antimath.info/css/sass-sqrt-function/
@function sqrt($r) {
$x0: 1;
$x1: $x0;
@for $i from 1 through 10 {
$x1: $x0 - ($x0 * $x0 - abs($r)) / (2 * $x0);
$x0: $x1;
}
@return $x1;
}
.hamburger {
$w: 26px;
$h: 22px;
$b: 2px;
$c: #666666;
position: relative;
z-index: 0;
width: $w;
height: $h;
display: block;
span, &:before, &:after {
display: block;
position: absolute;
top: 0;
bottom: 0;
left:0;
right: 0;
width: $w;
height: $b;
margin: auto;
background: $c;
transform-origin: center center;
}
&:before, &:after {
content: "";
}
&:before {
transform: translate3d(0, ($h / -2), 0);
}
&:after {
transform: translate3d(0, ($h / 2), 0);
}
&.s-open {
width: $w;
height: $w;
span, &:before, &:after {
width: ($w * sqrt(2));
left: ($w / 2 * (1 - sqrt(2)))
}
span {
opacity: 0;
}
&:before {
transform: rotate3d(0, 0, 1, 45deg);
}
&:after {
transform: rotate3d(0, 0, 1, -45deg);
}
}}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.