How to move my navbar back (I translate it on css) - javascript

I am building my navbar, i wrote the code and now i want to click on my burger and open the navbar. The thing is that I don't know how to do it, I've been trying in javascript but I can't find a solution.
const navBar = () => {
const burger = document.querySelector(".burger");
const nav = document.querySelector(".nav-links");
burger.addEventListener("click", () => {
nav.classList.add(".nav-open");
});
};
navBar();
.nav-open {
position: absolute;
width: 100%;
top: 0;
left: 0;
height: 24vh;
background: #ffafaf;
display: flex;
align-items: center;
justify-content: space-around;
transform: translate(-100%);
}
<nav>
<div class="logo">
<h1>iCosmetics</h1>
</div>
<div class="burger">
<svg
class="menu"
width="30"
height="16"
viewBox="0 0 30 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<line
x1="15"
y1="15"
x2="30"
y2="15"
stroke="black"
stroke-width="2"
/>
<line x1="10" y1="8" x2="30" y2="8" stroke="black" stroke-width="2" />
<line y1="1" x2="30" y2="1" stroke="black" stroke-width="2" />
</svg>
</div>
<div class="nav-open">
<div class="contact">
<h2>Contact</h2>
<p>3108248125</p>
</div>
<div class="social">
<h2>Social</h2>
<i class="fab fa-instagram"></i>
<i class="fab fa-twitter"></i>
</div>
</div>
</nav>
It is hidden by CSS and is supposed to be shown by JavaScript.
The JavaScript code doesn't work.
This is how it looks closed:
This is how it's supposed to look when opened:

Related

Add a tick selected css

.showcase-components-colorlist color {
border: 2px solid transparent;
margin: 1px;
padding: 2px;
border-radius: 50%;
cursor: pointer;
}
<div class="showcase-components-colorlist color showcase-components-colorlist color-- active">
<svg width="40" height="40">
<circle cx="20" cy="20" r="19" fill="#c5145d" stroke="#fff" stroke-width="1"></circle>
</svg>
</div>
<div class="showcase-components-colorlist color">
<svg width="40" height="40">
<circle cx="20" cy="20" r="19" fill="#db2586" stroke="#fff" stroke-width="1"></circle>
</svg>
</div>
How to add a check mark to one of the circles as generated by the code above.

One way to do this is through pseudo content. You need to give the element which you'll set the pseudo content a relative container. Then, you create your pseudo content (in this case, a check mark). The positioning will be relative to the parent element's dimensions.
.showcase-components-colorlist {
border: 2px solid transparent;
margin: 1px;
padding: 2px;
border-radius: 50%;
cursor: pointer;
position: relative;
}
.showcase-components-colorlist.selected::before {
content: '✅';
position: absolute;
left: 11px;
top: 9px;
}
<div class="showcase-components-colorlist color showcase-components-colorlist color-- active">
<svg width="40" height="40"><circle cx="20" cy="20" r="19" fill="#c5145d" stroke="#fff" stroke-width="1">
</circle>
</svg>
</div>
<div class="showcase-components-colorlist selected">
<svg width="40" height="40">
<circle cx="20" cy="20" r="19" fill="#db2586" stroke="#fff" stroke-width="1"></circle>
</svg>
</div>

Create your own <svg-option> Native JavaScript Web Component.
<svg-option></svg-option>
<svg-option fill="red" selected></svg-option>
<svg-option fill="rebeccapurple" selected-fill="yellow" selected></svg-option>
creates:
<script>
customElements.define("svg-option",class extends HTMLElement{
connectedCallback(){
this.style.display = "inline-block";
this.innerHTML=`<svg viewBox="0 0 50 50">
<circle cx="50%" cy="50%" r="49%" fill="${this.getAttribute("fill") || "green"}"/>
<circle cx="50%" cy="50%" r="30%" fill="${this.getAttribute("selected-fill") || "beige"}" visibility="hidden"/>
</svg>`;
this.select();
this.onclick = (evt) => this.toggle();
}
select(state = this.hasAttribute("selected")) {
this.querySelector("circle:nth-child(2)").setAttribute("visibility" , state ? "visible" :"hidden");
}
toggle(){
this.select( this.toggleAttribute("selected") );
}
})
</script>
<style>
svg-option {
--svg-option-size:180px;
width: var(--svg-option-size);
height: var(--svg-option-size);
cursor: pointer;
}
svg-option[selected]{
background:lightgreen;
}
svg-option:not([selected]){
background:pink;
}
</style>
<svg-option></svg-option>
<svg-option fill="red" selected></svg-option>
<svg-option fill="rebeccapurple" selected-fill="yellow" selected></svg-option>

