Navigation bar hover effects - javascript

I have this little website i'm trying to write and I've got this buggingly bugging problem. Basically I have a navigation bar, and I want the dropdown to fade in when you hover onto the main word on the navigation bar. I've tried many ways, it doesn't seem to affect anything at all. I've looked up on different pages, but no matter how I try and rig it up, it still doesn't seem to want to work.
My first attempt with CSS:
document.getElementById("server").onmouseover = function() {
serverMouseOver()
};
document.getElementById("server").onmouseout = function() {
serverMouseOut()
};
function serverMouseOver() {
document.getElementById("serverdropdownbox").style.display = "block";
}
function serverMouseOut() {
document.getElementById("serverdropdownbox").style.display = "none";
}
document.getElementById("serverdropdownbox").onmouseover = function() {
serverMouseOver()
};
document.getElementById("serverdropdownbox").onmouseout = function() {
serverMouseOut()
};
function serverMouseOver() {
document.getElementById("serverdropdownbox").style.display = "block";
}
function serverMouseOut() {
document.getElementById("serverdropdownbox").style.display = "none";
}
.clearfix {
clear: both;
}
body {
background-color: rgb(21, 14, 43);
background-image: url("../images/backgroundimage.jpg");
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
min-height: 100%;
background-position: center center;
overflow: hidden;
}
#steamlogomainbox:hover {
width: 12vw;
}
#gigalogo {
width: 26vw;
height: 8vw;
margin: 0 0 0 2vw;
padding: 0;
}
#steamlogomainbox {
width: 10.5vw;
height: 7vw;
float: right;
background-color: #0B0D16;
/*000c21*/
-webkit-clip-path: polygon(30% 0, 100% 0, 100% 100%, 0% 100%);
clip-path: polygon(30% 0, 100% 0, 100% 100%, 0% 100%);
margin: 0.2vw -1vw 0 0;
padding: 0;
overflow: hidden;
}
#steamlogo {
padding: 0.7vw 0 0 3vw;
height: 5.6vw;
}
#navbarbox {
clear: both;
display: block;
width: 100vw;
height: 3.5vw;
padding: 0vw 0 0 0;
margin: 0;
}
#navbar,
#navbar ul {
width: 100vw;
height: 3.5vw;
display: flex;
padding: 0 0 0 0;
margin: 0;
}
#navbar span {
height: 3.5vw;
display: block;
transform: skewX(15deg);
}
#navbar li {
color: white;
list-style: none;
display: inline-block;
padding: 1vw 3.95vw 1vw 3.95vw;
margin: auto;
text-align: center;
color: red;
font-size: 2.3vw;
font-family: Jura;
height: 2.5vw;
transform: skewX(-15deg);
}
#serverdropdownbox {
display: none;
float: left;
color: white;
background-color: darkblue;
width: 0;
}
#serverdropdowncontent {
list-style-type: none;
width: 16vw;
margin: 1vw 0 0 10.1vw;
}
#server:hover #serverdropdowncontent li {
transition: opacity 2s ease-in;
opacity: 1;
}
#serverdropdowncontent li {
border: 1px solid white;
font-size: 25px;
text-align: center;
padding: 1vw 0 1vw 0;
opacity: 0.1;
background-color: white;
}
.menugradient {
backround: darkblue;
}
#server {
background-color: blue;
}
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Jura" />
</head>
<body>
<!--Giga logo, top left-->
<img id="gigalogo" src="images/gigalogo.png">
<!--Steam logo, top right-->
<div id="steamlogomainbox">
<img id="steamlogo" src="images/steamlogo.png">
</div>
<!--navigation barrrrrr-->
<div id="navbarbox">
<ul id="navbar">
<a href="default.html">
<li style="background-color: purple;"><span>Home</span></li>
</a>
<a href="servers.html">
<li id="server"><span>Servers</span></li>
</a>
<a href="community.html">
<li id="community"><span>Community</span></li>
</a>
<a href="store.html">
<li id="store"><span>Store</span></li>
</a>
<a href="downloads.html">
<li id="downloads"><span>Downloads</span></li>
</a>
<a href="contact.html">
<li id="contact"><span>Contact</span></li>
</a>
</ul>
</div>
<div id="serverdropdownbox">
<ul id="serverdropdowncontent">
<a href="serverlist.html">
<li id="serverdropdownli">Server List</li>
</a>
<li id="serverdropdownli">GigaDB</li>
<li id="serverdropdownli">CS:GO</li>
</ul>
</div>
</body>
My second attempt with JS:
document.getElementById("server").onmouseover = function() {
serverMouseOver()
};
document.getElementById("server").onmouseout = function() {
serverMouseOut()
};
function serverMouseOver() {
document.getElementById("serverdropdownbox").style.display = "block";
document.getElementById("serverdropdowncontent").style.transition = "opacity 2s ease-in"
document.getElementById("serverdropdowncontent").style.opacity = "1"
document.getElementById("serverdropdowncontent").style.WebkitTransition = "opacity 2s ease-in"
document.getElementById("serverdropdowncontent").style.WebkitOpacity = "1"
}
function serverMouseOut() {
document.getElementById("serverdropdownbox").style.display = "none";
}
document.getElementById("serverdropdownbox").onmouseover = function() {
serverMouseOver()
};
document.getElementById("serverdropdownbox").onmouseout = function() {
serverMouseOut()
};
function serverMouseOver() {
document.getElementById("serverdropdownbox").style.display = "block";
}
function serverMouseOut() {
document.getElementById("serverdropdownbox").style.display = "none";
}
.clearfix {
clear: both;
}
body {
background-color: rgb(21, 14, 43);
background-image: url("../images/backgroundimage.jpg");
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
min-height: 100%;
background-position: center center;
overflow: hidden;
}
#steamlogomainbox:hover {
width: 12vw;
}
#gigalogo {
width: 26vw;
height: 8vw;
margin: 0 0 0 2vw;
padding: 0;
}
#steamlogomainbox {
width: 10.5vw;
height: 7vw;
float: right;
background-color: #0B0D16;
/*000c21*/
-webkit-clip-path: polygon(30% 0, 100% 0, 100% 100%, 0% 100%);
clip-path: polygon(30% 0, 100% 0, 100% 100%, 0% 100%);
margin: 0.2vw -1vw 0 0;
padding: 0;
overflow: hidden;
}
#steamlogo {
padding: 0.7vw 0 0 3vw;
height: 5.6vw;
}
#navbarbox {
clear: both;
display: block;
width: 100vw;
height: 3.5vw;
padding: 0vw 0 0 0;
margin: 0;
}
#navbar,
#navbar ul {
width: 100vw;
height: 3.5vw;
display: flex;
padding: 0 0 0 0;
margin: 0;
}
#navbar span {
height: 3.5vw;
display: block;
transform: skewX(15deg);
}
#navbar li {
color: white;
list-style: none;
display: inline-block;
padding: 1vw 3.95vw 1vw 3.95vw;
margin: auto;
text-align: center;
color: red;
font-size: 2.3vw;
font-family: Jura;
height: 2.5vw;
transform: skewX(-15deg);
}
#serverdropdownbox {
display: block;
float: left;
color: white;
background-color: darkblue;
width: 0;
}
#serverdropdowncontent {
list-style-type: none;
width: 16vw;
margin: 1vw 0 0 10.1vw;
}
#serverdropdowncontent li {
border: 1px solid white;
font-size: 25px;
text-align: center;
padding: 1vw 0 1vw 0;
opacity: 0.1;
background-color: white;
}
#server {
background-color: blue;
}
<head>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Jura" />
<link href="css/mainframe.css" type="text/css" rel=stylesheet>
<link href="css/navbar.css" type="text/css" rel=stylesheet>
</head>
<body>
<!--Giga logo, top left-->
<img id="gigalogo" src="images/gigalogo.png">
<!--Steam logo, top right-->
<div id="steamlogomainbox">
<img id="steamlogo" src="images/steamlogo.png">
</div>
<!--navigation barrrrrr-->
<div id="navbarbox">
<ul id="navbar">
<a href="default.html">
<li style="background-color: purple;"><span>Home</span></li>
</a>
<a href="servers.html">
<li id="server"><span>Servers</span></li>
</a>
<a href="community.html">
<li id="community"><span>Community</span></li>
</a>
<a href="store.html">
<li id="store"><span>Store</span></li>
</a>
<a href="downloads.html">
<li id="downloads"><span>Downloads</span></li>
</a>
<a href="contact.html">
<li id="contact"><span>Contact</span></li>
</a>
</ul>
</div>
<div id="serverdropdownbox">
<ul id="serverdropdowncontent">
<a href="serverlist.html">
<li id="serverdropdownli">Server List</li>
</a>
<li id="serverdropdownli">GigaDB</li>
<li id="serverdropdownli">CS:GO</li>
</ul>
</div>
</body>
Sorry I have very very basic understanding of JS, I'm sure there's a direct and easier way i've completely missed out on.
Thanks!


