resize header or shrink header on page scroll

resize header or shrink header on page scroll - javascript

$(document).ready(function(){
$(".l-right").click(function(){
debugger;
$(".menu-overlay").show();
});
$(".icon-close").click(function(){
debugger;
$(".menu-overlay").hide();
});
});
.header-top {
background: rgba(0, 47, 77, .3);
height: 100px;
padding: 0 10px;
position: fixed;
top: 0;
width: 100%;
z-index: 12;
box-sizing: border-box;
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.l-left {
float: left;
}
.l-right {
float: right;
}
.toggle-menu {
width: 50px;
height: 50px;
display: inline-block;
position: relative;
top: -40px;
}
.toggle-menu i {
position: absolute;
display: block;
height: 2px;
background: white;
width: 30px;
left: 10px;
-webkit-transition: all .3s;
transition: all .3s;
}
.toggle-menu i:nth-child(1) {
top: 16px;
}
.toggle-menu i:nth-child(2) {
top: 24px;
}
.toggle-menu i:nth-child(3) {
top: 32px;
}
.icon-menu{
color: #FFFFFF;
font-size: 2.2em;
}
.menu-overlay {
display: none;
position: fixed;
top: 0;
z-index: 9999;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.65);
}
.menu-body{
position: fixed;
top: 0;
z-index: 99999;
right: 0;
height: 100%;
background-color: #ef4f51;
width: 35%;
float: right;
}
span.closer {
font-size: 50px;
float: right;
color: white;
padding: 30px;
}
.menu-pan{
width: 100%;
float: left;
padding: 0 80px;
}
.menu-pan li {
padding: 10px 0;
}
.menu-pan li a {
color: white;
text-decoration: none;
font-size: 32px;
}
.btn-round{
border-radius: 17px;
}
.btn {
padding: 8px 25px;
border: 0 none;
text-transform: uppercase;
/* margin-left:10px; */
/* margin-right: 100px; */
margin-top:35px;
letter-spacing: 2px;
font-size: 1em;
font-family: 'Roboto', sans-serif;
}
.btn-danger {
background: #ef4f50;
color: #ffffff;
}
.btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active, .open > .dropdown-toggle.btn-danger {
background: #c03233;
}
.btn-danger:active, .btn-danger.active {
background: #c03233;
box-shadow: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css" rel="stylesheet"/>
<header>
<div class="header-top clearfix">
DONATE NOW
<img src="http://safindia.org/assets/img/logohome.png" class="img-responsive" />
<a class="l-right toggle-menu" href="#" id="pop">
<span class="icon-menu" onclick="openNav()"></span>
</a>
</div>
<div class="menu-overlay">
<div class="menu-body">
<span class="closer" onclick="closeNav()"><i class="icon-close icons"></i></span>
<ul class="menu-pan">
<li>Home</li>
<li>About Us</li>
<li>What We Do</li>
<li>Get Involved</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</header>
hello the above code is for hamburger side navigation menu i want to make it shrink or resize on on page scroll as well i want to open that menu from right side with smooth transition effect & when i click outside opened menu (menu-body) it should close.

See below working code.
Comments are added for code description
$(document).ready(function(){
$(".l-right").click(function(){
debugger;
$(".menu-overlay").show();
});
$(".icon-close").click(function(){
debugger;
$(".menu-overlay").hide();
});
/** SCROLL **/
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 50) {
//clearHeader, not clearheader - caps H
$("header").addClass("sticky");
}
else{
$("header").removeClass("sticky");
}
/* You can adjust on scroll behaviour here */
});
});
.header-top {
background: rgba(0, 47, 77, .3);
height: 100px;
padding: 0 10px;
position: fixed;
top: 0;
width: 100%;
z-index: 12;
box-sizing: border-box;
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.l-left {
float: left;
}
.l-right {
float: right;
}
.toggle-menu {
width: 50px;
height: 50px;
display: inline-block;
position: relative;
top: -40px;
}
.toggle-menu i {
position: absolute;
display: block;
height: 2px;
background: white;
width: 30px;
left: 10px;
-webkit-transition: all .3s;
transition: all .3s;
}
.toggle-menu i:nth-child(1) {
top: 16px;
}
.toggle-menu i:nth-child(2) {
top: 24px;
}
.toggle-menu i:nth-child(3) {
top: 32px;
}
.icon-menu{
color: #FFFFFF;
font-size: 2.2em;
}
.menu-overlay {
display: none;
position: fixed;
top: 0;
z-index: 9999;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.65);
}
.menu-body{
position: fixed;
top: 0;
z-index: 99999;
right: 0;
height: 100%;
background-color: #ef4f51;
width: 35%;
float: right;
}
span.closer {
font-size: 50px;
float: right;
color: white;
padding: 30px;
}
.menu-pan{
width: 100%;
float: left;
padding: 0 80px;
}
.menu-pan li {
padding: 10px 0;
}
.menu-pan li a {
color: white;
text-decoration: none;
font-size: 32px;
}
.btn-round{
border-radius: 17px;
}
.btn {
padding: 8px 25px;
border: 0 none;
text-transform: uppercase;
/* margin-left:10px; */
/* margin-right: 100px; */
margin-top:35px;
letter-spacing: 2px;
font-size: 1em;
font-family: 'Roboto', sans-serif;
}
.btn-danger {
background: #ef4f50;
color: #ffffff;
}
.btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active, .open > .dropdown-toggle.btn-danger {
background: #c03233;
}
.btn-danger:active, .btn-danger.active {
background: #c03233;
box-shadow: none;
}
.sticky .header-top{
background: red;
height:50px; /*You can adjust sticky/shrinked menu and its child using .sticky class*/
}
.sticky .btn{
margin-top:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css" rel="stylesheet"/>
<header>
<div class="header-top clearfix">
DONATE NOW
<img src="http://safindia.org/assets/img/logohome.png" class="img-responsive" />
<a class="l-right toggle-menu" href="#" id="pop">
<span class="icon-menu" onclick="openNav()"></span>
</a>
</div>
<div class="menu-overlay">
<div class="menu-body">
<span class="closer" onclick="closeNav()"><i class="icon-close icons"></i></span>
<ul class="menu-pan">
<li>Home</li>
<li>About Us</li>
<li>What We Do</li>
<li>Get Involved</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</header>
<p>
Hello <br/>
Hello <br/>
</p>
<p>
Hello <br/>
Hello <br/>
</p>
<p>
Hello <br/>
Hello <br/>
</p>
<p>
Hello <br/>
Hello <br/>
</p>
<p>
Hello <br/>
Hello <br/>
</p>
<p>
Hello <br/>
Hello <br/>
</p>
<p>
Hello <br/>
Hello <br/>
</p>
<p>
Hello <br/>
Hello <br/>
</p>
<p>
Hello <br/>
Hello <br/>
</p>
<p>
Hello <br/>
Hello <br/>
</p>
<p>
Hello <br/>
Hello <br/>
</p>
<p>
Hello <br/>
Hello <br/>
</p>

Related

Progress bar with steps styling

How to style my progress bar so it looks like the design? I tried to moved the text but they keep staying in the circle. Also not sure how to create the circle within another circle dot with css. It should be non clcikable. Here is the css and html files. Also not sure how to let active/finished steps be in a tick icon.
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>XXXXXX</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div id="progress">
<div id="progress-bar"></div>
<ul id="progress-text">
<li class="step active">1</li>
<li class="step">2</li>
<li class="step">3</li>
<li class="step">4</li>
<li class="step">5</li>
</ul>
</div>
<button id="progress-prev" class="btn" disabled>Prev</button>
<button id="progress-next" class="btn">Next</button>
<script src="./bar script.js"></script>
</body>
</html>
--------------------- css file
#progress {
position: relative;
margin-bottom: 30px;
}
#progress-bar {
position: absolute;
background: #4584ff;
height: 5px;
width: 0%;
top: 50%;
left: 0;
}
#progress-text {
margin: 0;
padding: 0;
list-style: none;
display: flex;
justify-content: space-between;
}
#progress-text::before {
content: "";
background-color: lightgray;
position: absolute;
top: 50%;
left: 0;
height: 5px;
width: 100%;
z-index: -1;
}
#progress-text .step {
border: 3px solid lightgray;
border-radius: 100%;
width: 25px;
height: 25px;
line-height: 25px;
text-align: center;
background-color: #fff;
font-family: sans-serif;
font-size: 14px;
position: relative;
z-index: 1;
}
#progress-text .step.active {
border-color: #4584ff;
background-color: #4584ff;
color: #fff;
}
.btn {
background: lightgray;
border: none;
border-radius: 3px;
padding: 6px 12px;
}
Here is the reference picture

