Develop Reference

completely fit the toggle bar inside the div

my english is not very good, i hope i can explain what i want to say
I want to fit my toggle icon inside div. I couldn't do it, can you show me how to do it?
I want it to be shaped according to the size of the div. when the div shrinks, the toggle menu should also shrink
I want to make the image in the top image like the bottom image
$(".menu").click(function () {
$(this).toggleClass("open");
});
body {
background-color: black;
}
.btn5 {
position: absolute;
width: 150px;
height: 150px;
top: 0px;
left: 0px;
transition-duration: 0.5s;
border: 5px solid red;
}
.btn5 .icon {
transition-duration: 0.5s;
position: absolute;
height: 8px;
width: 60px;
top: 50px;
background-color: white;
}
.btn5 .icon:before {
transition-duration: 0.5s;
position: absolute;
width: 60px;
height: 8px;
background-color: white;
content: "";
top: -20px;
}
.btn5 .icon:after {
transition-duration: 0.5s;
position: absolute;
width: 60px;
height: 8px;
background-color: white;
content: "";
top: 20px;
}
.btn5.open .icon {
transition: 0.5s;
}
.btn5.open .icon:before {
transform: rotateZ(-45deg) scaleX(0.75) translate(-20px, -6px);
}
.btn5.open .icon:after {
transform: rotateZ(45deg) scaleX(0.75) translate(-20px, 6px);
}
.btn5:hover {
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="togg">
<div class="menu btn5" data-menu="5">
<div class="icon"></div>
</div>
</div>
Thank you in advance for your help :)

This snippet will get you closer to your second image. I changed up the structure a bit and just used a couple spans and positioned them absolute. You can tinker with the animation to your hearts content.
$(".menu").click(function () {
$(this).toggleClass("open");
});
body {
background-color: black;
}
.btn5 {
position: absolute;
width: 150px;
display:flex;
align-items: center;
height: 150px;
top: 0px;
left: 0px;
transition-duration: 0.5s;
border: 5px solid red;
}
.icon {
width:150px;
height:150px;
position: relative;
}
.btn5 .bar {
transition-duration: 0.5s;
position: relative;
height: 8px;
width: 100%;
height: 20px;
display: block;
background-color: white;
}
.bar:nth-of-type(1) {
position: absolute;
top: 0;
left: 0;
}
.bar:nth-of-type(2) {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
}
.bar:nth-of-type(3) {
position: absolute;
bottom: 0;
left: 0;
}
.menu.open .bar:nth-of-type(1) {
transform: rotate(-45deg);
top: 10px;
left: -16px;
}
.menu.open .bar:nth-of-type(3) {
transform: rotate(45deg);
bottom: 10px;
left: -16px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="togg">
<div class="menu btn5" data-menu="5">
<div class="icon">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</div>
</div>

Centering the called blocks relative to the parent block JS

There is a block that, when you click on +, calls up the same block on the side of it. The blocks are connected by a line, when pressed again, another block is called. Below is the diagram and my code. Question: how to make the new blocks (green blocks in the picture) are centered relative to the parent (red blocks in the picture), regardless of the placement of the parent block, as in the diagram?
let distance = 250;
let count = 0;
document.body.addEventListener("click", function (e) {
if (e.target.classList.contains("btn")) {
let div = document.createElement("div"),
father = e.path[5];
count = count + 100;
div.classList = father.classList;
div.style.left = father.offsetLeft + distance + "px";
div.style.top = father.offsetTop + count + "px";
let arrow_width = distance - father.offsetWidth;
div.innerHTML =
father.innerHTML +
`<div class='arrow' style='left: ${-arrow_width}px;width:${arrow_width}px;'><div></div></div>`;
document.body.append(div);
}
});
html {
font-family: FuturaMediumC;
line-height: 1.15;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
article,
aside,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section {
display: block;
}
body {
margin: 0;
font-family: FuturaMediumC;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
text-align: left;
background: #f5f7fa;
}
html,
body {
scrollbar-color: red #1a1a1a;
scrollbar-width: thin;
}
.center {
margin: 0;
position: absolute;
top: 50%;
transform: translate(0%, -50%);
}
body .card {
position: relative;
height: 12rem;
width: 10%;
min-width: 200px;
box-shadow: 0 0 2rem -1rem rgba(0, 0, 0, 0.05);
display: inline-block;
z-index: 99999999 !important;
}
body .card .multi-button {
z-index: 0;
position: absolute;
top: 1.25rem;
left: 1.25rem;
border-radius: 100%;
width: 0rem;
height: 0rem;
transform: translate(-50%, -50%);
transition: 0.25s cubic-bezier(0.25, 0, 0, 1);
}
body .card .multi-button button {
display: grid;
place-items: center;
position: absolute;
width: 2rem;
height: 2rem;
border: none;
border-radius: 100%;
background: #000;
color: #fff;
transform: translate(-50%, -50%);
cursor: pointer;
transition: 0.25s cubic-bezier(0.25, 0, 0, 1);
box-shadow: 0 0 0rem -0.25rem var(--background);
}
body .card .multi-button button:hover {
background: var(--text);
color: var(--background);
box-shadow: 0 0 1rem -0.25rem var(--background);
}
body .card .multi-button button:first-child:nth-last-child(1):nth-child(1),
body .card .multi-button button:first-child:nth-last-child(1) ~ *:nth-child(1) {
left: 25%;
top: 25%;
}
body .card .multi-button button:first-child:nth-last-child(2):nth-child(1),
body .card .multi-button button:first-child:nth-last-child(2) ~ *:nth-child(1) {
left: 37.5%;
top: 18.75%;
}
body .card .multi-button button:first-child:nth-last-child(2):nth-child(2),
body .card .multi-button button:first-child:nth-last-child(2) ~ *:nth-child(2) {
left: 18.75%;
top: 37.5%;
}
body .card .multi-button button:first-child:nth-last-child(3):nth-child(1),
body .card .multi-button button:first-child:nth-last-child(3) ~ *:nth-child(1) {
left: 50%;
top: 15.625%;
}
body .card .multi-button button:first-child:nth-last-child(3):nth-child(2),
body .card .multi-button button:first-child:nth-last-child(3) ~ *:nth-child(2) {
left: 25%;
top: 25%;
}
body .card .multi-button button:first-child:nth-last-child(3):nth-child(3),
body .card .multi-button button:first-child:nth-last-child(3) ~ *:nth-child(3) {
left: 15.625%;
top: 50%;
}
body .card .multi-button button:first-child:nth-last-child(4):nth-child(1),
body .card .multi-button button:first-child:nth-last-child(4) ~ *:nth-child(1) {
left: 62.5%;
top: 18.75%;
}
body .card .multi-button button:first-child:nth-last-child(4):nth-child(2),
body .card .multi-button button:first-child:nth-last-child(4) ~ *:nth-child(2) {
left: 37.5%;
top: 18.75%;
}
body .card .multi-button button:first-child:nth-last-child(4):nth-child(3),
body .card .multi-button button:first-child:nth-last-child(4) ~ *:nth-child(3) {
left: 18.75%;
top: 37.5%;
}
body .card .multi-button button:first-child:nth-last-child(4):nth-child(4),
body .card .multi-button button:first-child:nth-last-child(4) ~ *:nth-child(4) {
left: 18.75%;
top: 62.5%;
}
body .card .cardcontainer {
position: absolute;
width: 100%;
height: 100%;
border-radius: 1rem;
background: var(--background);
color: var(--text);
}
body .card:hover .multi-button,
body .card .multi-button:focus-within {
width: 10rem;
height: 10rem;
}
::-webkit-scrollbar {
width: 8px;
height: 8px;
background-color: #1a1a1a;
}
::-webkit-scrollbar-thumb {
background-color: #000;
border-radius: 1em;
box-shadow: inset 1px 1px 10px #f3faf7;
}
::-webkit-scrollbar-thumb:hover {
background-color: #000;
}
::-webkit-scrollbar-button:vertical:start:decrement {
background-color: #000;
}
::-webkit-scrollbar-button:vertical:end:increment {
background-color: #000;
}
::-webkit-scrollbar-button:horizontal:start:decrement {
background-color: #000;
}
::-webkit-scrollbar-button:horizontal:end:increment {
background-color: #000;
}
.invisible {
display: none !important;
}
.schema {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
.optionsmenu {
bottom: 0;
width: 100%;
height: 25%;
background: #000;
position: absolute;
}
.optionsmenu textarea {
color: #000;
}
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10 {
position: absolute;
}
.col-1-2,
.col-2-3,
.col-3-4,
.col-4-5,
.col-5-6,
.col-6-7,
.col-7-8,
.col-8-9,
.col-9-10 {
position: absolute;
}
.schema2 {
display: none;
}
.blue {
--background: #3f72c3;
--text: white;
}
.purple {
--background: #743da0;
--text: white;
}
.white {
--background: #e3e8e6;
--text: black;
}
.arguments {
z-index: 9999999999;
position: absolute;
width: 100%;
height: 80%;
bottom: 0;
background: transparent;
color: white;
font-weight: bolder;
letter-spacing: 2;
}
#in-kod {
width: 0px;
height: 0px;
}
.add {
z-index: 99999999 !important;
}
.btn {
z-index: 99999999 !important;
position: absolute;
width: 25%;
bottom: 0;
}
.btn2 {
z-index: 99999999 !important;
position: absolute;
width: 25%;
bottom: 0;
left: 50%;
}
.btn3 {
z-index: 99999999 !important;
position: absolute;
width: 25%;
bottom: 0;
right: 0;
}
.in-kod {
display: block;
}
.arrow {
position: absolute;
top: 50%;
height: 2px;
background: #000;
}
<div class='col-6' style="top:50px;left:50px;">
<span class="in-kod">
<div class="card purple">
<div class="multi-button">
<span class="add">
<button class="btn">+</button>
</span>
</div>
<div class="cardcontainer">
<textarea class="arguments"></textarea>
</div>
</div>
</span>
</div>

Here's one possible solution that uses CSS Grid.
I put the parent and the children into separate containers and wrap both of them in a grid. Then center align the grid items. This ensures no matter how many items you have in the children block, it's always center aligned with the parent.
Give the following a shot. Click on any Child to add another child and see for yourself.
NOTE: jQuery is only used to make it interactive. The actual CSS solution doesn't require any JS.
const children = $(".child");
children.on("click", () => {
$(".children").append("<div class='child'>Child</div>");
})
* {
font-family: sans-serif;
}
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
}
.parent, .child {
min-height: 2rem;
padding: 0.25rem;
color: white;
}
.parent {
background: red;
}
.child {
background: green;
cursor: pointer;
}
.child + .child {
margin-top: 1rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="parent">
Parent
</div>
<div class="children">
<div class="child">Child</div>
<div class="child">Child</div>
<div class="child">Child</div>
</div>
</div>

Menu closing after going to the related section from the hamburger menu

Good encodings for everyone,
When I click the relevant place in the hamburger menu, it goes in the background but the menu does not close. How do I make this menu close when I click the relevant place?
Menu related code:
#header .hamburger {
height: 60px;
width: 60px;
display: inline-block;
border: 3px solid white;
border-radius: 50%;
position: relative;
display: flex;
align-items: center;
justify-content: center;
z-index: 100;
cursor: pointer;
transform: scale(.8);
margin-right: 20px;
}
#header .hamburger:after {
position: absolute;
content: '';
height: 100%;
width: 100%;
border-radius: 50%;
border: 3px solid white;
animation: hamburger_puls 1s ease infinite;
}
#header .hamburger .bar {
height: 2px;
width: 30px;
position: relative;
background-color: white;
z-index: -1;
}
#header .hamburger .bar::after,
#header .hamburger .bar::before {
content: '';
position: absolute;
height: 100%;
width: 100%;
left: 0;
background-color: white;
transition: .3s ease;
transition-property: top, bottom;
}
#header .hamburger .bar::after {
top: 8px;
}
#header .hamburger .bar::before {
bottom: 8px;
}
#header .hamburger.active .bar::before {
bottom: 0;
}
#header .hamburger.active .bar::after {
top: 0;
}
Thanks..

I make a side pull-down menu. Does not work

I make a side pull-down menu. Does not work. Please tell me what the problem is
The menu does not open and does not display any errors. I have already tried everything that I could and zero result.
function left_menu(selector){
let menu = $(selector);
let button = menu.find('.left_menu_button');
let links = menu.find('.left_menu_link');
let overlay = menu.find('.left_menu_close_container');
button.on('click', (e) => {
e.preventDefault();
loggleMenu();
});
links.on('click', () => loggleMenu());
overlay.on('click', () => loggleMenu());
function loggleMenu(){
menu.toggleClass('left_menu_main_div_active');
if(menu.hasClass('left_menu_main_div_active')){
$('body').css('overflow', 'hidden');
}else{
$('body').css('overflow', 'visible');
}
}
}
left_menu('.left_menu_main_div');
.left_menu_button{
position: absolute;
left: 10px;
z-index: 30;
width: 50px;
height: 50px;
border-radius: 50%;
}
.left_menu_button:hover .left_menu_span{
background-color: black;
width: 35px;
height: 5px;
transition: 0.4s;
}
.left_menu_button:hover .left_menu_span::after{
background-color: black;
width: 35px;
height: 5px;
transition: 0.4s;
margin-top: 2px;
}
.left_menu_button:hover .left_menu_span::before{
background-color: black;
width: 35px;
height: 5px;
transition: 0.4s;
margin-top: -2px;
}
.left_menu_span,
.left_menu_span::after,
.left_menu_span::before{
position: absolute;
width: 30px;
height: 4px;
background-color: #1f1a1e;
}
.left_menu_span{
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.left_menu_span::before{
content: '';
top: -10px;
}
.left_menu_span::after{
content: '';
top: 10px;
}
.left_menu_main_div_active .left_menu_span{
background-color: transparent;
}
.left_menu_main_div_active .left_menu_span::before{
top: 0;
transform: rotate(45deg);
}
.left_menu_main_div_active .left_menu_span::after{
top: 0;
transform: rotate(-45deg);
}
.left_menu_nav{
padding-top: 55px;
position: fixed;
z-index: 20;
display: flex;
flex-flow: column;
height: 100%;
width: 20%;
background-color: #2a2a2a;
overflow-y: auto;
left: -100%;
}
.left_menu_main_div_active .left_menu_nav{
left: 0;
}
.left_menu_link{
text-align: center;
padding: 10px;
font-size: 12px;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 5px;
font-weight: bold;
color: white;
margin-top: 10px;
}
.left_menu_link:hover{
filter: brightness(0.7);
border: 1px solid black;
border-radius: 3px;
transition: 0.7s;
}
.left_menu_close_container{
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
}
.left_menu_main_div_active .left_menu_close_container{
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="left_menu_container">
<div class="left_menu_main_div">
<a href="#" class="left_menu_button">
<span class="left_menu_span"></span>
</a>
<nav class="left_menu_nav">
Инвентарь
Персонаж
Ремесло
Охота
</nav>
<div class="left_menu_close_container"></div>
</div>
</div>

Shouldn't function loggleMenu( be function ToggleMenu(?
Also where are you loading the script in the html?
Pop a few console.Log() calls into the script and see where it gets up to or fails.

close div with animation

When I press the X, I able to open the searchbox with animation. I also able to close the searchbox when I click on the X inside the searchbox but without animation. I tried to change the animation-name in Javascript, but it has no effect. Anyone can help me with the code, if possible I try not to use jQuery. Thanks in advance
<!DOCTYPE html>
<style type="text/css">
#keyframes open {
0% {
width: 0;
}
100% {
width: 100%;
}
}
#searchbox {
display: none;
position: absolute;
background-color: pink;
width: 100%;
height: 35px;
border-radius: 25px;
right: 0;
top: 50%;
transform: translate(0, -50%);
overflow: hidden;
animation-duration: 1s;
float: right;
animation-name: open;
}
#searchbox img {
width: 20px;
height: 20px;
position: absolute;
right: 10%;
top: 50%;
margin: 0;
padding: 0;
cursor: pointer;
transform: translate(50%, -50%);
}
#searchbox input {
max-width: 185px;
font-size: 20px;
background-color:rgba(0, 0, 0, 0);
color:white;
border: none;
outline:none;
position: absolute;
left: 10%;
top: 15%;
color: black;
opacity: 1;
}
</style>
</head>
<body>
<script type="text/javascript">
function openSearchBox() {
var searchbox=document.getElementById("searchbox");
searchbox.style.display = "block";
searchbox.style.width = "100%";
}
function closeSearchBox() {
var searchbox=document.getElementById("searchbox");
searchbox.style.display = "none";
searchbox.style.width = "0";
}
</script>
<h1 onclick="openSearchBox()">X</h1>
<div id="searchbox">
<img onclick="closeSearchBox()" src="https://image.flaticon.com/icons/svg/70/70460.svg">
<form>
<input type="text">
</form>
</div>
</body>
</html>