align text and images inside divs side by side

So I've made this ul with a list of li in. In each li, are there some div with text and images in. I have a problem where my text and images aren't in a line anymore, and I can't seem to fix it.
Just to show my problem I've set style="width: 100px;", because I'm trying to get something like this, even though this is on:
/* Weather icon on dashboard */
.element_weather {
min-height: 30px !important;
min-width: 30px !important;
}
.container_weather {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.elements_weather {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.white {
fill: #edf8ff
}
.gray {
fill: #cecece
}
.yellow {
fill: #fabb33
}
.blue {
fill: #83bfff
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<ul id="tog_success-123" class="list-group list-group-flush rounded" style="width: 100px;">
<li id="1" class="list-group-item list-group-item-success">
<a class="text-dark" href="TestResults?blablabla" target="_blank" >
<div class="row justify-content-between">
<div class="col-s-6 text-justify">
test - 12345
</div>
<div class="col-s-6 d-flex ml-auto mr-0">
<div class="col-s-3 mt-1 ml-1 mr-1">
<img src="https://camo.githubusercontent.com/4f70df5863fcc35898abfdc8a60628bb6aabf0fea2225cb9c63d3641c48711ef/68747470733a2f2f61746c61737369616e2e67616c6c65727963646e2e76736173736574732e696f2f657874656e73696f6e732f61746c61737369616e2f61746c6173636f64652f312e342e302f313535383132333132313437352f4d6963726f736f66742e56697375616c53747564696f2e53657276696365732e49636f6e732e44656661756c74" alt="Girl in a jacket" width="14" height="14">
</div>
<div class="col-s-3">
<div id="svg_dashboard_weather" class="element_weather" title="5/5">
<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 44.9 44.9" style="enable-background:new 0 0 44.9 44.9;" xml:space="preserve" height="25px" width="25px">
<g id="Sun">
<circle id="XMLID_61_" class="yellow" cx="22.4" cy="22.6" r="11"/>
<g>
<path id="XMLID_60_" class="yellow" d="M22.6,8.1h-0.3c-0.3,0-0.6-0.3-0.6-0.6v-7c0-0.3,0.3-0.6,0.6-0.6l0.3,0c0.3,0,0.6,0.3,0.6,0.6 v7C23.2,7.8,22.9,8.1,22.6,8.1z"/>
<path id="XMLID_59_" class="yellow" d="M22.6,36.8h-0.3c-0.3,0-0.6,0.3-0.6,0.6v7c0,0.3,0.3,0.6,0.6,0.6h0.3c0.3,0,0.6-0.3,0.6-0.6v-7 C23.2,37,22.9,36.8,22.6,36.8z"/>
<path id="XMLID_58_" class="yellow" d="M8.1,22.3v0.3c0,0.3-0.3,0.6-0.6,0.6h-7c-0.3,0-0.6-0.3-0.6-0.6l0-0.3c0-0.3,0.3-0.6,0.6-0.6h7 C7.8,21.7,8.1,21.9,8.1,22.3z"/>
<path id="XMLID_57_" class="yellow" d="M36.8,22.3v0.3c0,0.3,0.3,0.6,0.6,0.6h7c0.3,0,0.6-0.3,0.6-0.6v-0.3c0-0.3-0.3-0.6-0.6-0.6h-7 C37,21.7,36.8,21.9,36.8,22.3z"/>
<path id="XMLID_56_" class="yellow" d="M11.4,31.6l0.2,0.3c0.2,0.2,0.2,0.6-0.1,0.8l-5.3,4.5c-0.2,0.2-0.6,0.2-0.8-0.1l-0.2-0.3 c-0.2-0.2-0.2-0.6,0.1-0.8l5.3-4.5C10.9,31.4,11.2,31.4,11.4,31.6z"/>
<path id="XMLID_55_" class="yellow" d="M33.2,13l0.2,0.3c0.2,0.2,0.6,0.3,0.8,0.1l5.3-4.5c0.2-0.2,0.3-0.6,0.1-0.8l-0.2-0.3 c-0.2-0.2-0.6-0.3-0.8-0.1l-5.3,4.5C33,12.4,33,12.7,33.2,13z"/>
<path id="XMLID_54_" class="yellow" d="M11.4,13.2l0.2-0.3c0.2-0.2,0.2-0.6-0.1-0.8L6.3,7.6C6.1,7.4,5.7,7.5,5.5,7.7L5.3,7.9 C5.1,8.2,5.1,8.5,5.4,8.7l5.3,4.5C10.9,13.5,11.2,13.5,11.4,13.2z"/>
<path id="XMLID_53_" class="yellow" d="M33.2,31.9l0.2-0.3c0.2-0.2,0.6-0.3,0.8-0.1l5.3,4.5c0.2,0.2,0.3,0.6,0.1,0.8l-0.2,0.3 c-0.2,0.2-0.6,0.3-0.8,0.1l-5.3-4.5C33,32.5,33,32.1,33.2,31.9z"/>
<animate attributeType="CSS"
attributeName="opacity"
attributeType="XML"
dur="0.5s"
keyTimes="0;0.5;1"
repeatCount="indefinite"
values="1;0.6;1"
calcMode="linear"/>
</g>
</g>
</svg>
</div>
</div>
</div>
</div>
</a>
</li>
</ul>
Edit
When my li column is getting two small in width, then the icons row jumps under, and it shouldn't.

Currently, your .row gets applied a flex-wrap:wrap that comes from bootstrap.css.
You can overwrite it with flex-wrap: nowrap :
/* Weather icon on dashboard */
.element_weather {
min-height: 30px !important;
min-width: 30px !important;
}
.container_weather {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.elements_weather {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.white {
fill: #edf8ff
}
.gray {
fill: #cecece
}
.yellow {
fill: #fabb33
}
.blue {
fill: #83bfff
}
.row {
border : blue dashed 1px;
flex-wrap : nowrap!important;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<ul id="tog_success-123" class="list-group list-group-flush rounded" style="width: 100px;">
<li id="1" class="list-group-item list-group-item-success">
<a class="text-dark" href="TestResults?blablabla" target="_blank" >
<div class="row justify-content-between">
<div class="col-s-6 text-justify">
test - 12345
</div>
<div class="col-s-6 d-flex ml-auto mr-0">
<div class="col-s-3 mt-1 ml-1 mr-1">
<img src="https://camo.githubusercontent.com/4f70df5863fcc35898abfdc8a60628bb6aabf0fea2225cb9c63d3641c48711ef/68747470733a2f2f61746c61737369616e2e67616c6c65727963646e2e76736173736574732e696f2f657874656e73696f6e732f61746c61737369616e2f61746c6173636f64652f312e342e302f313535383132333132313437352f4d6963726f736f66742e56697375616c53747564696f2e53657276696365732e49636f6e732e44656661756c74" alt="Girl in a jacket" width="14" height="14">
</div>
<div class="col-s-3">
<div id="svg_dashboard_weather" class="element_weather" title="5/5">
<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 44.9 44.9" style="enable-background:new 0 0 44.9 44.9;" xml:space="preserve" height="25px" width="25px">
<g id="Sun">
<circle id="XMLID_61_" class="yellow" cx="22.4" cy="22.6" r="11"/>
<g>
<path id="XMLID_60_" class="yellow" d="M22.6,8.1h-0.3c-0.3,0-0.6-0.3-0.6-0.6v-7c0-0.3,0.3-0.6,0.6-0.6l0.3,0c0.3,0,0.6,0.3,0.6,0.6 v7C23.2,7.8,22.9,8.1,22.6,8.1z"/>
<path id="XMLID_59_" class="yellow" d="M22.6,36.8h-0.3c-0.3,0-0.6,0.3-0.6,0.6v7c0,0.3,0.3,0.6,0.6,0.6h0.3c0.3,0,0.6-0.3,0.6-0.6v-7 C23.2,37,22.9,36.8,22.6,36.8z"/>
<path id="XMLID_58_" class="yellow" d="M8.1,22.3v0.3c0,0.3-0.3,0.6-0.6,0.6h-7c-0.3,0-0.6-0.3-0.6-0.6l0-0.3c0-0.3,0.3-0.6,0.6-0.6h7 C7.8,21.7,8.1,21.9,8.1,22.3z"/>
<path id="XMLID_57_" class="yellow" d="M36.8,22.3v0.3c0,0.3,0.3,0.6,0.6,0.6h7c0.3,0,0.6-0.3,0.6-0.6v-0.3c0-0.3-0.3-0.6-0.6-0.6h-7 C37,21.7,36.8,21.9,36.8,22.3z"/>
<path id="XMLID_56_" class="yellow" d="M11.4,31.6l0.2,0.3c0.2,0.2,0.2,0.6-0.1,0.8l-5.3,4.5c-0.2,0.2-0.6,0.2-0.8-0.1l-0.2-0.3 c-0.2-0.2-0.2-0.6,0.1-0.8l5.3-4.5C10.9,31.4,11.2,31.4,11.4,31.6z"/>
<path id="XMLID_55_" class="yellow" d="M33.2,13l0.2,0.3c0.2,0.2,0.6,0.3,0.8,0.1l5.3-4.5c0.2-0.2,0.3-0.6,0.1-0.8l-0.2-0.3 c-0.2-0.2-0.6-0.3-0.8-0.1l-5.3,4.5C33,12.4,33,12.7,33.2,13z"/>
<path id="XMLID_54_" class="yellow" d="M11.4,13.2l0.2-0.3c0.2-0.2,0.2-0.6-0.1-0.8L6.3,7.6C6.1,7.4,5.7,7.5,5.5,7.7L5.3,7.9 C5.1,8.2,5.1,8.5,5.4,8.7l5.3,4.5C10.9,13.5,11.2,13.5,11.4,13.2z"/>
<path id="XMLID_53_" class="yellow" d="M33.2,31.9l0.2-0.3c0.2-0.2,0.6-0.3,0.8-0.1l5.3,4.5c0.2,0.2,0.3,0.6,0.1,0.8l-0.2,0.3 c-0.2,0.2-0.6,0.3-0.8,0.1l-5.3-4.5C33,32.5,33,32.1,33.2,31.9z"/>
<animate attributeType="CSS"
attributeName="opacity"
attributeType="XML"
dur="0.5s"
keyTimes="0;0.5;1"
repeatCount="indefinite"
values="1;0.6;1"
calcMode="linear"/>
</g>
</g>
</svg>
</div>
</div>
</div>
</div>
</a>
</li>
</ul>

row changed to col, and d-flex added
/* Weather icon on dashboard */
.element_weather {
min-height: 30px !important;
min-width: 30px !important;
}
.container_weather {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.elements_weather {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.white {
fill: #edf8ff
}
.gray {
fill: #cecece
}
.yellow {
fill: #fabb33
}
.blue {
fill: #83bfff
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<ul id="tog_success-123" class="list-group list-group-flush rounded" style="width: 100px;">
<li id="1" class="list-group-item list-group-item-success">
<a class="text-dark" href="TestResults?blablabla" target="_blank" >
<div class="col d-flex justify-content-between">
<div class="col-s-6 text-justify">
test - 12345
</div>
<div class="col-s-6 d-flex ml-auto mr-0">
<div class="col-s-3 mt-1 ml-1 mr-1">
<img src="https://camo.githubusercontent.com/4f70df5863fcc35898abfdc8a60628bb6aabf0fea2225cb9c63d3641c48711ef/68747470733a2f2f61746c61737369616e2e67616c6c65727963646e2e76736173736574732e696f2f657874656e73696f6e732f61746c61737369616e2f61746c6173636f64652f312e342e302f313535383132333132313437352f4d6963726f736f66742e56697375616c53747564696f2e53657276696365732e49636f6e732e44656661756c74" alt="Girl in a jacket" width="14" height="14">
</div>
<div class="col-s-3">
<div id="svg_dashboard_weather" class="element_weather" title="5/5">
<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 44.9 44.9" style="enable-background:new 0 0 44.9 44.9;" xml:space="preserve" height="25px" width="25px">
<g id="Sun">
<circle id="XMLID_61_" class="yellow" cx="22.4" cy="22.6" r="11"/>
<g>
<path id="XMLID_60_" class="yellow" d="M22.6,8.1h-0.3c-0.3,0-0.6-0.3-0.6-0.6v-7c0-0.3,0.3-0.6,0.6-0.6l0.3,0c0.3,0,0.6,0.3,0.6,0.6 v7C23.2,7.8,22.9,8.1,22.6,8.1z"/>
<path id="XMLID_59_" class="yellow" d="M22.6,36.8h-0.3c-0.3,0-0.6,0.3-0.6,0.6v7c0,0.3,0.3,0.6,0.6,0.6h0.3c0.3,0,0.6-0.3,0.6-0.6v-7 C23.2,37,22.9,36.8,22.6,36.8z"/>
<path id="XMLID_58_" class="yellow" d="M8.1,22.3v0.3c0,0.3-0.3,0.6-0.6,0.6h-7c-0.3,0-0.6-0.3-0.6-0.6l0-0.3c0-0.3,0.3-0.6,0.6-0.6h7 C7.8,21.7,8.1,21.9,8.1,22.3z"/>
<path id="XMLID_57_" class="yellow" d="M36.8,22.3v0.3c0,0.3,0.3,0.6,0.6,0.6h7c0.3,0,0.6-0.3,0.6-0.6v-0.3c0-0.3-0.3-0.6-0.6-0.6h-7 C37,21.7,36.8,21.9,36.8,22.3z"/>
<path id="XMLID_56_" class="yellow" d="M11.4,31.6l0.2,0.3c0.2,0.2,0.2,0.6-0.1,0.8l-5.3,4.5c-0.2,0.2-0.6,0.2-0.8-0.1l-0.2-0.3 c-0.2-0.2-0.2-0.6,0.1-0.8l5.3-4.5C10.9,31.4,11.2,31.4,11.4,31.6z"/>
<path id="XMLID_55_" class="yellow" d="M33.2,13l0.2,0.3c0.2,0.2,0.6,0.3,0.8,0.1l5.3-4.5c0.2-0.2,0.3-0.6,0.1-0.8l-0.2-0.3 c-0.2-0.2-0.6-0.3-0.8-0.1l-5.3,4.5C33,12.4,33,12.7,33.2,13z"/>
<path id="XMLID_54_" class="yellow" d="M11.4,13.2l0.2-0.3c0.2-0.2,0.2-0.6-0.1-0.8L6.3,7.6C6.1,7.4,5.7,7.5,5.5,7.7L5.3,7.9 C5.1,8.2,5.1,8.5,5.4,8.7l5.3,4.5C10.9,13.5,11.2,13.5,11.4,13.2z"/>
<path id="XMLID_53_" class="yellow" d="M33.2,31.9l0.2-0.3c0.2-0.2,0.6-0.3,0.8-0.1l5.3,4.5c0.2,0.2,0.3,0.6,0.1,0.8l-0.2,0.3 c-0.2,0.2-0.6,0.3-0.8,0.1l-5.3-4.5C33,32.5,33,32.1,33.2,31.9z"/>
<animate attributeType="CSS"
attributeName="opacity"
attributeType="XML"
dur="0.5s"
keyTimes="0;0.5;1"
repeatCount="indefinite"
values="1;0.6;1"
calcMode="linear"/>
</g>
</g>
</svg>
</div>
</div>
</div>
</div>
</a>
</li>
</ul>

scroll bar with horizontal scroll sticking in the body

I'm asking you for some help because I'm struggling a bit with CSS/JS, it's been a long time since I've practiced.
Basically I'm trying to make a section with a "sticky" title that scrolls horizontally with a block just below it that also stays sticky until I finish making this horizontal scrolling.
I managed to set up the structure but I think I need to add some more JS or modify what has been done. Currently I have 2 scrollbars I would like to have only one but that acts like I have two.
I put you the JSfiddle it will be more clear:
https://jsfiddle.net/ps4b10ro
const spaceHolder = document.querySelector('.space-holder');
const horizontal = document.querySelector('.horizontal');
spaceHolder.style.height = `${calcDynamicHeight(horizontal)}px`;
function calcDynamicHeight(ref) {
const vw = window.innerWidth;
const vh = window.innerHeight;
const objectWidth = ref.scrollWidth;
return objectWidth - vw + vh + 150; // 150 is the padding (in pixels) desired on the right side of the .cards container. This can be set to whatever your styles dictate
}
window.addEventListener('scroll', () => {
const sticky = document.querySelector('.sticky');
horizontal.style.transform = `translateX(-${sticky.offsetTop}px)`;
});
window.addEventListener('resize', () => {
spaceHolder.style.height = `${calcDynamicHeight(horizontal)}px`;
});
var swiper = new Swiper('.swiper-container', {
direction: 'vertical',
mousewheelControl: true,
slidesPerView: 1,
// freeMode: true,
// freeModeSticky: true
});
*,
*::before,
*::after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
font-size: 100%;
}
body {
margin: 0;
font-family: sans-serif;
}
.container {
position: relative;
width: 100%;
min-height: 100vh;
}
.space-holder {
background-color: #111;
position: relative;
width: 100%;
}
.sticky {
height: 100vh;
position: sticky;
top: 0;
height: 100vh;
width: 100%;
overflow-x: hidden;
}
.horizontal {
position: absolute;
height: 100%;
will-change: transform;
}
.cards {
position: relative;
height: fit-content;
padding: 0 0 0 150px;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;
}
.horizontalText {
color: #fff;
font-size: 4em;
padding: 0 3vw 0 3vw;
width: 53vw;
height: fit-content;
}
.etsy {
background-color: #fff;
margin-top: 22vh;
height: 400px;
position: sticky;
bottom: 350vh;
height: 100%;
overflow: hidden;
}
.test {
background-color: blanchedalmond;
height: 1000px;
}
<div class="test"></div>
<div class="module"></div>
<section class="container">
<div class="space-holder">
<div class="sticky">
<div class="horizontal">
<section role="feed" class="cards">
<h2 class="horizontalText">Discovers our products</h2>
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="24" cy="24" r="24" fill="#EDD337"/>
</svg>
<h2 class="horizontalText">Discovers our universe</h2>
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="24" cy="24" r="24" fill="#EDD337"/>
</svg>
<h2 class="horizontalText">Discovers our products</h2>
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="24" cy="24" r="24" fill="#EDD337"/>
</svg>
<h2 class="horizontalText">Discovers our universe</h2>
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="24" cy="24" r="24" fill="#EDD337"/>
</svg>
<h2 class="horizontalText">Discovers our products</h2>
</section>
</div>
<section class="etsy sticky">
<section id="emporter container" class="blanc hori">
<div class="wrap">
<div class="defilement">
<a href="/articles/damien-rice">
<div class="cover" style="background:url(https://cdn.blogotheque.net/blogotheque/2019/11/18/fd9c7d252ab9de5569c9fcc96aabaaff.jpg) 50% 50%">
<div><img src="/packs/media/img/play-9e06fa89856b9d33899e081448a066f5.svg" alt=""></div>
</div>
<h3>Damien Rice</h3>
<p>Soirée de Poche #54</p>
</a>
<a href="/articles/benjamin-booker-25870">
<div class="cover" style="background:url(https://cdn.blogotheque.net/blogotheque/2020/01/02/27cd1d46f726bf3e4c15a79ad42e8e0a.png) 50% 50%">
<div><img src="/packs/media/img/play-9e06fa89856b9d33899e081448a066f5.svg" alt=""></div>
</div>
<h3>Benjamin Booker</h3>
<p>Soirée de Poche #53</p>
</a>
<a href="/articles/shame">
<div class="cover" style="background:url(https://cdn.blogotheque.net/blogotheque/2019/11/18/ec085ebc867db30fc41f8be3b247ec37.jpg) 50% 50%">
<div><img src="/packs/media/img/play-9e06fa89856b9d33899e081448a066f5.svg" alt=""></div>
</div>
<h3>Shame</h3>
<p>Soirée de Poche #52</p>
</a>
<a href="/articles/hamilton-leithauser">
<div class="cover" style="background:url(https://cdn.blogotheque.net/blogotheque/2019/12/05/b56f9fbe55b912ad931376338a655440.png) 50% 50%">
<div><img src="/packs/media/img/play-9e06fa89856b9d33899e081448a066f5.svg" alt=""></div>
</div>
<h3>Hamilton Leithauser</h3>
<p>Soirée de Poche #51</p>
</a>
</div>
<div class="navigation">
<!-- <img class="pointer gauche bloque" src="img/agaucheN.svg" alt="" /> -->
<svg class="pointer gauche bloque" height="40" viewBox="0 0 40 40" width="40" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke="#111" stroke-width="2" transform="matrix(1 0 0 -1 0 40)"><circle cx="20" cy="20" r="19"></circle><path d="m22.3823529 14-6.3823529 6.3823529 6.3823529 6.4852942"></path></g></svg>
<!-- <img class="pointer droite" src="img/agaucheN.svg" alt="" /> -->
<svg class="pointer droite" height="40" viewBox="0 0 40 40" width="40" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke="#111" stroke-width="2" transform="matrix(1 0 0 -1 0 40)"><circle cx="20" cy="20" r="19"></circle><path d="m22.3823529 14-6.3823529 6.3823529 6.3823529 6.4852942"></path></g></svg>
<div class="progress">
<div style="transform: matrix(0.2, 0, 0, 1, 0, 0);"></div>
</div>
</div>
</div>
</section>
</section>
<div class="test">
</div>
Thank you in advance for your help and or your advice

burger doesn't work after toggling the navbar

I set opacity 0 to enable my
navbar navbar javascript
This is how it looks in css:
.nav-open {
position: absolute;
width: 100%;
top: 0;
left: 0;
height: 24vh;
background: #ffafaf;
display: flex;
align-items: center;
justify-content: space-around;
opacity: 0;
transition: 1s ease-in-out;
}
This is the javascript code:
const navBar = () => {
const burger = document.querySelector(".burger");
const nav = document.querySelector(".nav-open");
burger.addEventListener("click", () => {
nav.style.opacity = 1;
});
};
navBar();
So, when I toggle it, it looks like this.
The thing is that i can't toggle it back (I toggle it but it does not toggle back) how can I fix it?
Here is the HTML code in case you need it:
<nav>
<div class="logo">
<h1>iCosmetics</h1>
</div>
<div class="burger">
<svg
class="menu"
width="30"
height="16"
viewBox="0 0 30 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<line
x1="15"
y1="15"
x2="30"
y2="15"
stroke="black"
stroke-width="2"
/>
<line x1="10" y1="8" x2="30" y2="8" stroke="black" stroke-width="2" />
<line y1="1" x2="30" y2="1" stroke="black" stroke-width="2" />
</svg>
</div>
<div class="nav-open">
<div class="contact">
<h2>Contact</h2>
<p>3108248125</p>
</div>
<div class="social">
<h2>Social</h2>
<i class="fab fa-instagram"></i>
<i class="fab fa-twitter"></i>
</div>
</div>
</nav>

You can add sub-class for actually showing the content and toggle this class on click:
document.querySelectorAll(".burger")[0].addEventListener("click", () => {
document.querySelectorAll(".nav-open")[0].classList.toggle('isOpen');
});
.nav-open {
position: absolute;
width: 100%;
top: 0;
left: 0;
height: 24vh;
background: #ffafaf;
display: flex;
align-items: center;
justify-content: space-around;
opacity: 0;
transition: 1s ease-in-out;
}
.nav-open.isOpen { opacity: 1;}
<nav>
<div class="logo">
<h1>iCosmetics</h1>
</div>
<div class="burger">
<svg class="menu" width="30" height="16" viewBox="0 0 30 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<line x1="15" y1="15" x2="30" y2="15" stroke="black" stroke-width="2" />
<line x1="10" y1="8" x2="30" y2="8" stroke="black" stroke-width="2" />
<line y1="1" x2="30" y2="1" stroke="black" stroke-width="2" />
</svg>
</div>
<div class="nav-open">
<div class="contact">
<h2>Contact</h2>
<p>3108248125</p>
</div>
<div class="social">
<h2>Social</h2>
<i class="fab fa-instagram"></i>
<i class="fab fa-twitter"></i>
</div>
</div>
</nav>
You can learn much more here.
Enjoy code!

WordPress - Onclick functions not working in <a> tag

I am creating a sliding sidebar menu for my WordPress site using only HTML/CSS/JavaScript. This is from a tutorial from YouTube and followed everything exactly. The issue is that when I click on the buttons, the error reads "Uncaught ReferenceError: openSlideMenu is not defined
at HTMLAnchorElement.onclick". I get the same error for the other button. See code below.
HTML (blog.php)
<nav class="navbar">
<div class="side-menu">
<span class="open-slide">
<a href="#" onclick="openSlideMenu()">
<svg width="30" height="30">
<path d="M0,5 30,5" stroke="#000" stroke-width="5" />
<path d="M0,14 30,14" stroke="#000" stroke-width="5" />
<path d="M0,23 30,23" stroke="#000" stroke-width="5" />
</svg>
</a>
</span>
</div>
</nav>
<div id="side-menu" class="side-nav">
×
<?php get_sidebar() ?>
</div>
<script type="text/javascript">
jQuery(document).ready(function(){
function openSlideMenu() {
document.getElementById('side-menu').style.width = '250px';
}
function closeSlideMenu() {
document.getElementById('side-menu').style.width = '0';
}
});
</script>
CSS
.side-nav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top:0;
left:0;
background-color: #111;
opacity: 0.9;
overflow-x: hidden;
padding-top: 60px;
transition: 0.5s;
}
.side-nav a {
padding: 10px 10px 10px 30px;
text-decoration: none;
font-size:22px;
color: #ccc;
display: block;
transition: 0.3s;
}
.side-nav a:hover {
color: #fff;
}
.side-nav .btn-close {
position: absolute;
top: 0;
right: 22px;
font-size: 36px;
margin-left: 50px;
}
The tutorial seemed easy and simple, it should have worked without issues. I wonder could it be something WordPress related? I did all I could.

Since you are using jQuery, why don't you utilize it completely?
For more information on what could be the issue, I suggest you take a look at MarsAndBlack's comment
Meanwhile, I made some changes to your code to make use of jQuery fully.
Here I have added ids to both buttons. (Not necessary, but used for easy detection).
<nav class="navbar">
<div class="side-menu">
<span class="open-slide">
<a href="#" id="openmenu">
<svg width="30" height="30">
<path d="M0,5 30,5" stroke="#000" stroke-width="5" />
<path d="M0,14 30,14" stroke="#000" stroke-width="5" />
<path d="M0,23 30,23" stroke="#000" stroke-width="5" />
</svg>
</a>
</span>
</div>
</nav>
<div id="side-menu" class="side-nav">
×
</div>
Also changed JS to use jQuery for click function instead of vanilla JS,
jQuery(document).ready(function(){
jQuery('#openmenu').click(function() {
jQuery('#side-menu').css('width','250px');
});
jQuery('#closemenu').click(function() {
jQuery('#side-menu').css('width','0px');
});
});
Here is a working example

Categories

Resources