I hope that's what you meant
#progress {
position: relative;
margin-bottom: 30px;
}
#progress-bar {
position: absolute;
background: #4584ff;
height: 5px;
width: 0%;
top: 50%;
left: 0;
}
#progress-text {
margin: 0;
padding: 0;
list-style: none;
display: flex;
justify-content: space-between;
}
#progress-text::before {
content: "";
background-color: lightgray;
position: absolute;
top: 50%;
left: 0;
height: 5px;
width: 100%;
z-index: -1;
}
#progress-text .step {
border: 3px solid lightgray;
border-radius: 100%;
width: 25px;
height: 25px;
line-height: 25px;
text-align: center;
background-color: #fff;
font-family: sans-serif;
font-size: 14px;
position: relative;
z-index: 1;
}
#progress-text .step.active {
border-color: #4584ff;
background-color: #4584ff;
color: #4584ff;
}
.btn {
background: lightgray;
border: none;
border-radius: 3px;
padding: 6px 12px;
}
/* added css */
#progress-text .step {
display:flex;
justify-content:center;
}
#progress-text .step label{
margin-top:120%;
font-size:.7rem;
font-weight:bold;
font-color:inherit;
}
#progress-text .step.active::after {
content:"✓";
color:#fff;
z-index:2;
position:absolute;
top:2px;
left:8px;
font-size:12px;
font-weight:bold;
}
#progress-text .step.progress{
border-color:#4584ff;
}
#progress-text .step.progress::after{
content:"•";
transform:scale(3);
position:absolute;
left:10px;
top:1.5px;
color:#4584ff;
}
#progress-text .step.progress label{
color:#4584ff;
}
<div id="progress">
<div id="progress-bar"></div>
<ul id="progress-text">
<li class="step active">
<label>Review</label>
</li>
<li class="step active">
<label>Assignment</label>
</li>
<li class="step progress">
<label>Investigation</label>
</li>
<li class="step">
<label>Handling</label>
</li>
<li class="step">
<label>Resolution</label>
</li>
</ul>
</div>
<button id="progress-prev" class="btn" disabled>Prev</button>
<button id="progress-next" class="btn">Next</button>

Block User scroll when full screen menu is open

i'm working on a full screen menu for a website but I need to disable the user to scroll while the menu is open. I can't find a fitting solution on the internet so it would be great if anyone could help me. I am not sure how to trigger the body to no-scroll if the menu is open. I am not that familiar with js.
Here is my code at the moment:
<body id="body">
<div class="navbar">
<div class="navbar-wrapper">
<div class="logo">
<img src="images/Gautama_Buddha_pic.png">
</div>
<nav id="menu">
<ul>
<li>ARTIST</li>
<li>EXHIBITIONS</li>
<li>EVENTS</li>
<li>VISIT US</li>
</ul>
<p class="lite-text">MENU</p>
<img src="images/close-line.png" class="close-icon" onclick="closemenu()">
</nav>
<img src="images/hamburger-menu.png" class="menu-icon" onclick="openmenu()">
</div>
</div>
<section class="one">
<h2>Hello World</h2>
</section>
<section class="two"></section>
<section class="three"></section>
<section class="four"></section>
<section class="five"></section>
<script>
var menu = document.getElementById("menu");
function closemenu(){
menu.style.top = "-100vh";
}
function openmenu(){
menu.style.top = "0";
}
</script>
</body>
And that's the CSS
*{
padding: 0;
margin: 0;
font-family: sans-serif;
user-select: none;
}
.container{
height: 100vh;
width: 100%;
background-color: white;
position: relative;
}
.navbar{
width: 100%;
position: fixed;
}
.navbar-wrapper{
width: 90%;
display: flex;
align-items: center;
justify-content: space-between;
margin: auto;
}
.logo img{
width: 50px;
cursor: pointer;
margin: 35px 0;
}
nav ul li{
list-style: none;
margin: 35px 0;
}
nav ul li a{
text-decoration: none;
font-size: 40px;
color: white;
padding: 10px;
letter-spacing: 5px;
position: relative;
}
nav ul li a::after{
content: '';
height: 3px;
width: 0%;
background: #dfa24e;
position: absolute;
bottom: 0;
left: 0;
transition: width 0.5s;
}
nav ul li a:hover::after{
width: 100%;
}
nav{
position: absolute;
width: 100%;
height: 100vh;
background-color: grey;
z-index: 2;
top: -100vh;
left: 0;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
transition: 1s;
overflow: hidden;
}
.lite-text{
color: transparent;
font-size: 200px;
letter-spacing: 100px;
opacity: 0.1;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-weight: 800;
z-index: -1;
-webkit-text-stroke: 5px #000;
}
.close-icon{
width: 25px;
position: absolute;
right: 80px;
top: 50px;
cursor: pointer;
}
.menu-icon{
width: 30px;
cursor: pointer;
}
section{
height: 100vh;
width: 100%;
}
.one{
background-color: tomato;
}
.two{
background-color: thistle;
}
.three{
background-color: blue;
}
.four{
background-color: blueviolet;
}
.five{
background-color: wheat;
}
.no-scroll {
overflow:hidden;
}
Thanks for your help!