Try to use two CSS #keyframes Rule. One for opening and other for closing the element. Also remove the width, display and animation-name from #searchbox style list.
Do this:
function openSearchBox() {
var searchbox = document.getElementById( 'searchbox' );
searchbox.style.animationName = 'open';
searchbox.style.width = '100%'
}
function closeSearchBox() {
var searchbox = document.getElementById( 'searchbox' );
searchbox.style.animationName = 'close';
searchbox.style.width = '0'
}
#keyframes open {
0% { width: 0 }
100% { width: 100% }
}
#keyframes close {
0% { width: 100% }
100% { width: 0 }
}
h1 {
cursor: pointer
}
#searchbox {
position: absolute;
background-color: pink;
height: 35px;
border-radius: 25px;
right: 0;
top: 50%;
transform: translate(0, -50%);
overflow: hidden;
animation-duration: 1s;
float: right
}
#searchbox img {
width: 20px;
height: 20px;
position: absolute;
right: 10%;
top: 50%;
margin: 0;
padding: 0;
cursor: pointer;
transform: translate(50%, -50%)
}
#searchbox input {
max-width: 185px;
font-size: 20px;
background-color: rgba(0, 0, 0, 0);
color: white;
border: none;
outline: none;
position: absolute;
left: 10%;
top: 15%;
color: black;
opacity: 1
}
<h1 onclick="openSearchBox()">X</h1>
<div id="searchbox">
<img onclick="closeSearchBox()" src="https://image.flaticon.com/icons/svg/70/70460.svg">
<form>
<input type="text">
</form>
</div>

try to use transition:width 1s; in #searchbox 's css
#searchbox {
display: none;
position: absolute;
background-color: pink;
width: 100%;
height: 35px;
border-radius: 25px;
right: 0;
top: 50%;
transform: translate(0, -50%);
overflow: hidden;
/* animation-duration: 1s;*/
float: right;
/*animation-name: open;*/
transition:width 1s;
}

You are animating a element that has a display: none property. This property can't be animated in css. A solution can be to remove the display none property and find another solution like: overflow: hidden and width: 0.
I also recommend doing style changes in css only and not in JavaScript, this will speed up your website. By just adding a simple class you have more controll in your css and your JavaScript files.