I have a header made in mobile first, but when opening the hamburger menu, the animation appears from the center and not from the button, I tried the code with clip-path
, but I can't find a way for the animation to come from the button.
I attach my proposal to make it more understandable
mostrarNav = () => {
document
.getElementsByClassName("header__navigation__hamburguer")[0]
.classList.toggle("active");
};
/* FONTS */
@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@200&family=Lora:wght@500;700&family=Montserrat:wght@400;500;700&display=swap');
/* VARIABLES */
/* FUNCTIONS*/
/* GLOBAL RESETS */
* {
box-sizing : border-box;
margin : 0;
padding : 0;
}
html {
font-size : 62.5%;
}
body {
background-color : #181719;
}
a {
text-decoration : none;
}
ul {
list-style : none;
}
/* HEADING STYLES */
h1 {
color : #FFFFFF;
font-family : 'Crimson Pro', serif;
font-size : 1.4rem;
font-weight : 200;
}
h2 {
color : #FFFFFF;
font-family : 'Lora', serif;
font-size : 3.6rem;
font-weight : 500;
}
h3 {
color : #FFFFFF;
font-family : 'Montserrat', sans-serif;
font-size : 1.2rem;
font-weight : 500;
}
h4 {
color : #FFFFFF;
font-family : 'Lora', serif;
font-size : 1.8rem;
font-weight : 700;
}
h5 {
color : #A9A9A9;
font-family : 'Montserrat', sans-serif;
font-size : 1.4rem;
font-weight : 500;
}
.container {
margin : 0 auto;
max-width : 37.5rem;
width : 90%;
}
/* HEADER */
/* HEADER */
.header {
padding-top : 1.9rem;
}
.header__menu__container {
align-items : center;
justify-content : space-between;
display : flex;
}
.header__menu__container h1 {
border : 1px solid #FFFFFF;
padding : 0.8rem;
text-transform : uppercase;
}
.header__navigation__hamburguer {
align-items : center;
cursor : pointer;
display : flex;
position : relative;
z-index : 2;
}
.header__navigation__hamburguer span {
background-color : #FFFFFF;
display : block;
height : 0.3rem;
margin-bottom : 0.3rem;
position : relative;
transition : all 0.5s ease-in-out;
width : 3rem;
z-index : 99;
}
.header__navigation__hamburguer__menu {
background-color : red;
clip-path : circle(10%);
height : 100%;
left : 0;
opacity : 0;
position : absolute;
top : 0;
transition : all 0.5s ease-in-out;
visibility : hidden;
width : 100%;
}
.header__navigation__hamburguer.active + .header__navigation__hamburguer__menu {
clip-path : circle(100%);
opacity : 1;
visibility : visible;
}
.header__navigation__hamburguer__menu__links {
position : absolute;
top : 50%;
left : 50%;
transform : translate(-50%, -50%);
text-align : center;
}
.header__navigation__hamburguer__menu__link {
margin-bottom : 2rem;
}
.header__navigation__hamburguer__menu__link a {
color : #FFFFFF;
font-family : 'Montserrat', sans-serif;
font-size : 1.8rem;
font-weight : 500;
border-bottom : 2px solid transparent;
color : #FFFFFF;
padding-bottom : 0.6rem;
}
.header__navigation__hamburguer__menu__link a:hover {
color : #FFFFFF;
font-family : 'Montserrat', sans-serif;
font-size : 1.8rem;
font-weight : 700;
border-bottom : 2px solid white;
padding-bottom : 0.6rem;
transition : all 300ms ease-in-out;
}
.line {
fill : none;
stroke : #FFFFFF;
stroke-width : 6;
transition : stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1), stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.line1 {
stroke-dasharray : 60 207;
stroke-width : 6;
}
.line2 {
stroke-dasharray : 60 60;
stroke-width : 6;
}
.line3 {
stroke-dasharray : 60 207;
stroke-width : 6;
}
.active .line1 {
stroke-dasharray : 90 207;
stroke-dashoffset : -134;
stroke-width : 6;
}
.active .line2 {
stroke-dasharray : 1 60;
stroke-dashoffset : -30;
stroke-width : 6;
}
.active .line3 {
stroke-dasharray : 90 207;
stroke-dashoffset : -134;
stroke-width : 6;
}
<header class="header">
<div class="header__container container">
<div class="header__menu__container">
<h1>This Interior</h1>
<div class="header__navigation">
<div class="header__navigation__hamburguer " onclick="mostrarNav()">
<svg width="40" height="40" viewBox="0 0 100 100">
<path class="line line1" d="M 20,29.000046 H 80.000231 C 80.000231,29.000046 94.498839,28.817352 94.532987,66.711331 94.543142,77.980673 90.966081,81.670246 85.259173,81.668997 79.552261,81.667751 75.000211,74.999942 75.000211,74.999942 L 25.000021,25.000058" />
<path class="line line2" d="M 20,50 H 80" />
<path class="line line3" d="M 20,70.999954 H 80.000231 C 80.000231,70.999954 94.498839,71.182648 94.532987,33.288669 94.543142,22.019327 90.966081,18.329754 85.259173,18.331003 79.552261,18.332249 75.000211,25.000058 75.000211,25.000058 L 25.000021,74.999942" />
</svg>
</div>
<nav class="header__navigation__hamburguer__menu">
<ul class="header__navigation__hamburguer__menu__links">
<li class="header__navigation__hamburguer__menu__link">
<a class="link-social" href="#">Home</a>
</li>
<li class="header__navigation__hamburguer__menu__link">
<a class="link-social" href="#">Collection</a>
</li>
<li class="header__navigation__hamburguer__menu__link">
<a class="link-social" href="#">About</a>
</li>
<li class="header__navigation__hamburguer__menu__link">
<a class="link-social" href="#">Contact</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</header>
In
CSS
we have to:clip-path
:For formula
circle()
we can indicate<shape-radius> at <position>
, whereposition
are the coordinates where to center the circlecalc
:It allows us to perform mathematical operations between different units of measurement.
Given that the menu is centered on the width and height of the document and the button is located on the right within the menu bar, which has a specific width, what we can do is calculate the coordinates (
x, y
) where the button is going to be positioned . button.To calculate the coordinate
x
( horizontal ) we have:50%
the document(37.5rem / 2)
(40px / 2)
y
For the ( vertical ) coordinate we have:0%
header
, that is,1.9rem
(40px / 2)
Example: