We Keep Coding

Mobile Navigation Bar Working Uncorrectly

I'm creating a responsive nav bar with js, css and html. I have a problem right now, when the screen becomes x size (the size I defined as max-width) there is the pop up of the responsive nav bar. Although, only the last anchor (Loja) appears on that. I want it to be displayed flex and the flex-direction to column. As this prints shows:
https://imgur.com/aXjZD8z
https://imgur.com/8s0J6tc
https://jsfiddle.net/tL2vp9k5/1/
<header>
<nav class="menu">
<div>
<ul class="ulLogo">
<li title="Logo Carla Ornelas">
<img id="espiral" src="../Logo.png">
</li>
</ul>
</div>
<div>
<ul class="ulSecções">
<li> Home </li>
<li class="carla"> <a class="carlaOrnelas" href="#" title="Carla Ornelas">Carla Ornelas</a>
<li>Cursos </li>
<li>Conteúdos Especiais </li>
<li>Recursos</li>
<li> Contatos </li>
<li> Loja <i class="fa fa-shopping-cart" aria-hidden="true"></i> </li>
</ul>
</div>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
</header>
/*Universal Commands*/
*{
padding:0;
margin:0;
text-decoration: none;
}
/*Nav bar*/
/*Background Menu*/
nav.menu {
width:100%;
height: 85px;
background-color: rgb(24, 24, 24);
box-shadow: 0px 1px 16px 3px;
}
/*Costumização do body */
body {
background-color: rgb(255, 255, 255);
}
body .menu{
position:fixed;
z-index: 100;
}
/*Costumização logo */
.ulLogo li {
list-style: none;
}
.ulLogo li a img{
width: 180px;
float:left;
padding: 19px 0px 0px 60px;
}
/*Transição Logo Opacity*/
.ulLogo li a img#espiral:hover {
opacity: 0.7;
transition: opacity 300ms linear 0s;
}
.ulLogo li a img#espiral:not(:hover) {
opacity: 1;
transition: opacity 399ms linear 0s;
}
/*Costumização sections */
nav .ulSecções {
float: left;
padding-left: 90px;
}
nav ul.ulSecções li{
float: left;
list-style: none;
position: relative;
line-height: 90px;
}
nav ul.ulSecções li a{
display:block;
font-family: "Ubuntu", "Palatino", sans-serif ;
color:rgb(192, 163, 68);
text-transform: uppercase;
font-size: 14px;
letter-spacing: 0.1em;
opacity: 0.9;
padding: 0px 18px;
}
nav ul.ulSecções li a i{
font-size: 16px;
}
nav ul.ulSecções li a.loja{
font-weight: 700;
font-size: 14px;
letter-spacing: 0.1em;
}
/* Transition das anchors */
nav ul.ulSecções li a:hover {
color: rgb(255, 255, 255);
opacity: 1;
transition: color 150ms ease-in 0s,
opacity 150ms ease-in 0s;
}
nav ul.ulSecções li a:not(:hover) {
color: rgb(204, 174, 75);
opacity: 0.9;
transition: color 150ms ease-in 0s,
opacity 150ms ease-in 0s;
}
/*Mobile screen adjustments*/
#media screen and (max-width: 1250px){
nav ul.ulSecções li {
position: absolute;
right: 0px;
height: 92vh;
top: 14vh;
background-color: rgb(24, 24, 24);
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
} ```

All your <li> elements have the exact same position, so they're layered on top of eachother. If I remove the background you can clearly see this (see image at the bottom).
you need to select your <ul> element, not the <li> elements
/* #media screen and (max-width: 1250px){
nav ul.ulSecções li { */
#media screen and (max-width: 1250px) {
nav ul.ulSecções {

Align divs next to each other CSS (Cards Style)

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).

Push Menu - How to push body

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.

Changing on hover to on click with smooth effect on div

At the moment i have several divs that display information when you hover on them. I'd like to change this to onClick with a smooth transition, without a plugin.
I'm not sure how to do this as a lot of tutorials i've seen use a plugin.
function hoverTiles(){
var tiles = $('.button');
tiles.removeClass('active');
tiles.hover(function(){
$(this).addClass('active');
}, function() {
$(this).removeClass('active');
})
}
$(document).ready(function() {
hoverTiles();
})
.doclist {
list-style-image: url("/pageassets/test1/download.png");
text-align: left;
}
.buttons .button h4 {
z-index: 3;
position: absolute;
bottom: 5%;
left: 5%;
width: 82%;
}
.button:nth-child(1) span i {
color: #00838e;
}
.button:nth-child(2) span i {
color: #ff6c00;
}
.button:nth-child(3) span i {
color: #00a7ff;
}
.button:nth-child(4) span i {
color: #00652b;
}
.button:nth-child(5) span i {
color: #d80000;
}
.buttons {
margin-top: 50px;
text-align: center;
}
.buttons .button {
display: inline-block;
position: relative;
overflow: hidden;
width: 32%;
height: 300px;
background: #fff;
border: 1px solid #efefef;
border-radius: 1px;
margin: 5px;
vertical-align: top;
-webkit-transition: 0.1s all ease-in-out;
-moz-transition: 0.1s all ease-in-out;
-ms-transition: 0.1s all ease-in-out;
-o-transition: 0.1s all ease-in-out;
transition: 0.1s all ease-in-out;
}
.buttons .button span {
display: block;
font-size: 54px;
}
.buttons .button h4 {
margin-top: 0;
font-weight: 600;
color: grey;
}
.buttons .button p {
font-size: 14px;
opacity: 0;
color: grey;
}
.buttons .button p a {
color: #1489ff;
text-decoration: none;
}
.buttons .active {
width: 32%;
height: 100%;
}
.buttons .active span {
font-size: 81px;
}
.buttons .active p {
opacity: 1;
}
.buttons .active h4 {
margin-top: 15px;
display: none;
}
<div class="buttons">
<div class="button active">
<span><i></i></span>
<div class="header">
<img src="/pageassets/test1/keydocs.jpg" alt="" />
<h4 style="color:black;">Key Documents</h4>
</div>
<ul class="doclist">
<p><strong>Key Documents</strong>
</p>
<li>Handbook
</li>
<li>Description
</li>
<li>Role Description
</li>
<li>Role Description 
</li>
<li>Role Description
</li>
<li>Role Description
</li>
<li>Description 
</li>
</ul>
</div>
<div class="button">
<span><i></i></span>
<div class="header">
<img src="/pageassets/test1/keydocs.jpg" alt="" />
<h4 style="color:black;">Key Documents</h4>
</div>
<ul class="doclist">
<p><strong>Key Documents</strong>
</p>
<li>Handbook
</li>
<li>Description
</li>
<li>Role Description
</li>
<li>Role Description 
</li>
<li>Role Description
</li>
<li>Role Description
</li>
<li>Description 
</li>
</ul>
</div>
</div>
<script language="JavaScript" type="text/javascript" src="/js/jquery-1.2.6.min.js"></script>

Slideshow Pagination Javascript/Jquery with no plugins

Code here https://jsfiddle.net/bbayo/gmvex82e/4/
I want to make a pagination slideshow out of the menu like (skinny, straight, flare) give the slideshow a control example arrows and x to close. I did something but get stuck.
Right now if you click on skinny you will get a slideshow but if you instead click on straight or boyfriend it gives you the content but no arrows.
check it here https://jsfiddle.net/bbayo/gmvex82e/4/
<div class="denim-destination-container">
<div class="denim-destination-content">
<div class="fits">
</div>
</div>
<div>
Any help is appreciated. Thank you

1.Your post didn't show your entire code to figure out what you're facing and others can't understand what you want to ask.(Although you post the code in jsfiddle, but what you post here is simple html and it's not clear enough for others to understand your question)
2.Why your control arrows and close button didn't show is because your .hide contains your control
<div id="macysSlideshow" class="hide">
<div id="macysSlideshowWrapper" >
<div id="skinny" class="macysSlide show">
<div class="slide-container">
<img src="xxx.jpg" alt="" />
</div>
</div>
<!-- and more divs -->
</div>
<div class="denim-close " id="x-img">
<img src="xxx"/>
</div>
<div class="arrow" id="arrow_right">
<img src="xxx"/>
</div>
<div class="arrow" id="arrow_left">
<img src="xxx"/>
</div>
and your javscript control show only your slider div but not your control div.
$(".link").click(function() {
$(".hide").hide();
var dataType = $(this).attr('data-type');
$("#" + dataType).show();
});
here is the fixed code.
check the html and javascript section.
$(document).ready(function() {
$(".link").click(function() {
$(".hide").hide();
$(".control").show();
var dataType = $(this).data('type');
$("#" + dataType).show();
});
var currentPosition = 0,
counter = 0,
slideWidth = 886,
slides = $('.macysSlide'),
numSlides = slides.length,
selectedClass;
function displayArrows(position) {
for (var i = 0; i < numSlides; i += 1) {
if (i == position) {
$(".activeslide").remove();
} else {
$("li.navPos" + i).css('color', '#8a8a8a');
}
}
}
function moveSlide() {
console.log(slideWidth);
console.log(currentPosition);
$('#macysSlideshowWrapper').animate({
'margin-left': (slideWidth * -currentPosition)
})
}
$('.arrow').click(function() {
currentPosition = parseInt(currentPosition);
if ($(this).attr('id') == 'arrow_right') {
if (currentPosition == (numSlides - 1)) {
currentPosition = 0;
} else {
currentPosition = currentPosition + 1;
}
} else if ($(this).attr('id') == 'arrow_left') {
if (currentPosition == 0) {
currentPosition = numSlides - 1;
} else {
currentPosition = currentPosition - 1;
}
}
displayArrows(currentPosition);
moveSlide();
});
displayArrows(currentPosition);
$(".fits-bottom-nav li").click(function() {
moveSlide();
// selectedClass=$(this).attr('class');
// console.log('selectedClass', selectedClass);
// currentPosition = selectedClass[6];
currentPosition = $(this).find("a").data('index');
console.log('currentPosition', currentPosition);
displayArrows(currentPosition);
moveSlide();
});
$(".control").hide();
});
ul {
margin: 0 0 1.5em;
/* 24 / 16 */
padding: 0;
}
li {
line-height: 1.5;
/* 24 / 16 */
margin: 0;
display: inline-block;
cursor: pointer;
padding: 32px;
}
.denim-destination-container {
width: 900px;
margin: 0 auto;
line-height: 0;
}
.denim-nav ul li a.active {
color: yellow;
}
.denim-destination-content {
border-top: 7px solid #34496C;
border-right: 7px solid #34496C;
border-left: 7px solid #34496C;
width: 886px;
height: 2532px;
}
/* fits styles */
.fits,
.washes {
position: relative;
}
.fits-top-nav {
position: absolute;
top: -22px;
left: 50px;
}
.fits-top-nav li a {
color: #fff;
text-decoration: none;
font-size: 16px;
font-family: Helvetica, Verdana, Arial, sans-serif;
font-style: italic;
margin: 5px;
}
.fits-top-nav li a:hover {
color: yellow;
}
.fits-bottom-nav {
position: absolute;
top: 576px;
left: 34px;
}
.fits-bottom-nav li a {
color: #485977;
text-decoration: none;
font-size: 14px;
font-family: Helvetica, Verdana, Arial, sans-serif;
font-style: italic;
font-weight: bold;
margin-left: -8px;
}
.fits-bottom-nav .active a {
background-color: #ccc !important
}
.washes-top-nav {
position: absolute;
top: 512px;
left: -17px;
}
.washes-top-nav li {
line-height: 18px;
margin-left: 20px
}
.washes-top-nav li a {
color: #fff;
text-decoration: none;
font-size: 16px;
font-family: Helvetica, Verdana, Arial, sans-serif;
font-style: italic;
margin: 5px;
}
/* slide styles */
#macysSlideshow {
/*width and height of the slides go here*/
height: 636px;
margin: 0 auto;
overflow: hidden;
position: absolute;
top: 173px;
clear: both;
}
#macysSlideshowWrapper {
/*width of all the slides combined (slidesWidth * 3) goes here*/
/* width:6300px;
height:636px;*/
}
.macysSlide {
/*slide with and height goes here*/
width: 886px;
height: 636px;
float: left;
position: relative;
margin: 0;
}
.slide-container {
position: relative;
display: inline-block;
float: left;
width: 886px;
}
.arrow,
.denim-close {
position: absolute;
cursor: pointer;
}
/*add left and right arrow positioning*/
#arrow_left {
top: 30%;
left: 15px;
padding-top: 1px;
z-index: 100;
}
#arrow_right {
top: 30%;
left: 855px;
padding-top: 1px;
z-index: 100;
}
#x-img {
top: 1%;
left: 850px;
padding-top: 1px;
z-index: 100;
}
/* BRANDS STYLE */
#brands {
position: relative;
font-family: Helvetica, Verdana, Arial, sans-serif;
font-style: italic;
font-size: 14px;
color: #34496c;
margin-top: 205px;
}
.brand-content {
position: absolute;
top: 200px;
left: 400px;
}
.dotted {
border-bottom: 3px dashed #34496c;
text-decoration: none;
font-size: 20px;
}
.brands-list li {
display: inline;
}
.brands-list a {
display: inline-block;
padding: 5px;
margin-right: 55px;
color: #34496c;
}
.new-noteworthy-list {
width: 611px;
margin-top: 25px;
margin-left: -25px;
}
.all-time-fav-list {
width: 580px;
margin-top: 25px;
margin-left: -25px;
}
/* how to wear it styles */
label,
a {
color: teal;
cursor: pointer;
text-decoration: none;
}
#slider {
margin: 0 auto;
}
/* NEW EXPERIMENT */
/* Slider Setup */
input {
display: none;
}
#slide1:checked ~ #slides .inner {
margin-left: 0;
}
#slide2:checked ~ #slides .inner {
margin-left: -100%;
}
#slide3:checked ~ #slides .inner {
margin-left: -200%;
}
#slide4:checked ~ #slides .inner {
margin-left: -300%;
}
#slide5:checked ~ #slides .inner {
margin-left: -400%;
}
#slide6:checked ~ #slides .inner {
margin-left: -500%;
}
#slide7:checked ~ #slides .inner {
margin-left: -600%;
}
#overflow {
overflow: hidden;
height: 774px;
}
article img {
width: 100%;
}
#slides .inner {
width: 700%;
line-height: 0;
}
#slides article {
/*width: 20%;*/
float: left;
}
/* Control Setup */
#controls {
margin: -29.9% 0 0 0;
width: 100%;
}
#controls label {
display: none;
width: 50px;
height: 50px;
opacity: 0.3;
}
#active {
/*margin: 20% 0 0;*/
text-align: center;
position: absolute;
margin-left: 250px;
margin-top: 175px;
}
#active label {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
display: inline-block;
width: 10px;
height: 10px;
background: #fff;
margin-left: 35px;
}
#active label:hover {
background: #eacf54;
border-color: #777 !important;
}
#controls label {
opacity: 0.8;
}
#slide1:checked ~ #controls label:nth-child(2),
#slide3:checked ~ #controls label:nth-child(4),
#slide4:checked ~ #controls label:nth-child(5),
#slide5:checked ~ #controls label:nth-child(6),
#slide6:checked ~ #controls label:nth-child(7),
#slide7:checked ~ #controls label:nth-child(1) {
background: url('../images/denim-right-arr-01.png') no-repeat;
float: right;
margin: -190px -20px 0 0;
display: block;
}
#slide1:checked ~ #controls label:nth-child(7),
#slide2:checked ~ #controls label:nth-child(1),
#slide3:checked ~ #controls label:nth-child(2),
#slide4:checked ~ #controls label:nth-child(3),
#slide5:checked ~ #controls label:nth-child(4),
#slide6:checked ~ #controls label:nth-child(5),
#slide7:checked ~ #controls label:nth-child(6) {
background: url('../images/denim-left-arr-01.png') no-repeat;
float: left;
margin: -190px 0 0 15px;
display: block;
}
#slide1:checked ~ #active label:nth-child(1) {
display: none;
}
#slide2:checked ~ #active label:nth-child(2),
#slide3:checked ~ #active label:nth-child(3),
#slide4:checked ~ #active label:nth-child(4),
#slide5:checked ~ #active label:nth-child(5),
#slide6:checked ~ #active label:nth-child(6),
#slide7:checked ~ #active label:nth-child(7) {
background: #eacf54;
border-color: #eacf54 !important;
}
/* Animation */
#slides .inner {
-webkit-transform: translateZ(0);
-webkit-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
-moz-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
-ms-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
-o-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
/* easeInOutQuart */
-webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
-moz-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
-ms-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
-o-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
/* easeInOutQuart */
}
#slider {
-webkit-transform: translateZ(0);
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
#controls label {
-webkit-transform: translateZ(0);
-webkit-transition: opacity 0.2s ease-out;
-moz-transition: opacity 0.2s ease-out;
-o-transition: opacity 0.2s ease-out;
transition: opacity 0.2s ease-out;
}
/*washes styles*/
.washes-content {
position: absolute;
top: 235px;
left: 175px;
}
.hide {
display: none;
}
.show {
display: block;
}
#dw {
position: absolute;
left: 150px;
}
#ww {
position: absolute;
left: 200px;
}
#bw {
position: absolute;
left: 10px;
}
#gw {
position: absolute;
left: 160px;
}
#mw {
position: absolute;
left: 295px;
}
`HTML`
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="denim-destination-container">
<div class="denim-destination-content">
<div class="fits">
<img src="http://www1.mcomexternal114.fds.com/dyn_img/cms_tiles/astra_published/ce/assets/sitelets/denim-destination-plus/denim-destination-plus-02a.jpg" alt="" />
<div id="macysSlideshow" class="hide">
<div id="macysSlideshowWrapper">
<div id="skinny" class="macysSlide show">
<div class="slide-container">
<img src="http://www1.mcomexternal114.fds.com/dyn_img/cms_tiles/astra_published/ce/assets/sitelets/denim-destination-plus/denim-destination-plus-04a.jpg" alt="" />
</div>
</div>
<div id="straight" class="macysSlide show">
<div class="slide-container">
<img src="http://www1.mcomexternal114.fds.com/dyn_img/cms_tiles/astra_published/ce/assets/sitelets/denim-destination-plus/denim-destination-plus-05a.jpg" alt="" />
</div>
</div>
<div id="boyfriend" class="macysSlide show">
<div class="slide-container">
<img src="http://www1.mcomexternal114.fds.com/dyn_img/cms_tiles/astra_published/ce/assets/sitelets/denim-destination-plus/denim-destination-plus-06a.jpg" alt="" />
</div>
</div>
<div id="bootcut" class="macysSlide show">
<div class="slide-container">
<img src="http://www1.mcomexternal114.fds.com/dyn_img/cms_tiles/astra_published/ce/assets/sitelets/denim-destination-plus/denim-destination-plus-08a.jpg" alt="" />
</div>
</div>
<div id="cropped" class="macysSlide show">
<div class="slide-container">
<img src="http://www1.mcomexternal114.fds.com/dyn_img/cms_tiles/astra_published/ce/assets/sitelets/denim-destination-plus/denim-destination-plus-07a.jpg" alt="" />
</div>
</div>
<div id="flare" class="macysSlide show">
<div class="slide-container">
<img src="http://www1.mcomexternal114.fds.com/dyn_img/cms_tiles/astra_published/ce/assets/sitelets/denim-destination-plus/denim-destination-plus-09a.jpg" alt="" />
</div>
</div>
</div>
</div>
<div class="control">
<div class="denim-close " id="x-img">
<a href="#fits">
<img src="http://www1.mcomexternal114.fds.com/dyn_img/cms_tiles/astra_published/ce/assets/sitelets/denim-destination-plus/denim-close.png" />
</a>
</div>
<div class="arrow" id="arrow_right">
<img src="http://www1.mcomexternal114.fds.com/dyn_img/cms_tiles/astra_published/ce/assets/sitelets/denim-destination-plus/denim-right-arr.png" />
</div>
<div class="arrow" id="arrow_left">
<img src="http://www1.mcomexternal114.fds.com/dyn_img/cms_tiles/astra_published/ce/assets/sitelets/denim-destination-plus/denim-left-arr.png" />
</div>
</div>
<nav class="fits-top-nav denim-nav">
<ul>
<li>FITS
</li>
<!--
-->
<li>WASHES
</li>
<!--
-->
<li>HOW TO WEAR IT
</li>
<!--
-->
<li>BRANDS
</li>
<!--
-->
<li>SHOP ALL DENIM
</li>
</ul>
</nav>
<nav class="fits-bottom-nav">
<ul>
<li>SKINNY
</li>
<li>STRAIGHT
</li>
<li>BOYFRIEND
</li>
<li>BOOTCUT
</li>
<li>CROPPED
</li>
<li>FLARE
</li>
</ul>
</nav>
</div>
</div>
</div>