I used document.querySelector('body').classList.add('no-scroll') when menu opened & document.querySelector('body').classList.remove('no-scroll') when menu closed.
*{
padding: 0;
margin: 0;
font-family: sans-serif;
user-select: none;
}
.container{
height: 100vh;
width: 100%;
background-color: white;
position: relative;
}
.navbar{
width: 100%;
position: fixed;
}
.navbar-wrapper{
width: 90%;
display: flex;
align-items: center;
justify-content: space-between;
margin: auto;
}
.logo img{
width: 50px;
cursor: pointer;
margin: 35px 0;
}
nav ul li{
list-style: none;
margin: 35px 0;
}
nav ul li a{
text-decoration: none;
font-size: 40px;
color: white;
padding: 10px;
letter-spacing: 5px;
position: relative;
}
nav ul li a::after{
content: '';
height: 3px;
width: 0%;
background: #dfa24e;
position: absolute;
bottom: 0;
left: 0;
transition: width 0.5s;
}
nav ul li a:hover::after{
width: 100%;
}
nav{
position: absolute;
width: 100%;
height: 100vh;
background-color: grey;
z-index: 2;
top: -100vh;
left: 0;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
transition: 1s;
overflow: hidden;
}
.lite-text{
color: transparent;
font-size: 200px;
letter-spacing: 100px;
opacity: 0.1;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-weight: 800;
z-index: -1;
-webkit-text-stroke: 5px #000;
}
.close-icon{
width: 25px;
position: absolute;
right: 80px;
top: 50px;
cursor: pointer;
}
.menu-icon{
width: 30px;
cursor: pointer;
}
section{
height: 100vh;
width: 100%;
}
.one{
background-color: tomato;
}
.two{
background-color: thistle;
}
.three{
background-color: blue;
}
.four{
background-color: blueviolet;
}
.five{
background-color: wheat;
}
.no-scroll {
overflow:hidden;
}
<body id="body">
<div class="navbar">
<div class="navbar-wrapper">
<div class="logo">
<img src="images/Gautama_Buddha_pic.png">
</div>
<nav id="menu">
<ul>
<li>ARTIST</li>
<li>EXHIBITIONS</li>
<li>EVENTS</li>
<li>VISIT US</li>
</ul>
<p class="lite-text">MENU</p>
<img src="images/close-line.png" class="close-icon" onclick="closemenu()">
</nav>
<img src="images/hamburger-menu.png" class="menu-icon" onclick="openmenu()">
</div>
</div>
<section class="one">
<h2>Hello World</h2>
</section>
<section class="two"></section>
<section class="three"></section>
<section class="four"></section>
<section class="five"></section>
<script>
var menu = document.getElementById("menu");
function closemenu(){
document.querySelector('body').classList.remove('no-scroll')
menu.style.top = "-100vh";
}
function openmenu(){
document.querySelector('body').classList.add('no-scroll')
menu.style.top = "0";
}
</script>
</body>

Align divs in one line and stick to bottom

I have the following HTML/CSS/JS:
function toggleClass() {
document.getElementById('shopping-cart-body').classList.toggle('open');
}
.cart-preview {
float: right;
position: relative;
}
.cart-preview a,
.cart-preview a:hover,
.cart-preview a:visited {
text-decoration: none;
color: inherit;
}
.cart-preview .header {
display: block;
font-weight: bold;
border: 1px solid #808080;
padding: 5px;
cursor: pointer;
background-color: #fff;
}
.cart-preview .body {
visibility: visible;
position: fixed;
height: 100%;
top: 0;
width: 400px;
background-color: #fff;
transition: right 1s linear;
right: -400px;
}
.cart-preview .body.open {
visibility: visible;
transition: right 1s linear;
right: 0px;
}
.cart-preview .body .shooping-cart-body {
font-family: 'sans-serif';
width: 100%;
text-align: center;
}
.cart-preview .body .products-container {
position: relative;
height: 100%;
width: 100;
margin-top: 15px;
overflow: auto;
}
.cart-preview .body .product {
display: inline-block;
}
.cart-preview .body .products-container>.product-image {
position: absolute;
width: 50%;
left: 0;
}
.cart-preview .body .products-container>.product-details {
position: absolute;
width: 50%;
float: right;
}
.cart-preview .body .products-container .color-circle:before {
content: ' \25CF';
font-size: 30px;
}
.cart-preview .body .checkout {
position: relative;
height: 100%;
width: 100%;
}
.cart-preview .body .checkout>button {
position: absolute;
background: black;
text-align: center;
color: white;
bottom: 20px;
margin-bottom: 50px;
height: 20px;
width: 205px;
margin-left: 100px;
}
.taxes {
position: absolute;
bottom: 150px;
left: 0;
}
.cart-total {
position: absolute;
bottom: 100px;
width: 100%;
}
.taxes {
position: absolute;
bottom: 130px;
width: 100%;
}
.cart-total .value {
float: right;
}
.cart-total .label {
float: left;
}
.taxes .value {
float: right;
}
.taxes .label {
float: left;
}
<div id="blockcart-wrapper">
<div class="blockcart cart-preview">
<div class="header">
<a rel="nofollow" href="#">
<img class="cart-icon" src="https://via.placeholder.com/20x20" onclick="toggleClass()">
</a>
</div>
<div class="body" id="shopping-cart-body">
<div class="close">X</div>
<ul>
</ul>
<div class="shopping-cart-header">CART</div>
<div class="products-container">
<div class="product">
<span class="prodcut-image"><img src="https://via.placeholder.com/250x100"></span>
<div class="product-details">
<div class="name-header">NAME</div>
<div class="product-quantity-details">
<span class="quantity">QTY</span>
<span class="color-circle"></span>
<span class="color">COLOR</span>
</div>
<div class="price-open">
<span class="product-price">XX.XX</span>
<span class="product-link">öffnen</span>
</div>
</div>
</div>
</div>
<div class="checkout">
<div class="taxes">
<span class="label">Taxes</span>
<span class="value">0</span>
</div>
<div class="cart-total">
<span class="label">Total</span>
<span class="value">0</span>
</div>
<button>Checkout</button>
</div>
</div>
</div>
</div>
I want to achieve, that the div 'product-details' is displayed in the same line as the image and both of them should take 50% of the place available.
Additionally, i want to stick the checkout div to the bottom of the whole div, it is actually not even shown.
As you see, I used display: inline-block for the product div, but it is not working, I don't know why.
So bascically i want to achieve: image on the left, details on the right.
There is a lot more CSS and HTML, for a better readability I removed them.
The whole body is position: fixed, because it should always take the full page.
This is a MVCE and should work in a jsfiddle or in codepen.
Can someone help me?