Try this.. I have made some changes in CSS and JS part. follow it
document.getElementById("server").onmouseover = function() {
serverMouseOver()
};
document.getElementById("server").onmouseout = function() {
serverMouseOut()
};
function serverMouseOver() {
//add the corresponding classes for the effect
document.getElementById("serverdropdownbox").className+="animated fadeIn";
}
function serverMouseOut() {
document.getElementById("serverdropdownbox").className+="animated fadeOut";
}
.clearfix {
clear: both;
}
body {
background-color: rgb(21, 14, 43);
background-image: url("../images/backgroundimage.jpg");
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
min-height: 100%;
background-position: center center;
overflow: hidden;
}
#steamlogomainbox:hover {
width: 12vw;
}
#gigalogo {
width: 26vw;
height: 8vw;
margin: 0 0 0 2vw;
padding: 0;
}
#steamlogomainbox {
width: 10.5vw;
height: 7vw;
float: right;
background-color: #0B0D16;
/*000c21*/
-webkit-clip-path: polygon(30% 0, 100% 0, 100% 100%, 0% 100%);
clip-path: polygon(30% 0, 100% 0, 100% 100%, 0% 100%);
margin: 0.2vw -1vw 0 0;
padding: 0;
overflow: hidden;
}
#steamlogo {
padding: 0.7vw 0 0 3vw;
height: 5.6vw;
}
#navbarbox {
clear: both;
display: block;
width: 100vw;
height: 3.5vw;
padding: 0vw 0 0 0;
margin: 0;
}
#navbar,
#navbar ul {
width: 100vw;
height: 3.5vw;
display: flex;
padding: 0 0 0 0;
margin: 0;
}
#navbar span {
height: 3.5vw;
display: block;
transform: skewX(15deg);
}
#navbar li {
color: white;
list-style: none;
display: inline-block;
padding: 1vw 3.95vw 1vw 3.95vw;
margin: auto;
text-align: center;
color: red;
font-size: 2.3vw;
font-family: Jura;
height: 2.5vw;
transform: skewX(-15deg);
}
#serverdropdownbox {
opacity : 0;
float: left;
color: white;
background-color: darkblue;
width: 0;
}
#serverdropdowncontent {
list-style-type: none;
width: 16vw;
margin: 1vw 0 0 10.1vw;
}
#serverdropdowncontent li {
border: 1px solid white;
font-size: 25px;
text-align: center;
padding: 1vw 0 1vw 0;
opacity: 0.1;
background-color: white;
}
.menugradient {
backround: darkblue;
}
#server {
background-color: blue;
}
.animated {
animation-duration: 1s;
animation-fill-mode: both;
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.fadeIn {
animation-name: fadeIn;
}
#keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.fadeOut {
animation-name: fadeOut;
}
<!--Giga logo, top left-->
<img id="gigalogo" src="images/gigalogo.png">
<!--Steam logo, top right-->
<div id="steamlogomainbox">
<img id="steamlogo" src="images/steamlogo.png">
</div>
<!--navigation barrrrrr-->
<div id="navbarbox">
<ul id="navbar">
<a href="default.html">
<li style="background-color: purple;"><span>Home</span></li>
</a>
<a href="servers.html">
<li id="server"><span>Servers</span></li>
</a>
<a href="community.html">
<li id="community"><span>Community</span></li>
</a>
<a href="store.html">
<li id="store"><span>Store</span></li>
</a>
<a href="downloads.html">
<li id="downloads"><span>Downloads</span></li>
</a>
<a href="contact.html">
<li id="contact"><span>Contact</span></li>
</a>
</ul>
</div>
<div id="serverdropdownbox">
<ul id="serverdropdowncontent">
<a href="serverlist.html">
<li id="serverdropdownli">Server List</li>
</a>
<li id="serverdropdownli">GigaDB</li>
<li id="serverdropdownli">CS:GO</li>
</ul>
</div>
Remove this from your css
#server:hover #serverdropdowncontent li {
transition: opacity 2s ease-in;
opacity: 1;
}


If you simply want it to change background color when you hover over it, this CSS solution SHOULD do it
.navbar:hover li {
background-color: rgba(0, 0, 0, 0.1);
}

Related

How do I make a paragraph fade in everytime I swipe on my 3d carousel swiper?

