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>
Related
I made a hamburger menu for the mobile responsive mode of my website and the menu works but because it's layered above all other components I am not able to click on buttons or select anything, this happens even when the hamburger menu is closed. Is it possible to change the z-index only when the hamburger menu is open?
Navbar component
The problem is with the nav-menu div
function Topbar() {
const timeout = () => {
setTimeout(() => {
if (window.location.pathname === '/') {
uncheckAll();
}
}, 600);
};
function check(checked = true) {
const checkboxes = document.querySelectorAll('input.checkbox');
checkboxes.forEach((checkbox) => {
checkbox.checked = checked;
});
}
function uncheckAll() {
check(false);
}
return (
<div className="nav">
<div className="navbar">
<div className="menu">
<div className="label">Navbar</div>
<div className="spacer"></div>
<div className="item">
<span>
<a href="#Intro" className="link">
HOME
</a>
</span>
</div>
<div className="item">
<span>
<a href="#About" className="link">
About
</a>
</span>
</div>
<div className="item">
<span>
<a href="#Projects" className="link">
PROJECTS
</a>
</span>
</div>
<div className="item">
<span>
<a href="#Contact" className="link">
CONTACT
</a>
</span>
</div>
</div>
</div>
<div className="nav-menu">
<div id="menuToggle">
<input type="checkbox" className="checkbox" />
<span></span>
<span></span>
<span></span>
<ul id="menu">
<li>
<a href="#Intro" className="link" onClick={timeout}>
Home
</a>
</li>
<li>
<a href="#About" className="link" onClick={timeout}>
About
</a>
</li>
<li>
<a href="#Projects" className="link" onClick={timeout}>
Projects
</a>
</li>
<li>
<a href="#Contact" className="link" onClick={timeout}>
Contact
</a>
</li>
</ul>
</div>
</div>
</div>
);
}
export default Topbar;
SASS
#media screen and (max-width: 619px) {
.nav .navbar {
display: none;
}
.nav .nav-menu {
display: block;
}
.nav .nav-menu #menuToggle {
display: flex;
-webkit-tap-highlight-color: transparent;
-moz-tap-highlight-color: transparent;
-o-tap-highlight-color: transparent;
}
}
ul {
padding: 0;
list-style-type: none;
}
#menuToggle {
flex-direction: column;
-webkit-user-select: none;
user-select: none;
position: fixed;
top: 15px;
left: 15px;
display: none;
min-width: 85%;
min-height: 100%;
z-index: 10000;
animation: moveRight ease 3s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
.nav-menu {
height: 45px;
width: 60px;
background-color: rgba(128, 128, 128, 0.315);
z-index: 2;
position: fixed;
top: 0;
}
#menuToggle input {
display: flex;
width: 40px;
height: 32px;
position: absolute;
cursor: pointer;
opacity: 0;
z-index: 10000;
}
#menuToggle span {
display: flex;
width: 29px;
height: 2px;
margin-bottom: 5px;
position: relative;
background: #ffffff;
border-radius: 3px;
z-index: 10000;
transform-origin: 5px 0px;
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
opacity 0.55s ease;
}
#menuToggle span:first-child {
transform-origin: 0% 0%;
}
#menuToggle span:nth-last-child(2) {
transform-origin: 0% 100%;
}
#menuToggle input:checked~span {
opacity: 1;
transform: rotate(45deg) translate(-3px, -1px);
background: white;
}
#menuToggle input:checked~span:nth-last-child(3) {
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
#menuToggle input:checked~span:nth-last-child(2) {
transform: rotate(-45deg) translate(0, -1px);
}
#menu {
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 7px;
width: 85%;
box-shadow: 0 0 10px rgb(56, 56, 56);
height: 100%;
margin: -50px 0 0 -50px;
padding: 50px;
background-color: rgba(56, 56, 56, 0.989);
-webkit-font-smoothing: antialiased;
transform-origin: 0% 0%;
transform: translate(-100%, 0);
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
}
#menu li {
padding-left: 20px;
padding-bottom: 10px;
transition-delay: 2s;
}
#menu li a {
text-decoration: none;
color: white;
font-size: 30px;
font-family: 'Roboto Sans', sans-serif;
font-weight: 500;
font-style: normal;
}
#menuToggle input:checked~ul {
transform: none;
}
Working example: https://codesandbox.io/s/hamburger-menu-w456br?file=/src/App.jsx
some pointer-event css property can fix this....
here is the solution.... see it and ask if u need help
I'm trying to make a stem filling with a color and with circles for steps along the stem.
This is an example of what I'm currently aiming for: https://codepen.io/nicklassandell/pen/ztGac
This is currently what I have: https://codepen.io/TheOshika/full/xxRRVNb (the design is similar to the above code but I wrote the code from scratch)
I'm using a scrollspy script in order to trigger a filling animation in the circles. However I'm not satisfied with it because the offset for the trigger is too difficult to set for a responsive design. I'm now thinking about removing the javascript part and instead having a stem filling the circles with the scrolling, but no animation.
This is what I'm looking for, except I don't know how to make the background color in the stem fill the circles:
.header {
position: relative;
height: 800px;
background: blueviolet;
z-index: 3;
}
html,
body {
margin: 0;
padding: 0;
}
body {
background: #4c63b6;
}
.container {
margin: 0px auto;
position: relative;
}
/* stem */
.filling-stem {
position: sticky;
z-index: 1;
float: left;
top: 0;
left: 50%;
transform: translate(-50%, 0);
height: 50vh;
width: 5px;
background-color: #bed0f7;
}
.stem-background {
position: absolute;
z-index: 0;
left: 50%;
transform: translate(-50%, 0);
height: 100%;
width: 5px;
background-color: #1f2933;
}
.stem-nav {
position: absolute;
z-index: 2;
left: 50%;
transform: translate(-50%, 0);
height: 100%;
}
#my-awesome-nav {
display: flex;
height: 100%;
justify-content: space-around;
flex-direction: column;
list-style: none;
margin-left: 0;
padding-left: 0;
}
#my-awesome-nav li a {
border: solid 3px black;
border-radius: 50%;
display: inline-block;
background-color: #1f2933;
}
#my-awesome-nav li a .color-change {
height: 40px;
width: 40px;
background-color: #1f2933;
border-radius: 50%;
}
/* timeline */
.timeline-container {
position: relative;
}
.step-container {
margin: 0 25% 0 25%;
display: flex;
align-items: center;
height: 1500px;
}
/* footer */
footer {
display: flex;
justify-content: center;
align-items: center;
height: 1000px;
width: 100%;
background-color: black;
color: white;
}
<div class="container">
<div class="container-inner">
<div class="filling-stem"></div>
<div class="header"></div>
<div class="timeline-container">
<div class="timeline-container-inner">
<div class="stem-background"></div>
<div class="stem-nav">
<ul id="my-awesome-nav">
<li data-index="0"><a href="#step-one">
<div class="color-change one"></div>
</a></li>
<li data-index="1"><a href="#step-two">
<div class="color-change two"></div>
</a></li>
<li data-index="2"><a href="#step-three">
<div class="color-change three"></div>
</a></li>
<li data-index="3"><a href="#step-four">
<div class="color-change four"></div>
</a></li>
<li data-index="4"><a href="#step-five">
<div class="color-change five"></div>
</a></li>
</ul>
</div>
<div class="step-container">
<div class="step-container-inner">
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<p>End of the page</p>
</footer>
It should be possible to get the required 'filling' effect using just CSS.
We add a pseudo before and a pseudo after element to each of the li elements. These have a radial-gradient background which has a transparent 'bite' out at the position of the circles containing the a (anchor) element. Behind the whole thing we put a fixed element which has the 'fill' color in the top half and the darker (non-filled) color in the bottom half. This is done by giving it a background image which is a linear gradient.
The inner divs (inside the anchor elements) are not now needed.
Here is a snippet to show the idea. CSS variables have been introduced to make it easier to change dimensions if required. (Note: there is redundant CSS in here which could do with tidying up.)
* {
margin: 0;
padding: 0;
--stemw: 5px; /* the width of the stem */
--circled: 40px; /* the diameter of the circles */
--lih: 300px; /* the height of each list item */
--nolis: 5; /* the number of items in the list */
--halfstemw: calc(var(--stemw) / 2);
--circler: calc(var(--circled) / 2); /* the circle radius */
--halflih: calc(var(--lih) / 2);
}
div.bg {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-image: linear-gradient(to top, #1f2933 0%, #1f2933 50%, #bed0f7 50%, #bed0f7 100%);
overflow: hidden;
}
#my-awesome-nav li {
position: relative;
}
#my-awesome-nav li::before, #my-awesome-nav li::after {
position: absolute;
transform: translateX(calc(-100% + var(--circler)));
width: calc(50vw - var(--halfstemw));
height: var(--lih);
top: calc(var(--halflih) * -1);
content: '';
z-index: -1;
}
#my-awesome-nav li::before {
left: 0;
background: radial-gradient(circle at calc(100% + var(--halfstemw)) calc(50% + var(--circler)), transparent 0%, transparent 3%, #4c63b6 3%, #4c63b6 100%);
}
#my-awesome-nav li::after{
left: calc(50vw + var(--halfstemw));
background: radial-gradient(circle at calc(var(--halfstemw) * -1) calc(50% + var(--circler)), transparent 0%, transparent 3%, #4c63b6 3%, #4c63b6 100%);
}
.header {
position: relative;
height: 800px;
background: blueviolet;
z-index: 3;
}
html,
body {
margin: 0;
padding: 0;
}
body {
background: #4c63b6;
}
.container {
margin: 0px auto;
position: relative;
}
/* stem */
.filling-stem {
position: sticky;
z-index: 1;
float: left;
top: 0;
left: 50%;
transform: translate(-50%, 0);
height: 50vh;
width: 5px;
background-color: #bed0f7;
}
.stem-background {
position: absolute;
z-index: 0;
left: 50%;
transform: translate(-50%, 0);
height: 100%;
width: 5px;
background-color: #1f2933;
}
.stem-nav {
position: absolute;
z-index: 2;
left: 50%;
transform: translate(-50%, 0);
height: 100%;
}
#my-awesome-nav {
display: flex;
height: 100%;
justify-content: space-around;
flex-direction: column;
list-style: none;
margin-left: 0;
padding-left: 0;
}
#my-awesome-nav li a {
width: 40px;
height: 40px;
border: solid 3px black;
border-style: none;
border-radius: 50%;
display: inline-block;
background-color: #1f2933;
background-color: transparent;
}
/*
#my-awesome-nav li a .color-change {
height: 40px;
width: 40px;
background-color: #1f2933;
border-radius: 50%;
background-color: transparent;
}
*/
/* timeline */
.timeline-container {
position: relative;
}
.step-container {
margin: 0 25% 0 25%;
display: flex;
align-items: center;
height: 1500px;
}
/* footer */
footer {
display: flex;
justify-content: center;
align-items: center;
height: 1000px;
width: 100%;
background-color: black;
color: white;
}
<div class="bg"></div>
<div class="container">
<div class="container-inner">
<div class="filling-stem"></div>
<div class="header"></div>
<div class="timeline-container">
<div class="timeline-container-inner">
<div class="stem-background"></div>
<div class="stem-nav">
<ul id="my-awesome-nav">
<li data-index="0"><a href="#step-one">
</a></li>
<li data-index="1"><a href="#step-two">
</a></li>
<li data-index="2"><a href="#step-three">
</a></li>
<li data-index="3"><a href="#step-four">
</a></li>
<li data-index="4"><a href="#step-five">
</a></li>
</ul>
</div>
<div class="step-container">
<div class="step-container-inner">
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<p>End of the page</p>
</footer>
Footnote: on retina screens I've occasionally seen a faint line between the pseudo elements - I think it's where the positioning calculations come at part of a CSS pixel (which on a high res screen may mean a screen pixel is 'left behind'). It's probably necessary to make the pseudo elements 1 CSS pixel higher to overlap the next one to give a continuous effect to the background.
Trying to put a menu together, and having some trouble with one behavior.
Have a set of sub-menu divs hidden behind the main menu divs. Upon click, the sub-menu is shown and animates into view.
I'm able to see the animation when the sub-menus are shown, but not when when they toggle back to hidden. I've tried a few different things to get it to behave the way I want, but no joy.
Here's the code:
$(document).ready(function() {
$(document).on('mouseenter mouseleave', '.circle.hover-effect', function (event) {
$(this).toggleClass("active", event.type === 'mouseenter');
});
$('.menu').hide();
$('.circle').on('mousedown touchstart', function() {
$('.circle').toggleClass('hover-effect');
$(this).toggleClass('selected');
$('.circle').not(this).removeClass('selected');
if ($(this).hasClass('selected')) {
$('.circle').not(this).addClass('behind');
$(this).prev().show('fast');
$(this).prev().find('.menu-item1').removeClass('menu-item-desel').addClass('menu-item1-sel');
$(this).prev().find('.menu-item2').removeClass('menu-item-desel').addClass('menu-item2-sel');
}
else {
$('.circle').removeClass('behind');
$('.circle').prev().hide('fast');
$(this).prev().find('.menu-item1').removeClass('menu-item1-sel').addClass('menu-item-desel');
$(this).prev().find('.menu-item2').removeClass('menu-item2-sel').addClass('menu-item-desel');
}
});
});
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: -ms-linear-gradient(90deg, #16222A 10%, #3A6073 90%); /* IE10 */
background: linear-gradient(90deg, #16222A 10%, #3A6073 90%); /* W3C */
}
.grid {
display: flex;
flex-wrap: wrap;
width: 90%;
height: 450px;
margin: auto;
overflow: hidden;
padding: 10px 10px;
}
.cell {
flex-basis: 33.3%;
display: flex;
justify-content: center;
align-items: center;
border: 2px solid transparent;
}
.cell::before {
padding-bottom: 100%;
display: block;
content: '';
}
.menu {
position: relative;
top: 100px;
left: 100px;
}
.menu-item {
width: 60px;
height: 60px;
background-color: dimGray;
border-radius: 50%;
position: absolute;
color: white;
text-align: center;
line-height: 70px;
z-index: 19;
}
.menu-item a {
color: white;
transition: 0.35s;
}
.menu-item a:hover { color: black; }
.menu-item1 { transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.menu1 .menu-item1-sel { transform: translate(0px, 125px); }
.menu1 .menu-item2-sel { transform: translate(60px, 105px); }
.menu-item2 { transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.2s; }
.menu2 .menu-item1-sel { transform: translate(0px, 125px); }
.menu2 .menu-item2-sel { transform: translate(60px, 105px); }
.menu-item-desel { transform: none; }
.circle {
position: relative;
background: #ccc;
border-radius: 50%;
width: 200px;
height: 200px;
margin: 0 auto 1em;
transition: all 0.3s;
z-index: 20;
cursor: pointer;
opacity: 1;
}
.active { transform: scale(1.1); }
.selected {
background: red;
z-index: 20;
}
.behind {
opacity: 0.1;
z-index: 18;
cursor: default;
pointer-events: none;
}
.caption {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<div class="grid">
<div class="cell col1">
<div class="inner">
<div class="menu menu1">
<div class="menu-item menu-item1"><i class="fa fa-user fa-2x"></i></div>
<div class="menu-item menu-item2"><i class="fa fa-graduation-cap fa-2x"></i></div>
</div>
<div class="circle hover-effect">
<div class="caption">
<h2>Header 1</h2>
<h3>Subtitle 1</h3>
</div>
</div>
</div>
</div>
<div class="cell col1">
<div class="inner">
<div class="menu menu2">
<div class="menu-item menu-item1"><i class="fa fa-envelope-o fa-2x"></i></div>
<div class="menu-item menu-item2"><i class="fa fa-code fa-2x"></i></div>
</div>
<div class="circle hover-effect">
<div class="caption">
<h2>Header 2</h2>
<h3>Subtitle 2</h3>
</div>
</div>
</div>
</div>
</div>
And here's the fiddle: JSfiddle
Any help would be greatly appreciated! Thanks, and have a great day!
Add delay when hiding the div. Div should perform the effect first before hiding use setTimeout
Executes a function, after waiting a specified number of milliseconds.
$(document).ready(function() {
$(document).on('mouseenter mouseleave', '.circle.hover-effect', function (event) {
$(this).toggleClass("active", event.type === 'mouseenter');
});
$('.menu').hide();
$('.circle').on('mousedown touchstart', function() {
$('.circle').toggleClass('hover-effect');
$(this).toggleClass('selected');
$('.circle').not(this).removeClass('selected');
if ($(this).hasClass('selected')) {
$('.circle').not(this).addClass('behind');
$(this).prev().show('fast');
$(this).prev().find('.menu-item1').removeClass('menu-item-desel').addClass('menu-item1-sel');
$(this).prev().find('.menu-item2').removeClass('menu-item-desel').addClass('menu-item2-sel');
}
else {
$('.circle').removeClass('behind');
$(this).prev().find('.menu-item1').removeClass('menu-item1-sel').addClass('menu-item-desel');
$(this).prev().find('.menu-item2').removeClass('menu-item2-sel').addClass('menu-item-desel');
setTimeout(function(){ $('.circle').prev().hide('fast'); }, 1000);
}
});
});
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: -ms-linear-gradient(90deg, #16222A 10%, #3A6073 90%); /* IE10 */
background: linear-gradient(90deg, #16222A 10%, #3A6073 90%); /* W3C */
}
.grid {
display: flex;
flex-wrap: wrap;
width: 90%;
height: 450px;
margin: auto;
overflow: hidden;
padding: 10px 10px;
}
.cell {
flex-basis: 33.3%;
display: flex;
justify-content: center;
align-items: center;
border: 2px solid transparent;
}
.cell::before {
padding-bottom: 100%;
display: block;
content: '';
}
.menu {
position: relative;
top: 100px;
left: 100px;
}
.menu-item {
width: 60px;
height: 60px;
background-color: dimGray;
border-radius: 50%;
position: absolute;
color: white;
text-align: center;
line-height: 70px;
z-index: 19;
}
.menu-item a {
color: white;
transition: 0.35s;
}
.menu-item a:hover { color: black; }
.menu-item1 { transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.menu1 .menu-item1-sel { transform: translate(0px, 125px); }
.menu1 .menu-item2-sel { transform: translate(60px, 105px); }
.menu-item2 { transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.2s; }
.menu2 .menu-item1-sel { transform: translate(0px, 125px); }
.menu2 .menu-item2-sel { transform: translate(60px, 105px); }
.menu-item-desel { transform: none; }
.circle {
position: relative;
background: #ccc;
border-radius: 50%;
width: 200px;
height: 200px;
margin: 0 auto 1em;
transition: all 0.3s;
z-index: 20;
cursor: pointer;
opacity: 1;
}
.active { transform: scale(1.1); }
.selected {
background: red;
z-index: 20;
}
.behind {
opacity: 0.1;
z-index: 18;
cursor: default;
pointer-events: none;
}
.caption {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<div class="grid">
<div class="cell col1">
<div class="inner">
<div class="menu menu1">
<div class="menu-item menu-item1"><i class="fa fa-user fa-2x"></i></div>
<div class="menu-item menu-item2"><i class="fa fa-graduation-cap fa-2x"></i></div>
</div>
<div class="circle hover-effect">
<div class="caption">
<h2>Header 1</h2>
<h3>Subtitle 1</h3>
</div>
</div>
</div>
</div>
<div class="cell col1">
<div class="inner">
<div class="menu menu2">
<div class="menu-item menu-item1"><i class="fa fa-envelope-o fa-2x"></i></div>
<div class="menu-item menu-item2"><i class="fa fa-code fa-2x"></i></div>
</div>
<div class="circle hover-effect">
<div class="caption">
<h2>Header 2</h2>
<h3>Subtitle 2</h3>
</div>
</div>
</div>
</div>
</div>
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);
}
I'm "required" to make a webpage:
In a page I want a side menu and when clicking each option it shows in the right some content, but without "loading" another page (this would be the easier way, just making a page for each "option" and then just clicking in each button would lead me to that page with the content in the right).
I found this:
<script type="text/javascript">
function toggle(IDS) {
var sel = document.getElementById('pg').getElementsByTagName('div');
for (var i=0; i<sel.length; i++) {
if (sel[i].id != IDS) { sel[i].style.display = 'none'; }
}
var status = document.getElementById(IDS).style.display;
if (status == 'block') { document.getElementById(IDS).style.display = 'none'; }
else { document.getElementById(IDS).style.display = 'block'; }
return false;
}
</script>
I just added it to the side menu and when each part is clicked it shows what I want :
<div id="sidebar2">
<div>
<h2 class="title">TEXT</h2>
<ul>
<li>TEXT</li>
<li>TEXT2</li>
</ul>
</div>
<div>
And in the content of each "option":
<div id="pg">
<div id="pg0" class="pg">
<h2 class="title">TEXT</h2>
<p><img src="images/test.png" alt=""/></p>
</div>
<div id="pg1" class="pg">
<h2 class="title">TEXT2</h2>
<p><img src="images/test2.png" alt=""/>HERE GOES THE DIV POPUP BUTTON</p>
</div>
I want a button to open a pop up image. It appears toggle() sets everything inside each div to display:none; and when I click only changes to block the outer part. But if I have a div inside, it remains hidden.
I've tried these two codes for the popup:
<div id="test">
<a href="#" class="JesterBox">
<div id="image1"><img src="bg.jpg"></div>
</a>
Image 1
With the corresponding JesterBox definition in CSS:
.JesterBox div {
visibility: hidden;
position: fixed;
top: 5%;
right: 5%;
bottom: 5%;
left: 5%;
z-index: 75;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.JesterBox div:before {
content: '';
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 74;
background-color: rgba(0, 0, 0, 0);
transition: all 0.5s ease-out;
}
.JesterBox div img {
position: relative;
z-index: 77;
max-width: 100%;
max-height: 100%;
margin-left: -9999px;
opacity: 0;
transition-property: all, opacity;
transition-duration: 0.5s, 0.2s;
transition-timing-function: ease-in-out, ease-out;
}
.JesterBox div:target { visibility: visible; }
.JesterBox div:target:before { background-color: rgba(0, 0, 0, 0.7); }
.JesterBox div:target img {
margin-left: 0px;
opacity: 1;
}
And this other:
<div class="box">
<a class="button" href="#popup1">TEXT</a>
</div>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Title</h2>
<a class="close" href="#">×</a>
<div class="content">
TEXT TEXT
</div>
</div>
</div>
With its corresponding CSS:
.box {
width: 20%;
margin: 0 auto;
background: rgba(255,255,255,0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
}
.button {
font-size: 1em;
padding: 10px;
color: #fff;
border: 2px solid #06D85F;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button:hover {
background: #06D85F;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: #06D85F;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
#media screen and (max-width: 700px){
.box{
width: 70%;
}
.popup{
width: 70%;
}
}
I can't make it work. How could I make, for example, the 2nd option (the div class="box") work inside the div?
<div id="pg1" class="pg">
<h2 class="title">TEXT2</h2>
<p>
<div class="box">
<a class="button" href="#popup1">TEXT</a>
</div>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Title</h2>
<a class="close" href="#">×</a>
<div class="content">
TEXT TEXT
</div>
</div>
</div>