First, it looks like some of your selectors weren't even working. Second, you were applying inline-block to the parent, when it really should have been applied to the children.
Either way, I think flexbox is a better solution here. I also made the image shrink or expand to fill the available space.
function toggleClass() {
document.getElementById('shopping-cart-body').classList.toggle('open');
}
.cart-preview {
float: right;
position: relative;
}
.cart-preview a,
.cart-preview a:hover,
.cart-preview a:visited {
text-decoration: none;
color: inherit;
}
.cart-preview .header {
display: block;
font-weight: bold;
border: 1px solid #808080;
padding: 5px;
cursor: pointer;
background-color: #fff;
}
.cart-preview .body {
visibility: visible;
position: fixed;
height: 100%;
top: 0;
width: 400px;
background-color: #fff;
transition: right 1s linear;
right: -400px;
}
.cart-preview .body.open {
visibility: visible;
transition: right 1s linear;
right: 0px;
}
.cart-preview .body .shooping-cart-body {
font-family: 'sans-serif';
width: 100%;
text-align: center;
}
.cart-preview .body .products-container {
position: relative;
height: 100%;
width: 100;
margin-top: 15px;
overflow: auto;
}
.product {
display: flex;
}
.product>div {
width: 50%;
}
.product .prodcut-image {
margin-right: 20px;
}
.product img {
width: 100%;
height: auto;
}
.cart-preview .body .products-container>.product-image {
position: absolute;
width: 50%;
left: 0;
}
.cart-preview .body .products-container>.product-details {
position: absolute;
width: 50%;
float: right;
}
.cart-preview .body .products-container .color-circle:before {
content: ' \25CF';
font-size: 30px;
}
.cart-preview .body .checkout {
position: relative;
height: 100%;
width: 100%;
}
.cart-preview .body .checkout>button {
position: absolute;
background: black;
text-align: center;
color: white;
bottom: 20px;
margin-bottom: 50px;
height: 20px;
width: 205px;
margin-left: 100px;
}
.taxes {
position: absolute;
bottom: 150px;
left: 0;
}
.cart-total {
position: absolute;
bottom: 100px;
width: 100%;
}
.taxes {
position: absolute;
bottom: 130px;
width: 100%;
}
.cart-total .value {
float: right;
}
.cart-total .label {
float: left;
}
.taxes .value {
float: right;
}
.taxes .label {
float: left;
}
<div id="blockcart-wrapper">
<div class="blockcart cart-preview">
<div class="header">
<a rel="nofollow" href="#">
<img class="cart-icon" src="https://via.placeholder.com/20x20" onclick="toggleClass()">
</a>
</div>
<div class="body" id="shopping-cart-body">
<div class="close">X</div>
<ul>
</ul>
<div class="shopping-cart-header">CART</div>
<div class="products-container">
<div class="product">
<span class="prodcut-image"><img src="https://via.placeholder.com/250x100"></span>
<div class="product-details">
<div class="name-header">NAME</div>
<div class="product-quantity-details">
<span class="quantity">QTY</span>
<span class="color-circle"></span>
<span class="color">COLOR</span>
</div>
<div class="price-open">
<span class="product-price">XX.XX</span>
<span class="product-link">öffnen</span>
</div>
</div>
</div>
</div>
<div class="checkout">
<div class="taxes">
<span class="label">Taxes</span>
<span class="value">0</span>
</div>
<div class="cart-total">
<span class="label">Total</span>
<span class="value">0</span>
</div>
<button>Checkout</button>
</div>
</div>
</div>
</div>

Try this
function toggleClass() {
document.getElementById('shopping-cart-body').classList.toggle('open');
}
.cart-preview a:visited {
text-decoration: none;
color: inherit;
}
.cart-preview .header {
display: block;
font-weight: bold;
border: 1px solid #808080;
padding: 5px;
cursor: pointer;
background-color: #fff;
}
.cart-preview .body {
visibility: visible;
position: fixed;
height: 100%;
top: 0;
width: 400px;
background-color: #fff;
transition: right 1s linear;
right: -400px;
}
.cart-preview .body.open {
visibility: visible;
transition: right 1s linear;
right: 0px;
}
.cart-preview .body .shooping-cart-body{
font-family: 'sans-serif';
width: 100%;
text-align: center;
}
.cart-preview .body .products-container{
position: relative;
height: 100%;
width: 100%;
margin-top: 15px;
overflow: auto;
}
.cart-preview .body .product{
display: inline-block;
width:100%;
}
.cart-preview .body .products-container > .product-image {
position: absolute;
width: 50%;
left: 0;
}
.cart-preview .body .products-container > .product-details {
position: absolute;
width: 50%;
float: right;
}
.cart-preview .body .products-container .color-circle:before{
content: ' \25CF';
font-size: 30px;
}
.prodcut-image{
display:inline-block;
}
.product-details{
display:inline-block;
vertical-align:top;
}
.cart-preview .body .checkout {
position: relative;
height: 100%;
width: 100%;
}
.cart-preview .body .checkout > button {
position: absolute;
background: black;
text-align: center;
color: white;
bottom: 20px;
margin-bottom: 50px;
height: 20px;
width: 205px;
margin-left:100px;
}
.taxes{
position: absolute;
bottom: 150px;
left: 0;
}
.cart-total{
position: absolute;
bottom: 100px;
width: 100%;
}
.taxes{
position: absolute;
bottom: 130px;
width: 100%;
}
.cart-total .value{
float: right;
}
.cart-total .label{
float: left;
}
.taxes .value{
float: right;
}
.taxes .label{
float: left;
}
<div id="blockcart-wrapper">
<div class="blockcart cart-preview">
<div class="header">
<a rel="nofollow" href="#">
<img class="cart-icon" src="img.svg" onclick="toggleClass()">
</a>
</div>
<div class="body" id="shopping-cart-body">
<div class="close">X</div>
<ul>
</ul>
<div class="shopping-cart-header">CART</div>
<div class="products-container">
<div class="product">
<span class="prodcut-image"><img src="https://fakeimg.pl/250x100"></span>
<div class="product-details">
<div class="name-header">NAME</div>
<div class="product-quantity-details">
<span class="quantity">QTY</span>
<span class="color-circle"></span>
<span class="color">COLOR</span>
</div>
<div class="price-open">
<span class="product-price">XX.XX</span>
<span class="product-link">öffnen</span>
</div>
</div>
</div>
</div>
<div class="checkout">
<div class="taxes">
<span class="label">Taxes</span>
<span class="value">0</span>
</div>
<div class="cart-total">
<span class="label">Total</span>
<span class="value">0</span>
</div>
<button>Checkout</button>
</div>
</div>
</div>
</div>
Although html structure should be updated and more refined.

Add text pop up on link click

