I'm trying to create a top navigation that by default is shown as small circles without any text. On hover, I would like the circle in question to grow/expand and the text of the menu item to appear, as well as a dropdown menu if applicable. Ideally with an ease-in/out effect. Also, In the current setup, I'm not quite sure where to place the submenu in the HTML..
image 1: default & on hover appearance
A few requirements:
Circles expand from the center
Submenu appears after parent menu item is done expanding, so with a slight delay
I have a jsfiddle here, but I'm stuck on how to proceed and get the desired effect. Maybe I'm approaching this from a complete wrong angle. Please help!
$(".nav1").hover(function () {
$(".item1").stop(true,true).delay(200).show(100);
}, function () {
$(".item1").stop(true,true).delay(200).hide(0);
});
$(".nav2").hover(function () {
$(".item2").stop(true,true).delay(200).show(100);
}, function () {
$(".item2").stop(true,true).delay(200).hide(0);
});
.navContainer {
display: block;
position: absolute;
width: 100%;
height: 100px;
background-color: #fff;
}
.circleContainer {
float:left;
position: relative;
width: 50px;
padding-bottom: 50px; /* = width for a 1:1 aspect ratio */
margin-right: 10px;
background: transparent;
overflow: hidden;
background-color: #eee;
border-radius: 50%;
}
.circleContent {
position: absolute;
height: 100%; /* = 100% - 2*5% padding */
width: 100%; /* = 100% - 2*5% padding */
padding: 0%;
}
.circleTable {
display: table;
width: 100%;
height: 100%;
}
.circleTableCell {
display: table-cell;
vertical-align: middle;
position: relative;
text-align: center;
font-size: 0.75em;
font-weight: 700;
}
.hide {
display: ;
}
.item1, .item2 {
display: none;
top: 50%;
left: 50%;
vertical-align: middle;
text-align: center;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="navContainer">
<div class="circleContainer nav1">
<div class="circleContent">
<div class="circleTable">
<a href="/link1" class="circleTableCell">
<span class="item1">Item 1</span>
</a>
</div>
</div>
</div>
<div class="circleContainer nav2">
<div class="circleContent">
<div class="circleTable">
<a href="/link1" class="circleTableCell">
<span class="item2">Item 2</span>
</a>
</div>
</div>
</div>
</div>
I got you the following, hope it helps.
part1. the for the circle to scale, use the following on hover:
-webkit-transform: scale(1.75);
transform: scale(1.75);
part2. for the sub menu, you need to add them first then show on hover (you can use the same class you are using for the item1 item2 etc..
You could use js to push away left/right side menu.
$(".nav1").closest('.wraper').hover(function() {
$(".item1").stop(true, true).delay(200).show(100);
}, function() {
$(".item1").stop(true, true).delay(200).hide(0);
});
$(".nav2").closest('.wraper').hover(function() {
$(".item2").stop(true, true).delay(200).show(100);
}, function() {
$(".item2").stop(true, true).delay(200).hide(0);
});
$(".nav3").closest('.wraper').hover(function() {
$(".item3").stop(true, true).delay(200).show(100);
}, function() {
$(".item3").stop(true, true).delay(200).hide(0);
});
.navContainer {
text-align: center;
display: inline-block;
width: 100%;
height: 100px;
top: 50px;
}
.circleContainer {
position: relative;
width: 50px;
margin: 25px;
padding-bottom: 50px;
/* = width for a 1:1 aspect ratio */
background: transparent;
overflow: hidden;
background-color: #eee;
border-radius: 50%;
-webkit-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
}
.wraper:hover .circleContainer {
-webkit-transform: scale(1.75);
transform: scale(1.75);
}
.circleContent {
position: absolute;
height: 100%;
/* = 100% - 2*5% padding */
width: 100%;
/* = 100% - 2*5% padding */
padding: 0%;
}
.circleTable {
display: table;
width: 100%;
height: 100%;
}
.circleTableCell {
display: table-cell;
vertical-align: middle;
position: relative;
text-align: center;
font-size: 0.75em;
font-weight: 700;
}
.item1,
.item2,
.item3 {
display: none;
vertical-align: middle;
text-align: center;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
}
.wraper {
width: 100px;
display: inline-block;
}
ul {
text-align: center;
width: 100%;
list-style: none;
position: relative;
float: left;
}
ul ul {
display: inline-block;
position: relative;
margin-top: 25px;
margin-left: 25px;
padding: 0;
background: transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="navContainer">
<div class="wraper">
<div class="circleContainer nav1">
<div class="circleContent">
<div class="circleTable">
<a href="/link1" class="circleTableCell">
<span class="item1">Item 1</span>
</a>
</div>
</div>
</div>
<ul class="item1">
<li>
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
</ul>
</li>
</ul>
</div>
<div class="wraper">
<div class="circleContainer nav2">
<div class="circleContent">
<div class="circleTable">
<a href="/link1" class="circleTableCell">
<span class="item2">Item 2</span>
</a>
</div>
</div>
</div>
<ul class="item2">
<li>
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
</ul>
</li>
</ul>
</div>
<div class="wraper">
<div class="circleContainer nav3">
<div class="circleContent">
<div class="circleTable">
<a href="/link1" class="circleTableCell">
<span class="item3">Item 3</span>
</a>
</div>
</div>
</div>
<ul class="item3">
<li>
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
</ul>
</li>
</ul>
</div>
</div>
Related
https://codepen.io/brunhild_912/pen/MWQPErp
Here is my code. I am trying to enable the nav list toggle, but its not happening. Why? Any guidance or tips over this issue ae welcomed. I have tried many options but its being stubborn unfortunately.
HTML
<button type="button" class="nav-toggler">
<span></span>
</button>
<!--Navbar-->
<nav class="nav">
<ul>
<li class="nav=item">Home</li>
<li class="nav=item">About</li>
<li class="nav=item">Menu</li>
<li class="nav=item">Testimonials</li>
<li class="nav=item">Team</li>
<li class="nav=item">Contact</li>
</ul>
</nav>
CSS
.header .nav-toggler{
height: 40px;
width: 44px;
margin-right: 15px;
cursor: pointer;
border: none;
background-color: transparent;
display: flex;
align-items: center;
justify-content: center;
}
.header .nav-toggler.active{
position: absolute;
right: 0;
z-index: 1;
}
.header .nav{
position: fixed;
right: 0;
top: 0;
height: 100%;
width: 280px;
background-color: var(--main-color);
box-shadow: var(--shadow);
overflow-y: auto;
padding: 80px 0 40px;
transform: transform 0.5s ease;
transform: translateX(100%);
}
.header .nav .open{
transform: translateX(0%);
}
JavaScript
const navToggler = document.querySelector(".nav-toggler");
navToggler.addEventListener("click", toggleNav);
function toggleNav(){
navToggler.classList.toggle(".active");
document.querySelector(".nav").classList.toggle(".open");
}
The first issue you have is that you need to remove the . (period) from your class references (toggle(".active")). Making your toggleNav method like:
function toggleNav(){
navToggler.classList.toggle("active");
document.querySelector(".nav").classList.toggle("open");
}
Also, in your css you reference an object with a .header class that does not exist. So you would need to wrap your entire html with:
<div class='header'>
... [YOUR HTML CODE]
</div>
Also, in your css your declaration:
.header .nav .open
Should be:
.header .nav.open
You need a bit of css work for it to function smoothly but this should point you in the right direction.
There are some JS and css issues in your code. check following code.
const navToggler = document.querySelector(".nav-toggler");
navToggler.addEventListener("click", toggleNav);
function toggleNav(){
navToggler.classList.toggle("active");
document.querySelector(".nav").classList.toggle("open");
}
.header .nav-toggler{
height: 40px;
width: 44px;
margin-right: 15px;
cursor: pointer;
border: none;
background-color: transparent;
display: flex;
align-items: center;
justify-content: center;
background: red;
}
.header .nav{
position: fixed;
right: 0;
top: 0;
height: 100%;
width: 280px;
background-color: var(--main-color);
box-shadow: var(--shadow);
overflow-y: auto;
padding: 80px 0 40px;
transition: transform 0.5s ease;
transform: translateX(100%);
}
.header .nav.open{
transform: translateX(0%);
}
<div class="header">
<button type="button" class="nav-toggler">
<span></span>
</button>
<!--Navbar-->
<nav class="nav">
<ul>
<li class="nav=item">Home</li>
<li class="nav=item">About</li>
<li class="nav=item">Menu</li>
<li class="nav=item">Testimonials</li>
<li class="nav=item">Team</li>
<li class="nav=item">Contact</li>
</ul>
</nav>
</div>
const navToggler = document.querySelector(".nav-toggler");
navToggler.addEventListener("click", toggleNav);
function toggleNav(){
navToggler.classList.toggle("active");
document.querySelector("nav").classList.toggle("open");
}
.header .nav-toggler{
height: 40px;
width: 44px;
margin-right: 15px;
cursor: pointer;
border: none;
background-color: transparent;
display: flex;
align-items: center;
justify-content: center;
}
.header .nav-toggler.active{
position: absolute;
right: 0;
z-index: 1;
}
.header .nav{
position: fixed;
right: 0;
top: 0;
height: 100%;
width: 280px;
background-color: var(--main-color);
box-shadow: var(--shadow);
overflow-y: auto;
padding: 80px 0 40px;
transform: transform 0.5s ease;
transform: translateX(100%);
}
.header .nav.open{
transform: translateX(0%);
}
<div class="header">
<button type="button" class="nav-toggler active">
<span>button</span>
</button>
<!--Navbar-->
<nav class="nav open">
<ul>
<li class="nav=item">Home</li>
<li class="nav=item">About</li>
<li class="nav=item">Menu</li>
<li class="nav=item">Testimonials</li>
<li class="nav=item">Team</li>
<li class="nav=item">Contact</li>
</ul>
</nav>
</div>
Problems in code
classList.toggle(".active"); remove . in string like classList.toggle("active");
add <div> main div in side code class is .header
remove space in between .header .nav .open like- .header .nav.open in css
I am using Wordpress, Elementor, & a template made by Litho (purchased on Envato Market).
I reached out to the template provider but they said that what I am asking was not included in their template.
From my research I can see that it must be a bit of JS code and seems easy enough but I have tried every combination of classes within the code snippets I found online to make the menu close when I click on the links.
Here is the HTML:
<div class="hamburger-menu-wrapper hamburger-menu-modern right">
<div class="hamburger-menu">
<a class="close-menu" href="javascript:void(0);">
<i aria-hidden="true" class="fas fa-times"></i> </a>
<div data-elementor-type="section" data-elementor-id="78332" class="elementor elementor-78332">
<section
class="elementor-section elementor-top-section elementor-element elementor-element-7edd4949 elementor-section-full_width elementor-section-height-default elementor-section-height-default"
data-id="7edd4949" data-element_type="section">
<div class="elementor-container elementor-column-gap-no">
<div
class="full-screen elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-71839b10 elementor-hidden-tablet elementor-hidden-phone"
data-fullscreen-column-settings="{"fullscreen":"yes"}" data-id="71839b10"
data-element_type="column" style="min-height: 671.5px;">
<div class="elementor-widget-wrap">
</div>
</div>
<div
class="full-screen elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-16e0b86c"
data-fullscreen-column-settings="{"fullscreen":"yes"}" data-id="16e0b86c"
data-element_type="column" data-settings="{"background_background":"classic"}"
style="min-height: 671.5px;">
<div class="elementor-widget-wrap elementor-element-populated">
<div
class="elementor-element elementor-element-16726f6d elementor-widget elementor-widget-litho-left-menu"
data-id="16726f6d" data-element_type="widget" data-widget_type="litho-left-menu.default">
<div class="elementor-widget-container">
<div class="litho-left-menu-wrap navbar-expand-lg navbar-container mCustomScrollbar _mCS_1"
data-scrollbar-theme="dark">
<div id="mCSB_1" class="mCustomScrollBox mCS-dark mCSB_vertical mCSB_inside"
style="max-height: none;" tabindex="0">
<div id="mCSB_1_container" class="mCSB_container" style="position:relative; top:0; left:0;"
dir="ltr">
<div id="navbarLeftNav" class="litho-left-menu-wrapper navbar-collapse collapse"
itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement">
<ul id="menu-dao-landing" class="menu alt-font litho-left-menu" role="menu">
<li
class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-home menu-item-76244 item-depth-0">
Vision</li>
<li
class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-home menu-item-78629 item-depth-0">
The Pod</li>
<li
class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-home menu-item-78631 item-depth-0">
Mission</li>
<li
class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-home menu-item-76341 item-depth-0">
Events</li>
<li
class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-home menu-item-76246 item-depth-0">
Migration Path
</li>
<li
class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-home menu-item-76248 item-depth-0">
Team</li>
<li
class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-home menu-item-76245 item-depth-0">
Contact</li>
</ul>
</div>
</div>
<div id="mCSB_1_scrollbar_vertical"
class="mCSB_scrollTools mCSB_1_scrollbar mCS-dark mCSB_scrollTools_vertical"
style="display: block;">
<div class="mCSB_draggerContainer">
<div id="mCSB_1_dragger_vertical" class="mCSB_dragger"
style="position: absolute; min-height: 30px; display: block; height: 362px; max-height: 679px; top: 0px;">
<div class="mCSB_dragger_bar" style="line-height: 30px;"></div>
</div>
<div class="mCSB_draggerRail"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div
class="elementor-element elementor-element-4d0df934 elementor-hidden-phone elementor-widget elementor-widget-litho-heading"
data-id="4d0df934" data-element_type="widget" data-widget_type="litho-heading.default">
<div class="elementor-widget-container">
<span class="litho-heading elementor-size-default"><span class="litho-primary-title">Join the
pod.</span></span>
</div>
</div>
<div
class="elementor-element elementor-element-43d445d elementor-shape-rounded elementor-widget elementor-widget-litho-social-icons"
data-id="43d445d" data-element_type="widget" data-widget_type="litho-social-icons.default">
<div class="elementor-widget-container">
<div class="social-icon-style-4 social-icons-wrapper">
<ul class="medium-icon">
<li>
<a href="https://twitter.com/Dolphin_DAO"
class="elementor-icon elementor-social-icon elementor-social-icon-twitter elementor-repeater-item-a073ccb hvr-grow litho-hover-effect"
target="_blank">
<i class="fab fa-twitter"></i> <span class="litho-social-hover-effect"></span> </a>
</li>
<li>
<a href="https://www.instagram.com/Dolphin.DAO/"
class="elementor-icon elementor-social-icon elementor-social-icon-instagram elementor-repeater-item-a1c7c08 hvr-grow litho-hover-effect"
target="_blank">
<i class="fab fa-instagram"></i> <span class="litho-social-hover-effect"></span> </a>
</li>
<li>
<a href="https://discord.gg/DGuAhdF2pP"
class="elementor-icon elementor-social-icon elementor-social-icon-discord elementor-repeater-item-5f7744b hvr-grow litho-hover-effect"
target="_blank">
<i class="fab fa-discord"></i> <span class="litho-social-hover-effect"></span> </a>
</li>
<li>
<a href="#"
class="elementor-icon elementor-social-icon elementor-social-icon-email elementor-repeater-item-e6313e3 hvr-grow litho-hover-effect"
target="_blank">
<i class="ti ti-email"></i> <span class="litho-social-hover-effect"></span> </a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
Here is the CSS:
/* hamburger menu */
.hamburger-menu-wrapper {
position: fixed;
height: 100%;
width: 100%;
border-right: none;
z-index: 9999;
top: 0;
right: -100%;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-ms-ransition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.hamburger-menu-wrapper.left {
left: -100%;
right: auto;
}
.show-menu .hamburger-menu-wrapper.left {
left: 0;
}
.show-menu .hamburger-menu-wrapper {
right: 0;
}
.hamburger-menu-wrapper .litho-left-menu-wrap {
overflow: auto;
height: calc(100vh - 150px);
}
.hamburger-menu-wrapper .litho-left-menu-wrap .mCustomScrollBox .mCSB_container.mCS_y_hidden.mCS_no_scrollbar_y {
-ms-flex-item-align: center;
align-self: center;
}
.hamburger-menu-wrapper .litho-left-menu-wrap .mCustomScrollBox .mCSB_container {
width: 100%;
-ms-flex-item-align: start;
align-self: flex-start;
}
.hamburger-menu-wrapper .litho-left-menu-wrap .mCustomScrollBox {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
}
.hamburger-menu-wrapper .hamburger-menu {
height: 100%;
}
.hamburger-menu-wrapper .hamburger-menu .close-menu {
height: 50px;
width: 50px;
text-align: center;
line-height: 50px;
font-size: 16px;
position: absolute;
right: 20px;
top: 21px;
z-index: 1;
color: #fff;
}
.hamburger-menu-wrapper .litho-left-menu .menu-toggle:before,
.hamburger-menu-wrapper .litho-left-menu .menu-toggle:after {
top: 20px;
width: 11px;
right: 7px;
}
.hamburger-menu-wrapper .litho-left-menu .sub-menu-item .menu-toggle:before,
.hamburger-menu-wrapper .litho-left-menu .sub-menu-item .menu-toggle:after {
right: 9px;
top: 16px;
height: 1px;
width: 9px;
}
.mCSB_inside>.mCSB_container {
margin-right: 15px;
}
.hamburger-menu-wrapper .litho-left-menu-wrap .navbar-toggler {
display: none;
}
.hamburger-menu-wrapper .hamburger-menu .elementor-icon-view-vertical .social-icons-wrapper li a {
width: 100%;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: start;
}
.hamburger-menu-wrapper .hamburger-menu .elementor-icon-view-vertical .social-icons-wrapper li a i {
text-align: left;
}
/* hamburger menu half */
.hamburger-menu-half {
width: 50%;
}
.hamburger-menu-half .litho-left-menu-wrap {
height: calc(100vh - 370px);
}
.hamburger-menu-half .hamburger-menu {
height: 100vh;
overflow-y: auto;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
-ms-flex-pack: start;
justify-content: flex-start;
}
.hamburger-menu-half .mCustomScrollBox {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
}
.hamburger-menu-half .mCustomScrollBox .mCSB_container.mCS_y_hidden.mCS_no_scrollbar_y {
-ms-flex-item-align: center;
align-self: center;
}
.hamburger-menu-half .mCustomScrollBox .mCSB_container {
width: 100%;
-ms-flex-item-align: start;
align-self: flex-start;
}
.hamburger-menu-wrapper.hamburger-menu-half {
overflow: visible;
}
.hamburger-menu-half .menu-toggle {
margin-top: 9px;
}
.hamburger-menu-wrapper.hamburger-menu-half .elementor-section-wrap>.elementor-section>div {
overflow-y: auto;
}
.hamburger-menu-wrapper.hamburger-menu-half .elementor-section-wrap>.elementor-section>.elementor-container>.elementor-row {
margin: auto;
}
.hamburger-menu-half .litho-left-menu-wrap .navbar-toggler {
display: none;
}
/* hamburger menu modern */
.hamburger-menu-modern {
width: 50%;
}
.hamburger-menu-modern .close-menu {
color: #fff;
}
.hamburger-menu-modern .litho-left-menu-wrap {
height: calc(65vh - 100px);
}
.hamburger-menu-modern .litho-left-menu li {
padding: 13px 0;
border-bottom: 0;
}
.hamburger-menu-modern .menu-toggle:before,
.hamburger-menu-modern .menu-toggle:after {
background-color: #fff;
}
.hamburger-menu-modern .litho-left-menu li {
display: block;
}
.hamburger-menu-modern .litho-left-menu li>.menu-toggle {
margin-top: 9px;
position: absolute;
right: 0;
width: 40px;
height: 40px;
line-height: 40px;
}
.hamburger-menu-modern .litho-left-menu li ul>li:first-child {
margin-top: 30px;
}
.hamburger-menu-modern .litho-left-menu li ul>li>.menu-toggle {
margin-top: -2px;
position: absolute;
right: 0;
width: 22px;
height: 22px;
line-height: 22px;
}
.hamburger-menu-modern .litho-left-menu li ul>li:last-child {
margin-bottom: 0;
}
.hamburger-menu-modern .litho-left-menu li .menu-toggle:before,
.hamburger-menu-modern .litho-left-menu li .menu-toggle:after {
width: 14px
}
.hamburger-menu-modern .litho-left-menu li a {
font-size: 44px;
line-height: 50px;
position: relative;
color: #FFFFFF;
font-weight: 400;
text-transform: lowercase;
padding: 0;
max-width: 100%;
display: inline-block;
}
.hamburger-menu-modern .litho-left-menu li a:before {
content: "";
position: absolute;
width: 0;
height: 2px;
bottom: 0;
left: 50%;
background-color: #fff;
visibility: hidden;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.hamburger-menu-modern .litho-left-menu li a:hover:before {
visibility: visible;
width: 100%;
}
.hamburger-menu-modern .menu-toggle {
margin-top: 17px;
}
.hamburger-menu-modern .litho-left-menu li ul li {
line-height: normal;
padding: 0;
}
.hamburger-menu-modern .litho-left-menu li ul li a {
font-size: 14px;
line-height: 18px;
color: #828282;
padding: 4px 0 4px;
}
.hamburger-menu-modern .sub-menu-item .menu-toggle:before,
.hamburger-menu-modern .sub-menu-item .menu-toggle:after {
background-color: #828282;
}
.hamburger-menu-modern .litho-left-menu li ul li a:before {
display: none;
}
.hamburger-menu-modern .litho-left-menu-wrap .navbar-toggler {
display: none;
}
Here is the JS I have been trying to use:
NOTE: I have don't have a clue when it comes to JS and only a slight idea with html and css. The way I understand the code below is that when a link (a) is clicked within litho-left-menu, then the whole hamburger menu closes. Obviously that's not working.
$(".litho-left-menu a").on("click", function(){
$(".hamburger-menu").slideToggle("slow");
});
I appreciate your help!
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'm trying to rebuild not copy and paste this website http://paramoredigital.com/ only for learning direction. I have problem with menu transition, more precisely If you click top-right button menu will show up smoothly and I don't know how to do it in my code.
Here is my code https://github.com/Szuchow/paramore-digital.
Click on the X and the menu will appear. The rest is a matter of styling.
$("body").on("click", function() {
$(".menu").addClass("open");
})
body {
padding: 0;
}
.container {
width: 100vw;
height: 100vh;
background: lightblue;
}
.menu {
position: absolute;
top: 0;
left: 0;
opacity: 0;
background: pink;
transition: opacity 1s ease;
width: 100vw;
height: 100vh;
}
.menu.open {
opacity: 1;
}
.toggle a {
font-size: 2em;
text-decoration: none;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<span class="toggle">X</span>
<div class="menu">
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
</div>
</div>
In IE or Firefox the site works like this (IE11):
(Tabs are clickable)
but not in chrome. Click on tabs not get fired. I tried to reveal element in Developer Tools, but it reveals #container element instead of the lielement I clicked on.
It looks like the layering of the elements are not the same as you see it and when you raise an event (ex.: click). The first/parent div is the top element and the tabs (li) are nested behind.
Why is it working in IE and Firefox, and why does not in Chrome? What is the differecnce?
$('button').click(function() {
$('.box').toggleClass('flipped');
})
$('li').click(function() {
var text = 'You selected ' + $(this).html();
alert(text);
});
* {
margin: 0;
padding: 0
}
button {
position: fixed;
right: 5px;
bottom: 5px;
}
.box {
position: relative;
width: 300px;
height: 300px;
transform-origin: right center;
transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
transition: all 300ms, transform 500ms ease;
}
.box figure {
position: absolute;
width: 100%;
height: 100%;
transition: visibility 0s ease 140ms;
}
.box:not(.flipped) figure.back {
visibility: hidden;
}
.box.flipped {
transform: translateX(-100%) rotateY(-180deg);
}
.box .front {
background-color: skyblue;
}
.box .back {
transform: rotateY(180deg);
background-color: lightgreen;
}
.box .back .nav {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 32px;
width: 100%;
background-color: skyblue;
text-align: center;
}
.box .back .nav li {
background-color: white;
width: 24%;
display: inline-block;
height: 30px;
line-height: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class='box'>
<figure class='front'>
<p>FRONT SIDE</p>
</figure>
<figure class='back'>
<ul class='nav'>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
<div class='content'>
<p>BACK SIDE</p>
</div>
</figure>
</div>
</div>
<button>FLIP</button>
Thanks in advance for any help!
To be 100% saint with your work, wrap your JS code in
$(document).ready(function(){ ... })
Secondly I would not advise to use such big qualifiers $('li'). This will scan every list element in DOM tree-slow and not advised. Here you are interested in list elements from menu only.
I would also find Flip button by id, you have only one button, so it doesn't cost much:)
I would propose something like this :
var navContainer = $('.box > figure.back > ul.nav');
navContainer.on('click', 'li', function(){ ... })
This code should work, even when you add more li items to DOM.
Secondly you could in debug mode find, if this navContainer has been found or not.
I found a workaround for my problem. If I set z-index: 0 and position: relative to body and the body > div then clicks get fired.
SOLUTION : CSS
body, body > div { position: relative; z-index: 0; }
$('button, .front').click(function() {
$('.box').toggleClass('flipped');
})
$('li').click(function() {
var text = 'You selected ' + $(this).html();
alert(text);
});
/*Workaround*/
body,
body > div {
position: relative;
z-index: 0;
}
/************/
* {
margin: 0;
padding: 0
}
button {
position: fixed;
right: 5px;
bottom: 5px;
}
.box {
position: relative;
width: 300px;
height: 300px;
transform-origin: right center;
transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
transition: all 300ms, transform 500ms ease;
}
.box figure {
position: absolute;
width: 100%;
height: 100%;
transition: visibility 0s ease 140ms;
}
.box:not(.flipped) figure.back {
visibility: hidden;
}
.box.flipped {
transform: translateX(-100%) rotateY(-180deg);
}
.box .front {
background-color: skyblue;
}
.box .back {
transform: rotateY(180deg);
background-color: lightgreen;
}
.box .back .nav {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 32px;
width: 100%;
background-color: skyblue;
text-align: center;
}
.box .back .nav li {
background-color: white;
width: 24%;
display: inline-block;
height: 30px;
line-height: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='container'>
<div class='box'>
<figure class='front'>
<p>FRONT SIDE</p>
</figure>
<figure class='back'>
<ul class='nav'>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
<div class='content'>
<p>BACK SIDE</p>
</div>
</figure>
</div>
</div>
<button>FLIP</button>