Hi I have created a collapsable sidebar the expanding animation works fine I mean as you can see when you expand the sidebar it goes smoothly but the problem comes when I am collapsing the sidebar like first the dark blue chevron comes and sticks to the left side and then the sidebar collapses with a jerk.
So can anyone tell me why its happening? and how can I correct it make the sidebar and the icon go at the same time.
Help is highly appreciated!
let expandIcon = document.querySelector('.epnd-clpse-icon')
expandIcon.addEventListener('click', function() {
$('.sidebar-container').toggleClass('sidebar-container-clpse')
$('.epnd-clpse-icon').toggleClass('epnd-clpse-icon-trn')
console.log("I am clicked")
})
.sidebar-container {
background: #ccc;
}
.epnd-clpse-icon {
background: white;
color: white;
}
a {
text-decoration: none;
}
.sidebar-icon i {
color: #06d6a0;
width: 30px;
}
ul {
padding-left: 0;
}
.sidebar-container {
width: 100%;
max-width: 15%;
min-width: 250px;
transition: all 0.5s linear;
position: relative;
border-left: 20px solid var(--primary-light);
overflow-x: hidden;
}
.sidebar-container-clpse {
min-width: 80px !important;
width: 80px !important;
overflow-x: hidden;
transition: all 0.5s linear;
}
.epnd-clpse-icon {
position: absolute;
/* bottom: 100px;
left: 10px; */
top: 50%;
right: -10px;
transition: all 0.5s linear;
cursor: pointer;
background-color: #001846;
padding: 0.8rem;
border-radius: 10px;
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
}
.epnd-clpse-icon-trn {
/* transform: rotateY(180deg); */
transition: all 0.5s linear;
left: 0px;
}
.sidebar .nav-link {
display: flex !important;
padding: 0.6rem 1rem;
align-items: center;
}
.sidebar ul li {
position: relative;
width: 100%;
list-style: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="sidebar-container bg-primary-ex-lgt">
<div class="sidebar min-100-vh py-5 d-flex flex-column justify-content-between">
<ul class="dash-links-icon">
<div class="dash-res-close-icon px-2 mb-5">
<i class="fa-solid fa-chevron-right"></i>
</div>
<li class="links-icon my-2 <?php if($page=='home'){echo 'sdbr-active';}?>">
<a class="nav-link" href="user-dashboard.php">
<span class="sidebar-icon">
<i class="fa-solid fa-house"></i>
</span>
<span class="sidebar-text">Dashboard</span>
</a>
</li>
<li class="links-icon my-2 <?php if($page=='quiz'){echo 'sdbr-active';}?>">
<a class="nav-link" href="quiz.php">
<span class="sidebar-icon">
<i class="fa-solid fa-lightbulb"></i>
</span>
<span class="sidebar-text">Quiz</span>
</a>
</li>
<li class="links-icon my-2">
<a class="nav-link" href="#">
<span class="sidebar-icon">
<i class="fa-solid fa-book"></i>
</span>
<span class="sidebar-text">Blog</span>
</a>
</li>
</ul>
<div class="epnd-clpse-icon">
<i class="fa-solid fa-chevron-right"></i>
</div>
</div>
</div>
In your JavaScript you add the class epnd-clpse-icon-trn. Which adds a left:0px;
.epnd-clpse-icon-trn{
/* transform: rotateY(180deg); */
transition: all 0.5s linear;
left: 0px;
}
Because the original element does not have a left: property, CSS cannot compute a transition of the value and thus will 'pop' the element to the left.
How to fix:
To fix this, you'll have to either position the original element by using left: so CSS can calculate it's position transition.
Alternatively, position the element position:absolute within it's parent element. This way, if you move the parent, the element will shift accordingly. In your code, you've already done this, so changing the CSS related to .epnd-clpse-icon-trn would be sufficient:
.epnd-clpse-icon-trn {
/* transform: rotateY(180deg); */
// transition: all 0.5s linear;
// left: 0px;
}
Ironically, by removing the styling related to .epnd-clpse-icon-trn, you'll do exactly what you're trying to manifest.
Related
I apologize if I make any mistakes but I just joined earlier and I am still a newbie to web development. I tried practicing a hamburger menu earlier but it won't show up. I was hoping if anyone could guide me on which part did I do wrong. Here's the code.
var show = document.getElementById("nav-links");
function showMenu() {
show.style.right = "0";
}
function closeMenu() {
show.style.right = "-200px";
}
#media (max-width: 700px) {
.nav-bar {
padding: 10px 30px;
}
.fa-bars {
position: absolute;
right: 20px;
top: 10px;
}
.nav-bar .fa {
display: block;
color: #f1f1f1;
margin: 10px 25px;
font-size: 22px;
cursor: pointer;
}
.nav-links {
height: 100vh;
width: 200px;
background: #111;
top: 0;
right: -200px;
text-align: left;
z-index: 2;
transition: 0.5s;
position: absolute;
}
.nav-links ul a {
display: block;
}
.nav-links .btn {
float: none;
margin-left: 25px;
margin-top: 10px;
}
}
<div class="nav-bar">
<div class="nav-logo">
GottaGo
</div>
<div class="nav-links">
<i class="fa fa-close" onclick="closeMenu()" id="nav-links"></i>
<ul>
<a href="#">
<li>Home</li>
</a>
<a href="#">
<li>GoWhere</li>
</a>
<a href="#">
<li>About</li>
</a>
</ul>
<button type="button" class="btn">SIGN UP</button>
</div>
<i class="fa fa-bars" onclick="showMenu()" id="nav-links"></i>
</div>
My plan was that, when I click the menu it will show this https://i.imgur.com/Zds2D9g.png but it was not showing when i click it. I tried inserting an alert(); just to test it, when I clicked it, instead of the menu it just shows the alert but not the menu I was hoping for. I apologize, this is my first post here so I hope I didn't make anyone confused.
On the snippet, you have changed the style of the close icon. And to show hamburger menu, the nav-menu style should be changed.
So I have added new id nav-menu to nav-links div and updated the style of that.
var show = document.getElementById("nav-menu");
function showMenu() {
show.style.right = 0;
}
function closeMenu() {
show.style.right = "-200px";
}
#media (max-width: 700px) {
.nav-bar {
padding: 10px 30px;
}
.fa-bars {
position: absolute;
right: 20px;
top: 10px;
}
.nav-bar .fa {
display: block;
color: #f1f1f1;
margin: 10px 25px;
font-size: 22px;
cursor: pointer;
}
.nav-links {
height: 100vh;
width: 200px;
background: #111;
top: 0;
right: -200px;
text-align: left;
z-index: 2;
transition: 0.5s;
position: absolute;
}
.nav-links ul a {
display: block;
}
.nav-links .btn {
float: none;
margin-left: 25px;
margin-top: 10px;
}
}
<div class="nav-bar">
<div class="nav-logo">
GottaGo
</div>
<div class="nav-links" id="nav-menu">
<i class="fa fa-close" onclick="closeMenu()" id="nav-links">close</i>
<ul>
<a href="#">
<li>Home</li>
</a>
<a href="#">
<li>GoWhere</li>
</a>
<a href="#">
<li>About</li>
</a>
</ul>
<button type="button" class="btn">SIGN UP</button>
</div>
<i class="fa fa-bars" onclick="showMenu()" id="nav-links">test</i>
</div>
Try using this code to show, hide something: using positioning could lead to an ugly result. Remember then to use id to identify only one item and classes to identify a group of items.
Another thing I can suggest is to keep it as simple as possible, dont put too many useless id or classes. try to achieve your result writing less code possible. I hope I helped you, good luck!
HTML:
<div class="nav-bar">
<div class="nav-logo">
GottaGo
</div>
<div class="nav-links" id="nav-links">
<i id="close" class="fa fa-close" onclick="closeMenu()" >Close menu</i>
<ul>
<li>Home</li>
<li>GoWhere</li>
<li>About</li>
</ul>
<button type="button" class="btn">SIGN UP</button>
</div>
<i id="show" class="fa fa-bars" onclick="showMenu()">Show menu</i>
</div>
CSS
#media (max-width: 700px){
.nav-bar{
padding: 10px 30px;
}
.fa-bars{
position: absolute;
right: 20px;
top: 10px;
}
.nav-bar .fa{
display: block;
color: #f1f1f1;
margin: 10px 25px;
font-size: 22px;
cursor: pointer;
}
.nav-links{
position:absolute;
height: 100vh;
width: 200px;
background: #111;
top: 0;
left: -200px;
text-align: left;
z-index: 2;
}
.nav-links .btn{
float: none;
margin-left: 25px;
margin-top: 10px;
}
}
i:hover{
cursor: pointer;
color:red;
}
Javascript
var show = document.getElementById("nav-links");
function showMenu(){
show.style.display="block";
document.getElementById('show').style.display="none";
document.getElementById('close').style.display="block";
}
function closeMenu(){
show.style.display= "none";
document.getElementById('close').style.display="none";
document.getElementById('show').style.display="block";
}
Everything you use in the code seems pretty old and not really good to learn, i created that little snippet, maybe you get something out of it (i commented everything so you could understand it). Just comment it to ask for details on something
let hamburger = document.getElementById("hamburger"); // Get The Hamburger-Button
let nav = document.getElementById("nav"); // Get the Navigation
hamburger.onclick = ()=>{ // when you click the hamburger, the following function will be exec
nav.classList.toggle("open"); //you toggle the classList of the Navigation with the class "open"
};
body{
overflow-x:hidden;
}
#hamburger{
width:50px;
height:40px;
display:flex; /* Will display the inner bars like we want it (google css flex for more information)*/
flex-direction:column; /* Will display the bars in a column */
align-items: center; /* align the bars to the center */
justify-content:space-around; /* Displays the bars in a even space vertically*/
cursor:pointer; /* When you hover over the Hamburger, your cursor will be a pointer */
}
#hamburger div{
width:30px;
height:4px;
background:black;
}
nav a{
color:white;
text-decoration:none;
}
nav{
position:fixed; /* The position is fixed, and it stays the same when you scroll*/
top:0px; /* Set the y-position to the top at 0px */
right:0px; /* Set the x-position to the right at 0px */
width:20vw; /* Set the width to 20vw (vw = viewpoint Width) you can see vw as a percentage of you current screen. so the value 20vw will use 20% of your available width */
transform: translateX(20vw); /* translate (move) the navigation 20px to the right */
height:100vh; /* set the height to 100vh (hv = viewpointHeight) so 100% of our current available height */
background:black;
transition:transform 500ms; /* set a transition animation for the transform */
}
#nav.open{
transform: translateX(0); /* when you have the open class attached, it will be visible.
}
nav ul{
margin:10px;
list-style-type:none;
padding:0;
}
<html>
<head>
<title>Snippet</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="hamburger">
<div></div>
<div></div>
<div></div>
</div>
<nav id="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Lorem</li>
<li>Ipsum</li>
</ul>
</nav>
</body>
</html>
I'm trying to create my first website with parallax effect. I noticed a problem with my fixed top navbar - it appears on top of the scrollbar and overflow hidden doesn't hide it. I've tried to put it into .main-container and it kinda solves my problem: it's not on the top of scrollbar anymore, however, it stops being top fixed. What causes this problem? How can I fix it?
HTML:
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"></link>
</head>
<body>
<nav class="navbar navbar-light navbar-expand-lg" id="top-navbar">
<a class="navbar-brand" href="#">brand</a>
<button class="navbar-toggler" id='nav-icon' type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span></span>
<span></span>
<span></span>
<span></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav m-auto">
<li class="nav-item">
<a class="nav-link" href="#">link</a>
</li>
</ul>
<ul class="navbar-nav m-auto">
<li class="nav-item">
<a class="nav-link" href='#1'>link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href='#2'>link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href='#3'>link 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href='#4'>link 4</a>
</li>
</ul>
<ul class="navbar-nav ml-auto mr-0">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbar-dropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">dropdown</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">link</a>
<a class="dropdown-item" href="#">link</a>
</div>
</li>
</ul>
</div>
</nav>
<div class='main-container'>
<div class="parallax-container">
<div>
<h1>title</h1>
</div>
<a href="#1" id='main-anchor'>
<i class="large material-icons" style="font-size: 5rem" id='goto-icon'>
keyboard_arrow_down
</i>
</a>
</div>
<div id="wrapper" class='content-container'>
<div id="page-content" class="page content">
<span class="anchor" id="1"></span>
<section class="card text-white bg-dark mb-5">
<h4 class="card-header">Title</h4>
<div class="card-body">
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
</div>
</section>
<span class="anchor" id="2"></span>
<section class="card text-white bg-dark mb-5">
<h4 class="card-header">Title</h4>
<div class="card-body">
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
</div>
</section>
<span class="anchor" id="3"></span>
<section class="card text-white bg-dark mb-5">
<h4 class="card-header">Title</h4>
<div class="card-body">
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
</div>
</section>
<span class="anchor" id="4"></span>
<section class="card text-white bg-dark mb-5">
<h4 class="card-header">Title</h4>
<div class="card-body">
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
</div>
</section>
</div>
</div>
</div>
</body>
SCSS
// COLORS
$darker: #212529;
$dark: #35383C;
$gray: #605F5E;
$greenish: #0F5158;
$lightgreen: #21686E;
$blue: #7FA5A6;
$lightblue: #96B5B6;
$alabaster: #F1EBE1;
$gainsboro: #CEE0DC;
// SITE
body {
font-family: sans-serif;
background-color: $darker;
scroll-behavior: smooth;
}
.main-container {
perspective: 1px;
transform-style: preserve-3d;
height: 100vh;
overflow-x: hidden;
overflow-y: scroll;
background-color: $darker;
a {
&:link,
&:visited,
&:hover,
&:active {
color: white;
}
}
}
.content-container {
position: relative;
display: block;
z-index: 1;
background-color: $darker;
min-height: 100vh;
}
.content {
margin: 0 auto;
padding: 75px 0;
}
.parallax-container {
color: white;
left: -9px;
display: flex;
flex: 1 0 auto;
flex-direction: column;
position: relative;
z-index: -1;
height: 100vh;
width: 101vw;
justify-content: center;
align-items: center;
transform: translateZ(-1px) scale(2);
background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.1));
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
// NAVBAR
#top-navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
font-size: 1rem;
z-index: 30;
line-height: 150%;
background-color: rgba(33, 37, 41, 0.1);
padding: 0 2.5vw;
transition: transform 1s .3s ease;
box-shadow: 0 1px 50px -28px $blue;
&.dark {
background: $darker;
}
&.dark-show {
background: $darker;
}
&.scrollUp {
transform: translateY(-100%);
}
* {
color: #bbccdd !important;
font-weight: 500;
}
.navbar-brand {
font-size: 1.5rem;
font-weight: 600;
padding: 0;
}
.nav-item {
text-transform: uppercase;
padding: 0 8px;
cursor: pointer;
// &:hover:not(.dropdown) {
// background-color: rgba(33, 37, 41, 1);
// }
a:hover {
color: white !important;
}
}
.nav-link {
margin: 10px 0;
&.active {
color: white !important;
border-bottom: 1px solid white;
}
}
.dropdown-menu {
border-color: $blue;
line-height: 2rem;
background-color: rgba(0, 0, 0, 0.1);
.dropdown-divider {
margin: 0;
border-top: 2px solid black;
}
.dropdown-item:hover {
color: white;
background-color: rgba(33, 37, 41, 0.1);
}
}
.navbar-toggler {
color: $blue;
}
}
// HAMBURGER
#nav-icon {
width: 30px;
height: 30px;
position: relative;
margin: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
#nav-icon span {
display: block;
position: absolute;
height: 3px;
width: 100%;
background: $blue;
border-radius: 3px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#nav-icon span:nth-child(1) {
top: 1px;
}
#nav-icon span:nth-child(2),
#nav-icon span:nth-child(3) {
top: 13px;
}
#nav-icon span:nth-child(4) {
bottom: 0px;
}
#nav-icon.open span:nth-child(1) {
top: 15px;
width: 0%;
left: 50%;
}
#nav-icon.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#nav-icon.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#nav-icon.open span:nth-child(4) {
top: 15px;
width: 0%;
left: 50%;
}
// CONTENT
#page-content {
height: 100vh !important;
padding: 15vh 10vw 5vh 10vw;
margin: 0;
}
.anchor {
display: block;
height: 15vh;
margin-top: -15vh;
visibility: hidden;
}
// MEDIA QUERIES
#media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
#sidebar {
display: none;
}
#page-content {
margin: 0;
}
}
JS:
$(document).ready(function() {
$('#sidebar').css('transform', 'translateX(200px)')
$('#nav-icon').click(function() {
// $(this).toggleClass('open');
$('#top-navbar').toggleClass('dark-show');
});
$('.main-container').scroll(function() {
let pageHeight = $('.main-container').height();
$('#top-navbar').toggleClass('dark', $(this).scrollTop() > pageHeight);
$('section').each(function(i) {
var position = $(document).scrollTop();
var header = $('#top-navbar').outerHeight();
if ($(this).position().top <= (position + header)) {
var top = $(this).position().top;
console.log($(this).position().top <= (position + header));
$(".nav-link.active").removeClass('active');
$(".nav-link").eq(i).addClass('active');
}
})
});
$('.nav-link').on('click', function() {
$('.nav-link').removeClass('active');
$(this).addClass('active');
});
});
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
let width = $(window).width();
let height = $(window).height();
if (height > width && height < 1024) {
let position = $('#page-content').scrollTop();
$('.main-container').scroll(function() {
let scroll = $('.main-container').scrollTop();
if (scroll > position) {
$('#top-navbar').addClass('scrollUp');
} else {
$('#top-navbar').removeClass('scrollUp');
}
position = scroll;
});
}
Link to jsfiddle: https://jsfiddle.net/strzesia/fhqok4ym/19/
You can use following css for navbar
.nav{
position:absolute;
left:0;
top:0;
}
I had the same problem while I was using a Bootstrap template from a teacher. I found out the problem was this line:
overflow-x: hidden;
I just removed and it solved the problem.
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).
I have this issue: I've animated an arrow pointing down and placed it under the "login" in my navbar, but it seems that when the animation gets close tu the "login", I can't press, like it's blocking it somehow, is there a way to fix this? Or should I remove the animation?
This is what happens
body{
margin: 0;
padding: 0;
background: white;
}
.circle {
position: absolute;
top: 10%;
left: 83.5%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
text-align: center;
line-height: 110px;
color: white;
font-size: 30px;
overflow: hidden;
color: yellow;
}
.circle {
margin: 0;
padding: 0;
animation: animate 1s infinite;
right: 0;
}
#keyframes animate {
50%{
transform: translateX(-50px);
margin-top: -30px;
}
<body>
<header>
<div class="container">
<img src="img1.png" style="max-width: 80px; margin-top: 0px;" alt="logo" class="logo">
<nav>
<ul>
<li>INICIO</li>
<li>CONTACTO</li>
<li>REGISTRATE</li>
<li>INGRESAR</li>
<div class="circle">
<i class="fas fa-angle-down"></i>
</ul>
</div>
</nav>
</header>
</body>
It seems like you could make use of CSS pointer-events
https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
If you set pointer-events:none; for the css element, it won't block links it covers.
Example:
.circle{
pointer-events: none;
}
I have a menu that opens to the right. My issue is that I want the body to resize after I have opened the menu. The menu is 300px wide and I want the body to resize to take up the remainder of the screen. I saw a few examples, but all they do is shift the body so part of it is not visible and off screen. You can see my example here
<nav class="side-nav hidden">
<div>
<div class="open-menu-side" id="side">
<button class="hamburger hamburger--squeeze" type="button">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
</div>
<ul class="side-nav-ul">
<li class="block">Home</li>
<li class="block">Profile</li>
<li class="block">Blogs</li>
<li class="block">Following</li>
<li class="block">Settings</li>
<li class="block">Logout</li>
</ul>
</div>
</nav>
<header id="pushed">
<nav>
<div class="open-menu" id="main">
<button class="hamburger hamburger--squeeze" type="button">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
</div>
<div class="brand">Login!</div>
</nav>
</header>
<section></section>
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<script type="text/javascript" src="lib/index.js"></script>
``
As mentioned in the comment, this is what you could do. Add a class to your HTML body when the menu is opened and add a padding-right equals to the width of the menu.
$(".hamburger").on("click", function() {
$(".hamburger").toggleClass("is-active");
//add menu-active class to document body
$('body').toggleClass('menu-active');
$(".side-nav").toggleClass("hidden");
if ($("#side").hasClass("is-active")) {
$("#main").toggleClass("hidden");
} else if (!$("#side").hasClass("is-active")) {
$("#main").toggleClass("hidden");
}
});
html,
body {
padding: 0;
margin: 0;
height: 100%;
background-color: black;
box-sizing: border-box;
}
button:focus {
outline: 0;
}
a {
color: #fff;
}
a:hover {
color: #fff;
text-decoration: none;
}
.side-nav {
position: absolute;
background-color: gray;
width: 300px;
height: 100%;
z-index: 1;
right: 0;
}
.open-menu-side {
position: relative;
display: block;
height: 80px;
width: 100%;
text-align: center;
float: right;
}
.side-nav-ul {
position: relative;
display: inline-block;
width: 100%;
height: 100%;
list-style: none;
font-size: 28px;
color: #fff;
}
.block {
height: 40px;
}
header {
height: 80px;
background-color: #fff;
}
.brand {
display: inline-block;
}
.img-menu img {
height: 50px;
width: 50px;
border-radius: 50%;
border: solid 1px black;
float: left;
}
.hidden {
position: absolute;
right: -300px;
}
#pushed {
position: relative;
}
#main {
float: right;
}
.hamburger {
padding: 15px 15px;
height: 100%;
display: inline-block;
cursor: pointer;
transition-property: opacity, filter;
transition-duration: 0.15s;
transition-timing-function: linear;
font: inherit;
color: inherit;
text-transform: none;
background-color: transparent;
border: 0;
margin: 0;
overflow: visible;
}
.hamburger:hover {
opacity: 0.7;
}
.hamburger-box {
width: 40px;
height: 24px;
display: inline-block;
position: relative;
}
.hamburger-inner {
display: block;
top: 50%;
margin-top: -2px;
}
.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
width: 40px;
height: 4px;
background-color: #000;
border-radius: 4px;
position: absolute;
transition-property: transform;
transition-duration: 0.15s;
transition-timing-function: ease;
}
.hamburger-inner::before,
.hamburger-inner::after {
content: "";
display: block;
}
.hamburger-inner::before {
top: -10px;
}
.hamburger-inner::after {
bottom: -10px;
}
.hamburger--squeeze .hamburger-inner {
transition-duration: 0.075s;
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--squeeze .hamburger-inner::before {
transition: top 0.075s 0.12s ease, opacity 0.075s ease;
}
.hamburger--squeeze .hamburger-inner::after {
transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--squeeze.is-active .hamburger-inner {
transform: rotate(45deg);
transition-delay: 0.12s;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.hamburger--squeeze.is-active .hamburger-inner::before {
top: 0;
opacity: 0;
transition: top 0.075s ease, opacity 0.075s 0.12s ease;
}
.hamburger--squeeze.is-active .hamburger-inner::after {
bottom: 0;
transform: rotate(-90deg);
transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.hello-text {
text-align: right;
color: #fff;
font-size: 22px;
}
/*add padding-right when menu is active*/
body.menu-active {
padding-right: 300px;
}
<body>
<nav class="side-nav hidden">
<div>
<div class="open-menu-side" id="side">
<button class="hamburger hamburger--squeeze" type="button">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
</div>
<ul class="side-nav-ul">
<a href="#">
<li class="block">Home</li>
</a>
<a href="#">
<li class="block">Profile</li>
</a>
<a href="#">
<li class="block">Blogs</li>
</a>
<a href="#">
<li class="block">Following</li>
</a>
<a href="#">
<li class="block">Settings</li>
</a>
<a href="#">
<li class="block">Logout</li>
</a>
</ul>
</div>
</nav>
<header id="pushed">
<nav>
<div class="open-menu" id="main">
<button class="hamburger hamburger--squeeze" type="button">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
</div>
<div class="brand">Login!</div>
</nav>
</header>
<section></section>
<p class="hello-text">hello</p>
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<script type="text/javascript" src="lib/index.js"></script>
</body>
Working codepen https://codepen.io/azs06/pen/KQqqee
Add
margin-left: 300px;
to
.side-nav-ul
It worked for me in your codepen. Margin will push everything out of the way.