MY website is currently under construction so im trying to add a little pop up on the header links that says "coming soon" or something like that. You click it and it just pops up near the link.
This is the tutorial i was following but cant get it to work with my own code. So ill take anything at this point.
https://www.w3schools.com/howto/howto_js_popup.asp
Id like something where all i have to do is add a certain class to each link and it just work once that class is added or something like that seems to me to be the best.
so idealy id like to add it to the about us, our work and services button.
<ul class="nav">
<div class="new">
<li>HOME</li>
<li>ABOUT US</li>
<li>OUR WORK</li>
<li>SERVICES</li>
</div>
</ul>
#import url('https://fonts.googleapis.com/css?family=Roboto');
#import url('https://fonts.googleapis.com/css?family=Roboto:bold');
#import url('https://fonts.googleapis.com/css?family=Roboto:100');
#import url('https://fonts.googleapis.com/css?family=Roboto:600');
#font-face {
font-family: "roboto";
src: url('https://fonts.googleapis.com/css?family=Roboto');
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
top: 0;
background-image: url('images/bg.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color:#e0e0e0;
}
.logo {
width: 150px;
fill: white;
display: block;
position: relative;
padding: 23px 0px 0px 50px;
}
.logo svg {
position: absolute;
top: 0px;
right: 0px;
}
#hireus {
position: absolute;
top: 0;
right: 0;
padding: 3px;
font-family: proxima nova;
font-size: 12px;
text-decoration: none;
color: white;
margin: 27px 50px 0px 0px;
text-decoration: none;
z-index: 10;
}
.intro {
height: 100%;
width: 100%;
margin: auto;
display: table;
/*
top: 0;
background-image: url('images/bg.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
*/
}
.intro .inner {
display: table-cell;
vertical-align: middle;
width: 100%;
max-width: none;
}
/* was ul */
.nav {
list-style-type: none;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
opacity: 0.8;
display: table;
margin: 0;
width: 100%;
text-align: center;
padding: 0
}
li {
/*
width: 120px;
height: 40px;
*/
margin: 0px 0px;
display: inline-block;
padding: 0;
font-family: proxima nova;
font-size: 10px;
text-decoration: none;
}
.new a {
display: block;
/*
width: 120px;
height: 40px;
*/
/* line-height: 40px; */
text-decoration: none;
text-align: center;
color: white;
/* margin: 20px 20px; */
margin: 32px 20px 0px 20px;
}
.content {
max-width: 1200px;
margin: 0 auto;
text-align: center;
padding-bottom: 7%;
}
.content h1 {
font-family: proxima nova;
font-size: 520%;
font-weight: bold;
color: white;
margin: 0;
padding-bottom: 3px;
}
.content p {
font-family: proxima nova;
font-size: 12px;
font-weight: 100;
color: white;
margin: 0 auto;
max-width: 420px;
padding-bottom: 25px;
}
.btn {
font-family: proxima nova;
font-size: 14px;
font-weight: bold;
color: white;
text-decoration: none;
border: solid 1px white;
/* padding: 10px 100px; */
border-radius: 60px;
transition: all 0.5s;
width: 160px;
display: inline-block;
text-align: center;
padding-top: 13px;
padding-bottom: 13px;
}
.btn:hover {
color: #b0ccff;
border: solid 1px #b0ccff;
}
.btn2 {
font-family: proxima nova;
font-size: 14px;
font-weight: bold;
color: white;
text-decoration: none;
border: solid 1px #0B315C;
/* padding: 10px 100px; */
border-radius: 60px;
transition: all 0.5s;
width: 160px;
background-color: #0B315C;
display: inline-block;
text-align: center;
padding-top: 13px;
padding-bottom: 13px;
margin-left: 30px;
-webkit-box-shadow: 0px 0px 20px black rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 0px 20px black rgba(0, 0, 0, 0.5);
box-shadow: 0px 0px 20px black rgba(0, 0, 0, 0.5);
}
.btn2:hover {
color: #b0ccff;
border: solid 1px #b0ccff;
}
#scroll {
color: green;
}
.title {
font-family: proxima nova;
font-size: 50px;
font-weight: 600;
color: black;
text-align: center;
margin-top: 60px;
padding-bottom: 2px;
}
.subtitle {
font-family: proxima nova;
font-size: 12px;
font-weight: 200;
color: #9D9D9D;
text-align: center;
margin-top: -45px;
padding-bottom: 2px;
}
#second {
border-bottom: 1px solid #E6E6E6;
width: 480px;
margin: auto;
}
#Layer_1 {
width: 100px;
height: 100px;
}
#group2 {}
.whatwedo {
text-align: center;
width: 100%;
margin-top: 100px;
}
.subject {
text-align: center;
width: 300px;
display: inline-block;
margin: 0px 50px;
}
.subject img{
width: 100px;
}
.subject h2 {
font-family: proxima nova;
font-size: 20px;
font-weight: 600;
color: black;
margin-bottom: 12px;
}
.desc {
font-family: proxima nova;
font-size: 12px;
font-weight: 200;
color: #9D9D9D;
}
.group3 {
position: relative;
text-align: center;
color: white;
margin-top: 90px;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: proxima nova;
font-size: 24px;
font-weight: 100;
color: white;
width: 550px;
}
form {
display: table;
margin: 0 auto;
}
#forth {
width: 100%;
}
#forth h2{
margin-bottom: 20px;
}
input[type=text],
select {
width: 400px;
padding: 13px 20px;
margin: 8px 0;
display: inline-block;
border-radius: 30px;
box-sizing: border-box;
font-family: proxima nova;
font-size: 14px;
}
input[type=submit] {
width: 160px;
background-color: #4CAF50;
color: white;
padding: 13px 20px;
margin: 8px 0;
border: none;
border-radius: 30px;
cursor: pointer;
background-color: #0B315C;
font-family: proxima nova;
font-size: 14px;
font-weight: bold;
position: relative;
bottom: 42px;
margin: -9px 0px 0px 240px;
}
.email-form {
width: 400px;
}
.email-form input {
border: 0;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
}
#hi{
background-color: #F9F9F9;
margin-top: -64px;
padding-top: 150px;
padding-bottom: 120px;
}
footer {
background-color: #30659B;
width: 100vw;
}
.logo2 {
width: 150px;
fill: white;
display: block;
}
.nav2 {
padding:0;
list-style-type: none;
color: white;
display: flex; /*Generates a flexbox layout with default flex direction as row */
width: 100%; /* Not really required */
height:100px;
align-items: center; /*Aligns contents vertically */
justify-content: space-around;
margin: 0px;
}
li {
padding:0;
font-family: proxima nova;
font-size: 10px;
text-decoration: none;
text-align:center;
margin:5px;
}
li:first-child{
margin-left:100px;
}
li:last-child{
margin-right:100px;
}
li a {
text-decoration: none;
color: white;
}
/*--- Media Queries --*/
#media screen and (max-width: 900px) {
.content {
padding-bottom: 10%;
}
.content h1 {
font-size: 400%
}
.btn {
font-size: 110%;
padding: 9px 43px;
}
}
#media screen and (max-width: 768px) {
.content {
padding-bottom: 12%;
}
.content h1 {
font-size: 300%
}
.btn {
font-size: 100%;
padding: 9px 43px;
}
}
#media screen and (max-width: 480px) {
.content {
padding-bottom: 14%;
}
.content h1 {
font-size: 300%
}
.btn {
font-size: 100%;
padding: 10px 44px;
}
}
<!DOCTYPE html>
<head>
<title>Launchpad | Web design and marketing</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link href="css/animate.css" rel="stylesheet"/>
<link href="css/waypoints.css" rel="stylesheet"/>
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
<link rel="icon" href="images/favicon.ico" type="image/x-icon">
<script src="js/jquery.waypoints.min.js" type="text/javascript"></script>
<script src="js/waypoints.js" type="text/javascript"></script>
</head>
<body>
<div class="logo">
<svg class="logo" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 268 50"><title>Artboard 1</title><path d="M46.26,10.5h6.46V35.17H65.55v5.69H46.26Z"/><path d="M82.8,38.59a9.1,9.1,0,0,1-7,2.82c-3.5,0-7.65-2.37-7.65-7.28,0-5.14,4.14-7,7.65-7,2.91,0,5.51.91,7,2.69v-3c0-2.23-1.91-3.69-4.82-3.69a9.25,9.25,0,0,0-6.42,2.59l-2.18-3.87A14.42,14.42,0,0,1,79,18.33c5,0,9.6,2,9.6,8.33v14.2H82.8Zm0-5.74a5.78,5.78,0,0,0-4.64-1.91c-2.28,0-4.14,1.23-4.14,3.32s1.87,3.23,4.14,3.23a5.78,5.78,0,0,0,4.64-1.91Z"/><path d="M109.15,38.08a10.29,10.29,0,0,1-7.74,3.32c-4.82,0-7.1-2.64-7.1-6.92V18.88h5.78V32.21c0,3,1.59,4.05,4.05,4.05a6.47,6.47,0,0,0,5-2.5V18.88h5.78v22h-5.78Z"/><path d="M135.5,27.57c0-3-1.59-4.1-4.05-4.1a6.26,6.26,0,0,0-5,2.59V40.86h-5.78v-22h5.78v2.87a10.07,10.07,0,0,1,7.69-3.41c4.82,0,7.15,2.73,7.15,7V40.86H135.5Z"/><path d="M157.26,18.33c4.51,0,7.24,2,8.69,4l-3.78,3.5a5.44,5.44,0,0,0-4.64-2.37c-3.5,0-6,2.55-6,6.37s2.46,6.42,6,6.42a5.55,5.55,0,0,0,4.64-2.37L166,37.4c-1.46,2-4.19,4-8.69,4-6.78,0-11.65-4.78-11.65-11.56S150.48,18.33,157.26,18.33Z"/><path d="M184.61,27.48c0-3-1.59-4-4.1-4a6.4,6.4,0,0,0-5,2.59V40.86h-5.78V10.5h5.78V21.74a10.17,10.17,0,0,1,7.74-3.41c4.82,0,7.15,2.64,7.15,6.92V40.86h-5.78Z"/><path d="M196.12,49.24V18.88h5.78v2.78a8.49,8.49,0,0,1,6.78-3.32c5.64,0,9.74,4.19,9.74,11.52s-4.1,11.56-9.74,11.56A8.4,8.4,0,0,1,201.9,38v11.2Zm10.74-25.76a6.47,6.47,0,0,0-5,2.5v7.78a6.62,6.62,0,0,0,5,2.5c3.32,0,5.55-2.59,5.55-6.42S210.19,23.47,206.86,23.47Z"/><path d="M235.94,38.59a9.1,9.1,0,0,1-7,2.82c-3.51,0-7.65-2.37-7.65-7.28,0-5.14,4.14-7,7.65-7,2.91,0,5.51.91,7,2.69v-3c0-2.23-1.91-3.69-4.82-3.69a9.25,9.25,0,0,0-6.42,2.59l-2.18-3.87a14.42,14.42,0,0,1,9.6-3.46c5,0,9.6,2,9.6,8.33v14.2h-5.78Zm0-5.74a5.78,5.78,0,0,0-4.64-1.91c-2.28,0-4.14,1.23-4.14,3.32s1.87,3.23,4.14,3.23a5.78,5.78,0,0,0,4.64-1.91Z"/><path d="M262.57,38.08a8.62,8.62,0,0,1-6.78,3.32c-5.55,0-9.74-4.19-9.74-11.51s4.14-11.56,9.74-11.56a8.47,8.47,0,0,1,6.78,3.37V10.5h5.83V40.86h-5.83Zm0-12.11a6.36,6.36,0,0,0-5-2.5c-3.28,0-5.55,2.59-5.55,6.42s2.28,6.37,5.55,6.37a6.36,6.36,0,0,0,5-2.5Z"/><path d="M7.56,38.52l8.13,10.73a1.41,1.41,0,0,0,2.16,0L26,38.52a1.34,1.34,0,0,0-.56-2L18.53,33A4,4,0,0,0,15,33l-6.89,3.5A1.34,1.34,0,0,0,7.56,38.52Z"/><path d="M30.31,14.15,18.12.82a1.91,1.91,0,0,0-2.7,0L3.23,14.15a4,4,0,0,0-1,2.16L-.38,34.52c-.13.9,1,1.53,1.93,1.07L4.29,34.2l12.48-6.37L29.25,34.2,32,35.59c.92.47,2.06-.17,1.93-1.07l-2.57-18.2A4,4,0,0,0,30.31,14.15Z"/></svg>
</div>
<a id="hireus" href="/">HIRE US</a>
<ul class="nav">
<div class="new">
<li>HOME</li>
<li>ABOUT US</li>
<li>OUR WORK</li>
<li>SERVICES</li>
</div>
</ul>
<section class="intro">
<div class="inner">
<div class="content">
<section class="os-animation" data-os-animation="fadeInUp" data-os-animation-delay="0.2s">
<h1>Welcome to Launchpad</h1>
<p>We are a creative agency who specializes in digital marketing and graphic design. Let us launch your business to the next level!</p>
</section>
<section class="os-animation" data-os-animation="fadeInUp" data-os-animation-delay="0.7s">
<a class="btn" href="#">Hire Us</a>
<a class="btn2" href="#">Learn More</a>
</section>
</div>
</div>
</section>
<div id="second">
<h2 class="title">What we do</h2>
<p class="subtitle">Let us take your buisness to the next level.</p>
</div>
<div class="group2">
<div class="whatwedo">
<div class="subject" id="customdesign">
<img src="images/customdesign.svg" alt="Custom Design">
<h2 class="title2">Custom Design</h2>
<p class="desc">Lorem ipsum dolor sit amet, scripta posidonium per ex. Duo ad unum graece luptatum, ius in dolores deleniti posidonium. </p>
</div>
<div class="subject" id="contentmarketing">
<img src="images/contentmarketing.svg" alt="Content Mrketing">
<h2 class="title2">Content Marketing</h2>
<p class="desc">Lorem ipsum dolor sit amet, scripta posidonium per ex. Duo ad unum graece luptatum, ius in dolores deleniti posidonium. </p>
</div>
<div class="subject" id="emailmarketing">
<img src="images/emailmarketing.svg" alt="Email Marketing">
<h2 class="title2">Email Marketing</h2>
<p class="desc">Lorem ipsum dolor sit amet, scripta posidonium per ex. Duo ad unum graece luptatum, ius in dolores deleniti posidonium. </p>
</div>
</div>
</div>
<div class="group3">
<img src="images/testimonialbg.png" alt="Norway" style="width:100%;">
<div class="centered">“The team at Launchpad exceeded our expectations!
They have a bright future ahead of them.”<br>
<span style="font-weight: 600;">Sam Molloy, Unmatched Masonry</span></div>
</div>
<!--
<div id="second">
<h2 class="title">Our work</h2>
<p class="subtitle">Nervous about taking off? Here's the portfolio.</p>
</div>
-->
<div id="hi">
<div id="forth">
<h2 class="title">Lets get in touch</h2>
<form action="mailto:contact#madebylaunchpad.com" method="post" enctype="text/plain" class="email-form">
<input type="text" name="mail" placeholder="Your email address"><br>
<input type="submit" value="Lets talk">
</form>
</div>
</div>
<footer>
<ul class="nav2">
<li class="li2">ABOUT US</li>
<li class="li2">OUR WORK</li>
<li class="li2">SERVICES</li>
<li>
<div class="logo2">
<svg class="logo2" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 268 50"><title>Artboard 1</title><path d="M46.26,10.5h6.46V35.17H65.55v5.69H46.26Z"/><path d="M82.8,38.59a9.1,9.1,0,0,1-7,2.82c-3.5,0-7.65-2.37-7.65-7.28,0-5.14,4.14-7,7.65-7,2.91,0,5.51.91,7,2.69v-3c0-2.23-1.91-3.69-4.82-3.69a9.25,9.25,0,0,0-6.42,2.59l-2.18-3.87A14.42,14.42,0,0,1,79,18.33c5,0,9.6,2,9.6,8.33v14.2H82.8Zm0-5.74a5.78,5.78,0,0,0-4.64-1.91c-2.28,0-4.14,1.23-4.14,3.32s1.87,3.23,4.14,3.23a5.78,5.78,0,0,0,4.64-1.91Z"/><path d="M109.15,38.08a10.29,10.29,0,0,1-7.74,3.32c-4.82,0-7.1-2.64-7.1-6.92V18.88h5.78V32.21c0,3,1.59,4.05,4.05,4.05a6.47,6.47,0,0,0,5-2.5V18.88h5.78v22h-5.78Z"/><path d="M135.5,27.57c0-3-1.59-4.1-4.05-4.1a6.26,6.26,0,0,0-5,2.59V40.86h-5.78v-22h5.78v2.87a10.07,10.07,0,0,1,7.69-3.41c4.82,0,7.15,2.73,7.15,7V40.86H135.5Z"/><path d="M157.26,18.33c4.51,0,7.24,2,8.69,4l-3.78,3.5a5.44,5.44,0,0,0-4.64-2.37c-3.5,0-6,2.55-6,6.37s2.46,6.42,6,6.42a5.55,5.55,0,0,0,4.64-2.37L166,37.4c-1.46,2-4.19,4-8.69,4-6.78,0-11.65-4.78-11.65-11.56S150.48,18.33,157.26,18.33Z"/><path d="M184.61,27.48c0-3-1.59-4-4.1-4a6.4,6.4,0,0,0-5,2.59V40.86h-5.78V10.5h5.78V21.74a10.17,10.17,0,0,1,7.74-3.41c4.82,0,7.15,2.64,7.15,6.92V40.86h-5.78Z"/><path d="M196.12,49.24V18.88h5.78v2.78a8.49,8.49,0,0,1,6.78-3.32c5.64,0,9.74,4.19,9.74,11.52s-4.1,11.56-9.74,11.56A8.4,8.4,0,0,1,201.9,38v11.2Zm10.74-25.76a6.47,6.47,0,0,0-5,2.5v7.78a6.62,6.62,0,0,0,5,2.5c3.32,0,5.55-2.59,5.55-6.42S210.19,23.47,206.86,23.47Z"/><path d="M235.94,38.59a9.1,9.1,0,0,1-7,2.82c-3.51,0-7.65-2.37-7.65-7.28,0-5.14,4.14-7,7.65-7,2.91,0,5.51.91,7,2.69v-3c0-2.23-1.91-3.69-4.82-3.69a9.25,9.25,0,0,0-6.42,2.59l-2.18-3.87a14.42,14.42,0,0,1,9.6-3.46c5,0,9.6,2,9.6,8.33v14.2h-5.78Zm0-5.74a5.78,5.78,0,0,0-4.64-1.91c-2.28,0-4.14,1.23-4.14,3.32s1.87,3.23,4.14,3.23a5.78,5.78,0,0,0,4.64-1.91Z"/><path d="M262.57,38.08a8.62,8.62,0,0,1-6.78,3.32c-5.55,0-9.74-4.19-9.74-11.51s4.14-11.56,9.74-11.56a8.47,8.47,0,0,1,6.78,3.37V10.5h5.83V40.86h-5.83Zm0-12.11a6.36,6.36,0,0,0-5-2.5c-3.28,0-5.55,2.59-5.55,6.42s2.28,6.37,5.55,6.37a6.36,6.36,0,0,0,5-2.5Z"/><path d="M7.56,38.52l8.13,10.73a1.41,1.41,0,0,0,2.16,0L26,38.52a1.34,1.34,0,0,0-.56-2L18.53,33A4,4,0,0,0,15,33l-6.89,3.5A1.34,1.34,0,0,0,7.56,38.52Z"/><path d="M30.31,14.15,18.12.82a1.91,1.91,0,0,0-2.7,0L3.23,14.15a4,4,0,0,0-1,2.16L-.38,34.52c-.13.9,1,1.53,1.93,1.07L4.29,34.2l12.48-6.37L29.25,34.2,32,35.59c.92.47,2.06-.17,1.93-1.07l-2.57-18.2A4,4,0,0,0,30.31,14.15Z"/></svg>
</div></li>
<li class="li3">TWITTER</li>
<li class="li3">FACEBOOK</li>
<li class="li3">INSTAGRAM</li>
</ul>
</footer>
</body>
</html>

