I'm trying to align cards that are wrapped up in divs. What I want to do is align those cards beside each other until it reaches maximum screen width, then I want it to move to the next line automatically.
The problem is that once I copy the html code, the new copied card spawns on top of the previous card rather than next to each other.
HTML:
<div class="fighter-card">
<div class="front active">
<div class="ranking-position">1</div>
<div class="more">
<i class="fa fa-info-circle" aria-hidden="true"></i>
</div>
<div class="fighter-picture">
<img src="~/images/Resources/RankingsPhotos/Lomachenko.png" />
</div>
<ul class="information">
<li>
<div class="information-left">Name:</div>
<div class="information-right">aa</div>
</li>
<li>
<div class="information-left">Weight:</div>
<div class="information-right">aa</div>
</li>
<li>
<div class="information-left">Belts:</div>
<div class="information-right">aa</div>
</li>
</ul>
</div>
<div class="back">
<div class="go-back">
<i class="fa fa-chevron-circle-left" aria-hidden="true"></i>
</div>
<ul class="information">
<li>
<div class="information-left">Yesterday</div>
<div class="information-right">9<sup>o</sup></div>
</li>
<li>
<div class="information-left">Today</div>
<div class="information-right">9<sup>o</sup></div>
</li>
<li>
<div class="information-left">None of your business</div>
<div class="information-right">9<sup>o</sup></div>
</li>
<li>
<div class="information-left">Yesterday</div>
<div class="information-right">9<sup>o</sup></div>
</li>
<li>
<div class="information-left">Today</div>
<div class="information-right">9<sup>o</sup></div>
</li>
<li>
<div class="information-left">aa</div>
<div class="information-right">9<sup>o</sup></div>
</li>
</ul>
</div>
</div>
<div class="fighter-card">
//Next div with the same content for testing
</div>
CSS:
.fighter-card {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
min-height: 400px;
}
.fighter-card .front {
width: 100%;
height: 100%;
background: #171717;
padding: 30px;
box-sizing: border-box;
transition: .5s;
transform-origin: right;
float: left;
}
.ranking-position {
font-weight: bold;
width: 50%;
text-align: left;
float: left;
color: #fff;
font-size: 40px;
}
.more {
width: 50%;
text-align: right;
cursor: pointer;
float: right;
font-size: 24px;
color: #fff;
display: block;
}
.fighter-picture {
background-size: cover;
}
.information {
margin: 0;
padding: 0;
}
.information li {
padding: 10px 0;
border-bottom: 2px solid #fff;
display: flex;
font-weight: bold;
cursor: pointer;
color: #fff;
}
.information li:last-child {
border-bottom: none;
}
.information li .information-left {
width: 50%;
}
.information li .information-right {
width: 50%;
text-align: right;
}
.fighter-card .back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 30px;
background: rgba(0,0,0,0.7);
box-sizing: border-box;
transform-origin: left;
transition: .5s;
transform: translateX(100%) rotateY(90deg);
}
.fighter-card .back.active {
transform: translateX(0) rotateY(0deg);
}
.fighter-card .front.active {
transform: translateX(0) rotateY(0deg);
}
.fighter-card .front {
transform: translateX(-100%) rotateY(90deg);
}
.go-back {
font-size: 24px;
color: #fff;
text-align: right;
}
.go-back .fa {
cursor: pointer;
}
Javascript:
<script type="text/javascript">
$(document).ready(function () {
$('.more').click(function () {
$('.back').addClass('active')
$('.front').removeClass('active')
});
$('.go-back').click(function () {
$('.back').removeClass('active')
$('.front').addClass('active')
});
});
I know it's a lot of code here entered. Just want to make sure that everything that could be related to this problem is included.
Thanks in advance.
If you use absolute positioning and specify the location, then you should do that for each card. If not, let the browser do the positioning by using display: inline-block or float: left (if there is other content on the line).
Related
So I have looked everywhere on stack overflow and counldn't find someone with a similar issue. I have two classes in the main body with a few different images in the divs. I am planning on switching through them with a slideshow using Jquery. The problem is that the h1 element which is "Boba Fusion" is inline in the first class but is on top of eachother in the second class so that boba is on one line and fusion is on another line. I have linked my HTML and CSS.
What is causing the H1 to behave differently?
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#800&display=swap');
* {
margin: 0px;
padding: 0px;
font-family: 'Montserrat', sans-serif;
}
/* CSS stylings for nav */
a {
text-decoration: none;
color: inherit;
}
.container {
display: flex;
width: 100%;
}
nav ul {
margin-top: 0px;
background-color: #4B4B4B;
margin-left: 0px;
clip-path: polygon(1% 0, 100% 2%, 1000% 10000%);
}
nav ul li {
display: inline-block;
list-style: none;
padding-left: 100px;
font-size: 15px;
color: white;
margin-top: 0px;
padding-bottom: 33px;
flex: 2 0 0;
}
nav ul li:first-child {
padding-left: 90px;
margin-left: 0px;
}
nav ul li:nth-child(6) {
padding-top: 20px;
padding-right: 30px;
margin-right: 0;
}
#bobaimg {
padding-left: 25px;
padding-top: 10px;
margin: 0;
display: block;
flex: 1 0 0;
}
/* CSS styling for main content*/
.main-page {
display: none;
margin-top: 0px;
text-align: center;
min-height: calc(100vh - 40px);
background-size: 1300px 700px;
color: white
}
.main-page-2 {
/* display: none; */
margin-top: 0px;
text-align: center;
min-height: calc(100vh - 40px);
background-size: 1300px 700px;
color: white
}
#specials-head {
padding-top: 50px;
}
.fusion-head {
padding-top: 120px;
float: left;
position: absolute;
padding-left: 30px;
transform: scale(1.2);
}
#fusion-title {
float: left;
position: absolute;
padding-left: 110px;
transform: scale(1.4);
}
#about-img {
transform: scale(0.8);
margin-top: 40px;
float: left;
}
#why-choose {
transform: scale(12);
margin-top: 200px;
position: absolute;
float: left;
padding: 0;
margin-left: 200px;
left: 0;
width: 120%;
}
#quality {
transform: scale(0.8);
margin-left: 470px;
margin-top: 250px;
}
#flavour-btn {
margin-bottom: 70px;
margin-top: 280px;
margin-left: 800px;
color: gray;
background-color: white;
border: none;
transform: scale(1.7);
padding: 10px;
font-size: 10px;
font-weight: lighter;
/* display: none; */
}
#flavour-btn:hover {
cursor: pointer;
transform: scale(1.8);
}
#slideshow {
padding-top: 100px;
padding-bottom: 50px;
}
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: white;
border-radius: 10%;
display: inline-block;
transition: background-color 0.6s ease;
transform: scale(1.2);
}
.active,
.dot:hover {
background-color: #717171;
}
/* CSS styling for footer*/
.footer {
margin-top: 10px;
margin-bottom: 0px;
}
.footer1-ul li {
display: inline-block;
list-style: none;
padding-right: 10px;
transform: scale(0.65);
padding-bottom: 0px;
margin-bottom: 0;
padding-top: 0px;
color: gray;
}
.footer1-ul {
padding-top: 0px;
padding-bottom: 0;
float: left;
}
.footer2-ul {
float: right;
margin: 0;
padding: 0;
}
.footer2-ul li {
display: inline-block;
margin-left: 0px;
list-style: none;
padding-right: 10px;
transform: scale(0.65);
padding-bottom: 0px;
color: gray;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="about.css">
<title>Boba Fusion</title>
</head>
<body class='main'>
<!-- top nav bar and logo -->
<div class="container">
<div id="bobaimg">
<img src="/images/Boba Fusion logo (1).svg" alt="picture of bubble tea" width="150px">
</div>
<div id="nav">
<nav class='main-nav'>
<ul class="nav-ul">
<li>
Home +
</li>
<li>
Menu +
</li>
<li>
Specials +
</li>
<li>
About Us +
</li>
<li>
Win Prizes +
</li>
<li>
<img src="/images/cart-shopping-solid.svg" width="30px">
</li>
</ul>
</nav>
</div>
</div>
<!-- Main content -->
<div class="main-page" style="background-image: url(/images/aboutUs-back.png);">
<div id="specials-head">
<img src="/images/aboutus.png">
</div>
<div class="fusion-head">
<h1 id="fusion-title">
Boba Fusion
</h1>
<img src="/images/textbox-about.png" id="about-img">
</div>
<div>
<button type="button" id="flavour-btn">Our Flavours</button>
</div>
<div style="text-align:center" id="slideshow">
<span class="dot" onclick="currentSlide1()"></span>
<span class="dot" onclick="currentSlide2()"></span>
</div>
</div>
<div class="main-page-2" style="background-image: url(/images/aboutUs-back.png);">
<div id="specials-head">
<img src="/images/aboutus.png">
</div>
<div class="fusion-head">
<h1 id="fusion-title">
Boba Fusion
</h1>
</div>
<div class="fusion-head">
<img src="/images/why choose.png" id="why-choose">
</div>
<div>
<img src="/images/quality.png" id="quality">
</div>
<div style="text-align:center" id="slideshow">
<span class="dot" onclick="currentSlide1()"></span>
<span class="dot" onclick="currentSlide2()"></span>
</div>
</div>
<!-- footer -->
<footer class="footer">
<ul class="footer1-ul">
<li>
<img src="/images/location-dot-solid.svg" alt="location icon" width="15px"> 123 Name Street, Toronto, ON, M6E 1T9
</li>
<li>
<img src="/images/phone-solid.svg" alt="phone icon" width="15px"> (+1) 416 456 789
</li>
<li>
<img src="/images/envelope-solid.svg" alt="email icon" width="15px"> boba#fusion.com
</li>
</ul>
<ul class="footer2-ul">
<li>
<img src="/images/facebook-brands.svg" alt="location icon" width="15px">
</li>
<li>
<img src="/images/twitter-brands.svg" alt="phone icon" width="15px">
</li>
<li>
<img src="/images/youtube-brands.svg" alt="email icon" width="15px">
</li>
<li>
<img src="/images/linkedin-brands.svg" alt="email icon" width="15px">
</li>
</ul>
</footer>
<script src="about.js"></script>
</body>
</html>
You are using "transform: scale(1.2);" for the class ".fusion-head"
so it scales your h1 once (because the h1 is inside it).
Then you are using "transform: scale(1.4);" for id "#fusion-title"
so it scales it twice.
One suggestion on your issue. Since you want the h1 element keeps the same style in both div. You can try to have a default CSS style in your file.
h1 {
...
}
window.addEventListener('scroll', () => {
let scrollDistance = window.scrollY;
if (window.innerWidth > 768) {
document.querySelectorAll('.section1').forEach((el, i) => {
if (el.offsetTop - document.querySelector('.nav').clientHeight <= scrollDistance) {
document.querySelectorAll('.nav a').forEach((el) => {
if (el.classList.contains('active')) {
el.classList.remove('active');
}
});
document.querySelectorAll('.nav li')[i].querySelector('a').classList.add('active');
}
});
}
});
body {
background: gray;
padding: 100px;
}
.block-2 {
display: flex;
flex-direction: row;
background: white;
width: 100%;
padding: 50px;
height: auto;
}
.section-left {
position: sticky;
top: 10px;
height: 300px;
/* background: gray; */
width: 100%;
}
.section-right {
background: blue;
width: 100%;
}
.wrap {
margin: 10px;
background: red;
}
.content {
height: 500px;
}
.footer {
width: 100%;
height: 700px;
background: red;
}
.nav {
position: relative;
left: 0;
top: 0;
width: 100%;
background-color: white;
/* padding: 20px;
*/
}
.nav ul {
display: flex;
list-style-type: none;
flex-direction: column;
padding: 0;
}
.nav a {
display: flex !important;
text-decoration: none;
color: black !important;
display: inline-block;
/* margin-right: 25px !important;
*/
}
#media screen and (max-width: 1024px) {}
.subtitle {
opacity: 0;
}
.active {
opacity: 1;
}
.content1 {
position: absolute;
background-color: red;
/*opacity: 0;*/
width: 100%;
height: 300px;
}
.content2 {
position: absolute;
background-color: gray;
/*opacity: 0;*/
width: 100%;
height: 300px;
}
.content3 {
position: absolute;
background-color: green;
/*opacity: 0;*/
width: 100%;
height: 300px;
}
.content4 {
position: absolute;
background-color: blue;
/*opacity: 0;*/
width: 100%;
height: 300px;
}
<body>
<div class="block-2">
<div class="section-left">
<nav class="nav">
<ul>
<li><a href="" class="active subtitle">
<div class="content1">
<h1>O1</h1>
</div>
</a></li>
<li><a href="" class="subtitle">
<div class="content2">
<h1>O2</h1>
</div>
</a></li>
<li><a href="" class="subtitle">
<div class="content3">
<h1>O3</h1>
</div>
</a></li>
<li><a href="" class="subtitle">
<div class="content4">
<h1>O4</h1>
</div>
</a></li>
</ul>
</nav>
</div>
<div class="section-right">
<div class="section1 wrap">
<div class="content">asdf</div>
</div>
<div class="wrap section1 ">
<div class="content">asdf</div>
</div>
<div class="wrap section1">
<div class="content">asdf</div>
</div>
<div class="wrap section1">
<div class="content">asdf</div>
</div>
</div>
</div>
<div class="footer"></div>
</body>
How can I get the FadeInLeft effect when changing content from .opacity=0 to .opacity=1 on the left side.
I tried to solve this problem with the given script, but it did not work for me.
P.S. See this layout in fullscreen.
Here is a very ruff first draft
Since you already have the .active class being added to your .subtitle class to change opacity, you can just tack on CSS Animation to those classes.
In my example I have .subtitle > div set to right: 100%; and .active > div set to right: 0%; with a transition: 300ms;
Which will animate the block from the left side of the screen over to the right side in 300ms. You can play around with this until you get the animation where you'd like.
Here's a great article from MDN with more information about Using CSS Transitions
CSS transitions provide a way to control animation speed when changing CSS properties. Instead of having property changes take effect immediately, you can cause the changes in a property to take place over a period of time. For example, if you change the color of an element from white to black, usually the change is instantaneous. With CSS transitions enabled, changes occur at time intervals that follow an acceleration curve, all of which can be customized.
Examples
div {
transition: <property> <duration> <timing-function> <delay>;
}
#delay {
font-size: 14px;
transition-property: font-size;
transition-duration: 4s;
transition-delay: 2s;
}
#delay:hover {
font-size: 36px;
}
.box {
border-style: solid;
border-width: 1px;
display: block;
width: 100px;
height: 100px;
background-color: #0000FF;
transition: width 2s, height 2s, background-color 2s, transform 2s;
}
.box:hover {
background-color: #FFCCCC;
width: 200px;
height: 200px;
transform: rotate(180deg);
}
window.addEventListener('scroll', () => {
let scrollDistance = window.scrollY;
if (window.innerWidth > 768) {
document.querySelectorAll('.section1').forEach((el, i) => {
if (el.offsetTop - document.querySelector('.nav').clientHeight <= scrollDistance) {
document.querySelectorAll('.nav a').forEach((el) => {
if (el.classList.contains('active')) {
el.classList.remove('active');
}
});
document.querySelectorAll('.nav li')[i].querySelector('a').classList.add('active');
}
});
}
});
body {
background: gray;
padding: 100px;
}
.block-2 {
display: flex;
flex-direction: row;
background: white;
width: 100%;
padding: 50px;
height: auto;
}
.section-left {
position: sticky;
top: 10px;
height: 300px;
/* background: gray; */
width: 100%;
}
.section-right {
background: blue;
width: 100%;
}
.wrap {
margin: 10px;
background: red;
}
.content {
height: 500px;
}
.footer {
width: 100%;
height: 700px;
background: red;
}
.nav {
position: relative;
left: 0;
top: 0;
width: 100%;
background-color: white;
/* padding: 20px;
*/
}
.nav ul {
display: flex;
list-style-type: none;
flex-direction: column;
padding: 0;
}
.nav a {
display: flex !important;
text-decoration: none;
color: black !important;
display: inline-block;
/* margin-right: 25px !important;
*/
}
#media screen and (max-width: 1024px) {}
.subtitle {
opacity: 0;
transition:300ms;
}
.subtitle > div {
transition:300ms;
right:100%;
}
.subtitle > div h1 {
opacity:0;
position:relative;
top:2em;
transition:300ms;
transition-delay:1s;
}
.active {
opacity: 1;
}
.active > div {
right:0;
}
.active > div h1 {
opacity:1;
top: 0;
}
.content1 {
position: absolute;
background-color: red;
/*opacity: 0;*/
width: 100%;
height: 300px;
}
.content2 {
position: absolute;
background-color: gray;
/*opacity: 0;*/
width: 100%;
height: 300px;
}
.content3 {
position: absolute;
background-color: green;
/*opacity: 0;*/
width: 100%;
height: 300px;
}
.content4 {
position: absolute;
background-color: blue;
/*opacity: 0;*/
width: 100%;
height: 300px;
}
<body>
<div class="block-2">
<div class="section-left">
<nav class="nav">
<ul>
<li><a href="" class="active subtitle">
<div class="content1">
<h1>O1</h1>
</div>
</a></li>
<li><a href="" class="subtitle">
<div class="content2">
<h1>O2</h1>
</div>
</a></li>
<li><a href="" class="subtitle">
<div class="content3">
<h1>O3</h1>
</div>
</a></li>
<li><a href="" class="subtitle">
<div class="content4">
<h1>O4</h1>
</div>
</a></li>
</ul>
</nav>
</div>
<div class="section-right">
<div class="section1 wrap">
<div class="content">asdf</div>
</div>
<div class="wrap section1 ">
<div class="content">asdf</div>
</div>
<div class="wrap section1">
<div class="content">asdf</div>
</div>
<div class="wrap section1">
<div class="content">asdf</div>
</div>
</div>
</div>
<div class="footer"></div>
</body>
my code is here
https://codepen.io/bunea-andrei/pen/ZEeeWPK
I'm talking about the mobile view of the website , please make the screen smaller until it changes to the stance I'm referring to
I assume it's something wrong with my JavaScript code and I spent the last 3 hours trying to figure out what is it
Code is here
const wrapperSlide = () => {
const burger = document.querySelector(".burger");
const wrapper = document.querySelector(".wrapper");
burger.addEventListener("click", () => {
wrapper.classList.toggle("wrapper-active");
burger.classList.toggle("toggle");
});
}
wrapperSlide();
/* top side with the logo and info */
top{
height:140px;
width: 100%;
background: #fff;
display:block;
}
top .left-side {
margin-left: 450px;
text-align: left;
padding: 20px;
display: inline-block;
font-family: 'Anton', sans-serif;
}
top .left-side li{
letter-spacing: 2px;
line-height:1.2em;
}
top .right-side {
margin-right:450px;
text-align: left;
padding-top: 30px;
float:right;
}
top li{
list-style: none;
line-height:1.1em;
}
/* navigation menu */
menu {
width: 100%;
background: black;
height: 90px;
border-bottom: 22px solid red;
}
menu .wrapper {
display: flex;
justify-content: space-around; /*play with the width and padding to split out the categories more*/
width: 50%;
padding: 10px 485px;
}
menu .line{ /* the separation lines between the categories */
width:1px;
height:70px;
background:grey;
}
menu span { /* editing the writing of the menu bar*/
color: white;
font-size: 25px;
margin-top: 30px;
}
menu span a:link { /* removing the underline and set a color for the link to change it from blue*/
text-decoration: none;
color: white;
}
menu span a:visited{ /* makes the color of the links stay the same after clicking */
color:inherit;
}
menu .box { /* creating the box in which i will put each item of the menu*/
width: 180px;
height: 70px;
text-align:center;
line-height:65px;
}
menu .box:hover {
background-color: green;
}
menu .burger div{
width:25px;
height:3px;
display:none;
background-color: #97903f;
}
#media only screen and (max-width: 415px) {
menu {
width: 100%;
border-bottom: none;
max-height: 35px;
margin-top: -170px; /* to reverse the top with the menu*/
padding-top: 15px; /* to move the burger lines a bit down from the top of th menu */
background-color: rgb(35 22 68 / 0.94);
}
menu .burger div { /* editing the burger lines */
display: flex;
margin-bottom: 5px;
margin-left: 15px;
}
top {
margin-top: 30px; /* to get it further down from the top so i can replace it with the menu */
}
top .left-side {
margin-left: 10px;
display: block;
text-align: center;
}
top .right-side {
display: block;
text-align: center;
margin: 0 auto;
margin-top: -40px;
margin-right: 70px;
}
menu .wrapper {
margin-top: -207px;
width: 200px;
height: 569px;
padding:0px;
display: inline-block;
background-color: rebeccapurple;
padding-left: 20px;
transform: translateX(-100%);
transition: transform 0.5s ease-in;
}
menu .line{ /* modify the separation line from vertical display to horizontal */
height:1px;
width:220px;
margin-left:-20px;
}
.wrapper-active {
transform: translateX(0%);
}
.toggle .line1 {
transform: rotate(-45deg) translate(-5px, 6px);
}
.toggle .line2 {
opacity: 0;
}
.toggle .line3 {
transform: rotate(45deg) translate(-5px, -6px);
}
}
<top>
<div class="left-side">
<ul>
<li style="font-size:50px; color:#0094ff; letter-spacing: 4px; ">ROXIRALU</li>
<li>DERATIZEZ TOT CE MISCA VERISORU' TE PUP</li>
<li>SPECIALIST xD</li>
</ul>
</div>
<div class="right-side">
<ul>
<li style="font-size:25px; color:#000000; letter-spacing:1px; font-family: 'Anton', sans-serif; padding-bottom:2px;">Suna 08763575321</li>
<li>Luni-Vineri 12:00-24:00</li>
<li>Sambata-Duminica INCHIS</li>
<li>Da-mi email la: sagunu#salam.hd</li>
</ul>
</div>
</top>
<menu>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
<div class="wrapper">
<div class="line"></div>
<div class="box">
<span>
Soareci
</span>
</div>
<div class="line"></div>
<div class="box">
<span>
Gaze
</span>
</div>
<div class="line"></div>
<div class="box">
<span>
Fantome
</span>
</div>
<div class="line"></div>
<div class="box">
<span>
Purici
</span>
</div>
<div class="line"></div>
<div class="box">
<span>
Otravuri
</span>
</div>
<div class="line"></div>
<div class="box">
<span>
Cozonaci
</span>
</div>
<div class="line"></div>
<div class="box">
<span>
Prafuri
</span>
</div>
<div class="line"></div>
<div class="box">
<span>
Contact
</span>
</div>
<div class="line"></div>
</div>
</menu>
<script src="js/index.js"></script>
</html>
The specificity for the selector .wrapper-active that is applying the transform to show the navigation has a lower specificity value than menu .wrapper, which is also defining a transform. This is causing the transform: translateX(-100%); to take over.
Adding more specificity to the active class should do the trick:
.wrapper.wrapper-active {
transform: translateX(0);
}
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>
This is my html and JavaScript code I want help in this task, After I go back and forth into the submenus several times, the padding gets messed up for the elements and the icons get cut off.
Some times it work properly but when I click back arrow very quickly Its messed the paddings.
I am sharing screenshot also.
$(document).ready(function() {
// Variable declaration...
var left, width, newLeft;
// Add the "top-menu" class to the top level ul...
$('.mobile-menu').children('ul').addClass('top-menu');
// Add buttons to items that have submenus...
$('.has_child_menu').append('<button class="arrow"><i class="fa fa-chevron-right"></i></button>');
// Mobile menu toggle functionality
$('.menu-toggle').on('click', function() {
// Detect whether the mobile menu is being displayed...
display = $('.mobile-menu').css("display");
if (display === 'none') {
// Display the menu...
$('.mobile-menu').css("display", "block");
} else {
// Hide the mobile menu...
$('.mobile-menu').css("display", "none");
// and reset the mobile menu...
$('.current-menu').removeClass('current-menu');
$('.top-menu').css("left", "0");
$('.back-button').css("display", "none");
}
});
// Functionality to reveal the submenus...
$('.arrow').on('click', function() {
// The .current-menu will no longer be current, so remove that class...
$('.current-menu').removeClass('current-menu');
// Turn on the display property of the child menu
$(this).siblings('ul').css("display", "block").addClass('current-menu');
left = parseFloat($('.top-menu').css("left"));
width = Math.round($('.mobile').width());
newLeft = left - width;
// Slide the new menu leftwards (into the .mobile viewport)...
$('.top-menu').css("left", newLeft);
// Also display the "back button" (if it is hidden)...
if ($('.back-button').css("display") === "none") {
$('.back-button').css("display", "flex");
}
});
// Functionality to return to parent menus...
$('.back-button').on('click', function() {
// Hide the back button (if the current menu is the top menu)...
if ($('.current-menu').parent().parent().hasClass('top-menu')) {
$('.back-button').css("display", "none");
}
left = parseFloat($('.top-menu').css("left"));
width = Math.round($('.mobile').width());
newLeft = left + width;
// Slide the new menu leftwards (into the .mobile viewport)...
$('.top-menu').css("left", newLeft);
// Allow 0.25 seconds for the css transition to finish...
window.setTimeout(function() {
// Hide the out-going .current-menu...
$('.current-menu').css("display", "none");
// Add the .current-menu to the new current menu...
$('.current-menu').parent().parent().addClass('current-menu');
// Remove the .current-menu class from the out-going submenu...
$('.current-menu .current-menu').removeClass('current-menu');
}, 250);
});
});
body {
margin: 0px;
padding: 0px;
font-family: 'Segoe UI';
}
.smart-list-container {
max-width: 95%;
margin: 10px auto;
}
.smart-list-header {
background: #265a88;
padding: 10px 0px;
}
.current-page-title {
text-align: center;
}
.current-page-title h3 {
color: #fff;
margin: 0px;
}
.smart-row {}
.smart-list-icon {
float: left;
width: 60px;
}
.smart-list-icon .fa {
font-size: 35px;
padding-right: 20px;
}
.smart-descrption {
float: right;
width: calc(100% - 60px);
}
.smart-text {
float: left;
}
.smart-text h3 {
margin: 0;
}
.smart-right-btn {
float: right;
}
.smart-right-btn .fa {
font-size: 28px;
}
.sub-list {
display: none;
}
.slide-smart-page {
left: -100%;
position: absolute;
transition: 0.5s all ease;
}
body .slide-smart-sub-page {
display: block;
}
.sub-list {
background: #2196F3;
height: 300px;
}
/*******switch-btn*******/
.smart-right-btn .switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
margin-bottom: 0px;
}
.smart-right-btn .switch input {
display: none;
}
.smart-right-btn .slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.smart-right-btn .slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
.smart-right-btn input:checked+.slider {
background-color: #2196F3;
}
.smart-right-btn input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
.smart-right-btn input:checked+.slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.smart-right-btn .slider.round {
border-radius: 34px;
}
.smart-right-btn .slider.round:before {
border-radius: 50%;
}
/*******switch-btn-end*******/
.smart-list-container .mobile {
background: #fff;
overflow: hidden;
/* NB: Remove this overflow property if you want to get a better idea of what is happening "under the hood" */
position: relative;
}
.smart-list-container .mobile-controls {
background: #337ab7;
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
padding: 10px;
}
.smart-list-container .mobile-controls button {
background: none;
border: none;
border-radius: 8px;
color: #fff;
height: 40px;
padding: 0 15px;
outline: none;
font-size: 18px;
}
.smart-list-container button:hover {
cursor: pointer;
}
.smart-list-container .mobile-controls .back-button {
display: none;
}
.smart-list-container .mobile-menu {
background: #fff;
display: none;
height: 100%;
left: 0;
position: absolute;
width: 100%;
z-index: 10;
}
.smart-list-container ul {
margin: 0;
padding: 0;
width: 100%;
position: absolute;
transition: 0.25s;
}
.smart-list-container li {
border-bottom: 1px solid #ccc;
display: flex;
justify-content: space-between;
list-style: none;
}
.smart-list-container li a {
color: #000;
flex: 3;
padding: 10px 10px;
text-decoration: none;
}
.smart-list-container li button {
background: none;
border: 0;
flex: 1;
text-align: right;
padding: 10px;
}
.smart-list-container div>ul {
top: 0;
left: 0;
}
.smart-list-container div>ul ul {
display: none;
top: 0;
left: 100%;
}
/* Content styles below here */
.smart-list-container section {
line-height: 1.5;
padding: 20px;
}
.smart-list-container h1 {
font-size: 1.5rem;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="css/style.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="smart-list-container">
<div class="mobile">
<div class="mobile-controls">
<button class="menu-toggle">Page Name</button>
<button class="back-button"><i class="fa fa-chevron-left"></i></button>
</div>
<div class="mobile-menu">
<ul>
<li>
<a href="">
<div class="smart-row">
<div class="smart-list-item">
<div class="smart-list-icon">
<span class="fa fa-cog"></span>
</div>
<div class="smart-descrption">
<div class="smart-text">
<h3>Face ID</h3>
</div>
<div class="smart-right-btn">
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</div>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
</div>
</a>
</li>
<li class="has_child_menu">
<a href="">
<div class="smart-row">
<div class="smart-list-item">
<div class="smart-list-icon">
<span class="fa fa-cog"></span>
</div>
<div class="smart-descrption">
<div class="smart-text">
<h3>Face ID</h3>
</div>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
</div>
</a>
<ul>
<li>Sub-list</li>
<li class="has_child_menu">
Sub-list-inner
<ul>
<li>Sub-list-inner</li>
<li>Sub-list-inner</li>
<li class="has_child_menu">
Sub-list-inner
<ul>
<li>Sub-list-inner</li>
</ul>
</li>
<li>Sub-list-inner</li>
<li>Sub-list-inner</li>
</ul>
</li>
<li>Sub-list</li>
<li class="has_child_menu">
Sub-list-inner
<ul>
<li>Sub-list-inner</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<section>
<article>
<h1>Mobile menu demo</h1>
<p>Click the button above to see the mobile menu in action!</p>
<p>The menu functionality was inspired by the Settings app in iOS.</p>
<p>This implementation uses some jQuery and flexbox. The orginal code was written for a WordPress theme, so absolute positioning was used (rather than fixed positioning - which is easier) to avoid conflicts with the admin bar (when the user is logged-in).</p>
</article>
</section>
</div>
</div>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Do transition: 0.15s; instead of transition: 0.25s; in css file.