I'm trying to make some text fade in over an image on hover over the div container. Just to give you a precise example here is what I'm looking for: http://outgrow.me/.
Here is my HTML as it stands:
<div class="project-boxes">
<div class="box">
<a href="project1.html">
<img src="../img/project1.png">
<h3>Project 1</h3>
<p>Description</p>
</a>
</div>
<div class="box">
<a href="project1.html">
<img src="../img/project1.png">
<h3>Project 1</h3>
<p>Description</p>
</a>
</div>
<div class="box">
<a href="project1.html">
<img src="../img/project1.png">
<h3>Project 1</h3>
<p>Description</p>
</a>
</div>
<div class="box">
<a href="project1.html">
<img src="../img/project1.png">
<h3>Project 1</h3>
<p>Description</p>
</a>
</div>
</div>
My CSS:
/**********************
*****PROJECT BOXES*****
**********************/
.project-boxes {
margin: 0 3%;
}
.box {
padding: 2.5%;
width: 20%;
height: 120px;
margin: 2% 3.9999999999999999999%;
float: left;
border: 1px solid #BABABA;
border-radius: 5px;
}
.box h3 {
color: #3F7250;
}
I don't have any javascript or jquery for this yet but would like to implement some in my project. Feel free to share this with me on a fiddle or something. Thanks.
You can use jQuery to target the hover event and fade in the description.
$('.box a').hover(function() {
$(this).find('.desc').fadeIn(500);
}, function() {
$(this).find('.desc').fadeOut(500);
});
.box {
position: relative;
}
.box .desc {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: none;
background: rgba(255, 255, 255, 0.5);
}
<div class="box">
<a href="project1.html">
<img src="http://placehold.it/150x150" />
<div class="desc">
<h3>Project 1</h3>
<p>Description</p>
</div>
</a>
</div>
jsFiddle
Without JQuery:
<div class="box">
<a href="project1.html">
<div class='text'>
<h3>Project 1</h3>
<p>Description</p>
</div>
<img src="../img/project1.png">
</a>
</div>
CSS:
.box {
position: relative;
...
}
.box .text {
position: absolute;
z-index = 1;
}
.box img {
position: absolute;
z-index = 2;
opacity: 1;
transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
}
.box img:hover {
opacity: 0.2;
transition: opacity 0.2s ease-in-out;
-moz-transition: opacity 0.2s ease-in-out;
-webkit-transition: opacity 0.2s ease-in-out;
}
No need for JS. Use plain CSS and :hover
/* SIMPLY ADD THIS TO YOUR CSS */
.box img ~ *{
opacity:0;
transition:0.3s;
}
.box:hover img ~ *{
opacity:1;
}
.project-boxes {
margin: 0 3%;
}
.box {
padding: 2.5%;
width: 20%;
height: 120px;
margin: 2% 3.9999999999999999999%;
float: left;
border: 1px solid #BABABA;
border-radius: 5px;
}
.box h3 {
color: #3F7250;
}
.box img ~ *{ /* ADD THIS */
opacity:0;
transition:0.3s;
}
.box:hover img ~ *{ /* AND THIS */
opacity:1;
}
<div class="project-boxes">
<div class="box">
<a href="project1.html">
<img src="../img/project1.png">
<h3>Project 1</h3>
<p>Description</p>
</a>
</div>
<div class="box">
<a href="project1.html">
<img src="../img/project1.png">
<h3>Project 1</h3>
<p>Description</p>
</a>
</div>
<div class="box">
<a href="project1.html">
<img src="../img/project1.png">
<h3>Project 1</h3>
<p>Description</p>
</a>
</div>
<div class="box">
<a href="project1.html">
<img src="../img/project1.png">
<h3>Project 1</h3>
<p>Description</p>
</a>
</div>
</div>
Doing this on javascript would be more complicated that to do it with jquery or CSS.
but, still if you want javascript so badly here :
// fade out
function fadeOut(el) {
el.style.opacity = 1;
(function fade() {
if ((el.style.opacity -= .1) < 0) {
el.style.display = 'none';
el.classList.add('is-hidden');
} else {
requestAnimationFrame(fade);
}
})();
}
// fade in
function fadeIn(el, display) {
if (el.classList.contains('is-hidden')) {
el.classList.remove('is-hidden');
}
el.style.opacity = 0;
el.style.display = display || "block";
(function fade() {
var val = parseFloat(el.style.opacity);
if (!((val += .1) > 1)) {
el.style.opacity = val;
requestAnimationFrame(fade);
}
})();
}
var btn = document.querySelector('.js-btn');
var el = document.querySelector('.js-fade');
btn.addEventListener('click', function(e) {
if (el.classList.contains('is-hidden')) {
fadeIn(el);
} else {
fadeOut(el);
}
});
.is-hidden {
display: none;
}
.btn {
background: #ccc;
border-radius: 3px;
display: inline-block;
padding: 5px;
}
body {
padding: 40px;
}
<span class="js-btn btn">Click me</span>
<div class='js-fade is-hidden'>You look amazing!</div>
Related
Can someone pls assist me with a means of performing the following
using jQuery?
Currently, I have some images in a div container, and as for a specific background I have to use the position: absolute. My goal is to implement an according menu where the user clicks the "Menu+" image button, the image
button then toggles back to "Menu-".
Here what I have done:
body{
background-image: url('https://i.pinimg.com/originals/16/51/a7/1651a7e049cf443edc1cffe560600e0f.jpg');
}
.openmenu{
position:fixed;
margin:0 auto;
width:300px;
overflow-y:auto;
overflow-x: hidden;
}
.img1 {
position: absolute;
top: 0px;
left: 18px;
z-index: -1;
}
.img2 {
position: absolute;
top: 102px;
left: 18px;
}
.img3 {
position: absolute;
top: 217px;
left: 18px;
}
#pic-wrapper{
margin:2em auto;
position:absolute;
cursor:pointer
}
#pic{
-moz-transition:all 1s ease-out;
-webkit-transition:all 1s ease-out;
-o-transition:all 1s ease-out;
-ms-transition:all 1s ease-out;
position:absolute;
z-index:1;
opacity:1
}
#pic-inner{
z-index:0;
position:absolute;
}
#pic:hover{
opacity:0
}
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<body>
<div id="pic-wrapper">
<div class="img1">
<img src="https://provact.altervista.org/newct/colonna_sx/home_off.png" id="pic">
<img src="https://provact.altervista.org/newct/colonna_sx/home_on.png" id="pic-inner">
</div>
<div class="img2">
<img src="https://provact.altervista.org/newct/colonna_sx/scheda_off.png" id="pic">
<img src="https://provact.altervista.org/newct/colonna_sx/scheda_on.png" id="pic-inner">
</div>
<div class="img3">
<img src="https://provact.altervista.org/newct/colonna_sx/aggiorna_off.png" id="pic">
<img src="https://provact.altervista.org/newct/colonna_sx/aggiorna_on.png" id="pic-inner">
</div>
</div>
Here the result I would like to create:
Example
Any help/direction would be much appreciated.
Thanks.
$('.accordion-section-title').click(function(e) {
var currentAttrvalue = $(this).attr('href');
if ($(e.target).is('.active')) {
$(this).removeClass('active');
$('.accordion-section-content:visible').slideUp(300);
} else {
$('.accordion-section-title').removeClass('active').filter(this).addClass('active');
$('.accordion-section-content').slideUp(300).filter(currentAttrvalue).slideDown(300);
}
});
.accordion {
overflow: hidden;
border-radius: 4px;
background: transparent;
}
.accordion-section-title {
width: 100%;
padding: 15px;
}
.accordion-section-title {
width: 100%;
padding: 15px;
display: inline-block;
background: transparent;
border-bottom: 1px solid #1a1a1a;
font-size: 1.2em;
color: #fff;
transition: all linear 0.5s;
text-decoration: none;
}
.accordion-section-title.active {
background-color: #4c4c4c;
text-decoration: none;
}
.accordion-section-title:hover {
background-color: grey;
text-decoration: none;
}
.accordion-section:last-child .accordion-section-title {
border-bottom: none;
}
.accordion-section-content {
padding: 15px;
display: none;
color: white;
}
.accordion-section {
background-image: url('https://i.pinimg.com/originals/16/51/a7/1651a7e049cf443edc1cffe560600e0f.jpg');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="accordion">
<div class="accordion-section">
<a class="accordion-section-title" href="#accordion-1">
<img src="https://provact.altervista.org/newct/colonna_sx/home_off.png" id="pic">
</a>
<div id="accordion-1" class="accordion-section-content">
<p>This is first accordion section</p>
</div>
<a class="accordion-section-title" href="#accordion-2">
<img src="https://provact.altervista.org/newct/colonna_sx/scheda_off.png" id="pic">
</a>
<div id="accordion-2" class="accordion-section-content">
<p> this is second accordian section</p>
</div>
<a class="accordion-section-title" href="#accordion-3">
<img src="https://provact.altervista.org/newct/colonna_sx/aggiorna_off.png" id="pic">
</a>
<div id="accordion-3" class="accordion-section-content">
<p> this is third accordian section</p>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
.accordion {
overflow: hidden;
border-radius: 4px;
background: transparent;
}
.accordion-section-title {
width: 100%;
padding: 15px;
}
.accordion-section-title {
width: 100%;
padding: 15px;
display: inline-block;
background: transparent;
border-bottom: 1px solid #1a1a1a;
font-size: 1.2em;
color: #fff;
transition: all linear 0.5s;
text-decoration: none;
}
.accordion-section-title.active {
background-color: #4c4c4c;
text-decoration: none;
}
.accordion-section-title:hover {
background-color: grey;
text-decoration: none;
}
.accordion-section:last-child .accordion-section-title {
border-bottom: none;
}
.accordion-section-content {
padding: 15px;
display: none;
color: white;
}
.accordion-section {
background-image:url('https://i.pinimg.com/originals/16/51/a7/1651a7e049cf443edc1cffe560600e0f.jpg');
}
</style>
<div class="accordion">
<div class="accordion-section">
<a class="accordion-section-title" href="#accordion-1">
<img src="https://provact.altervista.org/newct/colonna_sx/home_off.png" id="pic">
</a>
<div id="accordion-1" class="accordion-section-content">
<p>This is first accordion section</p>
</div>
<a class="accordion-section-title" href="#accordion-2">
<img src="https://provact.altervista.org/newct/colonna_sx/scheda_off.png" id="pic">
</a>
<div id="accordion-2" class="accordion-section-content">
<p> this is second accordian section</p>
</div>
<a class="accordion-section-title" href="#accordion-3">
<img src="https://provact.altervista.org/newct/colonna_sx/aggiorna_off.png" id="pic">
</a>
<div id="accordion-3" class="accordion-section-content">
<p> this is third accordian section</p>
</div>
</div>
</div>
<script>
$('.accordion-section-content').hide();
$('.accordion-section-title').click(function(e) {
$('.accordion-section-content').hide();
var currentAttrvalue = $(this).attr('href');
if($(this).hasClass('active'))
{
$(this).removeClass('active');
}
else
{
$(this).addClass('active');
}
$(currentAttrvalue).slideToggle();
});
</script>
I've an image, and I'm making it transparent on click, so it reveals the background, Making the illusion of an overlay.
I'd like to also show some text in the center of the background, so it appears when the background reveals, how to do it?
Expected:
Codepen:
https://codepen.io/ogonzales/pen/yLJGzYr
Code:
$('.tricky').click(function(){
$('img').addClass("tricky_image");
});
UPDATE 1:
Codepen multiple images in grid
https://codepen.io/ogonzales/pen/qBNLLoW
This should work. If you have any questions, please let me know. You can also add a border if you want to match the reference image better.
$('.imageDiv').click(function(){
$('img').addClass("tricky_image");
$(".text").css("display", "inline");
});
.imageContainer {
position: relative;
text-align: center;
color: black;
max-width: 200px;
max-height: 200px;
}
.tricky_image {
-moz-transition: all 1s;
-webkit-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
opacity: 0.5;
filter: alpha(opacity=20);
}
.text {
display: none;
position: absolute;
top: 50%;
left: 50%;
opacity: 1;
transform: translate(-50%, -50%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="imageContainer">
<div class='imageDiv' id = 'test'>
<img src="https://cdn.shopify.com/s/files/1/0408/5792/7834/files/08_Dota_2_140x175.jpg" />
</div>
<div class="text">text here</div>
</div>
Updated answer:
The key thing here is remembering how the DOM works.
you had $('.imageDiv').click(function() {... which will only allow you to find the children of the image div, which the text class is not part of. I switched it to ('.imageContainer') which can traverse the DOM properly to find text as it is a child of imageContainer. Also $(this).find(".text").toggleClass("display-inline"); does not work because display-inline is not a class. I created a new class called addText which now hold the properties text had before where text now serves to hide the text until needed. Let me know in the comments if this works for you.
$('.imageContainer').click(function() {
$(this).find('img').toggleClass("tricky_image");
$(this).find('.text').toggleClass("addText");
});
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
justify-items: center;
align-items: center;
grid-gap: 15px;
}
.flip-card {
border-style: hidden;
background-color: transparent;
width: 120px;
height: 120px;
perspective: 1000px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.flip-card-front {
background-color: #bbb;
color: black;
}
.flip-card-back {
background-color: #222e36ef;
color: white;
transform: rotateY(180deg);
}
/* background overlay - text */
.imageContainer {
position: relative;
text-align: center;
color: black;
max-width: 200px;
max-height: 200px;
}
.tricky_image {
-moz-transition: all 1s;
-webkit-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
opacity: 0.5;
filter: alpha(opacity=20);
}
.text {
display: none;
}
.addText{
display: inline;
position: absolute;
top: 50%;
left: 50%;
opacity: 1;
transform: translate(-50%, -50%);
}
#media(max-width: 768px) {
.grid {
grid-template-columns: repeat(3, 1fr);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-8">
<section id="team">
<div class="container">
<div class="grid">
<div class="imageContainer">
<div class='imageDiv' id='test'>
<img src="https://cdn.shopify.com/s/files/1/0408/5792/7834/files/06_Counter_Strike_GO_140x175.jpg" />
</div>
<div class="text">text here</div>
</div>
<div class="imageContainer">
<div class='imageDiv' id='test'>
<img src="https://cdn.shopify.com/s/files/1/0408/5792/7834/files/06_Counter_Strike_GO_140x175.jpg" />
</div>
<div class="text">text here</div>
</div>
<div class="imageContainer">
<div class='imageDiv' id='test'>
<img src="https://cdn.shopify.com/s/files/1/0408/5792/7834/files/06_Counter_Strike_GO_140x175.jpg" />
</div>
<div class="text">text here</div>
</div>
<div class="imageContainer">
<div class='imageDiv' id='test'>
<img src="https://cdn.shopify.com/s/files/1/0408/5792/7834/files/06_Counter_Strike_GO_140x175.jpg" />
</div>
<div class="text">text here</div>
</div>
<div class="imageContainer">
<div class='imageDiv' id='test'>
<img src="https://cdn.shopify.com/s/files/1/0408/5792/7834/files/06_Counter_Strike_GO_140x175.jpg" />
</div>
<div class="text">text here</div>
</div>
<div class="imageContainer">
<div class='imageDiv' id='test'>
<img src="https://cdn.shopify.com/s/files/1/0408/5792/7834/files/06_Counter_Strike_GO_140x175.jpg" />
</div>
<div class="text">text here</div>
</div>
<div class="imageContainer">
<div class='imageDiv' id='test'>
<img src="https://cdn.shopify.com/s/files/1/0408/5792/7834/files/06_Counter_Strike_GO_140x175.jpg" />
</div>
<div class="text">text here</div>
</div>
<div class="imageContainer">
<div class='imageDiv' id='test'>
<img src="https://cdn.shopify.com/s/files/1/0408/5792/7834/files/06_Counter_Strike_GO_140x175.jpg" />
</div>
<div class="text">text here</div>
</div>
</div>
</div>
</section>
</div>
I have implemented the peeking effect into my website.
Here it is http://jsfiddle.net/7yrWL/1/
Now this is working and peeks when ever I hover over the image, Now what I simply want is this effect work only if we scroll to this section. Means the container peeks out over scroll only but a click.
Any idea anyone?
Thank you
<div class="main square">
<div>
<div class="content">
<h1>Title</h1>
<h2>Subtitle</h2>
<div class="peek">
<p>Test peek test peek<br/>Test peek</p>
<h3>MORE TESTING</h3>
</div>
</div>
</div>
</div>
<div class="main">
<div>
<div class="content">
<h1>Title</h1>
<h2>Subtitle</h2>
<div class="peek">
<p>Description<br/>with<br/>many<br/>lines.</p>
<h3>MORE<br/>Peek</h3>
</div>
</div>
</div>
</div>
<div class="main large">
<div>
<div class="content">
<h1>Title</h1>
<h2>Subtitle</h2>
<div class="peek">
<p>Description<br/>with<br/>many<br/>lines.</p>
<p>Description<br/>with<br/>many<br/>lines.</p>
<p>Description<br/>with<br/>many<br/>lines.</p>
<p>Description<br/>with<br/>many<br/>lines.</p>
<p>Description<br/>with<br/>many<br/>lines.</p>
</div>
</div>
</div>
</div>
.main { padding: 10px; overflow: hidden; background-color: orange; color: white; height: 300px; width: 300px; display: inline-block; }
.main > div { position: relative; background-color: red; height: 100%; }
.main .content { position: absolute; bottom: 0; padding: 10px; right: 0; left: 0; }
.main .peek { max-height: 0; -webkit-transition: max-height 1s; -moz-transition: max-height 1s; transition: max-height: 1s; background-color: green; overflow:hidden; }
.main:hover .peek { max-height: 300px; } /* any way to make this 100% so it can fit any size? */
.main.large { height: 600px; width: 600px; }
$(window).scroll(function() {
scrollEffect();
});
function scrollEffect() {
$('.main').each(function(i) {
if ($(this).position().top <= $(window).scrollTop()) {
$(this).addClass('effect');
}
});
}
.main { padding: 10px; overflow: hidden; background-color: orange; color: white; height: 300px; width: 300px; display: inline-block; }
.main > div { position: relative; background-color: red; height: 100%; }
.main .content { position: absolute; bottom: 0; padding: 10px; right: 0; left: 0; }
.main .peek { max-height: 0; -webkit-transition: max-height 1s; -moz-transition: max-height 1s; transition: max-height: 1s; background-color: green; overflow:hidden; }
.main.effect .peek, .main:hover .peek { max-height: 300px; } /* any way to make this 100% so it can fit any size? */
.main.large { height: 600px; width: 600px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main square">
<div>
<div class="content">
<h1>Title</h1>
<h2>Subtitle</h2>
<div class="peek">
<p>Test peek test peek<br/>Test peek</p>
<h3>MORE TESTING</h3>
</div>
</div>
</div>
</div>
<div class="main">
<div>
<div class="content">
<h1>Title</h1>
<h2>Subtitle</h2>
<div class="peek">
<p>Description<br/>with<br/>many<br/>lines.</p>
<h3>MORE<br/>Peek</h3>
</div>
</div>
</div>
</div>
<div class="main large">
<div>
<div class="content">
<h1>Title</h1>
<h2>Subtitle</h2>
<div class="peek">
<p>Description<br/>with<br/>many<br/>lines.</p>
<p>Description<br/>with<br/>many<br/>lines.</p>
<p>Description<br/>with<br/>many<br/>lines.</p>
<p>Description<br/>with<br/>many<br/>lines.</p>
<p>Description<br/>with<br/>many<br/>lines.</p>
</div>
</div>
</div>
</div>
Add an .main.effect .peek class for main, which has the same effect as .main:hover .peek, and then add an effect class to each main div that enters the visible area in the scroll event.
I'm including the whole code here, it's the bones of a parallax website (all css) with a scrolling menu (jQuery) that displays the current position based on div ID.
The parallax CSS and menu jQuery work perfectly fine when separated, but there's a dysfunction when combined.
I narrowed it down to the window.scroll by logging it in the console and seeing that any time the mouse pointer is hovering over the main content frame (.parallax) while scrolling, nothing is logged. Is there some way to make sure the window's attributes and scroll position are logged regardless of what's in the body section?
jQuery(document).ready(function() {
console.log('got here');
jQuery(window).scroll(function() {
console.log('Log this');
});
});
$(document).ready(function() {
var debugInput = document.querySelector("input");
function updateDebugState() {
document.body.classList.toggle('debug-on', debugInput.checked);
}
debugInput.addEventListener("click", updateDebugState);
updateDebugState();
var lastId,
sideMenu = $(".ssb00"),
menuItems = sideMenu.find("a"),
scrollItems = menuItems.map(function() {
var item = $($(this).attr("href"));
if (item.length) {
return item;
}
});
menuItems.click(function(e) {
var href = $(this).attr("href"),
offsetTop = href === "#" ? 0 : $(href).offset().top;
$(window).stop().animate({
scrollTop: offsetTop
}, 300);
e.preventDefault();
});
$(window).scroll(function() {
var fromTop = $(this).scrollTop();
var cur = scrollItems.map(function() {
if ($(this).offset().top < fromTop)
return this;
});
cur = cur[cur.length - 1];
var id = cur && cur.length ? cur[0].id : "";
if (lastId !== id) {
lastId = id;
menuItems
.parent().removeClass("active")
.end().filter("[href='#" + id + "']").parent().addClass("active");
}
});
$(function() {
var scroll = 0;
$(window).scroll(function(event) {
var moved = $(this).scrollTop();
var headerSize = 20
if (moved > headerSize) {
$('.ssb00').css({
'opacity': '1',
'right': '10px'
})
$('.ssb01').css({
'opacity': '0',
})
}
if (moved === 0) {
$('.ssb00').css({
'opacity': '0',
'right': '-40px'
})
$('.ssb01').css({
'opacity': '1',
})
}
if (moved > headerSize) {}
headerSize = moved;
});
});
});
#charset "UTF-8";
body {
margin: 0;
padding: 0;
font-family: Helvetica;
}
.ssb00 {
z-index: 100;
position: absolute;
width: 100px;
height: 100%;
top: 100px;
opacity: 0;
}
#menLogo {
z-index: 110;
position: fixed;
top: 0;
left: 8px;
height: 100px;
width: 100px;
background-image: url(img/Logo-300x244.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.ssb00_inWrap {
height: 200px;
position: relative;
top: calc(50vh - 150px);
}
.m00 {
height: 33px;
}
.m00 div {
position: absolute;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
.m01 {
text-align: left;
right: 0;
width: 16px;
}
.m01:before {
content: '•';
}
.m02 {
left: 200px;
width: calc(100% - 26px);
opacity: 0;
text-align: right;
}
.ssb00_inWrap:hover .m02 {
left: 0px;
opacity: 1;
}
.ssb00 a {
color: #fff;
}
.ssb00 a:hover {
color: #6ccef5;
}
.active .m02 {
left: 0px;
opacity: 1;
}
.active a {
color: #1b75ba;
}
.ssb01 {
z-index: 100;
background: rgba(255, 255, 255, .9);
border-bottom: 1px solid #f0f0f0;
height: 100px;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.ssb01 .nav {
font-weight: bold;
width: 560px;
height: 30px;
position: absolute;
right: 0;
bottom: 10px;
text-align: left;
}
.ssb01 a {
color: #1b75ba;
text-decoration: none;
margin: 0px 15px;
}
.ssb01 a:hover {
color: #6ccef5;
}
.ssb01 a:active {
color: #fff;
}
.ssb01__info {
position: absolute;
height: 45px;
padding: 14px 20px;
left: 110px;
top: 15px;
color: #666;
opacity: 1;
}
.trans {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.parallax {
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
-webkit-perspective: 300px;
perspective: 300px;
}
.parallax__group {
position: relative;
height: 100vh;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.parallax__layer {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.parallax__layer--fore {
-webkit-transform: translateZ(90px) scale(.7);
transform: translateZ(90px) scale(.7);
z-index: 1;
}
.parallax__layer--base {
-webkit-transform: translateZ(0);
transform: translateZ(0);
z-index: 4;
}
.parallax__layer--back {
-webkit-transform: translateZ(-300px) scale(2);
transform: translateZ(-300px) scale(2);
z-index: 3;
}
.parallax__layer--deep {
-webkit-transform: translateZ(-600px) scale(3);
transform: translateZ(-600px) scale(3);
z-index: 2;
}
.debug {
position: fixed;
top: 0;
left: .5em;
z-index: 999;
background: rgba(0, 0, 0, .85);
color: #fff;
padding: .5em;
border-radius: 0 0 5px 5px;
}
.debug-on .parallax__group {
-webkit-transform: translate3d(800px, 0, -800px) rotateY(30deg);
transform: translate3d(700px, 0, -800px) rotateY(30deg);
}
.debug-on .parallax__layer {
box-shadow: 0 0 0 2px #000;
opacity: 0.9;
}
.parallax__group {
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
}
.parallax {
font-size: 200%;
}
.title {
text-align: center;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#Xabout {
z-index: 3;
/* slide under groups 1 and 3 */
}
#Xabout .parallax__layer--back {
background: #6ba1ff;
}
#aboutGal {
z-index: 5;
/* slide over group 2 */
}
#aboutGal .parallax__layer--base {
background: #c4daff;
}
#Xconcept {
z-index: 3;
/* slide under groups 1 and 3 */
}
#Xconcept .parallax__layer--back {
background: #7ae570;
}
#conceptGal {
z-index: 4;
/* slide over group 2 and 4 */
}
#conceptGal .parallax__layer--base {
background: #adffa5;
}
#Xbroadcast {
z-index: 2;
/* slide under group 3 and 5 */
}
#Xbroadcast .parallax__layer--back {
background: #f0f760;
}
#broadcastGal {
z-index: 3;
/* slide over group 4 and 6 */
}
#broadcastGal .parallax__layer--base {
background: #fcffbc;
}
#Xdigital {
z-index: 2;
/* slide under group 5 and 7 */
}
#Xdigital .parallax__layer--back {
background: #42e2f4;
}
#digitalGal {
z-index: 3;
/* slide over group 7 */
}
#digitalGal .parallax__layer--base {
background: #aaf6ff;
}
#Xdesign {
z-index: 2;
/* slide under group 5 and 7 */
}
#Xdesign .parallax__layer--back {
background: #e59172;
}
#designGal {
z-index: 3;
/* slide over group 7 */
}
#designGal .parallax__layer--base {
background: #ffe1d6;
}
#Xcontact {
z-index: 2;
/* slide under group 5 and 7 */
}
#Xcontact .parallax__layer--back {
background: rgb(245, 235, 100);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="debug">
<label><input type="checkbox"> Debug</label>
</div>
<div id="menLogo"></div>
<div class="ssb01 trans">
<div class="ssb01__info">
<span>bill o'day</span>
<br />
<span>creative director | art</span>
</div>
<div class="nav">
About
Concept
Broadcast
Digital
Design
Contact
</div>
</div>
<div class="ssb00 trans">
<div class="ssb00_inWrap">
<div class="m00 men-1 active">
<a href="#about">
<div class="m01 mm-1"></div>
<div class="m02 mm-1">About</div>
</a>
</div>
<div class="m00 men-2 active">
<a href="#concept">
<div class="m01 mm-2"></div>
<div class="m02 mm-2">Concept</div>
</a>
</div>
<div class="m00 men-3 active">
<a href="#broadcast">
<div class="m01 mm-3"></div>
<div class="m02 mm-3">Broadcast</div>
</a>
</div>
<div class="m00 men-4 active">
<a href="#digital">
<div class="m01 mm-4"></div>
<div class="m02 mm-4">Digital</div>
</a>
</div>
<div class="m00 men-5 active">
<a href="#design">
<div class="m01 mm-5"></div>
<div class="m02 mm-5">Design</div>
</a>
</div>
<div class="m00 men-6 active">
<a href="#contact">
<div class="m01 mm-6"></div>
<div class="m02 mm-6">Contact</div>
</a>
</div>
</div>
</div>
<div class="parallax">
<div id="Xabout" class="parallax__group">
<div id="about" class="parallax__layer parallax__layer--base">
<div class="title">hello</div>
</div>
<div class="parallax__layer parallax__layer--back">
<div class="title">ABOUT BG</div>
</div>
</div>
<div id="aboutGal" class="parallax__group">
<div class="parallax__layer parallax__layer--base">
<div class="title">ABOUT GAL</div>
</div>
</div>
<div id="Xconcept" class="parallax__group">
<div id="concept" class="parallax__layer parallax__layer--base">
<div class="title">concepts</div>
</div>
<div class="parallax__layer parallax__layer--back">
<div class="title">Concepts BG</div>
</div>
</div>
<div id="conceptGal" class="parallax__group">
<div class="parallax__layer parallax__layer--base">
<div class="title">CONCEPTS GAL</div>
</div>
</div>
<div id="Xbroadcast" class="parallax__group">
<div id="broadcast" class="parallax__layer parallax__layer--base">
<div class="title">broadcast</div>
</div>
<div class="parallax__layer parallax__layer--back">
<div class="title">BROADCAST BG</div>
</div>
</div>
<div id="broadcastGal" class="parallax__group">
<div class="parallax__layer parallax__layer--base">
<div class="title">BROADCAST GAL</div>
</div>
</div>
<div id="Xdigital" class="parallax__group">
<div id="digital" class="parallax__layer parallax__layer--base">
<div class="title">digital</div>
</div>
<div class="parallax__layer parallax__layer--back">
<div class="title">DIGITAL BG</div>
</div>
</div>
<div id="digitalGal" class="parallax__group">
<div class="parallax__layer parallax__layer--base">
<div class="title">DIGITAL GAL</div>
</div>
</div>
<div id="Xdesign" class="parallax__group">
<div id="design" class="parallax__layer parallax__layer--base">
<div class="title">design</div>
</div>
<div class="parallax__layer parallax__layer--back">
<div class="title">DESIGN BG</div>
</div>
</div>
<div id="designGal" class="parallax__group">
<div class="parallax__layer parallax__layer--base">
<div class="title">DESIGN GAL</div>
</div>
</div>
<div id="Xcontact" class="parallax__group">
<div id="contact" class="parallax__layer parallax__layer--base">
<div class="title">contact</div>
</div>
<div class="parallax__layer parallax__layer--back">
<div class="title">CONTACT BG</div>
</div>
</div>
</div>
</body>
</html>
EDIT:
I've changed my JS .scroll commands to focus on the .parallax div since that's really what should be measured, and it logs just fine now. BUT clicking on the items in the side menu still scrolls to positions as if it has a 30% view of the whole thing.
So I think the issue now is particularly with this line:
offsetTop = href === "#" ? 0 : $(href).offset().top;
The scrollTop and offsetTop results seem to be off. I'm trying to figure it out but I'm very slow. Any help would be appreciated.
So, you need to listen to .parallax scrolling right?
And you didn't tried this ?
$(".parallax").scroll(function() { // Added, just to console.log the scroll events.
console.log('Log this Parallax');
});
In your script, I got rid of the multiple ready wrappers.
$(document).ready(function() { is the same as $(function() {
One is a short hand of the other.
Multiple subsequent wrapper like this are useless... And nested ones too.
I also changed this (And this is what fixes your side menu offset on scroll back up) :
$(".parallax").scroll(function() { // Changed $(window) to $(".parallax")
var fromTop = $(window).scrollTop(); // Changed $(this) to $(window)
// ...
I also fixed the side menu links click handler like this:
menuItems.click(function(e) {
var href = $(this).attr("href"); // changed the coma to a semi-colon.
var offsetTop = href.offset().top; // Added var and removed the useless ternary operator: href === "#" ? 0 : $(href).offset().top;
$(".parallax").stop().animate({ // Changed $(window") to $(".parallax")
scrollTop: offsetTop
}, 300);
e.preventDefault();
});
There is still a small glitch on the appearance of the menus (top and side)...
That is because you use opacity instead of display to control show/hide.
That also is the source of the white band at the bottom of the page.
I left some work for you ;)
See it on CodePen and on the below snippet (but click the "Full page" link).
$(document).ready(function() {
console.log('got here');
$(window).scroll(function() {
//console.log('Log this');
});
$(".parallax").scroll(function() { // Added, just to console.log the scroll events.
//console.log('Log this Parallax');
});
//});
//$(document).ready(function() {
var debugInput = document.querySelector("input");
function updateDebugState() {
document.body.classList.toggle('debug-on', debugInput.checked);
}
debugInput.addEventListener("click", updateDebugState);
updateDebugState();
var lastId,
sideMenu = $(".ssb00"),
menuItems = sideMenu.find("a"),
scrollItems = menuItems.map(function() {
var item = $($(this).attr("href"));
if (item.length) {
return item;
}
});
menuItems.click(function(e) {
var href = $(this).attr("href"); // changed the coma to a semi-colon.
var offsetTop = href.offset().top; // Added var and removed the useless ternary operator: href === "#" ? 0 : $(href).offset().top;
$(".parallax").stop().animate({ // Changed $(window") to $(".parallax")
scrollTop: offsetTop
}, 300);
e.preventDefault();
});
$(".parallax").scroll(function() { // Changed $(window) to $(".parallax")
var fromTop = $(window).scrollTop(); // Changed $(this) to $(window)
var cur = scrollItems.map(function() {
if ($(this).offset().top < fromTop)
return this;
});
cur = cur[cur.length - 1];
var id = cur && cur.length ? cur[0].id : "";
if (lastId !== id) {
lastId = id;
menuItems
.parent().removeClass("active")
.end().filter("[href='#" + id + "']").parent().addClass("active");
}
});
//$(function() {
var scroll = 0;
$(window).scroll(function(event) {
var moved = $(this).scrollTop();
var headerSize = 20
if (moved > headerSize) {
$('.ssb00').css({
'opacity': '1',
'right': '10px'
})
$('.ssb01').css({
'opacity': '0',
})
}
if (moved === 0) {
$('.ssb00').css({
'opacity': '0',
'right': '-40px'
})
$('.ssb01').css({
'opacity': '1',
})
}
if (moved > headerSize) {}
headerSize = moved;
});
//});
});
#charset "UTF-8";
body {
margin: 0;
padding: 0;
font-family: Helvetica;
}
.ssb00 {
z-index: 100;
position: absolute;
width: 100px;
height: 100%;
top: 100px;
opacity: 0;
}
#menLogo {
z-index: 110;
position: fixed;
top: 0;
left: 8px;
height: 100px;
width: 100px;
background-image: url(img/Logo-300x244.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.ssb00_inWrap {
height: 200px;
position: relative;
top: calc(50vh - 150px);
}
.m00 {
height: 33px;
}
.m00 div {
position: absolute;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
.m01 {
text-align: left;
right: 0;
width: 16px;
}
.m01:before {
content: '•';
}
.m02 {
left: 200px;
width: calc(100% - 26px);
opacity: 0;
text-align: right;
}
.ssb00_inWrap:hover .m02 {
left: 0px;
opacity: 1;
}
.ssb00 a {
color: #fff;
}
.ssb00 a:hover {
color: #6ccef5;
}
.active .m02 {
left: 0px;
opacity: 1;
}
.active a {
color: #1b75ba;
}
.ssb01 {
z-index: 100;
background: rgba(255, 255, 255, .9);
border-bottom: 1px solid #f0f0f0;
height: 100px;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.ssb01 .nav {
font-weight: bold;
width: 560px;
height: 30px;
position: absolute;
right: 0;
bottom: 10px;
text-align: left;
}
.ssb01 a {
color: #1b75ba;
text-decoration: none;
margin: 0px 15px;
}
.ssb01 a:hover {
color: #6ccef5;
}
.ssb01 a:active {
color: #fff;
}
.ssb01__info {
position: absolute;
height: 45px;
padding: 14px 20px;
left: 110px;
top: 15px;
color: #666;
opacity: 1;
}
.trans {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.parallax {
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
-webkit-perspective: 300px;
perspective: 300px;
}
.parallax__group {
position: relative;
height: 100vh;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.parallax__layer {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.parallax__layer--fore {
-webkit-transform: translateZ(90px) scale(.7);
transform: translateZ(90px) scale(.7);
z-index: 1;
}
.parallax__layer--base {
-webkit-transform: translateZ(0);
transform: translateZ(0);
z-index: 4;
}
.parallax__layer--back {
-webkit-transform: translateZ(-300px) scale(2);
transform: translateZ(-300px) scale(2);
z-index: 3;
}
.parallax__layer--deep {
-webkit-transform: translateZ(-600px) scale(3);
transform: translateZ(-600px) scale(3);
z-index: 2;
}
.debug {
position: fixed;
top: 0;
left: .5em;
z-index: 999;
background: rgba(0, 0, 0, .85);
color: #fff;
padding: .5em;
border-radius: 0 0 5px 5px;
}
.debug-on .parallax__group {
-webkit-transform: translate3d(800px, 0, -800px) rotateY(30deg);
transform: translate3d(700px, 0, -800px) rotateY(30deg);
}
.debug-on .parallax__layer {
box-shadow: 0 0 0 2px #000;
opacity: 0.9;
}
.parallax__group {
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
}
.parallax {
font-size: 200%;
}
.title {
text-align: center;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#Xabout {
z-index: 3;
/* slide under groups 1 and 3 */
}
#Xabout .parallax__layer--back {
background: #6ba1ff;
}
#aboutGal {
z-index: 5;
/* slide over group 2 */
}
#aboutGal .parallax__layer--base {
background: #c4daff;
}
#Xconcept {
z-index: 3;
/* slide under groups 1 and 3 */
}
#Xconcept .parallax__layer--back {
background: #7ae570;
}
#conceptGal {
z-index: 4;
/* slide over group 2 and 4 */
}
#conceptGal .parallax__layer--base {
background: #adffa5;
}
#Xbroadcast {
z-index: 2;
/* slide under group 3 and 5 */
}
#Xbroadcast .parallax__layer--back {
background: #f0f760;
}
#broadcastGal {
z-index: 3;
/* slide over group 4 and 6 */
}
#broadcastGal .parallax__layer--base {
background: #fcffbc;
}
#Xdigital {
z-index: 2;
/* slide under group 5 and 7 */
}
#Xdigital .parallax__layer--back {
background: #42e2f4;
}
#digitalGal {
z-index: 3;
/* slide over group 7 */
}
#digitalGal .parallax__layer--base {
background: #aaf6ff;
}
#Xdesign {
z-index: 2;
/* slide under group 5 and 7 */
}
#Xdesign .parallax__layer--back {
background: #e59172;
}
#designGal {
z-index: 3;
/* slide over group 7 */
}
#designGal .parallax__layer--base {
background: #ffe1d6;
}
#Xcontact {
z-index: 2;
/* slide under group 5 and 7 */
}
#Xcontact .parallax__layer--back {
background: rgb(245, 235, 100);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="debug">
<label><input type="checkbox"> Debug</label>
</div>
<div id="menLogo"></div>
<div class="ssb01 trans">
<div class="ssb01__info">
<span>bill o'day</span>
<br />
<span>creative director | art</span>
</div>
<div class="nav">
About
Concept
Broadcast
Digital
Design
Contact
</div>
</div>
<div class="ssb00 trans">
<div class="ssb00_inWrap">
<div class="m00 men-1 active">
<a href="#about">
<div class="m01 mm-1"></div>
<div class="m02 mm-1">About</div>
</a>
</div>
<div class="m00 men-2 active">
<a href="#concept">
<div class="m01 mm-2"></div>
<div class="m02 mm-2">Concept</div>
</a>
</div>
<div class="m00 men-3 active">
<a href="#broadcast">
<div class="m01 mm-3"></div>
<div class="m02 mm-3">Broadcast</div>
</a>
</div>
<div class="m00 men-4 active">
<a href="#digital">
<div class="m01 mm-4"></div>
<div class="m02 mm-4">Digital</div>
</a>
</div>
<div class="m00 men-5 active">
<a href="#design">
<div class="m01 mm-5"></div>
<div class="m02 mm-5">Design</div>
</a>
</div>
<div class="m00 men-6 active">
<a href="#contact">
<div class="m01 mm-6"></div>
<div class="m02 mm-6">Contact</div>
</a>
</div>
</div>
</div>
<div class="parallax">
<div id="Xabout" class="parallax__group">
<div id="about" class="parallax__layer parallax__layer--base">
<div class="title">hello</div>
</div>
<div class="parallax__layer parallax__layer--back">
<div class="title">ABOUT BG</div>
</div>
</div>
<div id="aboutGal" class="parallax__group">
<div class="parallax__layer parallax__layer--base">
<div class="title">ABOUT GAL</div>
</div>
</div>
<div id="Xconcept" class="parallax__group">
<div id="concept" class="parallax__layer parallax__layer--base">
<div class="title">concepts</div>
</div>
<div class="parallax__layer parallax__layer--back">
<div class="title">Concepts BG</div>
</div>
</div>
<div id="conceptGal" class="parallax__group">
<div class="parallax__layer parallax__layer--base">
<div class="title">CONCEPTS GAL</div>
</div>
</div>
<div id="Xbroadcast" class="parallax__group">
<div id="broadcast" class="parallax__layer parallax__layer--base">
<div class="title">broadcast</div>
</div>
<div class="parallax__layer parallax__layer--back">
<div class="title">BROADCAST BG</div>
</div>
</div>
<div id="broadcastGal" class="parallax__group">
<div class="parallax__layer parallax__layer--base">
<div class="title">BROADCAST GAL</div>
</div>
</div>
<div id="Xdigital" class="parallax__group">
<div id="digital" class="parallax__layer parallax__layer--base">
<div class="title">digital</div>
</div>
<div class="parallax__layer parallax__layer--back">
<div class="title">DIGITAL BG</div>
</div>
</div>
<div id="digitalGal" class="parallax__group">
<div class="parallax__layer parallax__layer--base">
<div class="title">DIGITAL GAL</div>
</div>
</div>
<div id="Xdesign" class="parallax__group">
<div id="design" class="parallax__layer parallax__layer--base">
<div class="title">design</div>
</div>
<div class="parallax__layer parallax__layer--back">
<div class="title">DESIGN BG</div>
</div>
</div>
<div id="designGal" class="parallax__group">
<div class="parallax__layer parallax__layer--base">
<div class="title">DESIGN GAL</div>
</div>
</div>
<div id="Xcontact" class="parallax__group">
<div id="contact" class="parallax__layer parallax__layer--base">
<div class="title">contact</div>
</div>
<div class="parallax__layer parallax__layer--back">
<div class="title">CONTACT BG</div>
</div>
</div>
</div>
</body>
</html>
I have a header element which is fixed. Within in the element, there is a dropdown nav that is positioned absolute under the header. I implemented the dropdown function to make it appear, however, is there a possibility to scroll the nav while the header remains fixed? I found out the nav gets rather big, too big to not to scroll.
My current progress:
window.onload = function() {
var menuBtn = document.getElementById("menu-icon"),
navbar = document.getElementById("navbar"),
header = document.getElementById("header");
menuBtn.addEventListener('click', toggleMenu);
function toggleMenu(){
menuBtn.classList.toggle("active");
navbar.style.maxHeight = navbar.style.maxHeight ? null : navbar.scrollHeight + "px";
}
}
header {
background:#ddd;
position: fixed;
height: 45px;
top: 0;
width: 100vw;
z-index: 500;
}
nav{
overflow: auto;
background: #fff;
position: absolute;
left: 0;
top: 45px;
transition: all 0.3s;
max-height: 0;
overflow: hidden;
}
#menu-icon {
display: block;
float: right;
height: 100%;
width: 22px;
margin-right: 7%;
background: black;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
#menu-icon.active{
background: blue;
}
.item{
display: inline-flex;
width: 86vw;
padding: 8px 0;
margin: 0 7%;
border-top: 1px solid #58595b;
}
.item a{
color: #58595b;
display: inline-block;
width: 85%;
transition: all 0.3s;
}
<header id="header">
<div id="menu-icon"></div>
<nav id="navbar">
<div class="item">
Item A
</div>
<div class="item">
Item B
</div>
<div class="item">
Item C
</div>
<div class="item">
Item D
</div>
<div class="item">
Item E
</div>
<div class="item">
Item F
</div>
<div class="item">
Item A
</div>
<div class="item">
Item B
</div>
<div class="item">
Item C
</div>
<div class="item">
Item D
</div>
<div class="item">
Item E
</div>
<div class="item">
Item F
</div>
<div class="item">
Item A
</div>
<div class="item">
Item B
</div>
<div class="item">
Item C
</div>
</nav>
</header>
Just add this CSS
#navbar{
position: relative;
overflow-y: auto;
}
You can Add in this css file
#navbar{
position: relative;
overflow-y: scroll;
height:200px;
}
window.onload = function() {
var menuBtn = document.getElementById("menu-icon"),
navbar = document.getElementById("navbar"),
header = document.getElementById("header");
menuBtn.addEventListener('click', toggleMenu);
function toggleMenu(){
menuBtn.classList.toggle("active");
navbar.style.maxHeight = navbar.style.maxHeight ? null : navbar.scrollHeight + "px";
}
}
header {
background:#ddd;
position: fixed;
height: 45px;
top: 0;
width: 100vw;
z-index: 500;
}
#navbar{
position: relative;
overflow-y: scroll;
height:200px;
}
nav{
overflow: auto;
background: #fff;
position: absolute;
left: 0;
top: 45px;
transition: all 0.3s;
max-height: 0;
overflow: hidden;
}
#menu-icon {
display: block;
float: right;
height: 100%;
width: 22px;
margin-right: 7%;
background: black;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
#menu-icon.active{
background: blue;
}
.item{
display: inline-flex;
width: 86vw;
padding: 8px 0;
margin: 0 7%;
border-top: 1px solid #58595b;
}
.item a{
color: #58595b;
display: inline-block;
width: 85%;
transition: all 0.3s;
}
<header id="header">
<div id="menu-icon"></div>
<nav id="navbar">
<div class="item">
Item A
</div>
<div class="item">
Item B
</div>
<div class="item">
Item C
</div>
<div class="item">
Item D
</div>
<div class="item">
Item E
</div>
<div class="item">
Item F
</div>
<div class="item">
Item A
</div>
<div class="item">
Item B
</div>
<div class="item">
Item C
</div>
<div class="item">
Item D
</div>
<div class="item">
Item E
</div>
<div class="item">
Item F
</div>
<div class="item">
Item A
</div>
<div class="item">
Item B
</div>
<div class="item">
Item C
</div>
</nav>
</header>