Here's the code working:
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
#-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
#keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
<body style="text-align:center">
<h2>Popup</h2>
<div class="popup" onclick="myFunction()">Click me to toggle the popup!
<span class="popuptext" id="myPopup">A Simple Popup!</span>
</div>
</body>

I built a pretty easy example for you and I'll run you through the code here.
First here it is in action:
var selector = document.getElementById('showHide');
selector.onclick = function(){
var show = document.getElementById('hidden');
show.style.display = "block"
};
<ul class="nav">
<div class="new">
<li id="showHide">HOME</li>
<li id='hidden' style='display: none;'>Hello</li>
<li>ABOUT US</li>
<li>OUR WORK</li>
<li>SERVICES</li>
</div>
</ul>
This is going to be your nav bar. As you can see i made some changes. I gave your home button an id so that we can call it later. I also added a new <li> tag that is hidden from site by "display: none".
<ul class="nav">
<div class="new">
<li id="showHide"><a href="/" >HOME</a></li>
<li id='hidden' style='display: none;'>Hello</li>
<li>ABOUT US</li>
<li>OUR WORK</li>
<li>SERVICES</li>
</div>
</ul>
Here is the magic
var selector = document.getElementById('showHide');
selector.onclick = function(){
var show = document.getElementById('hidden');
show.style.display = "block"
};
At the top we create a selector variable to tell it what we want to target, which for us will be the Home button.
Below that we write a function that triggers when our selector is clicked. When it is triggered we define what we want to change(in this case that would be the element with the id of "hidden"). After that we simply edit it's display property to show.

