CSS background position center - javascript

How can I put the following image in the center of the page? I tried background-position = center but it appears at the top bottom. Help!
$(document).ready(function(){
$('.question-out').hide();
$('.plus-drop-down').hide();
$('i.fa-bars').on('click', function(){
$('.side-menu').css({
'transform': 'translateX(0px)',
'box-shadow': '5px 5px 5px #ddd'
});
});
$('.plus').on('click', function(){
$(this).toggleClass('active');
$('.plus-drop-down').toggle().css({
'animation': 'hello .3s'
});
$('.join').toggle();
});
$('i.fa-th').on('click', function(){
$(this).toggleClass('active');
});
$('.account').on('click', function(){
$(this).toggleClass('active');
});
$('.question-mark').on('click', function(){
$(this).toggleClass('active');
$('.question-out').toggle().css({
'animation': 'pop .3s'
});
});
$('.username').html(
'Gan Yi Ming'
).css({
'color': '#d6d6d6',
'font-size': '12px'
});
$('.email').html(
'ganyiming0609810#gmail.com'
).css({
'color': '#d6d6d6',
'font-size': '12px'
});
});
$(document).mouseup(function (e) {
const container = $(".side-menu");
const ae = $('.plus');
const re = $('.question-mark');
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) {
$('.side-menu').css({
'transform': 'translateX(-300px)',
'box-shadow': 'none'
});
}
if (!re.is(e.target)
&& re.has(e.target).length === 0){
$('.question-out').hide();
$('.question-mark').removeClass('active');
}
if (!ae.is(e.target)
&& ae.has(e.target).length === 0){
$('.plus-drop-down').hide();
$('.plus').removeClass('active');
}
});
*{
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
font-family: sans-serif;
color: black;
transition: .3s;
}
body{
background-image: url('background.png');
background-repeat: no-repeat;
background-position: center center;
background-size: 30%;
}
.nav_bar{
border-bottom: 1px solid #dddddd;
display: flex;
justify-content: space-between;
line-height: 65px;
position: fixed;
width: 100%;
}
.nav_bar *{
display: flex;
align-items: center;
}
i.fa-bars{
font-size: 20px;
color: #535353;
padding: 10px;
border-radius: 50%;
margin: 0 0px 0 15px;
}
i.fa-bars:hover{
background-color: #f8f8f8;
}
.fa-bars.active{
background-color: #d6d6d6dd;
}
.fa-bars.active:hover{
background-color: #d6d6d6dd;
}
.google-icon{
cursor: default;
transform: translateY(1px) translateX(4px);
}
.classroom{
font-size: 22px;
cursor: text;
color: #353535;
}
.plus{
width: 20px;
padding: 10px;
border-radius: 50%;
margin: 0 10px 0 0;
}
.plus:hover ~ .join{
visibility: visible;
position: absolute;
animation: hello;
}
.plus.active{
background-color: #d6d6d6dd;
}
.plus.active:hover{
background-color: #d6d6d6dd;
}
.plus-drop-down{
background-color: #fff;
position: absolute;
display: inline-block;
border-radius: 3px;
line-height: 30px;
top: 55px;
box-shadow: 0 0 3px 1px rgb(204, 204, 204);
right: 130px;
padding: 5px 0;
}
.plus-drop-down li{
padding: 0 30px 0 15px;
font-size: 15px;
color: #353535;
}
.plus-drop-down li:hover{
background-color: #ddd;
}
.join{
background-color: black;
opacity: 0.7;
color: white;
font-size: 10px;
position: absolute;
border-radius: 3px;
padding: 0 10px;
visibility: hidden;
top: 55px;
height: 30px;
transition: ease-in-out;
transition-delay: .3s;
right: 80px;
}
.th{
color: #4b4b4b;
border-radius: 50%;
padding: 10px;
font-size: 20px;
margin: 0 10px 0 0;
}
.app{
background-color: black;
opacity: 0.6;
color: white;
position: absolute;
border-radius: 2px;
top: 60px;
right: 50px;
border-radius: 3px;
font-size: 12px;
height: 20px;
padding: 0 5px;
visibility: hidden;
transition-delay: .4s;
}
.fa-th:hover ~ .app{
visibility: visible;
}
.account-menu{
position: absolute;
color: rgb(214, 214, 214);
background-color: black;
opacity: 0.6;
top: 60px;
display: block;
right: 20px;
height: 60px;
line-height: 20px;
border-radius: 3px;
padding: 5px 5px;
visibility: hidden;
transition-delay: .3s;
}
.account-menu p{
display: block;
}
.account:hover ~ .account-menu{
visibility: visible;
}
.account-menu .show-acc{
color: white;
font-size: 14px;
}
.fa-th.active{
background-color: #d6d6d6dd;
}
.fa-th.active:hover{
background-color: #d6d6d6dd;
}
.account{
width: 35px;
border-radius: 50%;
padding: 5px;
margin: 0 15px 0 0;
}
.account.active{
background-color: #d6d6d6dd;
}
.account.active:hover{
background-color: #d6d6d6dd;
}
.account:hover, .th:hover, .plus:hover{
background-color: rgb(243, 243, 243);
}
.side-menu{
display: flex;
position: fixed;
transform: translateX(-300px);
}
.side-menu *{
color: #4e4e4e;
}
.main-menu{
min-width: 300px;
background-color: #fff;
height: 100vh;
top: 0;
}
.up{
display: flex;
cursor: pointer;
}
.one{
padding: 18px 18px 20px 10px;
margin: 10px 5px 0 0;
background-color: #dcf2ff;
border-radius: 0 30px 30px 0;
display: flex;
align-items: center;
}
.fa-home{
font-size: 20px;
margin: 0 0 0 10px;
}
.one li a p{
font-size: 14px;
font-weight: bold;
margin: 0 0 0 20px;
}
.two{
padding: 18px 18px 20px 10px;
margin: 0px 5px 10px 0;
border-radius: 0 30px 30px 0;
display: flex;
align-items: center;
transition: none;
}
.two:hover{
background-color: #f7f7f7;
}
.fa-calendar{
font-size: 20px;
margin: 0 0 0 12px;
}
.two li a p{
font-size: 14px;
font-weight: bold;
margin: 0 0 0 23px;
}
.three{
padding: 18px 18px 20px 10px;
margin: 5px 5px 10px 0;
border-radius: 0 30px 30px 0;
display: flex;
align-items: center;
transition: none;
}
.three:hover{
background-color: #f7f7f7;
}
.fa-cog{
font-size: 20px;
margin: 0 0 0 10px;
}
.three li a p{
font-size: 14px;
font-weight: bold;
margin: 0 0 0 23px;
}
.top-two{
border-bottom: 1px solid #ddd;
}
.question-mark{
width: 20px;
position: fixed;
bottom: 0;
margin: 0 0 20px 20px;
border-radius: 50%;
padding: 10px;
}
.question-mark:hover{
background-color: rgb(238, 238, 238);
}
.question-mark.active{
background-color: rgb(216, 216, 216);
}
.question-out{
background-color: #fff;
position: absolute;
bottom: 60px;
margin: 0 0 0 20px;
border-radius: 5px;
min-width: 250px;
box-shadow: 0 0 3px 1px rgb(204, 204, 204);
}
.question-out li:nth-child(1){
margin: 10px 0 0 0;
}
.question-out li:nth-child(4){
margin: 0 0 10px 0;
}
.question-out li{
padding: 7px 0 7px 10px;
font-size: 15px;
}
.question-out li:hover{
background-color: #dddddd;
}
#keyframes hello{
0%{
scale: 0;
transform: translateY(-30px);
}
100%{
scale: 10;
transform: translateY(0px);
}
}
#keyframes pop{
0%{
transform: translateY(30px);
}
100%{
transform: translateY(0px);
}
}
#media screen and (max-width: 480px){
#nine-dot, .account{
display: none;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Classes</title>
<link rel="icon" href="classroom.png">
<link rel="stylesheet" href="/Coding/Google Classroom/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/5c25faca78.js" crossorigin="anonymous"></script>
</head>
<body>
<header>
<nav class="nav_bar">
<div class="left">
<ul>
<li>
<a href="#">
<i class="fas fa-bars"></i>
</a>
</li>
<li>
<a href="#">
<svg class="google-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 272 92" width="90" height="25">
<path fill="#EA4335" d="M115.75 47.18c0 12.77-9.99 22.18-22.25 22.18s-22.25-9.41-22.25-22.18C71.25 34.32 81.24 25 93.5 25s22.25 9.32 22.25 22.18zm-9.74 0c0-7.98-5.79-13.44-12.51-13.44S80.99 39.2 80.99 47.18c0 7.9 5.79 13.44 12.51 13.44s12.51-5.55 12.51-13.44z"/>
<path fill="#FBBC05" d="M163.75 47.18c0 12.77-9.99 22.18-22.25 22.18s-22.25-9.41-22.25-22.18c0-12.85 9.99-22.18 22.25-22.18s22.25 9.32 22.25 22.18zm-9.74 0c0-7.98-5.79-13.44-12.51-13.44s-12.51 5.46-12.51 13.44c0 7.9 5.79 13.44 12.51 13.44s12.51-5.55 12.51-13.44z"/>
<path fill="#4285F4" d="M209.75 26.34v39.82c0 16.38-9.66 23.07-21.08 23.07-10.75 0-17.22-7.19-19.66-13.07l8.48-3.53c1.51 3.61 5.21 7.87 11.17 7.87 7.31 0 11.84-4.51 11.84-13v-3.19h-.34c-2.18 2.69-6.38 5.04-11.68 5.04-11.09 0-21.25-9.66-21.25-22.09 0-12.52 10.16-22.26 21.25-22.26 5.29 0 9.49 2.35 11.68 4.96h.34v-3.61h9.25zm-8.56 20.92c0-7.81-5.21-13.52-11.84-13.52-6.72 0-12.35 5.71-12.35 13.52 0 7.73 5.63 13.36 12.35 13.36 6.63 0 11.84-5.63 11.84-13.36z"/>
<path fill="#34A853" d="M225 3v65h-9.5V3h9.5z"/>
<path fill="#EA4335" d="M262.02 54.48l7.56 5.04c-2.44 3.61-8.32 9.83-18.48 9.83-12.6 0-22.01-9.74-22.01-22.18 0-13.19 9.49-22.18 20.92-22.18 11.51 0 17.14 9.16 18.98 14.11l1.01 2.52-29.65 12.28c2.27 4.45 5.8 6.72 10.75 6.72 4.96 0 8.4-2.44 10.92-6.14zm-23.27-7.98l19.82-8.23c-1.09-2.77-4.37-4.7-8.23-4.7-4.95 0-11.84 4.37-11.59 12.93z"/>
<path fill="#4285F4" d="M35.29 41.41V32H67c.31 1.64.47 3.58.47 5.68 0 7.06-1.93 15.79-8.15 22.01-6.05 6.3-13.78 9.66-24.02 9.66C16.32 69.35.36 53.89.36 34.91.36 15.93 16.32.47 35.3.47c10.5 0 17.98 4.12 23.6 9.49l-6.64 6.64c-4.03-3.78-9.49-6.72-16.97-6.72-13.86 0-24.7 11.17-24.7 25.03 0 13.86 10.84 25.03 24.7 25.03 8.99 0 14.11-3.61 17.39-6.89 2.66-2.66 4.41-6.46 5.1-11.65l-22.49.01z"/>
</svg>
</a>
</li>
<li><p class="classroom">Classroom</p></li>
</ul>
</div>
<div class="right">
<ul>
<li><a href="#">
<img class="plus" src="plus.png" alt="">
<p class="join">Create or join a class</p>
<ul class="plus-drop-down">
<li>Join class</li>
<li>Create class</li>
</ul>
</a>
</li>
<li>
<a href="#">
<i id="nine-dot" class="fas fa-th th"></i>
<p class="app">Google apps</p>
</a>
</li>
<li>
<a href="#">
<img class="account" src="account.png" alt="">
<div class="account-menu">
<p class="show-acc">Google Account</p>
<p class="username"></p>
<p class="email"></p>
</div>
</a>
</li>
</ul>
</div>
</nav>
</header>
<aside id="menu" class="side-menu">
<div class="main-menu">
<div class="top-two">
<div>
<ul class="up one">
<li>
<i class="fas fa-home"></i>
</li>
<li><a href="#">
<p>Classes</p></a>
</li>
</ul>
</div>
<div>
<ul class="up two">
<li>
<a href="#">
<i class="far fa-calendar"></i>
</a>
</li>
<li>
<a href="#">
<p>Calendar</p>
</a>
</li>
</ul>
</div>
</div>
<div>
<ul class="up three">
<li>
<a href="#">
<i class="fas fa-cog"></i>
</a>
</li>
<li>
<a href="#">
<p>Settings</p>
</a>
</li>
</ul>
</div>
</div>
<div>
<img class="question-mark" src="Question.png" alt="">
<ul class="question-out">
<li>What's New</li>
<li>Report issue or request feature</li>
<li>Help Center</li>
<li>Help Community</li>
</ul>
</div>
</aside>
<script src="/Coding/Google Classroom/script.js"></script>
</body>
</html>
enter image description here


