K
In CSS We have to: https://developer.mozilla.org/es/docs/Web/CSS/clip-path :For formula circle() we can indicate <shape-radius> at <position>Where position are the coordinates where to focus the circle https://developer.mozilla.org/es/docs/Web/CSS/calc() :It allows us to perform mathematical operations between different units of measure.Since the menu is centered to the width and height of the document and the button is located to the right inside the menu bar, which has a specific width, what we can do is calculate the coordinates (x, yWhere the button will be positioned.To calculate the coordinate x (horizontal) we have to:The horizontal center is exactly 50% of the documentBesides we have to add half the width of the menu bar, that is, (37.5rem / 2)And finally subtract half the width of the hamburger button, that is, (40px / 2)For the coordinate y (vertical) we have to:It has to be on the top edge, that is, 0%The separation margin must be added headerI mean, 1.9remAnd half the top of the hamburger button, I mean, (40px / 2)Example: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(40px at calc(50% + (37.5rem / 2) - (40px / 2)) calc(0% + 1.9rem + (40px / 2)));
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>