I am trying to create a menu like the one on this website: http://sterling.it/en/
I want my menu to slide from the left to the right and then to also disappear sliding to the left. Below is the code that I have written so far but it is not working properly. The menu slides the first time but then never slides again. I would really appreciate it if anyone could help me. Thanks in advance!
$(document).ready(function() {
$(".menuTrigger").click(function() {
$(this).toggleClass("active");
/* Check if the icon does not have class active */
if (!$(this).hasClass("active")) {
/* Do something, for example add class color-icon that changes the color of the hamburguer,
show an alert... */
$(".menuTrigger .hamburger").addClass("non-active");
$("#hamburgerMenu").removeClass("active");
} else {
$("menuTrigger .hamburger").removeClass("non-active");
$("#hamburgerMenu").addClass("active");
if ($(this).hasClass("active")) {
$("#hamburgerMenu").animate({
width: "200"
});
}
}
});
});
body {
background: pink;
}
.hamburger {
width: 30px;
height: 3px;
background: black;
position: absolute;
top: 19px;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
transition: .5s;
}
.hamburger:before,
.hamburger:after {
content: "";
position: absolute;
width: 15px;
height: 3px;
background: black;
box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
transition: .5s;
}
.hamburger:after {
top: 8px;
left: 50%;
}
.hamburger:before {
top: -8px;
left: 0%;
}
.menuTrigger:hover .hamburger:after {
left: 0%;
}
.menuTrigger:hover .hamburger:before {
left: 50%;
}
.menuTrigger.active .hamburger {
background: rgba(0, 0, 0, 0);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0);
}
.menuTrigger.active .hamburger:before {
top: 0px;
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
-webkit-transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, transform .3s ease-in-out .2s, - webkit-transform .3s ease-in-out .2s;
}
.menuTrigger.active .hamburger:after {
top: 0px;
background-color: rgba(0, 0, 0, 0);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0);
-webkit-transition: top .2s ease-in-out, background-color .3s ease-in-out .2s;
transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, background-color .3s ease-in-out .2, box-shadow .3s ease-in-out .2s;
transition: top .2s ease-in-out, background-color .3s ease-in-out .2s, -webkit-transform .3s ease-in-out .2s;
}
.menuTrigger.active .hamburger:after {
top: 0px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, transform .3s ease-in-out .2s, - webkit-transform .3s ease-in-out .2s;
}
.menuTrigger {
position: relative;
transform: transition(-50%, -50%);
width: 60px;
height: 40px;
align-items: center;
z-index: 1000;
cursor: pointer;
}
.hamburgerMenuTrigger {
height: 100vh;
}
#hamburgerMenu {
position: fixed;
top: 0;
height: 100%;
width: 0px;
padding: 60px;
background-color: white;
z-index: 1;
visibility: hidden;
opacity: 0;
}
#hamburgerMenu.active {
opacity: 1;
visibility: visible;
}
header nav a {
text-decoration: none;
color: rgb(88, 102, 110);
font-size: 20px;
font-weight: bold;
padding: 7px;
}
header nav li {
list-style-type: none;
padding: 20px 0;
}
header nav li span {
font-size: 16px;
padding-right: 30px;
}
header {
display: block;
}
header nav {
padding-top: 80px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hamburgerMenuTrigger">
<div class="menuTrigger" id="menuTriggerBtn">
<div class="hamburger" id="hamburgerBtn"></div>
</div>
<div id="hamburgerMenu">
<nav class="hamburgereMenu-Nav">
<ul class="hamburgerMenu-Ul">
<li class="hamburgerMenu-nav-item hamburgerMenu-right-li"><a class="hamburgerMenu-nav-link hamburgerMenu-menu" href=""><span>01</span></a></li>
<li class="hamburgerMenu-nav-item hamburgerMenu-right-li"><a class="hamburgerMenu-nav-link hamburgerMenu-menu" href=""><span>02</span></a></li>
<li class="hamburgerMenu-nav-item hamburgerMenu-right-li"><a class="hamburgerMenu-nav-link hamburgerMenu-menu" href=""><span>03</span></a></li>
<li class="hamburgerMenu-nav-item hamburgerMenu-right-li"><a class="hamburgereMenu-nav-link hamburgerMenu-menu" href=""><span>04</span></a></li>
</ul>
</nav>
</div>
</div>
What is happening here is animate was not called in first condition and when you call it after completion of that animation you should remove and add the active class.
I have changed your code a little bit,
$(document).ready(function() {
$(".menuTrigger").click(function() {
$(this).toggleClass("active");
/* Check if the icon does not have class active */
if (!$(this).hasClass("active")) {
/* Do something, for example add class color-icon that changes the color of the hamburguer,
show an alert... */
$("#hamburgerMenu").animate({
width: "0",
opacity: "0" // We are reducing opacity as it looks good. :)
},
// This is the callback when the animate is completed.
{
complete: function() {
$(".menuTrigger .hamburger").addClass("non-active");
$("#hamburgerMenu").removeClass("active");
}
});
} else {
$("menuTrigger .hamburger").removeClass("non-active");
$("#hamburgerMenu").addClass("active");
if ($(this).hasClass("active")) {
$("#hamburgerMenu").animate({
width: "200",
opacity: "1"
});
}
}
});
});
body {
background: pink;
}
.hamburger {
width: 30px;
height: 3px;
background: black;
position: absolute;
top: 19px;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
transition: .5s;
}
.hamburger:before,
.hamburger:after {
content: "";
position: absolute;
width: 15px;
height: 3px;
background: black;
box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
transition: .5s;
}
.hamburger:after {
top: 8px;
left: 50%;
}
.hamburger:before {
top: -8px;
left: 0%;
}
.menuTrigger:hover .hamburger:after {
left: 0%;
}
.menuTrigger:hover .hamburger:before {
left: 50%;
}
.menuTrigger.active .hamburger {
background: rgba(0, 0, 0, 0);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0);
}
.menuTrigger.active .hamburger:before {
top: 0px;
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
-webkit-transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, transform .3s ease-in-out .2s, - webkit-transform .3s ease-in-out .2s;
}
.menuTrigger.active .hamburger:after {
top: 0px;
background-color: rgba(0, 0, 0, 0);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0);
-webkit-transition: top .2s ease-in-out, background-color .3s ease-in-out .2s;
transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, background-color .3s ease-in-out .2, box-shadow .3s ease-in-out .2s;
transition: top .2s ease-in-out, background-color .3s ease-in-out .2s, -webkit-transform .3s ease-in-out .2s;
}
.menuTrigger.active .hamburger:after {
top: 0px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, transform .3s ease-in-out .2s, - webkit-transform .3s ease-in-out .2s;
}
.menuTrigger {
position: relative;
transform: transition(-50%, -50%);
width: 60px;
height: 40px;
align-items: center;
z-index: 1000;
cursor: pointer;
}
.hamburgerMenuTrigger {
height: 100vh;
}
#hamburgerMenu {
position: fixed;
top: 0;
height: 100%;
width: 0px;
padding: 60px;
background-color: white;
z-index: 1;
visibility: hidden;
opacity: 0;
}
#hamburgerMenu.active {
opacity: 1;
visibility: visible;
}
header nav a {
text-decoration: none;
color: rgb(88, 102, 110);
font-size: 20px;
font-weight: bold;
padding: 7px;
}
header nav li {
list-style-type: none;
padding: 20px 0;
}
header nav li span {
font-size: 16px;
padding-right: 30px;
}
header {
display: block;
}
header nav {
padding-top: 80px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hamburgerMenuTrigger">
<div class="menuTrigger" id="menuTriggerBtn">
<div class="hamburger" id="hamburgerBtn"></div>
</div>
<div id="hamburgerMenu">
<nav class="hamburgereMenu-Nav">
<ul class="hamburgerMenu-Ul">
<li class="hamburgerMenu-nav-item hamburgerMenu-right-li">
<a class="hamburgerMenu-nav-link hamburgerMenu-menu" href="">
<span>01</span>
</a>
</li>
<li class="hamburgerMenu-nav-item hamburgerMenu-right-li">
<a class="hamburgerMenu-nav-link hamburgerMenu-menu" href="">
<span>02</span>
</a>
</li>
<li class="hamburgerMenu-nav-item hamburgerMenu-right-li">
<a class="hamburgerMenu-nav-link hamburgerMenu-menu" href="">
<span>03</span>
</a>
</li>
<li class="hamburgerMenu-nav-item hamburgerMenu-right-li">
<a class="hamburgereMenu-nav-link hamburgerMenu-menu" href="">
<span>04</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
Tell me if it works fine.
You are removing your active class too quickly thus setting opacity and visibilty to hide your menu. Adding an animation to the width and hiding the menu on the callback will reverse your appear-animation.
$(document).ready(function() {
$(".menuTrigger").click(function() {
$(this).toggleClass("active");
/* Check if the icon does not have class active */
if (!$(this).hasClass("active")) {
/* Do something, for example add class color-icon that changes the color of the hamburguer,
show an alert... */
$(".menuTrigger .hamburger").addClass("non-active");
$("#hamburgerMenu").animate({
width: "0"
}, function() {
$("#hamburgerMenu").removeClass("active");
});
} else {
$("menuTrigger .hamburger").removeClass("non-active");
$("#hamburgerMenu").addClass("active");
if ($(this).hasClass("active")) {
$("#hamburgerMenu").animate({
width: "200"
});
}
}
});
});
body {
background: pink;
}
.hamburger {
width: 30px;
height: 3px;
background: black;
position: absolute;
top: 19px;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
transition: .5s;
}
.hamburger:before,
.hamburger:after {
content: "";
position: absolute;
width: 15px;
height: 3px;
background: black;
box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
transition: .5s;
}
.hamburger:after {
top: 8px;
left: 50%;
}
.hamburger:before {
top: -8px;
left: 0%;
}
.menuTrigger:hover .hamburger:after {
left: 0%;
}
.menuTrigger:hover .hamburger:before {
left: 50%;
}
.menuTrigger.active .hamburger {
background: rgba(0, 0, 0, 0);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0);
}
.menuTrigger.active .hamburger:before {
top: 0px;
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
-webkit-transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, transform .3s ease-in-out .2s, - webkit-transform .3s ease-in-out .2s;
}
.menuTrigger.active .hamburger:after {
top: 0px;
background-color: rgba(0, 0, 0, 0);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0);
-webkit-transition: top .2s ease-in-out, background-color .3s ease-in-out .2s;
transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, background-color .3s ease-in-out .2, box-shadow .3s ease-in-out .2s;
transition: top .2s ease-in-out, background-color .3s ease-in-out .2s, -webkit-transform .3s ease-in-out .2s;
}
.menuTrigger.active .hamburger:after {
top: 0px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, transform .3s ease-in-out .2s, - webkit-transform .3s ease-in-out .2s;
}
.menuTrigger {
position: relative;
transform: transition(-50%, -50%);
width: 60px;
height: 40px;
align-items: center;
z-index: 1000;
cursor: pointer;
}
.hamburgerMenuTrigger {
height: 100vh;
}
#hamburgerMenu {
position: fixed;
top: 0;
height: 100%;
width: 0px;
padding: 60px;
background-color: white;
z-index: 1;
visibility: hidden;
opacity: 0;
}
#hamburgerMenu.active {
opacity: 1;
visibility: visible;
}
header nav a {
text-decoration: none;
color: rgb(88, 102, 110);
font-size: 20px;
font-weight: bold;
padding: 7px;
}
header nav li {
list-style-type: none;
padding: 20px 0;
}
header nav li span {
font-size: 16px;
padding-right: 30px;
}
header {
display: block;
}
header nav {
padding-top: 80px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hamburgerMenuTrigger">
<div class="menuTrigger" id="menuTriggerBtn">
<div class="hamburger" id="hamburgerBtn"></div>
</div>
<div id="hamburgerMenu">
<nav class="hamburgereMenu-Nav">
<ul class="hamburgerMenu-Ul">
<li class="hamburgerMenu-nav-item hamburgerMenu-right-li"><a class="hamburgerMenu-nav-link hamburgerMenu-menu" href=""><span>01</span></a></li>
<li class="hamburgerMenu-nav-item hamburgerMenu-right-li"><a class="hamburgerMenu-nav-link hamburgerMenu-menu" href=""><span>02</span></a></li>
<li class="hamburgerMenu-nav-item hamburgerMenu-right-li"><a class="hamburgerMenu-nav-link hamburgerMenu-menu" href=""><span>03</span></a></li>
<li class="hamburgerMenu-nav-item hamburgerMenu-right-li"><a class="hamburgereMenu-nav-link hamburgerMenu-menu" href=""><span>04</span></a></li>
</ul>
</nav>
</div>
</div>
Related
I have a mobile slide menu. I want users to click on the body to slide back the mobile menu. I also only want the menu button to have position fixed when the menu is slide opened.
I have the following code used from this codepen: https://codepen.io/ellissei/pen/VvgYjB
I changed it a little but to style the menu button and.
<script>
jQuery(function($)
{
$(".hamburger").click(function()
{
$(".navigation").toggleClass("open");
})
$(document).('body', 'click', function(event) {
$('.open').removeClass('open');
})
});
</script>
<html>
<nav class="navigation">
<div class="hamburger ">
<span class="bars"></span>
</div>
<div class="menu-mobile" style="background-image:url(<?php echo get_template_directory_uri(); ?>/img/ecw-bg-graphic-menu%402x-100.jpg);" >
<?php get_search_form(); ?>
<ul class="menu-mobile-hoofdmenu">
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'menu clearfix' ) ); ?>
</ul>
<hr>
<ul class="menu-mobile-topmenu">
<?php wp_nav_menu( array( 'theme_location' => 'menu-top-header' ) ); ?>
</ul>
</div>
</nav>
</html>
</pre>
CSS
<pre>
.navigation {
display:none;
}
.hamburger {
position: fixed;
top: 20px;
right: 30px;
cursor: pointer;
z-index: 1000;
background:white;
height: 30px;
border-radius: 30px;
}
.hamburger span {
vertical-align: middle;
transform: scale(0.5);
margin-top: 13px;
}
.hamburger .bars {
display: block;
position: relative;
width: 30px;
height: 3px;
background-color: #14BADF;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.hamburger .bars:before, .hamburger .bars:after {
position: absolute;
content: " ";
width: 100%;
height: 3px;
background-color: #14BADF;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
border-radius: 10px;
}
.hamburger .bars:before {
top: 10px;
}
.hamburger .bars:after {
bottom: 10px;
}
.open .hamburger .bars {
background-color: transparent;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.open .hamburger .bars::before {
top: 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
background-color: #DA4E29;
}
.open .hamburger .bars::after {
bottom: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
background-color: #DA4E29;
}
.menu-mobile {
width: 70%;
height: 100%;
padding: 75px 0px 0 0;
background-position: center;
background-size: cover;
position: fixed;
right: -100%;
top: 0;
opacity: 0;
z-index: 999;
margin-top: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.menu-mobile a {
color: white;
}
.menu-mobile a:hover {
color: white;
}
.open .menu-mobile {
right: 0;
opacity: 1;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.menu-mobile:hover {
overflow-y: auto;
}
ul.menu-mobile-hoofdmenu, ul.menu-mobile-topmenu {
padding-left: 0%;
}
</pre>
I can not replicate your code in snippet but as code pen code goes:
Replace jQuery code with:
jQuery(function($)
{
$(".hamburger").click(function()
{
$(".navigation").toggleClass("open");
})
$("body").click(function(e)
{
if ($(e.target).hasClass('bars', "hamburger")) {
return false;
}
$(".navigation").removeClass("open");
})
});
This will target body but exclude bars and hamburger...
Also code pen code is missing tags, add them to test it.
Your problem was that hamburger is inside body, and there for removes class open on click.
EDIT:
jQuery(function($)
{
$(".hamburger").click(function()
{
$(".navigation").toggleClass("open");
})
$("article").click(function()
{
$(".navigation").removeClass("open");
})
});
I'm trying to change my hamburger icon to go to X. What i want to create is the top and bottom lines to go to the middle and then to go X. This is my code so far:
$(document).ready(function() {
$(".icon").click(function() {
$(".icon").toggleClass("active");
});
});
body {
margin: 0;
padding: 0;
background: #ff5c40;
}
.icon {
position: absolute;
top: 50%;
Left: 50%;
transform: transition(-50%, -50%);
width: 80px;
height: 80px;
}
.hamburger {
width: 50px;
height: 6px;
background: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
transition: .5s;
}
.hamburger:before,
.hamburger:after {
content: "";
position: absolute;
width: 50px;
height: 6px;
background: #fff;
box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
transition: .5s;
}
.hamburger:after {
top: 16px;
}
.hamburger:before {
top: -16px;
}
.icon.active .hamburger {
background: rgba(0, 0, 0, 0);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0);
}
.icon.active .hamburger:before {
top: 0px;
-webkit-transform: rotate(-135deg) ;
transform: rotate(-135deg);
-webkit-transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, transform .3s ease-in-out .2s, -webkit-transform .3s ease-in-out .2s;
}
.icon.active .hamburger:after {
top: 0px;
-webkit-transform: rotate(-45deg) ;
transform: rotate(-45deg);
transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, transform .3s ease-in-out .2s, -webkit-transform .3s ease-in-out .2s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="icon">
<div class="hamburger">
</div>
</div>
I really appreciate it if anyone would help me. Since I've been stuck in this for so long, it have been three or four days now. and i don't know what else to do!!
How about rotating your other line -45 deg?
EDIT: updated per your request via comments. This now uses keyframes. We say at 0% of the total time do nothing, then at 50% of the total time (1second of 2 total) bring the top and bottom line together in the middle.
Then at 100% of total time(at 2seconds)rotate our lines to make a X. You could also look into chaining animations but i find it kind of unreliable. this solution, takes your work and splits it into what you want to happen The forwards will keep the last frame of the animation, giving you the X look rather than repeating the animation over and over.
$(document).ready(function() {
$(".icon").click(function() {
$(".icon").toggleClass("active");
});
});
body {
margin: 0;
padding: 0;
background: #ff5c40;
}
.icon {
position: absolute;
top: 50%;
Left: 50%;
transform: transition(-50%, -50%);
width: 80px;
height: 80px;
}
.hamburger {
width: 50px;
height: 6px;
background: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
transition: .5s;
}
.hamburger:before,
.hamburger:after {
content: "";
position: absolute;
width: 50px;
height: 6px;
background: #fff;
box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
transition: .5s;
}
.hamburger:after {
top: 16px;
}
.hamburger:before {
top: -16px;
}
.icon.active .hamburger {
background: rgba(0, 0, 0, 0);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0);
}
.icon.active .hamburger:before {
animation: makeXLeft 2s forwards;
}
.icon.active .hamburger:after {
animation: makeXRight 2s forwards;
}
/* Standard syntax */
#keyframes makeXLeft {
0% {}
50% {top: 0px;transform: rotate(0deg);}
100% {top: 0px;transform: rotate(45deg);}
}
/* Standard syntax */
#keyframes makeXRight {
0% {}
50% {top: 0px;transform: rotate(0deg);}
100% {top: 0px;transform: rotate(-45deg);}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="icon">
<div class="hamburger">
</div>
</div>
Hello!
I am implementing Dropzone.js for making gallary.
I am facing a little problem. By deafult, Dropzone shows blank container area with clickable effect to upload one or more photos. But i want to override this effect and wants to show image upload options like in image given above .
So far,i tried to override this by overriding css but the result was like this.
What css code should i target to achieve the desired effect ?
dropzone.css
.dropzone, .dropzone * {
box-sizing: border-box; }
.dropzone {
min-height: 150px;
border: 2px dotted rgba(0, 0, 0, 0.3);
background: white;
padding: 20px 20px; }
.dropzone.dz-clickable {
cursor: pointer; }
.dropzone.dz-clickable {
cursor: default; }
.dropzone.dz-clickable .dz-message, .dropzone.dz-clickable .dz-message * {
cursor: pointer;
border: 2px dotted black;
}
.dropzone.dz-started .dz-message {
display: none; }
.dropzone.dz-drag-hover {
border-style: solid; }
.dropzone.dz-drag-hover .dz-message {
opacity: 0.5; }
.dropzone .dz-message {
text-align: center;
margin: 2em 0; }
.dropzone .dz-preview {
//border: 2px dotted grey;
position: relative;
display: inline-block;
vertical-align: top;
margin: 16px;
min-height: 100px; }
.dropzone .dz-preview:hover {
z-index: 1000; }
.dropzone .dz-preview:hover .dz-details {
opacity: 1; }
.dropzone .dz-preview.dz-file-preview .dz-image {
border-radius: 20px;
background: #999;
background: linear-gradient(to bottom, #eee, #ddd); }
.dropzone .dz-preview.dz-file-preview .dz-details {
opacity: 1;
}
.dropzone .dz-preview.dz-image-preview {
// background: yellow;
background: white;}
.dropzone .dz-preview.dz-image-preview .dz-details {
-webkit-transition: opacity 0.2s linear;
-moz-transition: opacity 0.2s linear;
-ms-transition: opacity 0.2s linear;
-o-transition: opacity 0.2s linear;
transition: opacity 0.2s linear; }
.dropzone .dz-preview .dz-remove {
font-size: 14px;
text-align: center;
display: block;
cursor: pointer;
border: none; }
.dropzone .dz-preview .dz-remove:hover {
text-decoration: underline; }
.dropzone .dz-preview:hover .dz-details {
opacity: 1; }
.dropzone .dz-preview .dz-details {
z-index: 20;
position: absolute;
top: 0;
left: 0;
opacity: 0;
font-size: 13px;
min-width: 100%;
max-width: 100%;
padding: 2em 1em;
text-align: center;
color: rgba(0, 0, 0, 0.9);
line-height: 150%; }
.dropzone .dz-preview .dz-details .dz-size {
margin-bottom: 1em;
font-size: 16px; }
.dropzone .dz-preview .dz-details .dz-filename {
white-space: nowrap; }
.dropzone .dz-preview .dz-details .dz-filename:hover span {
border: 1px solid rgba(200, 200, 200, 0.8);
background-color: rgba(255, 255, 255, 0.8); }
.dropzone .dz-preview .dz-details .dz-filename:not(:hover) {
overflow: hidden;
text-overflow: ellipsis; }
.dropzone .dz-preview .dz-details .dz-filename:not(:hover) span {
border: 1px solid transparent; }
.dropzone .dz-preview .dz-details .dz-filename span, .dropzone .dz-preview .dz-details .dz-size span {
background-color: rgba(255, 255, 255, 0.4);
padding: 0 0.4em;
border-radius: 3px; }
.dropzone .dz-preview:hover .dz-image img {
-webkit-transform: scale(1.05, 1.05);
-moz-transform: scale(1.05, 1.05);
-ms-transform: scale(1.05, 1.05);
-o-transform: scale(1.05, 1.05);
transform: scale(1.05, 1.05);
-webkit-filter: blur(8px);
filter: blur(8px); }
.dropzone .dz-preview .dz-image {
//border: 1px double grey;
border-radius: 20px;
overflow: hidden;
width: 120px;
height: 120px;
position: relative;
display: block;
z-index: 10; }
.dropzone .dz-preview .dz-image img {
display: block; }
.dropzone .dz-preview.dz-success .dz-success-mark {
-webkit-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
-moz-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
-ms-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
-o-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1); }
.dropzone .dz-preview.dz-error .dz-error-mark {
opacity: 1;
-webkit-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
-moz-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
-ms-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
-o-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1); }
.dropzone .dz-preview .dz-success-mark, .dropzone .dz-preview .dz-error-mark {
pointer-events: none;
opacity: 0;
z-index: 500;
position: absolute;
display: block;
top: 50%;
left: 50%;
margin-left: -27px;
margin-top: -27px; }
.dropzone .dz-preview .dz-success-mark svg, .dropzone .dz-preview .dz-error-mark svg {
display: block;
width: 54px;
height: 54px; }
.dropzone .dz-preview.dz-processing .dz-progress {
opacity: 1;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear; }
.dropzone .dz-preview.dz-complete .dz-progress {
opacity: 0;
-webkit-transition: opacity 0.4s ease-in;
-moz-transition: opacity 0.4s ease-in;
-ms-transition: opacity 0.4s ease-in;
-o-transition: opacity 0.4s ease-in;
transition: opacity 0.4s ease-in; }
.dropzone .dz-preview:not(.dz-processing) .dz-progress {
-webkit-animation: pulse 6s ease infinite;
-moz-animation: pulse 6s ease infinite;
-ms-animation: pulse 6s ease infinite;
-o-animation: pulse 6s ease infinite;
animation: pulse 6s ease infinite; }
.dropzone .dz-preview .dz-progress {
opacity: 1;
z-index: 1000;
pointer-events: none;
position: absolute;
height: 16px;
left: 50%;
top: 50%;
margin-top: -8px;
width: 80px;
margin-left: -40px;
background: rgba(255, 255, 255, 0.9);
-webkit-transform: scale(1);
border-radius: 8px;
overflow: hidden; }
.dropzone .dz-preview .dz-progress .dz-upload {
background: #333;
background: linear-gradient(to bottom, #666, #444);
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 0;
-webkit-transition: width 300ms ease-in-out;
-moz-transition: width 300ms ease-in-out;
-ms-transition: width 300ms ease-in-out;
-o-transition: width 300ms ease-in-out;
transition: width 300ms ease-in-out; }
.dropzone .dz-preview.dz-error .dz-error-message {
display: block; }
.dropzone .dz-preview.dz-error:hover .dz-error-message {
opacity: 1;
pointer-events: auto; }
.dropzone .dz-preview .dz-error-message {
pointer-events: none;
z-index: 1000;
position: absolute;
display: block;
display: none;
opacity: 0;
-webkit-transition: opacity 0.3s ease;
-moz-transition: opacity 0.3s ease;
-ms-transition: opacity 0.3s ease;
-o-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
border-radius: 8px;
font-size: 13px;
top: 130px;
left: -10px;
width: 140px;
background: #be2626;
background: linear-gradient(to bottom, #be2626, #a92222);
padding: 0.5em 1.2em;
color: white; }
.dropzone .dz-preview .dz-error-message:after {
content: '';
position: absolute;
top: -6px;
left: 64px;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #be2626; }
On your HTML just wrap the form element assigned to dropzone in a div like:
<div id="wrapper">
<form action="/file-upload"
class="dropzone"
id="my-awesome-dropzone">
</form>
</div>
and then assign an image to your wrapper div on your css:
#wrapper{
background-image: url(dropText.png);
background-position: center;
background-repeat: no-repeat;
width: 100%;
height: 15em;
border: 2px dashed #ccc;
padding: 0px 0px;
margin: 20px auto;
opacity: 0.8;
}
#wrapper:hover{
-moz-transition: background-image 0.4s ease-in-out 1s;
-webkit-transition: background-image 0.4s ease-in-out 1s;
-ms-transition: background-image 0.4s ease-in-out 1s;
-o-transition: background-image 0.4s ease-in-out 1s;
background-image: url(uploadPic.png);
opacity: 1;
}
remember to change the form opacity too:
#my-awesome-dropzone{
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
}
I created a small box while slides to the left and then to the bottom to present the content after hovering the box: http://jsfiddle.net/7n9jxo9c/3/
Now I need to change it in a way, that the box slides to the left and the opens to the top. So the content should be placed above the X.
HTML:
<div class="wrap">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div id="item_add">
<header>X</header>
<div class="body">
Content
</div>
</div>
JS:
$(document).on('mouseenter', '.item', function( event ) {
var menue = $('#item_add');
var item = $(this);
menue.css({ "top": item.offset().top + 35 }).show();
});
CSS:
.item {
border: 1px solid #e2e2e2;
margin: 6px;
padding: 0px 10px 0px 10px;
position: relative;
height: 40px;
}
.wrap {
margin-left: 8em;
}
#item_new {
border: 1px dashed #C0C0C0 !important;
background: none repeat scroll 0% 0% #F7F7F7;
display: block;
height: 2.2em;
margin: 6px;
padding: 0px 10px;
position: relative;
}
#item_add {
display: none;
position: absolute;
left: 5.5em;
width: 2em;
border: 1px solid #ddd;
background-color: #f7f7f7;
color: #aaa;
padding: 0px 6px;
-webkit-transition: width 200ms ease-in-out 200ms, left 200ms ease-in-out 200ms;
-moz-transition: width 200ms ease-in-out 200ms, left 200ms ease-in-out 200ms;
-ms-transition: width 200ms ease-in-out 200ms, left 200ms ease-in-out 200ms;
-o-transition: width 200ms ease-in-out 200ms, left 200ms ease-in-out 200ms;
transition: width 200ms ease-in-out 200ms, left 200ms ease-in-out 200ms;
}
#item_add:hover {
width: 7em;
left: .5em;
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-ms-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
}
#item_add:hover .body {
max-height: 100px;
visibility: visible;
-webkit-transition-delay: 200ms;
-moz-transition-delay: 200ms;
-ms-transition-delay: 200ms;
-o-transition-delay: 200ms;
transition-delay: 200ms;
}
#item_add .body {
max-height: 0;
overflow: hidden;
visibility: hidden;
-webkit-transition: visibility 0s ease-in-out 200ms, max-height 200ms ease-in-out 0s;
-moz-transition: visibility 0s ease-in-out 200ms, max-height 200ms ease-in-out 0s;
-ms-transition: visibility 0s ease-in-out 200ms, max-height 200ms ease-in-out 0s;
-o-transition: visibility 0s ease-in-out 200ms, max-height 200ms ease-in-out 0s;
transition: visibility 0s ease-in-out 200ms, max-height 200ms ease-in-out 0s;
}
#item_add:after {
content: '';
width: 0px;
height: 0px;
-webkit-transform:rotate(360deg);
border-style: solid;
border-width: 5px 0 5px 7px;
border-color: transparent transparent transparent #f7f7f7;
top: 5px;
right: -7px;
position: absolute;
}
#item_add button {
background: none repeat scroll 0px center #fff;
padding: 0.2em 2em;
margin: 3px .2em;
}
use Bottom on #item_add:after instead of Top : http://jsfiddle.net/7n9jxo9c/9/
#item_add:after {
content: '';
width: 0px;
height: 0px;
-webkit-transform:rotate(360deg);
border-style: solid;
border-width: 5px 0 5px 7px;
border-color: transparent transparent transparent #f7f7f7;
bottom: 5px;
right: -7px;
position: absolute;}
I am not sure if I fully understand your question, but I think you can use bottom attribute instead of top.
I mean something like this:
http://jsfiddle.net/7n9jxo9c/8/
I want to create a dropdown menu (for mobile: media queries are already working) but I want to change the :hover effect of my menu button (CSS) to jquery .onclick() function.
I know my code isn't far away of working but I am not beeing able to fix what's wrong.
Anyone could give me a tip?
Heres the Fiddle: http://jsfiddle.net/4G3gg/
HTML
<ul class="navigation">
<img src="img/menu.png" alt="mobile" width="50" height="50" id="mobile"/>
<li class="n1">Home</li>
<li class="n2">Portfolio</li>
<li class="n3">Services</li>
<li class="n4">About</li>
<li class="n5">Contacts</li>
</ul>
CSS
#mobile:hover{background-color: rgba(255, 255, 255, 0.15);}
a{text-decoration: none;color: white; padding: 10px 50px; font-weight: bold}
a:hover { color: #777; font-weight: bold;}
/* NAVIGATION */
.navigation {
list-style: none;
padding: 0;
width: 50px;
height: 40px;
margin: 0 auto;
position: relative;
z-index: 100;
}
.navigation, .navigation a.main {
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}
.navigation:hover, .navigation:hover a.main {
border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
}
.navigation a.main {
display: block;
height: 30px;
font: bold 15px/40px arial, sans-serif;
text-align: center;
text-decoration: none;
color: #FFF;
-webkit-transition: 0.2s ease-in-out;
-o-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
position: relative;
z-index: 100;
}
.navigation:hover a.main {
color: rgba(255,255,255,0.6);
background: rgba(0,0,0,0.04);
}
.navigation li {
width: 200px;
height: 40px;
background: #131313;
font: normal 12px/40px arial, sans-serif !important;
color: #999;
text-align: center;
margin: 0;
-webkit-transform-origin: 50% 0%;
-o-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: perspective(350px) rotateX(-90deg);
-o-transform: perspective(350px) rotateX(-90deg);
transform: perspective(350px) rotateX(-90deg);
box-shadow: 0px 2px 10px rgba(0,0,0,0.05);
-webkit-box-shadow: 0px 2px 10px rgba(0,0,0,0.05);
-moz-box-shadow: 0px 2px 10px rgba(0,0,0,0.05);
}
.navigation li:nth-child(even) { background: #131313; }
.navigation li:nth-child(odd) { background: #1c1c1c; }
.navigation li.n1 {
-webkit-transition: 0.1s linear 0.1s;
-o-transition: 0.1s linear 0.1s;
transition: 0.1s linear 0.1s;
}
.navigation li.n2 {
-webkit-transition: 0.1s linear 0.1s;
-o-transition: 0.1s linear 0.1s;
transition: 0.1s linear 0.1s;
}
.navigation li.n3 {
-webkit-transition: 0.1s linear 0.1s;
-o-transition: 0.1s linear 0.1s;
transition: 0.1s linear 0.1s;
}
.navigation li.n4 {
-webkit-transition:0.1s linear 0.1s;
-o-transition:0.1s linear 0.1s;
transition:0.1s linear 0.1s;
}
.navigation li.n5 {
border-radius: 0px 0px 4px 4px;
-webkit-transition: 0.1s linear 0s;
-o-transition: 0.1s linear 0s;
transition: 0.1s linear 0s;
}
.navigation:hover li {
-webkit-transform: perspective(350px) rotateX(0deg);
-o-transform: perspective(350px) rotateX(0deg);
transform: perspective(350px) rotateX(0deg);
-webkit-transition:0.2s linear 0s;
-o-transition:0.2s linear 0s;
transition:0.2s linear 0s;
}
.navigation:hover .n2 {
-webkit-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.navigation:hover .n3 {
-webkit-transition-delay: 0.15s;
-o-transition-delay: 0.15s;
transition-delay: 0.15s;
}
.navigation:hover .n4 {
transition-delay: 0.2s;
-o-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.navigation:hover .n5 {
-webkit-transition-delay: 0.25s;
-o-transition-delay: 0.25s;
transition-delay: 0.25s;
}
JQUERY/JS
$(".navigation").addClass("js");
$(".navigation").addClass("js").before('<img src="img/menu.png" alt="mobile" width="50" height="50" id="mobile"/>');
$("#mobile").click(function(){
$(".navigation").toggle();
});
Instead of the pseudo selector .navigation:hover use a new class like .navigation.open in css, then use .toggleClass() to toggle the menu visibility in the click() handler
jQuery(function ($) {
//$(".navigation").addClass("js");
//$(".navigation").addClass("js").before('<img src="img/menu.png" alt="mobile" width="50" height="50" id="mobile"/>');
$("#mobile").click(function () {
$(".navigation").toggleClass('open');
});
})
Demo: Fiddle
Note: In your fiddle, you forgot to add jQuery library