You are very close. Try adding background-attachment: fixed; to your body css and you should get what you want.
You can read about background-attachment if you want more information here : https://www.w3schools.com/cssref/pr_background-attachment.asp


I can't understand your code at all but I was having a problem centering some text in showModalDialog in Google App Script and none of the CSS center and middle etc combinations were working until I finally stumbled on using a parent / child set. Maybe it will work for you.
<style>
#parent {
display:table;
font-family:Georgia, Cambria, serif;
font-size: 100%;
height: 100%;
margin: auto;
padding: 0;
position: fixed;
text-align:center;
width: 100%;
}
#child {
display: table-cell;
padding: 55px 55px;
vertical-align: middle;
}

Related

My Particles.js shows individually below my div

I was trying to use particles.js, for the first time.
So I tried it on my index.html
I did exactly like the tutorial told me to, The problem is the particles showing up individually, below the div.
I don’t really know why.
I tried to run this code:
HTML:
<body id="parts">
<div class="header">
<a href="https://fluxapp.ml" class="logo">
<img src="https://fluxapp.ml/flux/flux.png" width="24" height="24"/>
<a href="https://discord.gg/qJEBZ7Gmw3">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="discordicon" viewBox="0 0 16 16">
<path d="M13.545 2.907a13.227 13.227 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.19 12.19 0 0 0-3.658 0 8.258 8.258 0 0 0-.412-.833.051.051 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.041.041 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032c.001.014.01.028.021.037a13.276 13.276 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019c.308-.42.582-.863.818-1.329a.05.05 0 0 0-.01-.059.051.051 0 0 0-.018-.011 8.875 8.875 0 0 1-1.248-.595.05.05 0 0 1-.02-.066.051.051 0 0 1 .015-.019c.084-.063.168-.129.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.052.052 0 0 1 .053.007c.08.066.164.132.248.195a.051.051 0 0 1-.004.085 8.254 8.254 0 0 1-1.249.594.05.05 0 0 0-.03.03.052.052 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.235 13.235 0 0 0 4.001-2.02.049.049 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.034.034 0 0 0-.02-.019Zm-8.198 7.307c-.789 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612Zm5.316 0c-.788 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612Z"/> </svg>
</a>
</a>
<div class="header-right">
About
API
</div>
</div>
<div id="particles-js">
<div class="bodies" >
<div class="mockup">
<img src="https://fluxapp.ml/flux/fluxmockup.png" />
</div>
<div class="description">Welcome to Flux!
A Social media and communities app 2.0</div>
<div>
<button id="download" class="fluxbtn" onclick="downloadOnClick()">Download</button>
</div>
<div>
<button id="snackbar">
<span>Sorry, the app is currently unavailable.</span>
<a href="/about">
<span style="color: #ff3333"><u>See the reason</u></span>
</a>
</button>
</div>
</div></div>
<script src="particles.js"></script>
<script src="app.js"></script>
</body>
CSS:
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#900&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#500&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300&display=swap');
html, body {
height: 100%;
width: 100%;
background-color: #010a13;
text-align: center;
font-family: 'Poppins', Arial;
font-weight: 900;
color: #f5fcff;
overflow-x: hidden;
align-items: center;
vertical-align: middle;
}
.header {
max-width: 1200px;
/*margin: auto;
padding-left: 30px;
padding-right: 30px;
padding-top: 20px;*/
}
.header a {
float: left;
color: white;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
.header a.logo {
font-size: 25px;
font-weight: bold;
}
.header a:hover {
background-color: #052544;
color: white;
}
.header-right {
float: right;
}
.fluxbtn {
border: 2px solid #63D3FF;
background-color: rgba(56, 215, 255, .1);
color: #63D3FF;
padding: 14px 28px;
font-size: 16px;
cursor: pointer;
border-radius: 8px;
width: 300px;
font-family: "Poppins";
font-weight: 900;
}
.fluxbtn:hover {
background-color: rgba(56, 215, 255, .2);
}
.mockup {
margin-top: 20px;
position: relative;
width: 100%;
height: auto;
}
.description {
word-wrap: break-word;
white-space: pre-wrap;
margin-top: 20px;
margin-bottom: 20px;
font-size: 30px;
}
#snackbar {
font-weight: 300;
width: auto;
visibility: hidden;
margin-top: 10px;
background-color: rgba(255, 204, 0, .1);
text-align: center;
padding: 16px;
bottom: 30px;
font-size: 17px;
border: 2px solid #FFCC00;
border-radius: 8px;
color: #FFCC00;
}
#snackbar:hover {
background-color: rgba(255, 204, 0, .2);
}
#snackbar.show {
visibility: visible;
-webkit-animation: fadein 0.5s, fadeout 0.5s 3.5s;
animation: fadein 0.5s, fadeout 0.5s 3.5s;
}
#-webkit-keyframes fadein {
from {bottom: 0; opacity: 0;}
to {bottom: 30px; opacity: 1;}
}
#keyframes fadein {
from {bottom: 0; opacity: 0;}
to {bottom: 30px; opacity: 1;}
}
#-webkit-keyframes fadeout {
from {bottom: 30px; opacity: 1;}
to {bottom: 0; opacity: 0;}
}
#keyframes fadeout {
from {bottom: 30px; opacity: 1;}
to {bottom: 0; opacity: 0;}
}
#media screen and (max-width: 500px) {
.fluxbtn {
width: 200px;
}
.description {
font-size: 20px;
}
}
#media screen and (max-width: 246px) {
.fluxbtn {
width: auto;
}
}
.bodies {
max-width: 1200px;
margin: auto;
padding-left: 30px;
padding-right: 30px;
padding-top: 20px;
margin-top: 20px;
position:relative;
}
#particles-js {
position: absolute;
width: 100%;
height: 100%;
}
And I excepted to get a nice particles in the background of my div.
But that never happened.
Any solution?