jQuery animations work on one element and not another

I've been working on a mockup for an app store, and now that I've built the basic framework I wanted to start using jQuery to make certain things interactive. However, none of the jQuery actions I try will work. What's odd is that if I delete all my code, and then try to run a jQuery action with just one div, then it works. Also, if it helps, I am using the Brackets editor.
My code is below. The blue box is the div I animated before all the other code and the green box is the div I animated after the rest of the code. On my end only the blue div hides on click while the green div does nothing.
What's going wrong?
$(document).ready(function() {
$(".scroll-menu").click(function() {
$(".scroll-menu").hide();
});
$(".box").click(function() {
$(".box").hide();
});
});
.box {
z-index: -1;
margin-top: 20em;
position: relative;
width: 10em;
height: 20em;
background: green;
left: 20em
}
.scroll-menu {
background: blue;
height: 300px;
width: 500px;
margin: auto;
}
nav {
position: absolute;
height: 100%;
width: 16em;
left: 0;
top: 0;
background: #f5f5f5;
border-right: .1em solid grey
}
.mini-menu {
position: relative;
background: #E3E0E6;
top: 5em;
height: 32em
}
.top-menu {
position: relative;
top: 5em;
list-style-type: none;
margin-left: -1em;
}
.top-menu li {
position: relative;
padding-top: .2em;
padding-bottom: .2em;
font-size: 1.1em;
font-family: droid-sans;
font-weight: ;
border-radius: .5em;
margin-right: .5em;
margin-top: .5em;
margin-left: -.5em;
padding-left: 1em;
}
.top-menu li:hover {
background: #725490;
}
.top-menu li a {
text-decoration: none;
color: #000000
}
.top-menu li:hover a {
color: white;
}
.mini-menu ul li {
position: relative;
padding-top: .2em;
padding-bottom: .2em;
font-size: 1em;
font-family: droid-sans;
font-weight: ;
border-radius: .5em;
margin-right: .5em;
margin-top: .5em;
margin-left: -.5em;
padding-left: 1em;
}
.mini-menu ul {
position: relative;
top: .9em;
list-style-type: none;
margin-left: -1em;
}
.mini-menu ul li a {
text-decoration: none;
color: rgb(109, 52, 150);
}
.mini-menu a:hover {
color: #ab6bb1
}
.header {
position: absolute;
height: 5em;
width: 100%;
left: 0;
top: 0;
background: white;
z-index: 1;
border-bottom: .12em solid grey
}
.logo {
position: relative;
width: 10em;
height: auto;
left: 2em;
top: 2em
}
.app {
positio: relative;
margin-left: 8.8em;
margin-top: -.1em;
font-family: antic, ;
font-size: 1.4em
}
.search {
position: relative;
left: 12em;
top: -2em;
width: 15em;
border: .06em solid grey;
font-family: antic, ;
font-size: 1.9em;
padding-left: .5em
}
form i {
position: relative;
left: 11.5em;
top: -1.9em;
color: purple;
cursor: pointer;
}
.icon-open {
position: absolute;
top: 5em;
cursor: pointer;
z-index: 4;
left: 19em
}
.icon-open i {
cursor: pointer
}
{
position: relative;
background: green;
height 30em;
width: 6em;
top: 30em;
left: 50em;
border: solid;
z-index: 20;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="box"></div>
<div class="scroll-menu"></div>
<nav>
<ul class="top-menu">
<li> Home</li>
<li> Popular</li>
<li>Trending</li>
<li>Collections</li>
</ul>
<div class="mini-menu">
<ul>
<li>Diagnosis & Staging</li>
<li>Image Review</li>
<li>Rx & Protocols</li>
<li>Planning</li>
<li>Chart Checks & Reviews</li>
<li>Calibration</li>
<li>Policy & Procedure</li>
<li>Certifications</li>
<li>Connected Clinical</li>
<li>Messaging</li>
<li>Utilities</li>
<li>Interfaces</li>
<li>Acounting & Finance</li>
<li>Clinical Analytics</li>
</ul>
</div>
</nav>
<div class="header">
<img src="MedLever-Logo-HighRes.png" class="logo">
<p class="app">App Store</p>
<form>
<input type="text" autocomplete="on" name="search" class="search">
<i class="fa fa-search fa-2x"></i>
</form>
</div>
<div class="icon-open">
<i class="fa fa-bars"></i>
</div>

You've given the .box element a z-index of -1. This places the element behind the <body> tag and makes it unable to be clicked.
The purpose of the z-index is not apparent, so I've removed it in my example, below, and both boxes are successfully hidden on click.
$(document).ready(function() {
$(".scroll-menu").click(function() {
$(".scroll-menu").hide();
});
$(".box").click(function() {
$(".box").hide();
});
});
.box {
margin-top: 20em;
position: relative;
width: 10em;
height: 20em;
background: green;
left: 20em
}
.scroll-menu {
background: blue;
height: 300px;
width: 500px;
margin: auto;
}
nav {
position: absolute;
height: 100%;
width: 16em;
left: 0;
top: 0;
background: #f5f5f5;
border-right: .1em solid grey
}
.mini-menu {
position: relative;
background: #E3E0E6;
top: 5em;
height: 32em
}
.top-menu {
position: relative;
top: 5em;
list-style-type: none;
margin-left: -1em;
}
.top-menu li {
position: relative;
padding-top: .2em;
padding-bottom: .2em;
font-size: 1.1em;
font-family: droid-sans;
font-weight: ;
border-radius: .5em;
margin-right: .5em;
margin-top: .5em;
margin-left: -.5em;
padding-left: 1em;
}
.top-menu li:hover {
background: #725490;
}
.top-menu li a {
text-decoration: none;
color: #000000
}
.top-menu li:hover a {
color: white;
}
.mini-menu ul li {
position: relative;
padding-top: .2em;
padding-bottom: .2em;
font-size: 1em;
font-family: droid-sans;
font-weight: ;
border-radius: .5em;
margin-right: .5em;
margin-top: .5em;
margin-left: -.5em;
padding-left: 1em;
}
.mini-menu ul {
position: relative;
top: .9em;
list-style-type: none;
margin-left: -1em;
}
.mini-menu ul li a {
text-decoration: none;
color: rgb(109, 52, 150);
}
.mini-menu a:hover {
color: #ab6bb1
}
.header {
position: absolute;
height: 5em;
width: 100%;
left: 0;
top: 0;
background: white;
z-index: 1;
border-bottom: .12em solid grey
}
.logo {
position: relative;
width: 10em;
height: auto;
left: 2em;
top: 2em
}
.app {
positio: relative;
margin-left: 8.8em;
margin-top: -.1em;
font-family: antic, ;
font-size: 1.4em
}
.search {
position: relative;
left: 12em;
top: -2em;
width: 15em;
border: .06em solid grey;
font-family: antic, ;
font-size: 1.9em;
padding-left: .5em
}
form i {
position: relative;
left: 11.5em;
top: -1.9em;
color: purple;
cursor: pointer;
}
.icon-open {
position: absolute;
top: 5em;
cursor: pointer;
z-index: 4;
left: 19em
}
.icon-open i {
cursor: pointer
}
{
position: relative;
background: green;
height 30em;
width: 6em;
top: 30em;
left: 50em;
border: solid;
z-index: 20;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="box"></div>
<div class="scroll-menu"></div>
<nav>
<ul class="top-menu">
<li> Home</li>
<li> Popular</li>
<li>Trending</li>
<li>Collections</li>
</ul>
<div class="mini-menu">
<ul>
<li>Diagnosis & Staging</li>
<li>Image Review</li>
<li>Rx & Protocols</li>
<li>Planning</li>
<li>Chart Checks & Reviews</li>
<li>Calibration</li>
<li>Policy & Procedure</li>
<li>Certifications</li>
<li>Connected Clinical</li>
<li>Messaging</li>
<li>Utilities</li>
<li>Interfaces</li>
<li>Acounting & Finance</li>
<li>Clinical Analytics</li>
</ul>
</div>
</nav>
<div class="header">
<img src="MedLever-Logo-HighRes.png" class="logo">
<p class="app">App Store</p>
<form>
<input type="text" autocomplete="on" name="search" class="search">
<i class="fa fa-search fa-2x"></i>
</form>
</div>
<div class="icon-open">
<i class="fa fa-bars"></i>
</div>
Below is a demonstration of an element being placed behind the <body>. I've given the <body> a white background with an opacity of 0.9. Notice that the second green box has a white overlay because it's been placed behind the <body> with z-index:-1. Also notice that the first box can be clicked, but the second cannot.
html,body {
background-color:rgba(255,255,255,.9)
}
.box {
position:relative;
width: 10em;
height: 20em;
background: green;
display:inline-block;
}
.behind {
z-index:-1;
}
CLICK
CAN'T CLICK

We Keep Coding

JavaScript is the programming language of the Web.

resize header or shrink header on page scroll - javascript

Related

Progress bar with steps styling

Block User scroll when full screen menu is open

Align divs in one line and stick to bottom

Add text pop up on link click

jQuery animations work on one element and not another

Categories

Resources