What's going on and what should be going on
I built a 3 d carousel popup. There are 3 slides; each slide must show a paragraph if it's "selected".
The z-index for the "selected" one always equals 1, the one on the right equals 0 and the one on the left equals -1.
I tried to add and remove visibility from the paragraphs if the z-index for the slide = 1. But unfortunately,your text it only works when I open the page because that's when the z-index is being checked I guess.
I would like to fade in the paragraphing that belongs to the slide every time it's "selected".
(I know my code for this might be 100% wrong.)
What I think should work...
I think I might need some sort of a swipe event listener but I'm not sure and I don't know how to do one of those.
HTML
`
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://kit.fontawesome.com/661fc68da9.js" crossorigin="anonymous"></script>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css" />
<script src="https://kit.fontawesome.com/661fc68da9.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
</head>
<body>
<button onclick="Size()"></button>
<div class="sizeGuidance">
<form data-multi-step2>
<div class="whatGuideD" data-step2>
<br>
<h1>The Size Guide</h1>
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div id="sw1" class="swiper-slide">
<span style="--i:1;"><button type="button" class="pickGuideD" ><i class="fa-solid fa-ruler fa-3x" style=" display: flex; flex-wrap: wrap;justify-content: center; margin-bottom: 20px; margin-top: 15px; " ></i>Quick Guide</button></span>
</div>
<div id="sw2" class="swiper-slide">
<span style="--i:2;"><button type="button" class="pickGuideD" ><i class="fa-solid fa-bullseye fa-2x" style=" display: flex; flex-wrap: wrap;justify-content: center; margin-bottom: 20px; margin-top: 15px" ></i>Super Guide</button></span>
</div>
<div id="sw3" class="swiper-slide">
<span style="--i:3;"><button type="button" class="pickGuideD" ><i class="fa-solid fa-square-poll-horizontal fa-2x" style=" display: flex; flex-wrap: wrap;justify-content: center; margin-bottom: 20px; margin-top: 15px" ></i>Size Chart</button></span>
</div>
</div>
<div class="swiper-pagination"></div>
<p id="d1" class="d1">Get to know your size in less than 1 minute. <br> - no measuring bands required.</p>
<p id="d2" class="d1">Get a more accurate size recommendation. <br> - no measuring bands required.</p>
<p id="d3" class="d1">You already know your measurments? <br> here is the size guide.</p>
</div>
</div>
</form>
<form data-multi-step2M>
<div class="whatGuideM" data-step2M>
<br>
<h1>The Size Guide</h1>
<br>
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<span style="--i:1;"><button type="button" class="pickGuideM" ><i class="fa-solid fa-ruler fa-3x" style=" display: flex; flex-wrap: wrap;justify-content: center; margin-bottom: 20px; margin-top: 15px; " ></i>Quick Guide</button></span>
</div>
<div class="swiper-slide">
<span style="--i:2;"><button type="button" class="pickGuideM" ><i class="fa-solid fa-bullseye fa-3x" style=" display: flex; flex-wrap: wrap;justify-content: center; margin-bottom: 20px; margin-top: 15px" ></i>Super Guide</button></span>
</div>
<div class="swiper-slide">
<span style="--i:3;"><button type="button" class="pickGuideM" ><i class="fa-solid fa-square-poll-horizontal fa-3x" style=" display: flex; flex-wrap: wrap;justify-content: center; margin-bottom: 20px; margin-top: 15px" ></i>Size Chart</button></span>
</div>
</div>
<div class="swiper-pagination"></div>
<p id="d1" ></p>
</div>
</div>
</form>
</div>
</body>
</html>
`
CSS
`
<style>
.d1 {
visibility: hidden;
opacity: 0;
transition: 0.5s ease-in-out;
position: absolute;
}
.d1.showDisc1{
visibility: visible;
opacity: 1;
transition: 0.5s ease-in-out;
}
.d2 {
visibility: hidden;
opacity: 0;
transition: 0.5s ease-in-out;
position: absolute;
}
.d2.showDisc2{
visibility: visible;
opacity: 1;
transition: 0.5s ease-in-out;
}
.d3 {
visibility: hidden;
opacity: 0;
transition: 0.5s ease-in-out;
position: absolute;
}
.d3.showDisc3{
visibility: visible;
opacity: 1;
transition: 0.5s ease-in-out;
}
</style>
<style>
#import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
</style>
<style>
/*only desktop*/
.whatGuideD {
display: none;
}
#media only screen and (min-width: 900px) {
.whatGuideD {display: block;
}
.whatGuideM {display: none;
}
}
</style>
<!-- Demo styles -->
<style>
html {
height: -webkit-fill-available;
}
body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
height: -webkit-fill-available;
}
.swiper {
width: 100%;
padding-top: 0;
padding-bottom: 50px;
padding-left: 0;
padding-right: 0;
}
.swiper-slide {
background-position: center;
background-size: cover;
width: 60%;
max-width: 500px;
height: 75vh;
max-height: 500px;
border-radius: 15px;
background: rgb(238, 235, 241);
box-shadow: 10px 10px 10px -1px rgba(10, 99, 169, 0.16),
-10px -10px 10px -1px rgba(255, 255, 255, 0.70);
-webkit-box-reflect: below 1px linear-gradient(transparent, transparent, #fff6)
}
.swiper-slide button {
display: block;
width: 100%;
max-width: 500px;
}
h1 {
text-align: center;
Font-family: 'Bebas Neue', cursive;
font-size: 5vw;
margin: 0;
}
.pickGuideD {
Font-family: 'Bebas Neue', cursive;
text-transform: uppercase;
font-size: 48px;
font-weight: 500;
height: 100%;
background: rgb(238, 235, 241);
cursor: pointer;
border-radius: 10px;
color: rgb(0, 0, 0);
border: none;
text-align: center;
}
.pickGuideD:hover {
box-shadow: inset 10px 10px 10px -1px rgba(10, 99, 169, 0.16),
inset -10px -10px 10px -1px rgba(255, 255, 255, 0.70);
}
</style>
<style>
.pickGuideM {
Font-family: 'Bebas Neue', cursive;
text-transform: uppercase;
font-size: 24px;
font-weight: 500;
height: 100%;
background: rgb(238, 235, 241);
cursor: pointer;
border-radius: 10px;
color: rgb(0, 0, 0);
border: none;
text-align: center;
}
.pickGuideM:hover {
box-shadow: inset 10px 10px 10px -1px rgba(10, 99, 169, 0.16),
inset -10px -10px 10px -1px rgba(255, 255, 255, 0.70);
}
.close-button1D {
background-color: rgb(238, 235, 241);
color: rgb(0, 0, 0);
cursor: pointer;
font-size: 30px;
float: right;
margin-right: 40px;
border: 0;
}
::-webkit-scrollbar {
display: none;
}
</style>
<style>
.whatGuideD {
width: 100%;
height:100vh;
background: rgb(238, 235, 241);
text-align: center;
color: rgb(15, 15, 15);
visibility: hidden;
opacity: 0;
transition: 0.5s ease-in-out;
z-index: 3;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
}
.whatGuideD.active2{
visibility: visible;
opacity: 1;
position: fixed;
z-index: 4;
overflow-y: scroll;
transform: translate(-50%, -50%) scale(1);
}
.whatGuideM {
width: 100%;
height:100vh;
background: rgb(238, 235, 241);
text-align: center;
color: rgb(15, 15, 15);
visibility: hidden;
opacity: 0;
transition: 0.5s ease-in-out;
z-index: 3;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
}
.whatGuideM.active2M{
visibility: visible;
opacity: 1;
position: fixed;
z-index: 4;
overflow-y: hidden;
transform: translate(-50%, -50%) scale(1);
}
</style>
`
JS
`
<script>
var disc1 = document.querySelector("[showdiscrip1]")
function showdisc1() {
disc1.classList.add("disc");
}
function removedisc1() {
disc1.classList.remove("disc")
}
var disc2 = document.querySelector("[showdiscrip2]")
function showdisc2() {
disc2.classList.add("disc");
}
function removedisc2() {
disc2.classList.remove("disc")
}
var disc3 = document.querySelector("[showdiscrip3]")
function showdisc3() {
disc3.classList.add("disc");
}
function removedisc3() {
disc3.classList.remove("disc")
}
const mulitStepForm2 = document.querySelector("[data-multi-step2]")
const formSteps2 = [...mulitStepForm2.querySelectorAll("[data-step2]")]
let currentStep2 = formSteps2.findIndex(step2 => {
return step2.classList.contains("active2")
})
if (currentStep2 < 0) {
function SizeD() {
currentStep2 = 0
formSteps2[currentStep2].classList.add("active2")
showCurrentStep2();
window.scrollTo(0, 20);
}
}
mulitStepForm2.addEventListener("click", j => {
if (j.target.matches("[data-next]")) {
currentStep2++
} else if (j.target.matches("[data-closeguide]")) {
currentStep2 = -1
}
showCurrentStep2()
})
function showCurrentStep2() {
formSteps2.forEach((step2, index) => {
step2.classList.toggle("active2", index ===
currentStep2)
})
}
const mulitStepForm2M = document.querySelector("[data-multi-step2M]")
const formSteps2M = [...mulitStepForm2M.querySelectorAll("[data-step2M]")]
let currentStep2M = formSteps2M.findIndex(step2M => {
return step2M.classList.contains("active2M")
})
if (currentStep2M < 0) {
function SizeM() {
currentStep2M = 0
formSteps2M[currentStep2M].classList.add("active2M")
showCurrentStep2M();
window.scrollTo(0, 0);
}
}
mulitStepForm2M.addEventListener("click", j => {
if (j.target.matches("[data-nextM]")) {
currentStep2M++
} else if (j.target.matches("[data-closeguideM]")) {
currentStep2M = -1
}
showCurrentStep2M()
})
function showCurrentStep2M() {
formSteps2M.forEach((step2M, index) => {
step2M.classList.toggle("active2M", index ===
currentStep2M)
})
}
function Size() {
SizeD();
SizeM();
}
var swiper = new Swiper(".mySwiper", {
effect: "coverflow",
grabCursor: true,
centeredSlides: true,
slidesPerView: "auto",
coverflowEffect: {
rotate: 50,
stretch: 0,
depth: 500,
modifier: 1,
slideShadows: true,
},
pagination: {
el: ".swiper-pagination",
},
});
</script>
<script>
const sw1 = document.getElementById("sw1");
const sw2 = document.getElementById("sw2");
const sw3 = document.getElementById("sw3");
const sw1CS = window.getComputedStyle(sw1);
const sw2CS = window.getComputedStyle(sw2);
const sw3CS = window.getComputedStyle(sw3);
console.log(sw1CS.zIndex)
console.log(sw2CS.zIndex)
console.log(sw3CS.zIndex)
if (sw1CS.zIndex == 1) {
document.getElementById("d1").classList.add("showDisc1")
document.getElementById("d2").classList.remove("showDisc2")
}
if (sw2CS.zIndex == 1) {
document.getElementById("d2").classList.add("showDisc2")
document.getElementById("d1").classList.remove("showDisc1")
document.getElementById("d3").classList.remove("showDisc3")
}
if (sw3CS.zIndex == 1) {
document.getElementById("d3").classList.add("showDisc3")
document.getElementById("d2").classList.remove("showDisc2")
}
</script>
`

How to have my css navbar be proportional to the page