Collapsible navbar doesn't minimize after refresh

I have the following issue with the following code. I have tried to implement a collapsible sidebar menu in my development. I have researched many resources online and I tried to customize it for for myself after following along a Youtube tutorial. However, the collapsing functionally seems to work except at the the time of refreshing the page. I have researched other Stackoverflow solutions (i.e session storage) but I couldn't be able to implement it in my case. Can somebody please help?
Here is my HTML page
let arrow = document.querySelectorAll(".arrow");
for (var i = 0; i < arrow.length; i++) {
arrow[i].addEventListener("click", (e)=>{
let arrowParent = e.target.parentElement.parentElement;
arrowParent.classList.toggle("showMenu");
})
}
let sidebar = document.querySelector(".sidebar");
let sidebarBtn = document.querySelector(".bx-menu");
sidebarBtn.addEventListener("click" , ()=>{
sidebar.classList.toggle("close");
});
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* fonts */
#import url('https://fonts.googleapis.com/css2?family=Cabin&family=Roboto+Condensed:wght#400;700&display=swap');
html {
font-size: 100%;
} /*16px*/
:root {
/* colors */
--primary-50: #e0fcff;
--primary-100: #bef8fd;
--primary-200: #87eaf2;
--primary-300: #54d1db;
--primary-400: #38bec9;
--primary-500: #2cb1bc;
--primary-600: #14919b;
--primary-700: #0e7c86;
--primary-800: #0a6c74;
--primary-900: #044e54;
/* grey */
--grey-50: #f0f4f8;
--grey-100: #d9e2ec;
--grey-200: #bcccdc;
--grey-300: #9fb3c8;
--grey-400: #829ab1;
--grey-500: #627d98;
--grey-600: #486581;
--grey-700: #334e68;
--grey-800: #243b53;
--grey-900: #102a43;
/* rest of the colors */
--black: #222;
--white: #fff;
--blue: #2336e2;
--red-light: #f8d7da;
--red-dark: #842029;
--green-light: #d1e7dd;
--green-dark: #0f5132;
/* fonts */
--headingFont: 'Roboto Condensed', Sans-Serif;
--bodyFont: 'Cabin', Sans-Serif;
--small-text: 0.875rem;
--extra-small-text: 0.7em;
/* rest of the vars */
--backgroundColor: var(--grey-50);
--textColor: var(--grey-900);
--borderRadius: 0.25rem;
--letterSpacing: 1px;
--transition: 0.3s ease-in-out all;
--max-width: 1120px;
--fixed-width: 500px;
--fluid-width: 90vw;
--breakpoint-lg: 992px;
--nav-height: 6rem;
/* box shadow*/
--shadow-1: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
--shadow-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -1px rgba(0, 0, 0, 0.06);
--shadow-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -2px rgba(0, 0, 0, 0.05);
--shadow-4: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
body {
background: var(--backgroundColor);
font-family: var(--bodyFont);
font-weight: 400;
line-height: 1.75;
color: var(--textColor);
}
p {
margin-bottom: 1.5rem;
max-width: 40em;
}
h1,
h2,
h3,
h4,
h5 {
margin: 0;
margin-bottom: 1.38rem;
font-family: var(--headingFont);
font-weight: 400;
line-height: 1.3;
text-transform: capitalize;
letter-spacing: var(--letterSpacing);
}
h1 {
margin-top: 0;
font-size: 3.052rem;
}
h2 {
font-size: 2.441rem;
}
h3 {
font-size: 1.953rem;
}
h4 {
font-size: 1.563rem;
}
h5 {
font-size: 1.25rem;
}
small,
.text-small {
font-size: var(--small-text);
}
a {
text-decoration: none;
letter-spacing: var(--letterSpacing);
}
a,
button {
line-height: 1.15;
}
button:disabled {
cursor: not-allowed;
}
ul {
list-style-type: none;
padding: 0;
}
.sidebar {
position: fixed;
top: 0;
left: 0;
background: var(--white);
height: 100%;
width: 260px;
z-index: 100;
transition: var(--transition);
}
.sidebar.close {
width: 78px;
}
.logo-details {
width: 100px;
height: 60px;
display: flex;
align-items: center;
}
.logo-details span:first-child {
font-size: 30px;
/* color: #94EB58; */
color: var(--primary-600);
height: 50px;
min-width: 78px;
text-align: left;
line-height: 50px;
}
.logo_name img {
width: 140px;
height: 100px;
margin-top: 8px;
transition: 0.3s ease;
transition-delay: 0.1s;
}
.logo_name {
transition-delay: 0s;
opacity: 0;
pointer-events: none;
}
.nav-links {
height: 100%;
padding-top: 30px 0 150px 0;
overflow: auto;
}
.nav-links {
overflow: visible;
}
.nav-links::-webkit-scrollbar{
display: none;
}
.nav-links li {
position: relative;
transition: var(--transition);
}
.nav-links li:hover {
background: var(--green-light);
}
.nav-links li span {
height: 50px;
min-width: 78px;
text-align: center;
line-height: 50px;
color: var(--primary-500);
font-size: 23px;
cursor: pointer;
transition: var(--transition);
}
.nav-links li.showMenu span.arrow {
transform: rotate(-180deg);
}
.sidebar.close .nav-links span.arrow {
display: none;
}
.link_name {
font-size: 18px;
font-weight: 400;
color: var(--grey-700);
transition: var(--transition);
}
.sidebar.close .nav-links li a .link_name{
opacity: 0;
pointer-events: none;
}
.nav-links li a {
display: flex;
align-items: center;
}
.icon-link {
display: flex;
align-items: center;
justify-content: space-between;
}
.sidebar .nav-links li .sub-menu {
padding: 6px 6px 14px 80px;
margin-top: -10px;
background: var(--green-light);
display: none;
}
.sidebar .nav-links li.showMenu .sub-menu{
display: block;
}
.sidebar .nav-links li .sub-menu a {
color: var(--primary-900);
font-size: 15px;
padding: 5px 0;
white-space: nowrap;
opacity: 0.6;
transition: var(--transition);
}
.sidebar .nav-links li .sub-menu a:hover {
opacity: 1;
}
.sidebar.close .nav-links li .sub-menu {
position: absolute;
left: 100%;
top: -10px;
margin-top: 0;
padding: 10px 20px;
border-radius: 0 6px 6px 0;
opacity: 0;
display: block;
pointer-events: none;
transition: 0s;
}
.sidebar.close .nav-links li:hover .sub-menu {
top: 0;
opacity: 1;
pointer-events: auto;
transition: var(--transition);
}
.sidebar .nav-links li .sub-menu.link_name {
display: none;
}
.sidebar.close .nav-links li .sub-menu.link_name {
display: none;
}
.sidebar.close .nav-links li .sub-menu .link_name {
font-size: 18px;
opacity: 1;
display: block;
}
.sidebar .nav-links li .sub-menu.blank {
opacity: 1;
pointer-events: auto;
padding: 3px 20px 6px 16px;
opacity: 0;
pointer-events: none;
}
.sidebar .nav-links li:hover .sub-menu.blank {
top: 50%;
transform: translateY(-50%);
}
.sidebar .profile-details {
position: fixed;
bottom: 0;
width: 260px;
display: flex;
align-items: center;
justify-content: space-between;
background: var(--green-light);
padding: 12px 0;
transition: var(--transition);
}
.sidebar.close .profile-details{
background: none;
}
.sidebar.close .profile-details{
width: 78px;
}
.profile-content {
display: flex;
align-items: center;
}
.sidebar .profile-details img {
height: 52px;
width: 52px;
object-fit: cover;
border-radius: 16px;
margin: 0 14px 0 12px;
background: var(--white);
transition: var(--transition);
}
.sidebar.close .profile-details img{
padding: 10px;
}
.profile_name, .job {
color: var(--grey-700);
font-size: 18px;
font-weight: 500;
white-space: nowrap;
}
.sidebar.close .profile-details i,
.sidebar.close .profile-details .profile_name,
.sidebar.close .profile-details .job{
display: none;
}
.job {
font-size: 12px;
}
.home-section {
position: relative;
background: var(--backgroundColor);
height: 100vh;
left: 260px;
width: calc(100%-260px);
transition: var(--transition);
}
.sidebar.close ~ .home-section {
left: 78px;
width: calc(100% -78px);
}
.home-content {
height: 60px;
display: flex;
align-items: center;
}
.home-content span:first-child,
.text {
color: var(--grey-700);
font-size: 35px;
}
.home-content span:first-child {
margin: 0 15px;
cursor: pointer;
}
.home-section .home-content .text{
font-size: 26px;
font-weight: 600;
}
#media (max-width: 400px) {
.sidebar.close .nav-links li .sub-menu{
display: none;
}
.sidebar{
width: 78px;
}
.sidebar.close{
width: 0;
}
.home-section{
left: 78px;
width: calc(100% - 78px);
z-index: 100;
}
.sidebar.close ~ .home-section{
width: 100%;
left: 0;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="admindashcss.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Sharp" rel="stylesheet">
<title>Admin Dashboard</title>
</head>
<body>
<div class="sidebar">
<div class="logo-details">
<span class="material-icons-sharp">radio_button_checked</span>
<span class="logo_name"><img src="images/logowhite.svg" alt=""></span>
</div>
<ul class="nav-links">
<li>
<a href="#">
<span class="material-icons-sharp">grid_view</span>
<span class="link_name">Dashboard</span>
</a>
<!-- <ul class="sub-menu blank">
<li><a class="link_name" href="#">Category</a></li>
</ul> -->
</li>
<li>
<div class="icon-link">
<a href="#">
<span class="material-icons-sharp">contact_page</span>
<span class="link_name">Contacts</span>
</a>
<span class="material-icons-sharp arrow">expand_more</span>
</div>
<ul class="sub-menu">
<li><a class="link_name" href="#">Category</a></li>
<li>Customer</li>
<li>Resources</li>
</ul>
</li>
<li>
<div class="icon-link">
<a href="#">
<span class="material-icons-sharp">task</span>
<span class="link_name">Projects</span>
</a>
<span class="material-icons-sharp arrow">expand_more</span>
</div>
<ul class="sub-menu">
<li><a class="link_name" href="#">Projects</a></li>
<li>Project details</li>
<li>Job</li>
</ul>
</li>
<li>
<div class="icon-link">
<a href="#">
<span class="material-icons-sharp">payments</span>
<span class="link_name">Invoices</span>
</a>
<span class="material-icons-sharp arrow">expand_more</span>
</div>
<ul class="sub-menu">
<li><a class="link_name" href="#">Invoices</a></li>
<li>Recivables</li>
<li>Paybles</li>
</ul>
</li>
<li>
<div class="icon-link">
<a href="#">
<span class="material-icons-sharp">query_stats</span>
<span class="link_name">Queries</span>
</a>
<span class="material-icons-sharp arrow">expand_more</span>
</div>
<ul class="sub-menu">
<li><a class="link_name" href="#">Categories</a></li>
<li>Recivables</li>
<li>Payables</li>
<li>Gross Profit</li>
<li>Gross Profit Summary</li>
</ul>
</li>
<li>
<div class="icon-link">
<a href="#">
<span class="material-icons-sharp">admin_panel_settings</span>
<span class="link_name">Admin</span>
</a>
<span class="material-icons-sharp arrow">expand_more</span>
</div>
<ul class="sub-menu">
<li><a class="link_name" href="#">Categories</a></li>
<li>Settings</li>
<li>Users</li>
<li>Documents</li>
</ul>
</li>
<li>
<div class="profile-details">
<div class="profile-content">
<img src="images/messi.jpg" alt="profile">
</div>
<div class="name-job">
<div class="profile_name">Brook Beyene</div>
<div class="job">Project Manager</div>
</div>
<span class="material-icons-sharp">logout</span>
</div>
</li>
</ul>
</div>
<section class="home-section">
<div class="home-content">
<span class="material-icons-sharp bx-menu">menu</span>
<span class="text">Drop Down Sidebar</span>
</div>
</section>
</body>
</html>
:

All you nedd is to add close to class list in following line:
<div class="sidebar close">
Also if you need to keep last state of navbar, you can stor it in local storage and append it by js on load.
let arrow = document.querySelectorAll(".arrow");
for (var i = 0; i < arrow.length; i++) {
arrow[i].addEventListener("click", (e)=>{
let arrowParent = e.target.parentElement.parentElement;
arrowParent.classList.toggle("showMenu");
})
}
let sidebar = document.querySelector(".sidebar");
let sidebarBtn = document.querySelector(".bx-menu");
sidebarBtn.addEventListener("click" , ()=>{
sidebar.classList.toggle("close");
});
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* fonts */
#import url('https://fonts.googleapis.com/css2?family=Cabin&family=Roboto+Condensed:wght#400;700&display=swap');
html {
font-size: 100%;
} /*16px*/
:root {
/* colors */
--primary-50: #e0fcff;
--primary-100: #bef8fd;
--primary-200: #87eaf2;
--primary-300: #54d1db;
--primary-400: #38bec9;
--primary-500: #2cb1bc;
--primary-600: #14919b;
--primary-700: #0e7c86;
--primary-800: #0a6c74;
--primary-900: #044e54;
/* grey */
--grey-50: #f0f4f8;
--grey-100: #d9e2ec;
--grey-200: #bcccdc;
--grey-300: #9fb3c8;
--grey-400: #829ab1;
--grey-500: #627d98;
--grey-600: #486581;
--grey-700: #334e68;
--grey-800: #243b53;
--grey-900: #102a43;
/* rest of the colors */
--black: #222;
--white: #fff;
--blue: #2336e2;
--red-light: #f8d7da;
--red-dark: #842029;
--green-light: #d1e7dd;
--green-dark: #0f5132;
/* fonts */
--headingFont: 'Roboto Condensed', Sans-Serif;
--bodyFont: 'Cabin', Sans-Serif;
--small-text: 0.875rem;
--extra-small-text: 0.7em;
/* rest of the vars */
--backgroundColor: var(--grey-50);
--textColor: var(--grey-900);
--borderRadius: 0.25rem;
--letterSpacing: 1px;
--transition: 0.3s ease-in-out all;
--max-width: 1120px;
--fixed-width: 500px;
--fluid-width: 90vw;
--breakpoint-lg: 992px;
--nav-height: 6rem;
/* box shadow*/
--shadow-1: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
--shadow-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -1px rgba(0, 0, 0, 0.06);
--shadow-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -2px rgba(0, 0, 0, 0.05);
--shadow-4: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
body {
background: var(--backgroundColor);
font-family: var(--bodyFont);
font-weight: 400;
line-height: 1.75;
color: var(--textColor);
}
p {
margin-bottom: 1.5rem;
max-width: 40em;
}
h1,
h2,
h3,
h4,
h5 {
margin: 0;
margin-bottom: 1.38rem;
font-family: var(--headingFont);
font-weight: 400;
line-height: 1.3;
text-transform: capitalize;
letter-spacing: var(--letterSpacing);
}
h1 {
margin-top: 0;
font-size: 3.052rem;
}
h2 {
font-size: 2.441rem;
}
h3 {
font-size: 1.953rem;
}
h4 {
font-size: 1.563rem;
}
h5 {
font-size: 1.25rem;
}
small,
.text-small {
font-size: var(--small-text);
}
a {
text-decoration: none;
letter-spacing: var(--letterSpacing);
}
a,
button {
line-height: 1.15;
}
button:disabled {
cursor: not-allowed;
}
ul {
list-style-type: none;
padding: 0;
}
.sidebar {
position: fixed;
top: 0;
left: 0;
background: var(--white);
height: 100%;
width: 260px;
z-index: 100;
transition: var(--transition);
}
.sidebar.close {
width: 78px;
}
.logo-details {
width: 100px;
height: 60px;
display: flex;
align-items: center;
}
.logo-details span:first-child {
font-size: 30px;
/* color: #94EB58; */
color: var(--primary-600);
height: 50px;
min-width: 78px;
text-align: left;
line-height: 50px;
}
.logo_name img {
width: 140px;
height: 100px;
margin-top: 8px;
transition: 0.3s ease;
transition-delay: 0.1s;
}
.logo_name {
transition-delay: 0s;
opacity: 0;
pointer-events: none;
}
.nav-links {
height: 100%;
padding-top: 30px 0 150px 0;
overflow: auto;
}
.nav-links {
overflow: visible;
}
.nav-links::-webkit-scrollbar{
display: none;
}
.nav-links li {
position: relative;
transition: var(--transition);
}
.nav-links li:hover {
background: var(--green-light);
}
.nav-links li span {
height: 50px;
min-width: 78px;
text-align: center;
line-height: 50px;
color: var(--primary-500);
font-size: 23px;
cursor: pointer;
transition: var(--transition);
}
.nav-links li.showMenu span.arrow {
transform: rotate(-180deg);
}
.sidebar.close .nav-links span.arrow {
display: none;
}
.link_name {
font-size: 18px;
font-weight: 400;
color: var(--grey-700);
transition: var(--transition);
}
.sidebar.close .nav-links li a .link_name{
opacity: 0;
pointer-events: none;
}
.nav-links li a {
display: flex;
align-items: center;
}
.icon-link {
display: flex;
align-items: center;
justify-content: space-between;
}
.sidebar .nav-links li .sub-menu {
padding: 6px 6px 14px 80px;
margin-top: -10px;
background: var(--green-light);
display: none;
}
.sidebar .nav-links li.showMenu .sub-menu{
display: block;
}
.sidebar .nav-links li .sub-menu a {
color: var(--primary-900);
font-size: 15px;
padding: 5px 0;
white-space: nowrap;
opacity: 0.6;
transition: var(--transition);
}
.sidebar .nav-links li .sub-menu a:hover {
opacity: 1;
}
.sidebar.close .nav-links li .sub-menu {
position: absolute;
left: 100%;
top: -10px;
margin-top: 0;
padding: 10px 20px;
border-radius: 0 6px 6px 0;
opacity: 0;
display: block;
pointer-events: none;
transition: 0s;
}
.sidebar.close .nav-links li:hover .sub-menu {
top: 0;
opacity: 1;
pointer-events: auto;
transition: var(--transition);
}
.sidebar .nav-links li .sub-menu.link_name {
display: none;
}
.sidebar.close .nav-links li .sub-menu.link_name {
display: none;
}
.sidebar.close .nav-links li .sub-menu .link_name {
font-size: 18px;
opacity: 1;
display: block;
}
.sidebar .nav-links li .sub-menu.blank {
opacity: 1;
pointer-events: auto;
padding: 3px 20px 6px 16px;
opacity: 0;
pointer-events: none;
}
.sidebar .nav-links li:hover .sub-menu.blank {
top: 50%;
transform: translateY(-50%);
}
.sidebar .profile-details {
position: fixed;
bottom: 0;
width: 260px;
display: flex;
align-items: center;
justify-content: space-between;
background: var(--green-light);
padding: 12px 0;
transition: var(--transition);
}
.sidebar.close .profile-details{
background: none;
}
.sidebar.close .profile-details{
width: 78px;
}
.profile-content {
display: flex;
align-items: center;
}
.sidebar .profile-details img {
height: 52px;
width: 52px;
object-fit: cover;
border-radius: 16px;
margin: 0 14px 0 12px;
background: var(--white);
transition: var(--transition);
}
.sidebar.close .profile-details img{
padding: 10px;
}
.profile_name, .job {
color: var(--grey-700);
font-size: 18px;
font-weight: 500;
white-space: nowrap;
}
.sidebar.close .profile-details i,
.sidebar.close .profile-details .profile_name,
.sidebar.close .profile-details .job{
display: none;
}
.job {
font-size: 12px;
}
.home-section {
position: relative;
background: var(--backgroundColor);
height: 100vh;
left: 260px;
width: calc(100%-260px);
transition: var(--transition);
}
.sidebar.close ~ .home-section {
left: 78px;
width: calc(100% -78px);
}
.home-content {
height: 60px;
display: flex;
align-items: center;
}
.home-content span:first-child,
.text {
color: var(--grey-700);
font-size: 35px;
}
.home-content span:first-child {
margin: 0 15px;
cursor: pointer;
}
.home-section .home-content .text{
font-size: 26px;
font-weight: 600;
}
#media (max-width: 400px) {
.sidebar.close .nav-links li .sub-menu{
display: none;
}
.sidebar{
width: 78px;
}
.sidebar.close{
width: 0;
}
.home-section{
left: 78px;
width: calc(100% - 78px);
z-index: 100;
}
.sidebar.close ~ .home-section{
width: 100%;
left: 0;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="admindashcss.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Sharp" rel="stylesheet">
<title>Admin Dashboard</title>
</head>
<body>
<div class="sidebar close">
<div class="logo-details">
<span class="material-icons-sharp">radio_button_checked</span>
<span class="logo_name"><img src="images/logowhite.svg" alt=""></span>
</div>
<ul class="nav-links">
<li>
<a href="#">
<span class="material-icons-sharp">grid_view</span>
<span class="link_name">Dashboard</span>
</a>
<!-- <ul class="sub-menu blank">
<li><a class="link_name" href="#">Category</a></li>
</ul> -->
</li>
<li>
<div class="icon-link">
<a href="#">
<span class="material-icons-sharp">contact_page</span>
<span class="link_name">Contacts</span>
</a>
<span class="material-icons-sharp arrow">expand_more</span>
</div>
<ul class="sub-menu">
<li><a class="link_name" href="#">Category</a></li>
<li>Customer</li>
<li>Resources</li>
</ul>
</li>
<li>
<div class="icon-link">
<a href="#">
<span class="material-icons-sharp">task</span>
<span class="link_name">Projects</span>
</a>
<span class="material-icons-sharp arrow">expand_more</span>
</div>
<ul class="sub-menu">
<li><a class="link_name" href="#">Projects</a></li>
<li>Project details</li>
<li>Job</li>
</ul>
</li>
<li>
<div class="icon-link">
<a href="#">
<span class="material-icons-sharp">payments</span>
<span class="link_name">Invoices</span>
</a>
<span class="material-icons-sharp arrow">expand_more</span>
</div>
<ul class="sub-menu">
<li><a class="link_name" href="#">Invoices</a></li>
<li>Recivables</li>
<li>Paybles</li>
</ul>
</li>
<li>
<div class="icon-link">
<a href="#">
<span class="material-icons-sharp">query_stats</span>
<span class="link_name">Queries</span>
</a>
<span class="material-icons-sharp arrow">expand_more</span>
</div>
<ul class="sub-menu">
<li><a class="link_name" href="#">Categories</a></li>
<li>Recivables</li>
<li>Payables</li>
<li>Gross Profit</li>
<li>Gross Profit Summary</li>
</ul>
</li>
<li>
<div class="icon-link">
<a href="#">
<span class="material-icons-sharp">admin_panel_settings</span>
<span class="link_name">Admin</span>
</a>
<span class="material-icons-sharp arrow">expand_more</span>
</div>
<ul class="sub-menu">
<li><a class="link_name" href="#">Categories</a></li>
<li>Settings</li>
<li>Users</li>
<li>Documents</li>
</ul>
</li>
<li>
<div class="profile-details">
<div class="profile-content">
<img src="images/messi.jpg" alt="profile">
</div>
<div class="name-job">
<div class="profile_name">Brook Beyene</div>
<div class="job">Project Manager</div>
</div>
<span class="material-icons-sharp">logout</span>
</div>
</li>
</ul>
</div>
<section class="home-section">
<div class="home-content">
<span class="material-icons-sharp bx-menu">menu</span>
<span class="text">Drop Down Sidebar</span>
</div>
</section>
</body>
</html>

My suggestion is to use a cookie to store and read the value on change. It will keep the data persistant on reload that way.

How To Make "Color-Option" On A Product-Card To Be Clickable?

I just created few product cards for my website. Each product card consist of cart icon, image, description, stars, color-option and price. my first product card work well where each color-option is clicked, the picture able to change automatically. However, the problem occur where it does not work on other product card. I check all the codes but i cant find any error. Please help me!!!
Below is the code. Thank you in advance for your help.
APOLOGIES AS I HAVE TO REMOVE SOME OF CODES DUE TO LIMITED WORDS.!!!!!
You may view the full code in here: https://jsfiddle.net/xzyjkauo/
<!-- -------------------------------START OF JAVASCRIPT FOR INDEX.PHP--------------------- -->
<script>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
let circle = document.querySelector(".color-option");
circle.addEventListener("click", (e)=>{
let target = e.target;
if(target.classList.contains("circle")){
circle.querySelector(".active").classList.remove("active");
target.classList.add("active");
document.querySelector(".main-images .active").classList.remove("active");
document.querySelector(`.main-images .${target.id}`).classList.add("active");
}
});
</script>
<!-- -------------------------------END OF JAVASCRIPT FOR INDEX.PHP--------------------- -->
<style>
/*----------------------START OF CSS PAGE BACKGROUND-----------------*/
body {
background: #c8e8e9;
/*background: -webkit-linear-gradient(to right, #ff9472, #f2709c); */
/*background: linear-gradient(to right, #ff9472, #f2709c); */
background-color: #D1E8E2;
font-size: 20px;
margin: 0;
padding: 0;
top: 0px;
grid-gap: 20px;
justify-content: center;
}
article {
width: 90%;
max-width: 600px;
padding: 20px;
margin: 0px auto;
}
/*----------------------END OF CSS PAGE BACKGROUND-----------------*/
/*----------------------START OF SIGNUP AND LOGIN BUTTON -----------------*/
.button {
background-color: #D9B08C;
border: 0;
color: white;
padding: 16px 22px;
text-align: center;
font-size: 16px;
margin: 2px 2px;
margin-top: 0;
float: right;
opacity: 0.9;
transition: 0.3s;
display: inline-block;
text-decoration: none;
cursor: pointer;
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
.button:hover {opacity: 1}
/*----------------------END OF SIGNUP AND LOGIN BUTTON -----------------*/
/*----------------------START OF CSS NAVBAR -----------------*/
/*.img{
padding: 0px;
margin: 4px;
}*/
.nav {
overflow: hidden;
background-color: #116466;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
}
.nav i {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
}
.nav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
}
.nav a:hover {
background-color: #ddd;
color: black;
}
.nav a.active {
background-color: #38444d;
color: white;
}
.nav ul {
list-style:none;
}
.nav ul li{
display:inline-block;
padding:0 9px;
position:relative;
}
.nav ul li:not(:last-child)::after{
content:"";
border:2px solid #e2e2e2;
border-width: 2px 1px 0 0;
position:absolute;
right:-3px;
top:0;
height:200%;
}
/*----------------------END OF CSS NAVBAR-----------------*/
/*----------------------START OF CSS LOGO AND SEARCH BUTTON-----------------*/
.section1 .logo a{
padding: 60px;
margin: auto;
margin-top: 60px;
font-size: 55px;
font-family: Lucida Handwriting;
color: #fff;
text-decoration: none;
font-weight: 600;
z-index: 6;
}
.section1 .logo a{
color: #fff;
}
.section1 .img{
padding-top: 10px;
margin-left: 120px;
}
.section1 .box{
max-width: 700px;
width: 100%;
margin-left: 600px;
margin-top: 70px;
margin-bottom: 80px;
padding-top: 70px;
}
.section1 .box .search-box{
position: relative;
height: 50px;
max-width: 550px;
margin: auto;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
border-radius: 25px;
transition: all 0.3s ease;
}
.section1 .search-box input{
position: absolute;
height: 100%;
width: 100%;
border-radius: 25px;
background: #fff;
outline: none;
border: none;
padding-left: 20px;
font-size: 18px;
}
.section1 .search-box .icon{
position: absolute;
right: -2px;
top: 0;
width: 50px;
background: #FFF;
height: 100%;
text-align: center;
line-height: 50px;
color: #2C3531;
font-size: 20px;
border-radius: 25px;
}
/*----------------------END OF CSS LOGO AND SEARCH BUTTON-----------------*/
/*----------------------------------------END OF CSS PRODUCT CARD----------------------------*/
.product-card {
position: relative;
max-width: 355px;
width: 100%;
border-radius: 25px;
padding: 20px 30px 30px 30px;
margin-bottom: 50px;
background: #fff;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
z-index: 3;
/*overflow: hidden;*/
}
.product-card .logo-cart{
display: flex;
align-items: center;
justify-content: space-between;
}
.product-card .logo-cart img{
height: 60px;
width: 60px;
object-fit: cover;
}
.product-card .logo-cart i{
font-size: 27px;
color: #707070;
cursor: pointer;
transition: color 0.3s ease;
}
.product-card .logo-cart i:hover{
color: #333;
}
.product-card .main-images{
position: relative;
margin-top: 30px;
margin-left: 30px;
height: 210px;
}
.product-card .main-images img{
position: absolute;
height: 300px;
width: 300px;
object-fit: cover;
/* transform: rotate(18deg);*/
left: 12px;
top: -40px;
z-index: -1;
opacity: 0;
transition: opacity 0.5s ease;
}
.product-card .main-images img.active{
opacity: 1;
}
.product-card .product-details .product_name{
font-size: 24px;
font-weight: 500;
color: #161616;
}
.product-card .product-details p{
font-size: 12px;
font-weight: 400;
color: #333;
text-align: justify;
}
.product-card .product-details .stars i{
margin: 0 -1px;
color: #333;
}
.product-card .color-price .color-option{
display: flex;
align-items: center;
}
.color-price{
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 10px;
}
.color-price .color-option .color{
font-size: 18px;
font-weight: 500;
color: #333;
margin-right: 8px;
}
.color-option .circles{
display: flex;
}
.color-option .circles .circle{
height: 18px;
width: 18px;
background: #0071C7;
border-radius: 50%;
margin: 0 4px;
cursor: pointer;
transition: all 0.4s ease;
}
.color-option .circles .circle.blue.active{
box-shadow: 0 0 0 2px #fff,
0 0 0 4px #0071C7;
}
.color-option .circles .circle.pink{
background: #FA1795;
}
.color-option .circles .circle.pink.active{
box-shadow: 0 0 0 2px #fff,
0 0 0 4px #FA1795;
}
.color-option .circles .circle.yellow{
background: #F5DA00;
}
.color-option .circles .circle.yellow.active{
box-shadow: 0 0 0 2px #fff,
0 0 0 4px #F5DA00;
}
.color-option .circles .circle.red{
background: #ff0000;
}
.color-option .circles .circle.red.active{
box-shadow: 0 0 0 2px #fff,
0 0 0 4px #ff0000;
}
.color-option .circles .circle.purple{
background: #5d008a;
}
.color-option .circles .circle.purple.active{
box-shadow: 0 0 0 2px #fff,
0 0 0 4px #5d008a;
}
.color-option .circles .circle.green{
background: #007700;
}
.color-option .circles .circle.green.active{
box-shadow: 0 0 0 2px #fff,
0 0 0 4px #007700;
}
.color-option .circles .circle.gold{
background: #c78700;
}
.color-option .circles .circle.gold.active{
box-shadow: 0 0 0 2px #fff,
0 0 0 4px #c78700;
}
.color-option .circles .circle.white{
background: #f8f8f8;
}
.color-option .circles .circle.white.active{
box-shadow: 0 0 0 2px #fff,
0 0 0 4px #f8f8f8;
}
.color-price .price{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.color-price .price .price_num{
font-size: 25px;
font-weight: 600;
color: #707070;
}
.color-price .price .price_letter{
font-size: 10px;
font-weight: 600;
margin-top: -4px;
color: #707070;
}
.product-card .button1{
position: relative;
height: 50px;
width: 100%;
border-radius: 25px;
margin-top: 30px;
overflow: hidden;
padding: 0px 0px;
}
.product-card .button1 .button-layer{
position: absolute;
height: 100%;
width: 300%;
left: -100%;
background-image: linear-gradient(135deg,#ff9900, #006699,#ff9900, #006699 );
transition: all 0.4s ease;
border-radius: 25PX;
}
.product-card .button1:hover .button-layer{
left: 0;
}
.product-card .button1 button{
position: relative;
height: 100%;
width: 100%;
background: none;
outline: none;
border: none;
font-size: 18px;
font-weight: 600;
letter-spacing: 1px;
color: #fff;
}
.parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 20px;
}
#media screen and (min-width: 992px){
.product-card-items{
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.product-card-col-r-bottom{
display: grid;
grid-template-columns: repeat(2, 1fr);
}
}
#media screen and (min-width: 1200px){
.product-card-items{
grid-template-columns: repeat(3, 1fr);
}
.product-card {
margin-right: 1rem;
margin-left: 1rem;
}
.product-card .text-light{
width: 50%;
}
}
#media screen and (min-width: 1336px){
.product-card-items{
grid-template-columns: repeat(4, 1fr);
}
.product-card-collection-wrapper{
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.flex{
height: 60vh;
}
.product-card-col-left{
height: 121.5vh;
}
}
/*----------------------------------------END OF CSS PRODUCT CARD----------------------------*/
/*----------------------------------------START OF CSS SECTION CONTAINER----------------------------*/
section#container1 {
padding-top:100px;
padding-left:100px;
margin:0px;
height: 100%;
box-sizing:border-box;
background: #FFCB9A;
/*background: rgb(123,134,232);*/
/*background: linear-gradient(164deg, rgba(123,134,232,1) 0%, rgba(246,140,255,1) 52%, rgba(255,222,50,1) 100%);*/
color: #2C3531;
min-height: 100px;
padding-bottom: 100px;
}
section#container2 {
background: #D1E8E2;
/*background: rgb(123,211,232);*/
/*background: linear-gradient(135deg, rgba(123,211,232,1) 0%, rgba(123,211,232,1) 0%, rgba(50,171,255,1) 100%);*/
color: #0f2852;
padding: 64px;
}
section#container3 {
background: #D1E8E2;
/*background: rgb(123,211,232);*/
/*background: linear-gradient(to bottom, #33ccff 0%, #66ff99 100%);*/
color: #0f2852;
padding: 30px;
}
h2 {
color: #2C3531;
font-size: 50px;
padding: 0px;
margin: 0px;
text-shadow: 2px 2px 4px #686868;
}
h3 {
color: #2C3531;
width: 90%;
max-width: 600px;
padding: 10px;
margin: 0px;
text-shadow: 2px 2px 4px #686868;
}
/* Float the columns */
.column {
width: 100%;
padding: 0 0px;
z-index: 5;
}
/* Style the counter cards */
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
padding: 0 600px;
text-align: center;
background-color: #f1f1f1;
}
</style>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href='https://unpkg.com/boxicons#2.0.7/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="footer.php">
<link rel="import" href="C:/xampp/htdocs/software_project/slider/index.html">
</head>
<!-- -------------------------------------START OF HTML ------------------------------- -->
<body>
<div class="nav">
<button class="button fa fa-sign-in" onclick="document.location='signup1.php'"> Sign-In</button>
<button class="button fa fa-user-circle" onclick="document.location='login1.php'"> Log-In</button>
<ul>
<li><i class=" fa fa-envelope"> hello.colorlib#gmail.com</i></li>
<li>Profile</li>
</ul>
</div>
<div class="section1">
<!-- <div class="logo"><a>Let's Buy.</a></div> -->
<img src="Picture2.png" class="img" alt="logo" style="float:left; width:370px; height:160px;">
<div class="box">
<div class="search-box">
<input type="text" placeholder="Type here...">
<label for="check" class="icon">
<i class="fa fa-search"></i>
</label>
</div>
</div>
</div
<section id="container1">
<!-- <div class="column">
<div class="card">
<h2>Card 1</h2>
<br>
</div>
</div>-->
<div class="header">
<h2>Our Products </h2>
<p>Scroll down to see the sticky effect.</p>
</div>
<br>
<br>
<div class = "parent">
<!-- ------------PRODUCT 1 ----------------- -->
<div class="product-card">
<div class="logo-cart">
<!--<img src="images/logo.png" alt="logo">-->
<i class='bx bx-shopping-bag'></i>
</div>
<div class="main-images">
<img id="blue" class="blue active" src="images/shirt1.jpg" alt="blue">
<img id="red" class="red" src="images/shirt2.jpg" alt="red">
<img id="purple" class="purple" src="images/shirt3.jpg" alt="purple">
</div>
<br>
<br>
<br>
<div class="product-details">
<span class="product_name">Men Long Sleeve Shirt</span>
<p>Elegant design: Simple and smart looking</p>
<p>Slim fit cutting: Design to enhance your body ratio</p>
<p>Breathable material: Best fabric to wear in hot weather</p>
<div class="stars">
<i class='bx bxs-star' ></i>
<i class='bx bxs-star' ></i>
<i class='bx bxs-star' ></i>
<i class='bx bxs-star' ></i>
<i class='bx bx-star' ></i>
</div>
</div>
<div class="color-price">
<div class="color-option">
<span class="color">Colour:</span>
<div class="circles">
<span class="circle blue active" id="blue"></span>
<span class="circle red " id="red"></span>
<span class="circle purple " id="purple"></span>
</div>
</div>
<div class="price">
<span class="price_num">RM 49.90</span>
<span class="price_letter">Forty-nine ringgit only</span>
</div>
</div>
<div class="button1">
<div class="button-layer"></div>
<button>Add To Cart</button>
</div>
</div>
<!-- ------------PRODUCT 2 ----------------- -->
<div class="product-card">
<div class="logo-cart">
<!--<img src="images/logo.png" alt="logo">-->
<i class='bx bx-shopping-bag'></i>
</div>
<div class="main-images">
<img id="red" class="red active" src="images/nike1.png" alt="red">
<img id="green" class="green" src="images/nike2.png" alt="green">
<img id="white" class="white" src="images/nike3.png" alt="white">
<img id="gold" class="gold" src="images/nike4.png" alt="gold">
</div>
<br>
<br>
<br>
<br>
<div class="product-details">
<span class="product_name">Nike Air Max Sport Shoes</span>
<p>Best shoe for sports training, casual walk, exercising and many more !!!</p>
<p>Light Weight, Comfort, Extra Grip <p>
<div class="stars">
<i class='bx bxs-star' ></i>
<i class='bx bxs-star' ></i>
<i class='bx bxs-star' ></i>
<i class='bx bxs-star' ></i>
<i class='bx bx-star' ></i>
</div>
</div>
<div class="color-price">
<div class="color-option">
<span class="color">Colour:</span>
<div class="circles">
<span class="circle red active" id="red"></span>
<span class="circle green " id="green"></span>
<span class="circle white " id="white"></span>
<span class="circle gold " id="gold"></span>
</div>
</div>
<div class="price">
<span class="price_num">$09.00</span>
<span class="price_letter">Nine dollar only</span>
</div>
</div>
<div class="button1">
<div class="button-layer"></div>
<button>Add To Cart</button>
</div>
</div>
<!-- ------------PRODUCT 3 ----------------- -->
<div class="product-card">
<div class="logo-cart">
<!--<img src="images/logo.png" alt="logo">-->
<i class='bx bx-shopping-bag'></i>
</div>
<div class="main-images">
<img id="purple" class="purple active" src="images/watch1.png" alt="purple">
<img id="blue" class="blue" src="images/watch2.png" alt="blue">
<img id="red" class="red" src="images/watch3.png" alt="red">
<img id="green" class="green" src="images/watch4.png" alt="green">
</div>
<br>
<br>
<br>
<br>
<br>
<div class="product-details">
<span class="product_name">Sppors Digital Sport Watch</span>
<p>Unisex, high quality, authentic digital sport watch!</p>
<div class="stars">
<i class='bx bxs-star' ></i>
<i class='bx bxs-star' ></i>
<i class='bx bxs-star' ></i>
<i class='bx bxs-star' ></i>
<i class='bx bx-star' ></i>
</div>
</div>
<div class="color-price">
<div class="color-option">
<span class="color">Colour:</span>
<div class="circles">
<span class="circle purple active" id="purple"></span>
<span class="circle blue " id="blue"></span>
<span class="circle red " id="red"></span>
<span class="circle green " id="green"></span>
</div>
</div>
<div class="price">
<span class="price_num">$09.00</span>
<span class="price_letter">Nine dollar only</span>
</div>
</div>
<div class="button1">
<div class="button-layer"></div>
<button>Add To Cart</button>
</div>
</div>
</div>
</section>
</body>
<!-- -------------------------------------END OF HTML ------------------------------- -->
</html>

