We Keep Coding

Hamburger menu sliding

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>

Adding another nav item using javascript and css

I have created a burger menu, and copied this code https://codepen.io/woodwoerk/pen/BoEGYZ?q=burger+menu&limit=all&type=type-pens. However in this example there is three items in the drop down menu and in my website I have four. I tried adding another item to the drop down and changing the css and js however now I have a blank space where the new item has been added.
Here is what the menu looks like in the browser
Not sure how I can fix this to show all four items in the drop down. Below is the code I have
var Menu = {
el: {
menu: $('.menu'),
menuTop: $('.menu-top'),
menuSecond: $('.menu-second'),
menuClose: $('.menu-close'),
menuMiddle: $('.menu-middle'),
menuBottom: $('.menu-bottom'),
menuText: $('.menu-text')
},
init: function() {
Menu.bindUIactions();
},
bindUIactions: function() {
Menu.el.menu.on('click', function(event) {
Menu.activateMenu(event);
event.preventDefault();
});
},
activateMenu: function() {
Menu.el.menuTop.toggleClass('menu-top-expand expand');
Menu.el.menuSecond.toggleClass('menu-second-expand expand');
Menu.el.menuMiddle.toggleClass('menu-middle-expand expand');
Menu.el.menuBottom.toggleClass('menu-bottom-expand expand');
Menu.el.menuText.toggleClass('menu-text-expand');
Menu.el.menuClose.toggleClass('menu-close-visible');
}
};
//Stop menu item click closing the menu
$(".menu .menu-global").click(function(e) {
e.stopPropagation();
});
Menu.init();
span {
display: inline-block;
vertical-align: middle;
color: white;
}
ul {
display: block;
list-style-type: none;
text-align: right;
}
a {
color: #FFF;
}
a:hover {
opacity: 0.7;
}
.menu {
margin: 0 20px 0 0;
padding-left: 1.25em;
cursor: pointer;
position: relative;
width: 30px;
height: 50px;
text-align: right;
float:right;
}
.menu-close {
font-size: 0em;
opacity: 0;
text-align: center;
font-weight: bold;
-webkit-transition: 0.2s;
transition: 0.2s;
}
.menu-close-visible {
font-size: 2em;
opacity: 1;
-webkit-transition: 0.2s 0.4s;
transition: 0.2s 0.4s;
}
.menu-global {
z-index: -1;
position: absolute;
left: 0;
height: 10px;
width: 100%;
background-color: #ffffff;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: 0.2s;
transition: 0.2s;
}
.menu-global:hover {
left: 10px;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
.menu-top {
top: 0;
}
.menu-second {
top: 18px;
}
.menu-middle {
top: 36px;
}
.menu-bottom {
top: 54px;
}
.menu-text{
opacity: 0;
font-size: 0em;
padding: 10px 0;
-webkit-transition: 0.1s;
transition: 0.1s;
}
.expand {
box-shadow: rgba(0, 0, 0, 0.1) -2.5px 5px 7.5px, rgba(0, 0, 0, 0.1) 2.5px 5px 7.5px;
width: 200px;
height: 50px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.menu-top-expand {
top: 50px;
background: #FFF8E1;
-webkit-transition: all 0.5s 0.3s, left 0.1s;
transition: all 0.5s 0.3s, left 0.1s;
}
.menu-second-expand {
top: 100px;
background: #FFF8E1;
-webkit-transition: all 0.5s 0.2s, left 0.1s;
transition: all 0.5s 0.2s, left 0.1s;
}
.menu-middle-expand {
top: 150px;
background: #FFECB3;
-webkit-transition: all 0.5s 0.1s, left 0.1s;
transition: all 0.5s 0.1s, left 0.1s;
}
.menu-bottom-expand {
top: 200px;
height: 150px;
background: #FFE082;
-webkit-transition: all 0.5s, left 0.1s;
transition: all 0.5s, left 0.1s;
}
.menu-text-expand{
color: #000000;
opacity: 0.8;
padding: 10px;
font-size: 1.3em;
-webkit-transition: all 0.2s 0.7s, font-size 0.1s;
transition: all 0.2s 0.7s, font-size 0.1s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
<div class="menu-close fa fa-close"></div>
<li class="menu-global menu-top"><span class="menu-text">Home</span></li>
<li class="menu-global menu-second"><span class="menu-text">View Holiday Gallery</span></li>
<li class="menu-global menu-middle"><span class="menu-text">View Itinerary</span></li>
<li class="menu-global menu-bottom"><span class="menu-text">Settings</span></li>
</ul>

If you are adding another menu element you need to make sure you add all the proper required additions in your code. From hacking through it i got this:
First add the item in the html, and refer to it as bottom2 from now on:
<li class="menu-global menu-bottom2"><span class="menu-text">My ExtraElement</span></li>
notice the class is now unique: menu-bottom2. That is so the the margin from top would be properly aggregated to display it below the first .menu-bottom element.
now for the css add this:
.menu-bottom2 {
top: 54px;
}
and this:
.menu-bottom2-expand {
top: 200px;
background: #FFECB3;
-webkit-transition: all 0.5s 0.1s, left 0.1s;
transition: all 0.5s 0.1s, left 0.1s;
}
and finally the javascript:
in the menu.el:
menuBottom2: $('.menu-bottom2'),
in the menu.activateMenu:
Menu.el.menuBottom2.toggleClass('menu-bottom2-expand expand');
and here is the full codepen:
https://codepen.io/anon/pen/vdKYxb

Display Image Uploaded Area in Dropzone

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;
}

Javascript, How do i adjust this js dropdown menu

I want to have the dropdown menu to close when i click outside it and the arrow turns grey after i clicked on it once , I want it to be same color all the time (black).
http://codepen.io/anon/pen/YXMaGJ
var dropdown = document.querySelectorAll('.dropdown');
var dropdownArray = Array.prototype.slice.call(dropdown,0);
dropdownArray.forEach(function(el){
var button = el.querySelector('a[data-toggle="dropdown"]'),
menu = el.querySelector('.dropdown-menu'),
arrow = button.querySelector('i.icon-arrow');
button.onclick = function(event) {
if(!menu.hasClass('show')) {
menu.classList.add('show');
menu.classList.remove('hide');
arrow.classList.add('open');
arrow.classList.remove('close');
event.preventDefault();
}
else {
menu.classList.remove('show');
menu.classList.add('hide');
arrow.classList.remove('open');
arrow.classList.add('close');
event.preventDefault();
}
};
})
Element.prototype.hasClass = function(className) {
return this.className && new RegExp("(^|\\s)" + className + "(\\s|$)").test(this.className);
};

Here I am posting complete html file with your snippets of code you just need to set up it locally and run it in browser..
check below code
<html>
<head>
<style type="text/css" rel="stylesheet">
.drop_container {
position:absolute;
right:25px;
width: 150px;
padding: 0;
font-family: 'Open Sans', sans-serif;
}
.drop_container > ul {
list-style: none;
padding: 0;
margin: 0 0 20px 0;
}
.dropdown a {
text-decoration: none;
}
.dropdown [data-toggle="dropdown"] {
display: block;
position: relative;
font-family: 'Open Sans', sans-serif;
padding: 10px 10px;
margin: 0;
outline: 0;
font-size: 1em;
text-decoration: none;
white-space: nowrap;
word-wrap: normal;
vertical-align: middle;
cursor: pointer;
border-radius: 2px;
}
.dropdown [data-toggle="dropdown"] {
color: black;
}
.dropdown [data-toggle="dropdown"]:hover {
}
.dropdown .icon-arrow {
position: absolute;
display: block;
font-size: 0.6em;
color: black;
top: 14px;
right: 60px;
}
.dropdown .icon-arrow.open {
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
transform: rotate(-180deg);
-webkit-transition: -webkit-transform 0.4s;
-moz-transition: -moz-transform 0.4s;
-o-transition: -o-transform 0.4s;
transition: transform 0.4s;
}
.dropdown .icon-arrow.close {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: -webkit-transform 0.4s;
-moz-transition: -moz-transform 0.4s;
-o-transition: -o-transform 0.4s;
transition: transform 0.4s;
}
.dropdown .icon-arrow:before {
content: '\25BC';
}
.dropdown .dropdown-menu {
max-height: 0;
overflow: hidden;
list-style: none;
padding: 0;
margin: 0;
}
.dropdown .dropdown-menu li {
padding: 0;
}
.dropdown .dropdown-menu li a {
display: block;
color: #6e6e6e;
background: #eeeeee;
-webkit-box-shadow: 0 1px 0 white inset, 0 -1px 0 #d4d4d4 inset;
-moz-box-shadow: 0 1px 0 white inset, 0 -1px 0 #d4d4d4 inset;
box-shadow: 0 1px 0 white inset, 0 -1px 0 #d4d4d4 inset;
text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.3);
padding: 10px 10px;
}
.dropdown .dropdown-menu li a:hover {
background: #f6f6f6;
}
.dropdown .show, .dropdown .hide {
-webkit-transform-origin: 50% 0%;
-moz-transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
-o-transform-origin: 50% 0%;
transform-origin: 50% 0%;
}
.dropdown .show {
display: block;
max-height: 9999px;
-webkit-transform: scaleY(1);
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-o-transform: scaleY(1);
transform: scaleY(1);
animation: showAnimation 0.5s ease-in-out;
-moz-animation: showAnimation 0.5s ease-in-out;
-webkit-animation: showAnimation 0.5s ease-in-out;
-webkit-transition: max-height 1s ease-in-out;
-moz-transition: max-height 1s ease-in-out;
-o-transition: max-height 1s ease-in-out;
transition: max-height 1s ease-in-out;
}
.dropdown .hide {
max-height: 0;
-webkit-transform: scaleY(0);
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-o-transform: scaleY(0);
transform: scaleY(0);
animation: hideAnimation 0.4s ease-out;
-moz-animation: hideAnimation 0.4s ease-out;
-webkit-animation: hideAnimation 0.4s ease-out;
-webkit-transition: max-height 0.6s ease-out;
-moz-transition: max-height 0.6s ease-out;
-o-transition: max-height 0.6s ease-out;
transition: max-height 0.6s ease-out;
}
body {
width:100%;
height:100%;
}
</style>
<script src=" http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('body').click(function(){
if($('.dropdown-menu').hasClass('show')){
$('.dropdown-menu').addClass('hide').removeClass('show');
$('i.icon-arrow').addClass('close').removeClass('open');
}
});
var dropdown = document.querySelectorAll('.dropdown');
var dropdownArray = Array.prototype.slice.call(dropdown,0);
dropdownArray.forEach(function(el){
var button = el.querySelector('a[data-toggle="dropdown"]'),
menu = el.querySelector('.dropdown-menu'),
arrow = button.querySelector('i.icon-arrow');
button.onclick = function(event) {
event.stopPropagation();
if($('.dropdown-menu').hasClass('show')) {
$('.dropdown-menu').addClass('hide').removeClass('show');
$('i.icon-arrow').addClass('close').removeClass('open');
}
else {
$('.dropdown-menu').addClass('show').removeClass('hide');
$('i.icon-arrow').addClass('open').removeClass('close');
}
};
});
});
</script>
</head>
<body>
<div class="drop_container">
<ul>
<li class="dropdown">
Hi<i class="icon-arrow"></i>
<ul class="dropdown-menu">
<li>Summary</li>
<li>Purchase History</li>
<li>User Settings</li>
<li>Logout</li>
</ul>
</li>
</ul>
</div>
</body>
</html>

Showing content by sliding left and up

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/