My (epic) navbar gets messed up when the window is to small, how can I have it shrink proportionally to the page? I've tried a few things but it just shrinks the text size, but the text still ends up longer than the width of the window, with the title in the top left overlapping onto the text.
Here is the html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
<header id="nav-wrapper">
<nav id="nav">
<div class="nav left">
<span class="gradient skew">
<h1 class="logo un-skew">RiseUpOnario.ca</h1>
</span>
<button id="menu" class="btn-nav"><span class="fas fa-bars"></span></button>
</div>
<div class="nav right">
<span class="nav-link-span"><span class="u-nav">Home</span></span>
<span class="nav-link-span"><span class="u-nav">Blog</span></span>
<span class="nav-link-span"><span class="u-nav">Join</span></span>
<span class="nav-link-span"><span class="u-nav">Donate</span></span>
<span class="nav-link-span"><span class="u-nav">MPP Finder</span></span>
<span class="nav-link-span"><span class="u-nav">About Us</span></span>
<span class="nav-link-span"><span class="u-nav">Contact</span></span>
</div>
</nav>
</header>
<main>
<section id="home">
</section>
<section id="blog">
</section>
<section id="join">
</section>
<section id="donate">
</section>
<section id="mppfinder">
</section>
<section id="aboutus">
</section>
<section id="contact">
</section>
</main>
</body>
</html>
<style>
/*-------------Reset-------------*/
button {
background: none;
box-shadow: none;
border: none;
cursor: pointer;
}
button:focus,
input:focus {
outline: 0;
}
html {
scroll-behavior: smooth;
}
/*-------------Layout-------------*/
body {
line-height: 1.5em;
padding: 0;
margin: 0;
}
section {
height: 100vh;
}
#home {
background-color: #ddd;
}
#blog {
background-color: #aaa;
}
#join {
background-color: #888;
}
#donate {
background-color: #666;
}
#mppfinder {
background-color: #ddd;
}
#aboutus {
background-color: #aaa;
}
#contact {
background-color: #666;
}
/*-------------Helpers-------------*/
.skew {
transform: skew(-20deg);
}
.un-skew {
transform: skew(20deg);
}
/*-------------Nav-------------*/
#nav-wrapper {
overflow: hidden;
width: 100%;
margin: 0 auto;
position: fixed;
top: 0;
left: 0;
z-index: 100;
}
#nav {
background-color: #fff;
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
font-family: "Saira Semi Condensed", sans-serif;
height: 4em;
overflow: hidden;
}
#nav.nav-visible {
height: 100%;
overflow: auto;
}
.nav {
display: flex;
height: 4em;
line-height: 4em;
flex-grow: 1;
}
.nav-link,
.logo {
padding: 0 1em;
}
span.gradient {
background: #e9b1a7;
background: -webkit-linear-gradient(45deg, #e9b1a7, #cf0a0a);
background: linear-gradient(45deg, #e9b1a7, #cf0a0a);
padding: 0 1em;
position: relative;
right: 1em;
margin-right: auto;
}
span.gradient:hover {
animation-name: logo-hover;
animation-duration: 0.3s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.17, 0.57, 0.31, 0.85);
}
h1.logo {
font-weight: 300;
font-size: 1.75em;
line-height: 0.75em;
color: #fff;
}
h1.logo a, a:active, a:hover, a:visited {
text-decoration: none;
color: #fff;
}
.nav-link {
text-transform: uppercase;
text-align: center;
border-top: 0.5px solid #ddd;
}
a:link, a:visited, a:active {
text-decoration: none;
color: #e9b1a7;
}
a:hover {
text-decoration: underline;
}
.right {
display: flex;
flex-direction: column;
height: 100%;
}
.btn-nav {
color: #e9b1a7;
padding-left: 2em;
padding-right: 2em;
}
#media (min-width: 800px) {
#nav-wrapper {
overflow: hidden;
}
#nav {
overflow: hidden;
flex-direction: row;
}
.nav-link {
border-top: none;
}
.right {
overflow: hidden;
flex-direction: row;
justify-content: flex-end;
position: relative;
left: 1.5em;
height: auto;
}
.btn-nav {
display: none;
}
.nav a:link.active, a:visited.active, a:active.active {
background: #e9b1a7;
background: -webkit-linear-gradient(45deg, #e9b1a7, #cf0a0a);
background: linear-gradient(45deg, #e9b1a7, #cf0a0a);
color: #fff;
}
.nav-link-span {
transform: skew(20deg);
display: inline-block;
}
.nav-link {
transform: skew(-20deg);
color: #777;
text-decoration: none;
}
.nav-link:last-child {
padding-right: 3em;
}
a:hover.nav-link:not(.active) {
color: #444;
background: #ddd;
background: linear-gradient(45deg, #fff, #ddd);
}
}
#keyframes logo-hover {
20% {
padding-right: 0em;
}
100% {
padding-right: 5em;
}
}
</style>
<script>
var util = {
mobileMenu() {
$("#nav").toggleClass("nav-visible");
},
windowResize() {
if ($(window).width() > 800) {
$("#nav").removeClass("nav-visible");
}
},
scrollEvent() {
var scrollPosition = $(document).scrollTop();
$.each(util.scrollMenuIds, function (i) {
var link = util.scrollMenuIds[i],
container = $(link).attr("href"),
containerOffset = $(container).offset().top,
containerHeight = $(container).outerHeight(),
containerBottom = containerOffset + containerHeight;
if (
scrollPosition < containerBottom - 20 &&
scrollPosition >= containerOffset - 20
) {
$(link).addClass("active");
} else {
$(link).removeClass("active");
}
});
}
};
$(document).ready(function () {
util.scrollMenuIds = $("a.nav-link[href]");
$("#menu").click(util.mobileMenu);
$(window).resize(util.windowResize);
$(document).scroll(util.scrollEvent);
});
</script>

Try implementing % in your stylesheet for fonts and divs!
For example, if you want a line of text or a container within a container to adjust in size when the parent container shrinks, you can have your interior elements set to something like
elementName{ max-width: 75%}
See if that helps with some of the elements inside the navWrapper.

Set the navbar's height to 10vh or less/more. ##vh = ##% of display height. There is also 100vw. = ##% of display width.

My dropdown from nav bar goes behind the slideshow. Could someone help me figure it out?

I already tried to mess up the position of each elements(gallery container, aka slideshow and navbar), but im not getting any result. Could you help me figure out what kind of property could i use to get a different result? Thanks alot in advance for whom help me.
A screenshot of my dropdown navbar behind the slideshow
// FUNCAO RELOGIO
function time() {
today=new Date();
now=new Date();
hours=today.getHours();
minutes=today.getMinutes();
seconds=today.getSeconds();
if(hours < 10) {
hours = "0" + hours;
}
if(minutes < 10) {
minutes = "0" + minutes;
}
if(seconds < 10) {
seconds = "0" + seconds;
}
document.getElementById('tempoActual').innerHTML=now.getDate() + "/" + (now.getMonth()+1) + "/" + now.getFullYear()+" "+ hours + ":" + minutes + ":" + seconds;
setTimeout('time()',500);
}
// FUNCAO TOOGLE
function toggle(ID){
var element = document.getElementById(ID);
if(element.style.display === "none"){
element.style.display = "block";
} else {
element.style.display = "none";
}
}
// FUNCOES SLIDESHOW
var slideIndex,slides,dots,captionText;
function initGallery(){
slideIndex = 0;
slides=document.getElementsByClassName("imageHolder");
slides[slideIndex].style.opacity=1;
captionText=document.querySelector(".captionTextHolder .captionText");
captionText.innerText=slides[slideIndex].querySelector(".captionText").innerText;
//disable nextPrevBtn if slide count is one
if(slides.length<2){
var nextPrevBtns=document.querySelector(".leftArrow,.rightArrow");
nextPrevBtns.style.display="none";
for (i = 0; i < nextPrevBtn.length; i++) {
nextPrevBtn[i].style.display="none";
}
}
//add dots
dots=[];
var dotsContainer=document.getElementById("dotsContainer"),i;
for (i = 0; i < slides.length; i++) {
var dot=document.createElement("span");
dot.classList.add("dots");
dotsContainer.append(dot);
dot.setAttribute("onclick","moveSlide("+i+")");
dots.push(dot);
}
dots[slideIndex].classList.add("active");
}
initGallery();
function plusSlides(n) {
moveSlide(slideIndex+n);
}
function moveSlide(n){
var i;
var current,next;
var moveSlideAnimClass={
forCurrent:"",
forNext:""
};
var slideTextAnimClass;
if(n>slideIndex) {
if(n >= slides.length){n=0;}
moveSlideAnimClass.forCurrent="moveLeftCurrentSlide";
moveSlideAnimClass.forNext="moveLeftNextSlide";
slideTextAnimClass="slideTextFromTop";
}else if(n<slideIndex){
if(n<0){n=slides.length-1;}
moveSlideAnimClass.forCurrent="moveRightCurrentSlide";
moveSlideAnimClass.forNext="moveRightPrevSlide";
slideTextAnimClass="slideTextFromBottom";
}
if(n!=slideIndex){
next = slides[n];
current=slides[slideIndex];
for (i = 0; i < slides.length; i++) {
slides[i].className = "imageHolder";
slides[i].style.opacity=0;
dots[i].classList.remove("active");
}
current.classList.add(moveSlideAnimClass.forCurrent);
next.classList.add(moveSlideAnimClass.forNext);
dots[n].classList.add("active");
slideIndex=n;
captionText.style.display="none";
captionText.className="captionText "+slideTextAnimClass;
captionText.innerText=slides[n].querySelector(".captionText").innerText;
captionText.style.display="block";
}
}
var timer=null;
function setTimer(){
timer=setInterval(function () {
plusSlides(1) ;
},3000);
}
setTimer();
function playPauseSlides() {
var playPauseBtn=document.getElementById("playPause");
if(timer==null){
setTimer();
playPauseBtn.style.backgroundPositionY="0px"
}else{
clearInterval(timer);
timer=null;
playPauseBtn.style.backgroundPositionY="-33px"
}
}
body {
/*background-image: url(../images/ilhas.jpg);*/
background-color: #3f4043;
background-repeat: no-repeat;
background-size: 100%;
/*max-width: 100%;
height: 100%
width: 100%;
height: 100%;*/
font-family: Verdana, sans-serif;
margin:0;
}
/*TITULO*/
#barNav {
margin-top: 3%;
width:100%;
}
header{
background-image: url(../images/banner1.png);
background-repeat: no-repeat;
height: 20%;
width: 100%;
position: absolute;
z-index: auto;
text-decoration: none;
text-align: left;
}
header .logo{
float: left;
width: 3.5%;
min-width: 40px;
margin-top: 0.2%;
margin-left: 28%;
margin-right: 2%;
}
#tituloPrincipal {
color: lightgray;
text-decoration: none;
}
#tituloAzores {
padding: 30px;
text-align: center;
background: lightblue;
color: black;
font-size: 30px;
}
#tituloSantaMaria {
padding: 30px;
text-align: center;
background: rgba(223, 201, 11, 0.952);
color: black;
font-size: 30px;
}
ul {
margin-left: 1.2%;
padding: 0px;
list-style: none;
font-family: arial;
}
ul li {
float: left;
width: 11%;
height: 40px;
background-color: black;
opacity: .8;
line-height: 40px;
text-align: center;
font-size: 20px;
}
ul li a {
text-decoration: none;
color: white;
display: block;
}
/* CORES BARRA NAV PARA CADA ILHA */
#ilhaSantaMaria {
background:#efef32;
color:#3f4043;
}
#ilhaSantaMaria a:hover {
background:#e4d637;
color: #3f4043;
}
#ilhaSaoMiguel {
background:#4cd33d;
color:#fff;
}
#ilhaSaoMiguel a:hover {
background:#3fbf34;
color:#fff;
}
#ilhaTerceira {
background:#c66ca0;
color:#fff;
}
#ilhaTerceira a:hover {
background:#ad5788;
color:#fff;
}
#ilhaGraciosa {
background:#fbfbfb;
color:#333;
}
#ilhaGraciosa a:hover {
background:#dadada;
color:#333;
}
#ilhaSaoJorge {
background:#f4949b;
color:#fff;
}
#ilhaSaoJorge a:hover {
background:#d6878d;
color:#fff;
}
#ilhaPico {
background:#7c837a;
color:#fff;
}
#ilhaPico a:hover {
background:#666c64;
color:#fff;
}
#ilhaFaial {
background:#317eb2;
color:#fff;
}
#ilhaFaial a:hover {
background:#296a95;
color:#fff;
}
#ilhaFlores {
background:#84e275;
color:#fff;
}
#ilhaFlores a:hover {
background:#74cc67;
color:#fff;
}
#ilhaCorvo {
background:#7a6148;
color:#fff;
}
#ilhaCorvo a:hover {
background:#654f39;
color:#fff;
}
/* FIM CORES BARRA NAV PARA CADA ILHA */
ul li ul li{
display: none;
}
ul li:hover ul li {
display: block;
width:100%;
}
/* SLIDESHOW */
html,body{
padding: 10px 0 0 0;
margin: 0;
}
.galleryContainer{
width: 100%;
height: 500px;
max-width: 1000px;
margin: auto;
user-select: none;
box-shadow: 0px 0px 3px 1px #00000078;
padding: 10px;
box-sizing: border-box;
}
.galleryContainer .slideShowContainer{
width: 100%;
height: 90%;
overflow: hidden;
background-color: gainsboro;
position: relative;
}
.galleryContainer .slideShowContainer #playPause{
width: 32px;
height: 32px;
position: absolute;
background-image: url("../icons/playPause.png");
background-repeat: no-repeat;
z-index: 5;
background-size: cover;
margin: 5px;
cursor: pointer;
}
.galleryContainer .slideShowContainer #playPause:hover{
opacity: .7;
}
.galleryContainer .slideShowContainer .imageHolder{
width: 100%;
height: 100%;
position: absolute;
opacity: 0;
}
.galleryContainer .slideShowContainer .imageHolder img{
width: 100%;
height: 100%;
}
.galleryContainer .slideShowContainer .imageHolder .captionText{
display: none;
}
.galleryContainer .slideShowContainer .leftArrow,.galleryContainer .slideShowContainer .rightArrow{
width: 50px;
background: #00000036;
position: absolute;
left: 0;
z-index: 1;
transition: background 0.5s;
height: 72px;
top: 50%;
transform: translateY(-50%);
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.galleryContainer .slideShowContainer .rightArrow{
left: auto;
right: 0;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.galleryContainer .slideShowContainer .leftArrow:hover,.galleryContainer .slideShowContainer .rightArrow:hover{
background: #000000a8;
cursor: pointer;
}
.galleryContainer .arrow{
display: inline-block;
border: 3px solid white;
width: 10px;
height: 10px;
border-left: none;
border-bottom: none;
margin: auto;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.galleryContainer .arrow.arrowLeft{
transform: rotateZ(-135deg);
}
.galleryContainer .arrow.arrowRight{
transform: rotateZ(45deg);
}
.galleryContainer .slideShowContainer>.captionTextHolder {
position: absolute;
bottom: 0;
z-index: 1;
color: white;
font-family: sans-serif;
font-size: 20px;
text-align: center;
width: 100%;
background: none;
height: 50px;
line-height: 50px;
overflow: hidden;
}
.galleryContainer .slideShowContainer>.captionTextHolder>.captionText{
margin: 0;
}
.galleryContainer #dotsContainer{
width: 100%;
height: 10%;
text-align: center;
padding-top: 20px;
box-sizing: border-box;
}
.galleryContainer #dotsContainer .dots{
display: inline-block;
width: 15px;
height: 15px;
border-radius: 50%;
margin-left: 5px;
background-color: #bbb;
cursor: pointer;
transition:background-color 0.5s;
}
.galleryContainer #dotsContainer .dots:first-child{
margin-left: 0;
}
.galleryContainer #dotsContainer .dots:hover,.galleryContainer #dotsContainer .dots.active{
background-color: #717171;;
}
.galleryContainer .moveLeftCurrentSlide{
animation-name: moveLeftCurrent;
animation-duration: 0.5s;
animation-timing-function: linear;
animation-fill-mode:forwards;
}
.galleryContainer .moveLeftNextSlide{
animation-name: moveLeftNext;
animation-duration: 0.5s;
animation-timing-function: linear;
animation-fill-mode:forwards;
}
#keyframes moveLeftCurrent {
from {margin-left: 0;opacity: 1;}
to {margin-left: -100%;opacity: 1;}
}
#keyframes moveLeftNext {
from {margin-left: 100%;opacity: 1;}
to {margin-left: 0%;opacity: 1;}
}
.galleryContainer .moveRightCurrentSlide{
animation-name: moveRightCurrent;
animation-duration: 0.5s;
animation-timing-function: linear;
animation-fill-mode:forwards;
}
.galleryContainer .moveRightPrevSlide{
animation-name: moveRightPrev;
animation-duration: 0.5s;
animation-timing-function: linear;
animation-fill-mode:forwards;
}
#keyframes moveRightCurrent {
from {margin-left: 0;opacity: 1;}
to {margin-left: 100%;opacity: 1;}
}
#keyframes moveRightPrev {
from {margin-left: -100%;opacity: 1;}
to {margin-left: 0%;opacity: 1;}
}
.slideTextFromBottom {
animation-name: slideTextFromBottom;
animation-duration: 0.7s;
animation-timing-function: ease-out;
}
#keyframes slideTextFromBottom {
from {opacity: 0;margin-top: 100px}
to {opacity: 1;margin-top: 0px;}
}
.slideTextFromTop {
animation-name: slideTextFromTop;
animation-duration: 0.7s;
animation-timing-function: ease-out;
}
#keyframes slideTextFromTop {
from {opacity: 0;margin-top: -100px}
to {opacity: 1;margin-top: 0px;}
}
/* FIM SLIDESHOW */
/*Toogle */
#botaoUpDown {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: orange;
margin-top: 20px;
}
/*Fim Toogle */
/*Paginas com click drop*/
.h2_drop {
margin-bottom: 0;
}
.click_and_drop {
margin-top: 5%;
margin-left: 10%;
margin-right: 10%;
}
.click_and_drop li {
list-style: none;
font-family: 'Courier New', Courier, monospace;
font-size: 5vmin;
border-top: solid rgb(189, 189, 189);
margin-left: -4.1%;
display: block;
}
.elementoLista {
padding: 1%;
overflow: auto;
display: block;
position: relative;
}
.title {
float: left;
}
.seta {
float: right;
margin-right: 0%;
}
.pEscondido {
text-align: left;
float: left;
margin-left: 1%;
width: 50%
}
.mapaEscondido {
float: right;
width: 400px;
height: 350px;
border: 0;
}
.esconde {
font-size: 3vmin;
display: none;
overflow: auto;
}
h5 {
font-size: 4vmin;
font-family: 'Courier New', Courier, monospace;
margin-bottom: -3%;
margin-top: 0%;
}
.estrelas {
margin-left: 5%;
}
/*FIM Paginas click drop*/
/*FOOTER*/
footer {
background: rgba(255, 255, 255, 0.74);
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
width: 100%;
height: 60px;
bottom: 0;
position: relative;
clear: both;
}
/*FIM FOOTER*/
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="João Lopes, Wilson Lima, Cristina Santos">
<meta http-equiv="Content-Type" content="text/html" charset="utf-8" lang="pt">
<meta name="viewport" content="width=device-width" initial-scale="1.0">
<meta name="description" content="O que conhecer e fazer no arquipelago dos Açores">
<meta name="keywords" content="Açores, Gastronomia, Transportes..."> <!--TODO-->
<link rel="stylesheet" type="text/css" href="CSS/styles.css">
<link rel="shortcut icon" type="image/jpeg" href="icons/azoresIcon.jpeg"/>
<script src="https://unpkg.com/react#16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js" crossorigin></script>
<title>Ilha de Santa Maria</title>
</head>
<body onload="time()">
<main id="topo">
<header>
<img src="icons/azoresIcon.png" class="logo"/><h1 id="tituloPrincipal">Santa Maria</h1>
</header>
<br><br><br><br><br>
<!--BARRA NAVEGAÇÃO-->
<div id="barNav">
<ul>
<li id="ilhaSantaMaria">Santa Maria
<ul>
<li>Alojamento</li>
<li>Gastronomia</li>
<li>Transportes</li>
<li>Animação</li>
</ul>
</li>
<li id="ilhaSaoMiguel">São Miguel
<ul>
<li>Alojamento</li>
<li>Gastronomia</li>
<li>Transportes</li>
<li>Animação</li>
</ul>
</li>
<li id="ilhaTerceira">Terceira
<ul>
<li>Alojamento</li>
<li>Gastronomia</li>
<li>Transportes</li>
<li>Animação</li>
</ul>
</li>
<li id="ilhaGraciosa">Graciosa
<ul>
<li>Alojamento</li>
<li>Gastronomia</li>
<li>Transportes</li>
<li>Animação</li>
</ul>
</li>
<li id="ilhaSaoJorge">São Jorge
<ul>
<li>Alojamento</li>
<li>Gastronomia</li>
<li>Transportes</li>
<li>Animação</li>
</ul>
</li>
<li id="ilhaPico">Pico
<ul>
<li>Alojamento</li>
<li>Gastronomia</li>
<li>Transportes</li>
<li>Animação</li>
</ul>
</li>
<li id="ilhaFaial">Faial
<ul>
<li>Alojamento</li>
<li>Gastronomia</li>
<li>Transportes</li>
<li>Animação</li>
</ul>
</li>
<li id="ilhaFlores">Flores
<ul>
<li>Alojamento</li>
<li>Gastronomia</li>
<li>Transportes</li>
<li>Animação</li>
</ul>
</li>
<li id="ilhaCorvo">Corvo
<ul>
<li>Alojamento</li>
<li>Gastronomia</li>
<li>Transportes</li>
<li>Animação</li>
</ul>
</ul>
</div>
<!--FIM BARRA NAVEGAÇÃO-->
<!--SLIDESHOW-->
<div class="galleryContainer">
<div class="slideShowContainer">
<div id="playPause" onclick="playPauseSlides()"></div>
<div onclick="plusSlides(-1)" class="nextPrevBtn leftArrow"><span class="arrow arrowLeft"></span></div>
<div onclick="plusSlides(1)" class="nextPrevBtn rightArrow"><span class="arrow arrowRight"></span></div>
<div class="captionTextHolder"><p class="captionText slideTextFromTop"></p></div>
<div class="imageHolder">
<img src="images/smaria1.jpg">1366X768
<p class="captionText"></p>
</div>
<div class="imageHolder">
<img src="images/smaria2.jpg">
<p class="captionText"></p>
</div>
<div class="imageHolder">
<img src="images/smaria3.jpg">
<p class="captionText"></p>
</div>
</div>
<div id="dotsContainer"></div>
</div>
<!--FIM SLIDESHOW-->
<!--TOOGLE-->
<button id="botaoUpDown" onclick="toggle('alojamento')">ALOJAMENTO</button>
<div id="alojamento">
ALOJAMENTO
</div>
<br>
<button id="botaoUpDown" onclick="toggle('gastronomia')">GASTRONOMIA</button id="botaoUpDown">
<div id="gastronomia">
GASTRONOMIA
</div>
<br>
<button id="botaoUpDown" onclick="toggle('transporte')">TRASNPORTE</button id="botaoUpDown">
<div id="transporte">
TRASNPORTE
</div>
<br>
<button id="botaoUpDown" onclick="toggle('animacao')">ANIMAÇÃO</button>
<div id="animacao">
ANIMAÇÃO
</div>
<br>
<!--
<button id="botaoUpDown" onclick="toogle()">ALOJAMENTO</button>
<div class="gaveta">
Pousada de Viseu
<br>
Rua do Hospital
<br>
3500-161 Viseu
<br>
Portugal
<br>
<br>
Email: guest#pousadas.pt
<br>
Telefone:(+351) 232 457 320
<br>
Fax: (+351) 232 421 128
<br>
<br>
Website: www.pousadadeviseu.com
</p>
</div>
<button id="botaoUpDown" onclick="toogle()">GASTRONOMIA</button>
<div class="gaveta">
Pousada de Viseu
<br>
Rua do Hospital
<br>
3500-161 Viseu
<br>
Portugal
<br>
<br>
Email: guest#pousadas.pt
<br>
Telefone:(+351) 232 457 320
<br>
Fax: (+351) 232 421 128
<br>
<br>
Website: www.pousadadeviseu.com
</div>
-->
<footer>
<br><br>
contactos
<a id="tempoActual" style="float: right; font-size: 1.6vmin; line-height: 0; margin-top: -1%; margin-right: 2%;"></a>
</footer>
</main>
<script type="text/javascript" src="js/javascript.js"></script>
</body>
</html>
.