The reason why only the frist product card was able to work, it's because you only selected the first item that has the .color-option class
var circle = document.querySelectorAll(".color-option");
for (let i = 0; i < circle.length; i++) {
circle[i].addEventListener("click", (e)=>{
var target = e.target; var targetid = target.id;
if(target.classList.contains("circle")){
circle[i].querySelector(".active").classList.remove("active");
target.classList.add("active");
document.querySelector(".main-images .active").classList.remove("active");
document.querySelector(".main-images #"+targetid).classList.add("active");
}
});
}

link didn't work outside of div in notification dropdown menu?

I am creating Notification section, where the link is provided on Notification in dropdown menu, but the link on Notification is not working, it is showing the link which i provided in left bottom of the browser but it can't clickable?
HTML
<i class="fa fa-globe"><span class="badge badge-notify">.</span></i>
<div id="notificationContainer">
<div id="notificationTitle">Notifications</div>
<div id="notificationsBody" class="notifications">
<div class="col-sm-12 col-md-12 col-lg-12">
<a href="notifications.php#1" id="details-container-notification">
<ul class="area-notification">
<li>
<div class="profile-image-notification">
<div id="profile-container-notification">
<image id="profileImageNotification" src="../images/img_avatar.png" />
</div>
</div>
</li>
<li class="description-notification"><p>KEntury Fried Chicken, KFC is now following you is now following you, can you want to follow back him , Thanks.</p></li>
</ul>
</a>
</div>
</div>
</div>
CSS
#notificationContainer {
background-color: #fff;
border: 1px solid rgba(100, 100, 100, .4);
-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
overflow: hidden;
position: absolute;
top: 40px;
margin-left: -250px;
width: 400px;
display: none;
z-index: 1;
}
#notificationTitle {
z-index: 1000;
padding: 8px;
font-size: 18px;
background-color: #ffffff;
width: 384px;
border-bottom: 1px solid #dddddd;
font-family:Bookman Old Style ;
}
#notificationsBody {
padding: 0px 0px 0px 0px !important;
min-height:100px;
font-family:Bookman Old Style ;
margin-bottom:0px;
}
#details-container-notification{
margin-top:0%;
text-decoration:none;
float:left;
width:100%;
margin-left:0%;
font-size: 14px;
word-spacing: 1px;
line-height: 150%;
color: darkblack;
text-decoration:none;
font-family:Bookman Old Style ;
border-bottom:1px solid #f5f8fa;
padding:10px;
}
#details-container-notification:hover{
background-color:#fafafa;
}
.area-notification{
width:100%;
}
#profile-container-notification {
float:left;
margin-left:0%;
margin-right:2%;
width: 60px;
height: 60px;
overflow: hidden;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
margin-bottom:15px;
}
#profile-container-notification img {
width: 60px;
height: 60px;
}
#notificationFooter{
background-color: #e9eaed;
text-align: center;
padding: 8px;
width:100%;
font-size: 18px;
border-top: 1px solid #dddddd;
text-decoration:none;
font-family:Bookman Old Style ;
}
.badge-notify{
background:#3897f0;
position:relative;
top: -10px;
left: -35px;
}
JSFIDDLE:- https://jsfiddle.net/r33osLt9/1/

