Hamburger Menue (mobile)
CODE
×
HTML
<svg class='menue-icon' version='1.1' id='menu' width='40' height='40' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 640 640' style='enable-background:new 0 0 640 640;' xml:space='preserve'><rect y="0" fill="none" width="640" height="640"></rect> <rect id="hm1" x="64" y="160" class="hm-line" fill="currentColor" width="512" height="32"></rect> <rect id="hm2" x="64" y="304" class="hm-line" fill="currentColor" width="512" height="32"></rect> <rect id="hm3" x="64" y="448" class="hm-line" fill="currentColor" width="512" height="32"></rect></svg>
CSS
svg.menue-icon { display:none; position:relative; cursor:pointer; width: 40px; height: 40px; } svg.menue-icon { --ind-p: 5px; top: -0.5px; right: clamp(calc(var(--header-vp-min) + var(--ind-p)), calc(var(--header-vp-ideal) + var(--ind-p)), calc(var(--header-vp-max) + var(--ind-p))); transition:all 200ms ease-in-out } @media (max-width: 1199px) { svg.menue-icon { display: block; } } #hm1, #hm2, #hm3 { transition: 200ms ease-in-out; transform-origin: 50% 50%; transition-property: transform } svg.menue-icon:hover > #hm1 { transform:translateY(144px) } svg.menue-icon:hover > #hm2 { transform:rotate(-90deg) } svg.menue-icon:hover > #hm3 { transform:translateY(-144px) } svg.menue-icon.open { transform:rotate(-45deg) } svg.menue-icon.open > #hm1 { transform:translateY(144px) } svg.menue-icon.open > #hm2 { transform:rotate(-90deg) } svg.menue-icon.open > #hm3 { transform:translateY(-144px) } div.styleguide.atoms svg.menue-icon { display: block !important; left: 3px; right: none: }
JS
Hamburger Menue (mobile)
Last Edit: Oct 26, 2023, 11:35am
×