add position: relative; and z-index: 11 to ul.
ul {
margin-left: 1.2%;
padding: 0px;
list-style: none;
font-family: arial;
position: relative;
z-index: 11;
}
I hope this will works for you.
Thank you...

Add this code ul li{position:relative; z-index: 1}

Why the last section covers the above sections

I am trying to create the full-page parallax scroll in the one-page website. There are 5 sections in the page. When I add the code of parallax scrolling, the last section covers the above sections. I am not sure where is the mistake.
And, I guess the js/jQuery code in my work does not work since the effects do not come out on the menu.
Any help is appreciated. Thank you so much.
$(document).ready(function() {
let hamburgerClicked = fales;
$('#toggle').on("click", function() {
if (hamburgerClicked == false) {
$(".top").css('transform', 'translate (11px) translateX(0) rotate(45deg)');
$(".bottom").css('transform', 'translateY(-11px) translateX(0) rotate(-45deg)');
hamburgerClicked = true;
} else {
$(".top").css('transform', 'translate (0px) translateX(0) rotate(0deg)');
$(".bottom").css('transform', 'translateY (0px) translateX(0) rotate(0deg)');
hamburgerClicked = false;
}
$("#overlay").toggleClass('active');
$('#overlay').toggleClass('open');
});
});
html {
height: 100%;
}
body {
font-family: 'Source Sans Pro', sans-serif;
font-weight: 200;
font-size: 15px;
color: #fff;
background-image: url(../img/background/background.png);
background-attachment: fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
#meteor-shower {
position: absolute;
top: 0;
left: 0;
}
.background {
overflow: hidden;
will-change: transform;
backface-visibility: hidden;
height: 100vh 30vh;
position: fixed;
width: 100%;
transform: translateY(30vh);
transition-timing-function: .2s all, cubic-bezier(0.22, 0.44, 0, 1);
}
.background:first-child {
transform: translateY(-30vh / 2);
}
.content-wrapper {
transform: translateY(30vh /2);
}
section {
width: 100%;
transform: translateY(40vh);
will-change: transform;
backface-visibility: hidden;
transition-timing-function: 1.2s +.5, all, cubic-bezier(0.22, 0.44, 0.1);
text-decoration: none;
scroll-behavior: smooth;
}
/*-------------------------------background-animation---------------------------------------*/
.twinkling {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 95%;
display: block;
}
.twinkling {
position: absolute;
background: transparent url(../img/background/2446101-03.png) repeat top center;
background-color: rgba(0, 0, 0, 0);
background-size: cover;
background-repeat: no-repeat;
z-index: 1;
-webkit-animation: move-twink-back 16s infinite;
animation: move-twink-back 16s infinite;
}
#keyframes move-twink-back {
from {
background-position: 0 0;
}
to {
background-position: -10000px 5000px;
}
}
#-webkit-keyframes move-twink-back {
from {
background-position: 0 0;
}
to {
background-position: -10000px 5000px;
}
}
/*----------------------------------------navbar---------------------------------------------*/
/*-------------header-container-------------*/
header {
height: 3em;
position: fixed;
}
.header-container {
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
}
.header-container h1 {
font-family: 'Gabriela', serif;
font-size: 1.5em;
float: left;
padding-top: 5px;
padding-left: 20px;
display: block;
}
/*-------------------menu-------------------*/
.button-container {
position: fixed;
top: 5%;
right: 2%;
height: 27px;
width: 35px;
cursor: pointer;
z-index: 100;
transition: opacity .25s ease;
opacity: 1;
content: "";
}
.button-container:hover {
opacity: .7;
}
.top:active {
transform: translate(11px) translateX(0) rotate(45deg);
}
.middle:active {
opacity: 0;
}
.bottom:active {
transform: translateY(-11px) translateX(0) rotate(-45deg);
}
span {
background: #fff;
border: none;
height: 4px;
width: 32px;
position: absolute;
top: 0;
left: 0;
transition: all .35s ease;
cursor: pointer;
border-radius: 3px;
}
.middle {
top: 10px;
}
.bottom {
top: 20px;
}
.overlay {
z-index: 500;
position: fixed;
background: rgba(0, 0, 0, 0.6);
top: 0;
left: 0;
width: 5%;
height: 0%;
opacity: .6;
visibility: hidden;
transition: opacity .35s, visibility .35s, height .35s;
}
li {
animation: fadeInRight .5s ease forwards;
animation-delay: .35s;
}
li:nth-of-type(2) {
animation-delay: .4s;
}
li:nth-of-type(3) {
animation-delay: .45s;
}
li:nth-of-type(4) {
animation-delay: .50s;
}
nav {
position: relative;
height: 70%;
top: 20%;
transform: translateY(-50%);
font-size: 0.8em;
}
ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
position: relative;
height: 100%;
}
li {
display: block;
height: 25%;
min-height: 50px;
position: relative;
opacity: 0;
}
a {
display: block;
position: relative;
text-decoration: none;
overflow: hidden;
}
a:hover {
transform: scale(1);
}
a:hover:after,
a:focus:after,
a:active:after {
width: 30%;
}
a:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0%;
transform: translateX(-50%);
height: 3px;
background: rgba(0, 0, 0, 0.6);
transition: .35s;
}
#keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
.active {
visibility: visible;
}
/*---------------------------------------section-1-------------------------------------------*/
#section1 {
background: rgba(0, 0, 0, 0);
height: 100vh;
}
#section1 {
:nth-child(1) {
padding-top: 0px;
display: flex;
}
}
/*------------crystal-animation-------------*/
#crstal-animation {
overflow: hidden;
display: block;
}
.crystal {
width: 23%;
position: absolute;
top: 18%;
left: 40%;
margin: 0;
margin-right: -50%;
transform-style: preserve-3d;
-webkit-animation: rotation 8s infinite linear;
animation: rotation 8s infinite linear;
}
#-webkit-keyframes rotation {
0% {
-webkit-transform: rotate(0deg);
filter: drop-shadow(16px 16px 10px rgb(255, 255, 255, 0.8));
}
35% {
-webkit-transform: rotate(38deg) rotateX(5deg);
filter: drop-shadow(0px 10px 16px rgb(255, 255, 255, 0.8));
}
65% {
-webkit-transform: rotate(-38deg) rotateX(2deg);
filter: drop-shadow(16px 0px 10px rgb(255, 255, 255, 0.8));
}
86% {
-webkit-transform: rotateX(-20deg) rotateY(1deg);
filter: drop-shadow(0px 10px 16px rgb(255, 255, 255, 0.8));
}
100% {
-webkit-transform: rotate(0deg);
filter: drop-shadow(16px 16px 10px rgb(255, 255, 255, 0.8));
}
}
/*---------------------------------------section-2-------------------------------------------*/
#section2 {
padding: 60px 130px;
display: inline-block;
background: rgba(0, 0, 0, 0);
height: 100vh;
}
.content {
width: 59%;
background: rgba(0, 0, 0, 0.6);
position: relative;
padding-bottom: 30px;
padding-left: 30px;
display: block;
}
.content p {
width: 88%;
margin: 15px;
text-align: left;
}
.content h2 {
text-align: center;
padding-top: 30px;
}
.crystal-animation {
width: 68%;
float: right;
margin-top: -56%;
margin-right: -80%;
-webkit-filter: drop-shadow(5px 5px 5px #222);
filter: drop-shadow(5px 5px 5px #222);
}
aside {
display: block;
}
/*---------------------------------------section-3-------------------------------------------*/
#section3 {
background: rgba(0, 0, 0, 0);
height: 100vh;
}
#section3:nth-child(2) {
display: flex;
align-items: center;
justify-content: center;
}
/*--------constellation-cards----------*/
.gallery {
list-style: none outside none;
flex-direction: row;
display: flex;
align-content: center;
flex-flow: row wrap;
justify-content: center;
}
h2,
p {
text-align: center;
}
.heading {
text-align: center;
}
.gallery li {
margin: 10px;
}
.gallery li:hover {
transform: scale(1.1)
}
.svg {
width: 75%;
filter: drop-shadow(10px)rgba(0, 0, 0, 0.6);
-moz-box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.6);
-khtml-box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.6);
}
/*---------------------------------------section-3-content---------------------------------*/
/*------------card-content-------------*/
#section3-content {
flex: 90%;
padding: 60px 130px;
display: inline-block;
background: rgba(0, 0, 0, 0);
height: 100vh;
}
.intro h3 {
font-family: 'Gabriela', serif;
}
.content-text {
background: rgba(0, 0, 0, 0.7);
position: relative;
padding-bottom: 30px;
padding-left: 20px;
}
.constellation-img {
opacity: .35;
width: 50%;
float: left;
top: 20%;
position: relative;
}
.constellation-star {
width: 56%;
opacity: 1;
float: left;
left: 1%;
margin-top: 20px;
position: absolute;
}
.intro {
float: right;
width: 50%;
top: 40%;
padding-top: 50px;
padding-right: 100px;
}
.constellation-pattern {
width: 11%;
opacity: .9;
margin-left: -10px;
margin-bottom: -15px;
}
.intro p {
text-align: left;
font-size: 1em;
margin-bottom: 10px;
}
.button {
margin: 0;
padding: 0;
}
.constellation-icon li {
list-style: none;
float: left;
}
.constellation-button {
width: 13%;
/*--------border: 2px solid opacity .3 #fff;
background: opacity .3 #fff;
border-radius: 10px;-----------*/
}
/*----------44--------------------------section-4------------------------------------------*/
#section4 {
height: 100vh;
display: block;
align-content: center;
background: rgba(0, 0, 0, 0.8);
position: relative;
padding: 0;
margin: 0;
}
.s3 {
text-align: left;
}
.s3-content {
width: 74%;
padding-top: 16%;
padding-left: 30%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="twinkling"></div>
<header>
<div class="header-container">
<h1>Constellations</h1>
</div>
<div class="button-container" id="toggle">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
<div class="overlay" id="overlay">
<nav class="overlay-menu">
<ul>
<li>Home</li>
<li>About</li>
<li>12 Constellations</li>
<li>Stargazing</li>
</ul>
</nav>
</div>
</header>
<div class="container">
<section id="section1" class="background">
<div id="crystal-animation">
<figure>
<img src="img/crystal.svg" alt="" class="crystal">
</figure>
</div>
</section>
<section id="section2" class="background">
<article class="content">
<h2>What is Constellations?</h2>
<p>Constellations are patterns in the night sky often formed by the most prominent stars to the naked eye. </p>
<p>Constellations often carry names and take the shape of gods, hunters, princesses, objects and mythical beasts associated with Greek mythology – however, at times, it requires quite an imagination to draw out what some constellations are supposed
to represent! </p>
<aside><img src="img/crystal-animation.svg" alt="" class="crystal-animation"></aside>
</article>
</section>
<!-- section-3---->
<section id="section3" class="background">
<h2>12 Constellations</h2>
<p>Click the constellation cards and understand more.</p>
<div class="card">
<ul class="gallery">
<li>
<figcaption>
<img src="img/12-constellation-cards/1.svg" alt="" class="svg">
</figcaption>
</li>
<li>
<img src="img/12-constellation-cards/4.svg" alt="" class="svg">
</li>
<li>
<img src="img/12-constellation-cards/7.svg" alt="" class="svg">
</li>
<li>
<img src="img/12-constellation-cards/10.svg" alt="" class="svg">
</li>
</ul>
<ul class="gallery">
<li>
<img src="img/12-constellation-cards/2.svg" alt="" class="svg">
</li>
<li>
<img src="img/12-constellation-cards/5.svg" alt="" class="svg">
</li>
<li>
<img src="img/12-constellation-cards/8.svg" alt="" class="svg">
</li>
<li>
<img src="img/12-constellation-cards/11.svg" alt="" class="svg">
</li>
</ul>
<ul class="gallery">
<li>
<img src="img/12-constellation-cards/3.svg" alt="" class="svg">
</li>
<li>
<img src="img/12-constellation-cards/6.svg" alt="" class="svg">
</li>
<li>
<img src="img/12-constellation-cards/9.svg" alt="" class="svg">
</li>
<li>
<img src="img/12-constellation-cards/12.svg" alt="" class="svg">
</li>
</ul>
</div>
</section>
<section id="section3-content" class="background">
<div class="content-text">
<img src="img/12-constellation-pattern/Aries-img.svg" alt="" class="constellation-img"><img src="img/12-constellation-pattern/Aries-star.svg" alt="" class="constellation-star">
<article class="intro">
<img src="img/12-constellation-pattern/Aries-pattern.svg" alt="" class="constellation-pattern">
<h3>Aries</h3>
<p>While one of the biggest, most famous, and oldest named constellations, Aquarius is faint and often hard to find/see. In Greek mythology, Aquarius represented Ganymede, a very handsome young man. Zeus recognized the lad’s good looks, and invited
Ganymede to Mt. Olympus to be the cupbearer of the gods. For his service he was granted eternal youth, as well as a place in the night sky.
</p>
<p>Despite its prominent position and large size, you can see that Aquarius doesn’t really have defining features, nor does it contain any bright stars. The protruding line to the right is Aquarius’s right arm, with the large downward shape being
a combination of the water flowing down out of the vase and his right leg. While not the entire constellation, what’s drawn above is what you’re most likely to see in the night sky. You won’t see this one in the city; you’ll need a dark sky
to find the cupbearer.
</p>
</article>
<div class="button">
<ul class="constellation-icon">
<li>
<img src="img/12-constellation-pattern/Aries-pattern.svg" alt="" class="constellation-button">
</li>
<li>
<img src="img/12-constellation-pattern/Leo-pattern.svg" alt="" class="constellation-button">
</li>
<li>
<img src="img/12-constellation-pattern/Sagittarius-pattern.svg" alt="" class="constellation-button">
</li>
<li>
<img src="img/12-constellation-pattern/Taurus-pattern.svg" alt="" class="constellation-button">
</li>
<li>
<img src="img/12-constellation-pattern/Virgo-pattern.svg" alt="" class="constellation-button">
</li>
<li>
<img src="img/12-constellation-pattern/Capricorn-pattern.svg" alt="" class="constellation-button">
</li>
<li>
<img src="img/12-constellation-pattern/Gemini-pattern.svg" alt="" class="constellation-button">
</li>
<li>
<img src="img/12-constellation-pattern/Libra-pattern.svg" alt="" class="constellation-button">
</li>
<li>
<img src="img/12-constellation-pattern/Aquarius-pattern.svg" alt="" class="constellation-button">
</li>
<li>
<img src="img/12-constellation-pattern/Cancer-pattern.svg" alt="" class="constellation-button">
</li>
<li>
<img src="img/12-constellation-pattern/Pisces-pattern.svg" alt="" class="constellation-button">
</li>
<li>
<img src="img/12-constellation-pattern/Scorpio-pattern.svg" alt="" class="constellation-button">
</li>
</ul>
</div>
</div>
</section>
<!-- section-4---->
<section id="section4" class="background">
<div class="s3-content">
<h2>How to Find Constellations in the Night Sky?</h2>
<p class="s3">Using a star map will be your best bet for assisting in finding where to look for constellations, depending on your location and time of year. It’s different depending on where you live and on the seasons. You can also need the additional app to
help find the constellations, that lets you enter your location and gives you a customized star map. </p>
<p class="s3">All you need is a dark sky, so as far away from cities as possible, and for extra visual aide, a pair of binoculars or a telescope. With binoculars or a telescope, you’ll see fainter stars and other features like nebulae and star clusters. When
you’re out observing, you’ll want to generally orient yourself towards the North Star.</p>
</div>
</section>

Clicking on an element is triggering all the same class instead of the one clicked on

I am creating a sort-of popup menu that is specific to each .smallCatalogBlock div. The circle you see under the title is the trigger. The issue I am having is that if you click on the blue circle, both popup menus fadeIn, when it should only be that specific one.
The same applies to the popup title. It uses only the first .smallCatalogBlock information, opposed to the one clicked on.
Does anyone know how I can leave this in the dynamic setup I am going for, while populating the specific information for the one clicked on?
var catalogName = $('.smallCatalogBlock').data('fill-specs');
//Filling Circle
$('.catalogSmallCircle').html(
'<div class="catalogSmallCircleIn" data-catalog-name=' + catalogName + '><div class="total-center"><div class="circlePlus"></div></div></div><div class="catalogCircleExpand"><div class="catalogExpandClose">x</div><div class="total-center expandText"><span class="catalogName pdfSubHeader"></span><p class="dGw circleExpandText"></p><button class="catalogDownload downloadButton" name="Profile_Catalog" data-catalog-now="Profile Small Catalog Button" data-catalog-view-name="Profile Catalog">View</button><button class="catalogDownload requestButton" data-catalog-name="Profile Catalog">Request</button></div></div>'
)
//Circle Expand
$('.catalogSmallCircleIn').on('click', function() {
// old $('.catalogSmallCircle').addClass('rectangle').find('.catalogSmallCircleIn').hide();
$(this).closest('.catalogSmallCircle').addClass('rectangle').find('.catalogSmallCircleIn').hide();
// old $('.catalogCircleExpand').fadeIn(100).addClass('rectangle');
//$(this).closest('.catalogCircleExpand').fadeIn(100).addClass('rectangle');
$('.catalogCircleExpand').fadeIn(100).addClass('rectangle');
//Getting Catalog Name
let catalogChoice = $(this).data('catalog-name');
$('.catalogName').html(catalogChoice);
event.stopPropagation();
});
//Close Circle
$('.catalogExpandClose').on('click', function(event) {
$('.catalogSmallCircle').removeClass('rectangle').find('.catalogSmallCircleIn').fadeIn();
$('.catalogCircleExpand').hide().removeClass('rectangle');
});
.smallCatalogWrap {
width: 100%;
height: auto;
margin: 60px 0;
}
.smallCatalogBlock {
width: 25%;
height: auto;
display: inline-block;
vertical-align: top;
margin: 20px auto;
text-decoration: none;
}
.smallCatalogTitle {
font-family: 'Nunito', sans-serif;
color: #4d4d4d;
font-size: 1.3rem;
text-align: center;
display: block;
font-weight: 400;
}
.smallCatalogButtonWrap {
margin-top: 15px;
width: 100%;
position: relative;
}
.catalogSmallCircle {
background: #225DB8;
width: 70px;
height: 70px;
position: absolute;
margin: 10px auto;
left: 90%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
border-radius: 100%;
box-shadow: 0 0 20px rgba(0, 0, 0, .9);
border: 2px solid #FFF;
webkit-transition: all 1s;
transition: all 1s;
cursor: pointer;
}
.catalogSmallCircle.rectangle {
border-radius: 0;
border: 2px solid #094765;
background: linear-gradient(to bottom right, #225DB8, #4174C2);
width: 400px;
min-height: 200px;
webkit-transition: all 1s;
transition: all 1s;
transform: translate(-45%, -45%);
-webkit-transform: translate(-45%, -45%);
z-index: 1;
cursor: auto;
}
.catalogSmallCircleIn {
width: 100%;
height: 100%;
position: relative;
}
.circlePlus {
background-size: 30px 30px;
width: 30px;
height: 30px;
display: block;
margin: 0 auto;
z-index: 1;
}
.catalogCircleExpand {
height: 0;
display: none;
opacity: 0;
webkit-transition: all .5s;
transition: all .5s;
}
.catalogCircleExpand.rectangle {
opacity: 1;
height: auto;
webkit-transition: all .5s;
transition: all .5s;
transition-delay: .4s;
-webkit-transition-delay: .4s;
padding: 10px 0;
}
.expandText .catalogDownload {
font-size: 1.1rem;
padding: .7em 1.1em;
}
.expandText .pdfSubHeader {
font-size: 1.1rem;
}
.catalogExpandClose {
color: #FFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="smallCatalogWrap">
<div class="smallCatalogBlock" data-fill-specs="Catalog">
<span class="smallCatalogTitle">Catalog</span>
<div class="smallCatalogButtonWrap">
<div class="catalogSmallCircle"></div>
</div>
</div>
<div class="smallCatalogBlock" data-fill-specs="Technology">
<span class="smallCatalogTitle">Technology</span>
<div class="smallCatalogButtonWrap">
<div class="catalogSmallCircle"></div>
</div>
</div>
</div>

You have to loop over the smallCatalogBlocks and build them individually, otherwise they will all have the same catalog name. And then in your event handlers, you have to make all your selectors be contextual lookups.
I ran the modified code, and it appears to be building the circles correctly, however for some reason the text is not showing up on them, even though the text is there if you inspect the element. Didn't figure that part out, but this should show you at least how to do the contextual logic and the looping to build the elements.
$('.smallCatalogBlock').each(function(index, catalogBlock){
var catalogName = $(catalogBlock).data('fill-specs');
console.log(catalogName);
//Filling Circle
$('.catalogSmallCircle', catalogBlock).html(
'<div class="catalogSmallCircleIn" data-catalog-name='+ catalogName +'><div class="total-center"><div class="circlePlus"></div></div></div><div class="catalogCircleExpand"><div class="catalogExpandClose">x</div><div class="total-center expandText"><span class="catalogName pdfSubHeader"></span><p class="dGw circleExpandText"></p><button class="catalogDownload downloadButton" name="Profile_Catalog" data-catalog-now="Profile Small Catalog Button" data-catalog-view-name="Profile Catalog">View</button><button class="catalogDownload requestButton" data-catalog-name="Profile Catalog">Request</button></div></div>'
)
});
//Circle Expand
$('.catalogSmallCircleIn').on('click', function(event) {
var $smallCircle = $(this).closest('.catalogSmallCircle');
$smallCircle
.addClass('rectangle')
.find('.catalogSmallCircleIn')
.hide();
$smallCircle
.find('.catalogCircleExpand')
.fadeIn(100)
.addClass('rectangle');
//Getting Catalog Name
let catalogChoice = $(this).data('catalog-name');
console.log(catalogChoice);
$smallCircle.find('.catalogName').html(catalogChoice);
event.stopPropagation();
});
//Close Circle
$('.catalogExpandClose').on('click', function(event) {
var $smallCircle = $(this).closest('.catalogSmallCircle');
$smallCircle
.removeClass('rectangle')
.find('.catalogSmallCircleIn')
.fadeIn();
$smallCircle
.find('.catalogCircleExpand')
.hide()
.removeClass('rectangle');
});
.smallCatalogWrap {
width: 100%;
height: auto;
margin: 60px 0;
}
.smallCatalogBlock {
width: 25%;
height: auto;
display: inline-block;
vertical-align: top;
margin: 20px auto;
text-decoration: none;
}
.smallCatalogTitle {
font-family: 'Nunito', sans-serif;
color: #4d4d4d;
font-size: 1.3rem;
text-align: center;
display: block;
font-weight: 400;
}
.smallCatalogButtonWrap {
margin-top: 15px;
width: 100%;
position: relative;
}
.catalogSmallCircle {
background: #225DB8;
width: 70px;
height: 70px;
position: absolute;
margin: 10px auto;
left: 90%;
-webkit-transform: translateX(-50%);transform: translateX(-50%);
border-radius: 100%;
box-shadow: 0 0 20px rgba(0,0,0,.9);
border: 2px solid #FFF;
webkit-transition: all 1s;transition: all 1s;
cursor: pointer;
}
.catalogSmallCircle.rectangle {
border-radius: 0;
border: 2px solid #094765;
background: linear-gradient(to bottom right,#225DB8,#4174C2);
width: 400px;
min-height: 200px;
webkit-transition: all 1s; transition: all 1s;transform: translate(-45%, -45%);-webkit-transform: translate(-45%, -45%);
z-index: 1;
cursor: auto;
}
.catalogSmallCircleIn {
width: 100%;
height: 100%;
position: relative;
}
.circlePlus {
background-size: 30px 30px;
width: 30px;
height: 30px;
display: block;
margin: 0 auto;
z-index: 1;
}
.catalogCircleExpand {
height: 0;
display: none;
opacity: 0;
webkit-transition: all .5s;
transition: all .5s;
}
.catalogCircleExpand.rectangle {
opacity: 1;
height: auto;
webkit-transition: all .5s;
transition: all .5s;
transition-delay: .4s;
-webkit-transition-delay: .4s;
padding: 10px 0;
}
.expandText .catalogDownload {
font-size: 1.1rem;
padding: .7em 1.1em;
}
.expandText .pdfSubHeader {
font-size: 1.1rem;
}
.catalogExpandClose {
color: #FFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="smallCatalogWrap">
<div class="smallCatalogBlock" data-fill-specs="Catalog">
<span class="smallCatalogTitle">Catalog</span>
<div class="smallCatalogButtonWrap">
<div class="catalogSmallCircle"></div>
</div>
</div><div class="smallCatalogBlock" data-fill-specs="Technology">
<span class="smallCatalogTitle">Technology</span>
<div class="smallCatalogButtonWrap">
<div class="catalogSmallCircle"></div>
</div>
</div>
</div>

Categories