i don't know exactly what your issue , if my thought is right remove
return false from you js , check with working fiddle
$("#notificationContainer").click(function() {
//return false
});
https://jsfiddle.net/r33osLt9/2/
just try with this also
$(function(){
$("#notificationLink").on('click', function(e){
e.preventDefault(); /* this will block the link */
e.stopPropagation();
$("#notificationContainer").slideToggle(300);
});
$("#settingLink").on('click', function(e){
e.preventDefault(); /* this will block the link */
e.stopPropagation();
$("#settingContainer").fadeToggle(300);
});
$(document).on('click', function(){
$("#notificationContainer").hide();
$("#settingContainer").hide();
});
});
.navigation {
width: 100%;
height: 70px;
background-color: #fafafa;
margin-bottom: 1%;
}
#notificationContainer {
background-color: #fff;
border: 1px solid rgba(100, 100, 100, .4);
-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
overflow: hidden;
position: absolute;
top: 40px;
margin-left: 0px;
width: 400px;
display: none;
z-index: 1;
}
#notificationTitle {
z-index: 1000;
padding: 8px;
font-size: 18px;
background-color: #ffffff;
width: 384px;
border-bottom: 1px solid #dddddd;
font-family: Bookman Old Style;
}
#notificationsBody {
padding: 0px 0px 0px 0px !important;
min-height: 100px;
font-family: Bookman Old Style;
margin-bottom: 0px;
}
#details-container-notification {
margin-top: 0%;
text-decoration: none;
float: left;
width: 100%;
margin-left: 0%;
font-size: 14px;
word-spacing: 1px;
line-height: 150%;
color: darkblack;
text-decoration: none;
font-family: Bookman Old Style;
border-bottom: 1px solid #f5f8fa;
padding: 10px;
}
#details-container-notification:hover {
background-color: #fafafa;
}
.area-notification {
width: 100%;
}
#profile-container-notification {
float: left;
margin-left: 0%;
margin-right: 2%;
width: 60px;
height: 60px;
overflow: hidden;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
margin-bottom: 15px;
}
#profile-container-notification img {
width: 60px;
height: 60px;
}
#notificationFooter {
background-color: #e9eaed;
text-align: center;
padding: 8px;
width: 100%;
font-size: 18px;
border-top: 1px solid #dddddd;
text-decoration: none;
font-family: Bookman Old Style;
}
.badge-notify {
background: #3897f0;
position: relative;
top: -10px;
left: -35px;
}
#settingContainer {
background-color: #fff;
border: 1px solid rgba(100, 100, 100, .4);
-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
overflow: hidden;
position: absolute;
top: 40px;
margin-left: 0px;
width: 180px;
display: none;
z-index: 1;
}
#settingsBody {
padding: 10px 0px 0px 0px !important;
height: 50px;
font-family: Bookman Old Style;
}
.area-setting {
width: 100%;
}
#details-container-setting {
text-decoration: none;
float: left;
width: 100%;
margin-left: 1%;
font-size: 18px;
word-spacing: 1px;
color: darkblack;
text-decoration: none;
font-family: Bookman Old Style;
line-height: 50%;
margin-bottom: 10px;
margin-top: 0%;
padding: 10px;
}
#details-container-setting:hover {
background-color: #fafafa;
}
.icon-bar a {
width: 50px;
float: left;
font-size: 30px;
color: black;
}
.icon1 {
display: none;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="navigation">
<div class="icon-bar"> <i class="fa fa-search"><span></span></i> <i class="fa fa-envelope"><span class="badge badge-notify">.</span></i> <i class="fa fa-globe"><span class="badge badge-notify">.</span></i>
<div id="notificationContainer">
<div id="notificationTitle">Notifications</div>
<div id="notificationsBody" class="notifications">
<div class="col-sm-12 col-md-12 col-lg-12"> <a href="notifications.php#1" id="details-container-notification">
<ul class="area-notification">
<li>
<div class="profile-image-notification">
<div id="profile-container-notification">
<image id="profileImageNotification" src="http://www.w3schools.com/w3css/img_avatar3.png" />
</div>
</div>
</li>
<li class="description-notification">
<p>KEntury Fried Chicken, KFC is now following you is now following you, can you want to follow back him , Thanks.</p>
</li>
</ul>
</a> </div>
<div class="col-sm-12 col-md-12 col-lg-12"> <a href="notifications.php#2" id="details-container-notification">
<ul class="area-notification">
<li>
<div class="profile-image-notification">
<div id="profile-container-notification">
<image id="profileImageNotification" src="http://www.w3schools.com/w3css/img_avatar3.png" />
</div>
</div>
</li>
<li>
<p class="description-notification">KEntury Fried Chicken</p>
</li>
</ul>
</a> </div>
<div class="col-sm-12 col-md-12 col-lg-12"> <a href="notifications.php#3" id="details-container-notification">
<ul class="area-notification">
<li>
<div class="profile-image-notification">
<div id="profile-container-notification">
<image id="profileImageNotification" src="http://www.w3schools.com/w3css/img_avatar3.png" />
</div>
</div>
</li>
<li>
<p class="description-notification">KFC</p>
</li>
</ul>
</a> </div>
</div>
<a href="notifications.php" id="notificationFooter">
<p>See All</p>
</a> </div>
<i class="fa fa-cog"></i>
<div id="settingContainer">
<div id="settingsBody" class="setting">
<div class="col-sm-12 col-md-12 col-lg-12"> <a href="../edit-profile/edit-profile.php" id="details-container-setting">
<ul class="area-setting">
<li>
<p class="description-setting">Setting</p>
</li>
</ul>
</a> </div>
<div class="col-sm-12 col-md-12 col-lg-12"> <a href="../logout/logout.php" id="details-container-setting">
<ul class="area-setting">
<li>
<p class="description-setting">Logout</p>
</li>
</ul>
</a> </div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Your tag a needs to have display:block.
If not, the tag a cannot contain a block element. Because of a rule of html the unblock-level element cannot have the block-level element inside. If you do, the unblock-level one will not work well.

Front end web development

I want to make the button in top right and what it showed after click on it at the corrner of codepen.io site. Someone can fix my code and indicate the errors ?
$(document).ready(function(){
$(".nut").click(function(){
$(".choose").toggle(200);
});
});
#import url(fonts.googleapis.com/css?family=Lato:400,900,400italic,700italic);
html, body{
font-family: 'Open Sans', sans-serif;
}
#container{
background-color: #0d0d0d;
}
.nut{
position: absolute;
top: 10px;
right: 10px;
}
.nut a img{
border-radius: 3px;
cursor: pointer;
height: 44px;
}
.choose{
border: 1px solid black;
width: 200px;
height: 350px;
position: absolute;
top: 64px;
right: 0;
display: hidden;
}
.choose ul{
padding: 0px;
list-style-type: none;
}
.choose .one li{
cursor: pointer;
position: ralative;
padding: 8px 15px 10px;
}
.choose .one li a{
font-size: 15px;
}
.choose .one li:nth-child(7){
border-bottom: 1px solid black;
margin-bottom: 3px;
}
.choose .one li:hover{
background-color: #e6e6e6;
}
.choose .two li{
padding: 0 ;
display: inline;
opacity: .5;
}
.choose .two ul li{
font-size: 7px;
}
.choose .two li:hover{
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nut">
<a><img src="//gravatar.com/avatar/7630787fd05d0b926f921213710bb074?s=80">
</a>
</div>
<div class="choose">
<ul class="one">
<li><a>New Pen</a></li>
<li><a>New Post</a></li>
<li><a>Recent Activity</a></li>
<li><a>Embed Theme Builder</a></li>
<li><a>Settings</a></li>
<li><a>Help</a></li>
<li><a>Log Out</a></li>
<li><a>Your Profile</a></li>
<li>
<ul class="two">
<li><a>Pens</a></li>
<li><a>Posts</a></li>
<li><a>Collections</a></li>
</ul>
<li>
</ul>
</div>

Have a look at my example. all you need to do is have the proper CSS and toggle the open class: JSFiddle
$(document).ready(function(){
$(".user-stuff").click(function(){
$('.user-dropdown').toggleClass('open');
});
});
#import url(fonts.googleapis.com/css?family=Lato:400,900,400italic,700italic);
a {
font-family: 'Lato';
}
.user-dropdown {
background: white;
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.35);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.35);
position: absolute;
top: 100%;
padding: 5px 0;
width: 200px;
color: #222;
opacity: 0;
visibility: hidden;
-webkit-transition: -webkit-transform 0.15s, opacity 0.15s;
transition: transform 0.15s, opacity 0.15s;
-webkit-transform: scale(0.95);
-ms-transform: scale(0.95);
transform: scale(0.95);
-webkit-transform-origin: top right;
-ms-transform-origin: top right;
transform-origin: top right
}
.open.user-dropdown {
visibility: visible;
opacity: 1;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1)
}
#mini-personal-avatar {
border-radius: 2px;
cursor: pointer
}
.link-list,
.link-list ul,
.link-list ol {
list-style: none
}
.link-list a {
color: black;
display: block;
padding: 8px 15px 10px;
line-height: 1.1;
text-shadow: none;
text-decoration: none
}
.link-list a:hover,
.link-list a:focus {
color: inherit;
background: #E7E7E7
}
.link-list a.active {
background: #ccc
}
.link-list a.active .view-meta {
color: #666
}
.user-dropdown {
top: 45px;
left: 0 !important;
right: 0;
}
.user-dropdown>li {
position: relative
}
.user-dropdown>li.sep-after {
border-bottom: 1px solid #666;
padding-bottom: 5px
}
.user-dropdown>li.sep-after+li {
padding-top: 5px
}
.user-dropdown .context-switcher {
position: relative;
padding: 0 !important
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="user-stuff header-chunk">
<img id="mini-personal-avatar" src="//gravatar.com/avatar/b10c8837fdebfca4078b6bad5217c2de?s=80" width="44" height="44" class="user-avatar" alt="User Gravatar" data-dropdown="#user-dropdown">
</div>
<ul class="user-dropdown link-list is-dropdown" id="user-dropdown">
<li class="dropdown-newpen">
<a href="/pen/">
New Pen
</a>
</li>
<li class="dropdown-newpost">
<a href="/write/">
New Post
</a>
</li>
<li class="dropdown-activity">
<a href="/ilanus/activity/">
Recent Activity
</a>
</li>
<li class="dropdown-embedbuilder">
<a href="/ilanus/embed/builder/public/">
Embed Theme Builder
</a>
</li>
<li class="dropdown-yoursettings">
<a href="/ilanus/settings/editor/">
Settings
</a>
</li>
<li class="dropdown-help">
<a href="http://blog.codepen.io/documentation/">
Help
</a>
</li>
<li class="dropdown-logout sep-after">
<a href="/login/logout" id="logout">
Log Out
</a> </li>
</ul>

Categories

Resources