Javascript, How do i adjust this js dropdown menu - javascript

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>

Related

The idea is make click on <a> tag to display dropdown menu items

I have a bootstrap menu that is working fine, you can see the code below, but I want to display the dropdown submenu when I clicked each item in the menu.
For example, if I click on the about us item it doesn't display anything, but when I click the plus sign on that item it displays the submenu.
Any suggest to figure out this functionality?
Thanks.
$(document).ready(function(){
if ($(window).width() < 980) {
// mobile menu
$('.hamburger').click(function (event) {
$(this).toggleClass('h-active');
$('.main-nav').toggleClass('slidenav');
});
$('.header-home .main-nav ul li a').click(function (event) {
$('.hamburger').removeClass('h-active');
$('.main-nav').removeClass('slidenav');
});
}
$(".main-nav .fl").on('click', function(event) {
var $fl = $(this);
$(this).parent().siblings().find('.submenu').slideUp();
$(this).parent().siblings().find('.fl').addClass('flaticon-plus').text("+");
if($fl.hasClass('flaticon-plus')){
$fl.removeClass('flaticon-plus').addClass('flaticon-minus').text("-");
}else{
$fl.removeClass('flaticon-minus').addClass('flaticon-plus').text("+");
}
$fl.next(".submenu").slideToggle();
});
});
.hamburger {
position: relative;
width: 40px;
height: 30px;
cursor: pointer;
border: 5px solid transparent;
float: right;
margin-top: 35px
}
.hamburger span {
width: 100%;
height: 2px;
background: #08509e;
display: block;
position: absolute;
right: 0;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all 0.3s
}
.hamburger span.h-top {
top: 0
}
.hamburger span.h-bottom {
bottom: 0;
width: 27px
}
.hamburger span.h-middle {
top: 50%;
margin-top: -1px;
width: 25px
}
.hamburger.h-active span {
width: 100%
}
.hamburger.h-active span.h-top {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
top: 50%;
margin-top: -1px
}
.hamburger.h-active span.h-middle {
-webkit-transform: translateX(-30px);
-moz-transform: translateX(-30px);
-ms-transform: translateX(-30px);
-o-transform: translateX(-30px);
transform: translateX(-30px);
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0
}
.hamburger.h-active span.h-bottom {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
bottom: 50%;
margin-bottom: -1px
}
.bottombar {
background-color: #08509e
}
.main-nav>ul {
padding: 0;
margin: 0;
list-style: none
}
.main-nav>ul>li {
display: inline-block;
position: relative;
margin-left: -4px;
padding-right: 15px
}
.main-nav>ul>li+li {
padding: 0 15px
}
.main-nav>ul>li>a {
text-transform: uppercase;
display: block;
text-decoration: none;
color: #000;
line-height: 45px;
font-size: 16px;
position: relative;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all 0.3s
}
.main-nav>ul>li:hover>a {
color: #00b7d7
}
.submenu {
position: absolute;
left: 0;
top: auto;
right: 0;
min-width: 200px;
list-style: none;
margin: 0;
padding: 0;
padding: 15px;
background: #fff;
border: 1px solid #f7f7f7;
-webkit-border-radius: 0 0 3px 3px;
-moz-border-radius: 0 0 3px 3px;
-ms-border-radius: 0 0 3px 3px;
-o-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
visibility: hidden;
z-index: 9999;
-webkit-box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.3);
box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.3);
-webkit-transform: translateY(20px);
-moz-transform: translateY(20px);
-ms-transform: translateY(20px);
-o-transform: translateY(20px);
transform: translateY(20px);
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all 0.3s
}
.submenu>li {
display: block;
margin: 0 -15px
}
.submenu>li a {
display: block;
padding: 10px 15px;
color: #666;
line-height: 1;
font-size: 14px;
text-decoration: none;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all 0.3s
}
.submenu>li a:hover {
background: #f7f7f7;
color: #08509e
}
.main-nav .fl {
width: 30px;
font-size: 20px;
line-height: 35px;
text-align: center;
color: #fff;
font-style: normal;
position: absolute;
right: 5px;
top: 0;
z-index: 999;
display: none
}
.main-nav .fl:before {
font-size: 14px;
text-align: center;
line-height: 35px
}
.main-nav>ul>li+li .submenu {
left: 25px
}
.main-nav>ul>li:hover .submenu {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
visibility: visible;
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1
}
.content-block {
padding: 70px 0;
position: relative
}
.slideInUp {
visibility: hidden;
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-webkit-transform: translate3d(0, 30px, 0);
-moz-transform: translate3d(0, 30px, 0);
-ms-transform: translate3d(0, 30px, 0);
-o-transform: translate3d(0, 30px, 0);
transform: translate3d(0, 30px, 0);
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out
}
.is-active .slideInUp {
visibility: visible;
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
.slideInUp2 {
-webkit-transition-delay: .3s;
-moz-transition-delay: .3s;
-o-transition-delay: .3s;
transition-delay: .3s
}
#media (min-width:980px) {
.hamburger {
display:none;
}
}
#media (max-width: 980px) {
.main-nav {
position: fixed;
top: 0;
left: 0;
width: 250px;
padding: 20px;
z-index: 99999;
height: 100%;
overflow: auto;
background: #000;
-webkit-overflow-scrolling: touch;
-webkit-transform: translateX(-250px);
-moz-transform: translateX(-250px);
-ms-transform: translateX(-250px);
-o-transform: translateX(-250px);
transform: translateX(-250px);
-webkit-transition: -webkit-transform .3s ease-in;
-moz-transition: -moz-transform .3s ease-in;
-o-transition: -o-transform .3s ease-in;
transition: transform 0.3s ease-in
}
.main-nav.slidenav {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0)
}
.main-nav>ul {
float: none
}
.main-nav>ul>li {
display: block;
padding: 0 !important;
margin-left: 0
}
.main-nav>ul>li>a {
font-size: 14px;
color: #fff;
line-height: 35px
}
.main-nav .fl {
display: block;
line-height: 35px
}
.submenu {
position: static;
min-width: 200px;
background: transparent;
border: none;
padding: 5px 15px 5px 25px;
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
visibility: visible;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none;
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
transition: none;
display: none
}
.submenu>li a {
display: block;
padding: 10px 0;
color: #666;
line-height: 0.8;
font-size: 14px;
color: #ccc;
text-decoration: none;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all 0.3s
}
.submenu>li a:hover {
background: transparent;
color: #08509e
}
.slideInUp {
visibility: visible;
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
transition: none
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<a href="javascript:void(0)" class="hidden-lg hamburger">
<span class="h-top"></span>
<span class="h-middle"></span>
<span class="h-bottom"></span>
</a>
<nav class="main-nav">
<ul>
<li>
ABOUT US
<i class="fl flaticon-plus">+</i>
<ul class="submenu">
<li>Mission Statement</li>
<li>Participating Dentists</li>
<li>Services</li>
</ul>
</li>
<li>
PATIENT
<i class="fl flaticon-plus">+</i>
<ul class="submenu">
<li>Medical History Forms</li>
<li>Before Surgery</li>
<li>After Surgery</li>
<li>Children and Special Needs Adults</li>
<li>Privacy</li>
<li>Rights and Responsibilities</li>
<li>Financial Information</li>
</ul>
</li>
<li>
INFORMATION
<i class="fl flaticon-plus">+</i>
<ul class="submenu">
<li>Privileging Criteria</li>
<li>Privileging Board Members</li>
<li>Request for Information</li>
</ul>
</li>
<li>MAP & DIRECTIONS</li>
<li>NEWS</li>
<li>EMPLOYMENT</li>
<li>CONTACT US</li>
</ul>
<div class="mob-login hidden-lg">
LOGIN
</div>
</nav>

One method is to display + / - as :after pseudo element:
$(document).ready(function(){
if ($(window).width() < 980) {
// mobile menu
$('.hamburger').click(function (event) {
$(this).toggleClass('h-active');
$('.main-nav').toggleClass('slidenav');
});
$('.header-home .main-nav ul li a').click(function (event) {
$('.hamburger').removeClass('h-active');
$('.main-nav').removeClass('slidenav');
});
}
$(".main-nav .fl").on('click', function(event) {
event.preventDefault();
var $fl = $(this);
$(this).parent().siblings().find('.submenu').slideUp();
/* begin change */
$(this).parent().siblings().find('.fl').removeClass('open');
if($fl.hasClass('open')){
$fl.removeClass('open');
}else{
$fl.addClass('open');
}
/* end change */
$fl.next(".submenu").slideToggle();
});
});
.hamburger {
position: relative;
width: 40px;
height: 30px;
cursor: pointer;
border: 5px solid transparent;
float: right;
margin-top: 35px
}
.hamburger span {
width: 100%;
height: 2px;
background: #08509e;
display: block;
position: absolute;
right: 0;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all 0.3s
}
.hamburger span.h-top {
top: 0
}
.hamburger span.h-bottom {
bottom: 0;
width: 27px
}
.hamburger span.h-middle {
top: 50%;
margin-top: -1px;
width: 25px
}
.hamburger.h-active span {
width: 100%
}
.hamburger.h-active span.h-top {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
top: 50%;
margin-top: -1px
}
.hamburger.h-active span.h-middle {
-webkit-transform: translateX(-30px);
-moz-transform: translateX(-30px);
-ms-transform: translateX(-30px);
-o-transform: translateX(-30px);
transform: translateX(-30px);
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0
}
.hamburger.h-active span.h-bottom {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
bottom: 50%;
margin-bottom: -1px
}
.bottombar {
background-color: #08509e
}
.main-nav>ul {
padding: 0;
margin: 0;
list-style: none
}
.main-nav>ul>li {
display: inline-block;
position: relative;
margin-left: -4px;
padding-right: 15px
}
.main-nav>ul>li+li {
padding: 0 15px
}
.main-nav>ul>li>a {
text-transform: uppercase;
display: block;
text-decoration: none;
color: #000;
line-height: 45px;
font-size: 16px;
position: relative;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all 0.3s
}
.main-nav>ul>li:hover>a {
color: #00b7d7
}
.submenu {
position: absolute;
left: 0;
top: auto;
right: 0;
min-width: 200px;
list-style: none;
margin: 0;
padding: 0;
padding: 15px;
background: #fff;
border: 1px solid #f7f7f7;
-webkit-border-radius: 0 0 3px 3px;
-moz-border-radius: 0 0 3px 3px;
-ms-border-radius: 0 0 3px 3px;
-o-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
visibility: hidden;
z-index: 9999;
-webkit-box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.3);
box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.3);
-webkit-transform: translateY(20px);
-moz-transform: translateY(20px);
-ms-transform: translateY(20px);
-o-transform: translateY(20px);
transform: translateY(20px);
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all 0.3s
}
.submenu>li {
display: block;
margin: 0 -15px
}
.submenu>li a {
display: block;
padding: 10px 15px;
color: #666;
line-height: 1;
font-size: 14px;
text-decoration: none;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all 0.3s
}
.submenu>li a:hover {
background: #f7f7f7;
color: #08509e
}
/* begin change */
.main-nav .fl:after {
content: "+";
width: 30px;
font-size: 20px;
line-height: 35px;
text-align: center;
color: #fff;
font-style: normal;
position: absolute;
right: 5px;
top: 0;
z-index: 999;
display: none
}
.main-nav .fl.open:after {
content: "-";
}
/* end change */
.main-nav .fl:before {
font-size: 14px;
text-align: center;
line-height: 35px
}
.main-nav>ul>li+li .submenu {
left: 25px
}
.main-nav>ul>li:hover .submenu {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
visibility: visible;
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1
}
.content-block {
padding: 70px 0;
position: relative
}
.slideInUp {
visibility: hidden;
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-webkit-transform: translate3d(0, 30px, 0);
-moz-transform: translate3d(0, 30px, 0);
-ms-transform: translate3d(0, 30px, 0);
-o-transform: translate3d(0, 30px, 0);
transform: translate3d(0, 30px, 0);
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out
}
.is-active .slideInUp {
visibility: visible;
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
.slideInUp2 {
-webkit-transition-delay: .3s;
-moz-transition-delay: .3s;
-o-transition-delay: .3s;
transition-delay: .3s
}
#media (min-width:980px) {
.hamburger {
display:none;
}
}
#media (max-width: 980px) {
.main-nav {
position: fixed;
top: 0;
left: 0;
width: 250px;
padding: 20px;
z-index: 99999;
height: 100%;
overflow: auto;
background: #000;
-webkit-overflow-scrolling: touch;
-webkit-transform: translateX(-250px);
-moz-transform: translateX(-250px);
-ms-transform: translateX(-250px);
-o-transform: translateX(-250px);
transform: translateX(-250px);
-webkit-transition: -webkit-transform .3s ease-in;
-moz-transition: -moz-transform .3s ease-in;
-o-transition: -o-transform .3s ease-in;
transition: transform 0.3s ease-in
}
.main-nav.slidenav {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0)
}
.main-nav>ul {
float: none
}
.main-nav>ul>li {
display: block;
padding: 0 !important;
margin-left: 0
}
.main-nav>ul>li>a {
font-size: 14px;
color: #fff;
line-height: 35px
}
.main-nav .fl:after {
display: block;
line-height: 35px
}
.submenu {
position: static;
min-width: 200px;
background: transparent;
border: none;
padding: 5px 15px 5px 25px;
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
visibility: visible;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none;
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
transition: none;
display: none
}
.submenu>li a {
display: block;
padding: 10px 0;
color: #666;
line-height: 0.8;
font-size: 14px;
color: #ccc;
text-decoration: none;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all 0.3s
}
.submenu>li a:hover {
background: transparent;
color: #08509e
}
.slideInUp {
visibility: visible;
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
transition: none
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<a href="javascript:void(0)" class="hidden-lg hamburger">
<span class="h-top"></span>
<span class="h-middle"></span>
<span class="h-bottom"></span>
</a>
<nav class="main-nav">
<ul>
<li>
ABOUT US
<ul class="submenu">
<li>Mission Statement</li>
<li>Participating Dentists</li>
<li>Services</li>
</ul>
</li>
<li>
PATIENT
<ul class="submenu">
<li>Medical History Forms</li>
<li>Before Surgery</li>
<li>After Surgery</li>
<li>Children and Special Needs Adults</li>
<li>Privacy</li>
<li>Rights and Responsibilities</li>
<li>Financial Information</li>
</ul>
</li>
<li>
INFORMATION
<ul class="submenu">
<li>Privileging Criteria</li>
<li>Privileging Board Members</li>
<li>Request for Information</li>
</ul>
</li>
<li>MAP & DIRECTIONS</li>
<li>NEWS</li>
<li>EMPLOYMENT</li>
<li>CONTACT US</li>
</ul>
<div class="mob-login hidden-lg">
LOGIN
</div>
</nav>

my mega menu in safari not same as firefox and chrome.. weird css behaviour?

Safari show the overlap text... I have no idea what is happen in safari.
firefox and chrome no overlap text.
here is my screenshot:
safari:
firefox:
PLEASE USE the safari to test the result. I believe that is conflict about my css? jquery should not be a problem
//START MEGA MENU JQUERY
jQuery(document).ready(function($){
//on mobile - open submenu
$('.has-children').children('a').on('click', function(event){
//prevent default clicking on direct children of .has-children
event.preventDefault();
var selected = $(this);
selected.next('ul').removeClass('is-hidden').end().parent('.has-children').parent('ul').addClass('move-out');
});
$('.lg-dropdown-content').menuAim({
activate: function(row) {
$(row).children().addClass('is-active').removeClass('fade-out');
if( $('.lg-dropdown-content .fade-in').length == 0 ) $(row).children('ul').addClass('fade-in');
},
deactivate: function(row) {
$(row).children().removeClass('is-active');
if( $('li.has-children:hover').length == 0 || $('li.has-children:hover').is($(row)) ) {
$('.lg-dropdown-content').find('.fade-in').removeClass('fade-in');
$(row).children('ul').addClass('fade-out')
}
},
exitMenu: function() {
$('.lg-dropdown-content').find('.is-active').removeClass('is-active');
return true;
},
});
//submenu items - go back link
$('.go-back').on('click', function(){
var selected = $(this),
visibleNav = $(this).parent('ul').parent('.has-children').parent('ul');
selected.parent('ul').addClass('is-hidden').parent('.has-children').parent('ul').removeClass('move-out');
});
});
/* BASIC style for nav, you can ingore this part */
a:focus {
text-decoration:none;
}
a {
transition: all 0.3s ease 0s;
text-decoration:none;
}
a:hover {
color: #5ad5f4;
text-decoration: none;
}
a:active, a:hover {
outline: 0 none;
}
ul{
list-style: outside none none;
margin: 0;
padding: 0
}
.lg-dropdown-content {
background-color: #ddd;
}
/* END BASIC style for nav, you can ingore this part */
/* START MEGA MENU CSS */
.back-width {
width: 100%;
}
ul.column-two {
column-count: 2;
-webkit-column-count: 2;
-moz-column-count: 2;
}
.minheight2{
min-height:0px;
}
.lg-dropdown h2,
.lg-dropdown-content a,
.lg-dropdown-content ul a {
height: 50px;
line-height: 50px;
padding: 0 20px;
}
.lg-dropdown {
margin-top: 15px;
z-index: 1;
top: 0;
left: 0;
width: 100%;
background-color: #111433;
color: #ffffff;
visibility: hidden;
position: absolute;
height: auto;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
background-color: transparent;
color: #111433;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
opacity: 0;
-webkit-transform: translateY(30px);
-moz-transform: translateY(30px);
-ms-transform: translateY(30px);
-o-transform: translateY(30px);
transform: translateY(30px);
-webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s, -webkit-transform 0.3s 0s;
-moz-transition: opacity 0.3s 0s, visibility 0s 0.3s, -moz-transform 0.3s 0s;
transition: opacity 0.3s 0s, visibility 0s 0.3s, transform 0.3s 0s;
}
.lg-dropdown.dropdown-is-active {
visibility: visible;
opacity: 1;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
-webkit-transition: opacity 0.3s 0s, visibility 0.3s 0s, -webkit-transform 0.3s 0s;
-moz-transition: opacity 0.3s 0s, visibility 0.3s 0s, -moz-transform 0.3s 0s;
transition: opacity 0.3s 0s, visibility 0.3s 0s, transform 0.3s 0s;
}
.lg-dropdown-content > li{
display: inline-block;
}
.lg-dropdown-content, .lg-dropdown-content ul {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
padding-top: 0;
overflow: visible;
-webkit-transition: -webkit-transform 0.3s;
-moz-transition: -moz-transform 0.3s;
transition: transform 0.3s;
}
.lg-dropdown-content a {
display: block;
color: #000;
height: 50px;
line-height: 50px;
font-size: 1.5rem;
/* truncate text with ellipsis if too long */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
border-top-width: 1px;
border-style: solid;
border-color: #ebebeb;
border:none;
/* Force Hardware Acceleration */
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
-moz-transition: opacity 0.3s, -moz-transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
}
.lg-dropdown-content ul a {
display: block;
color: #111433;
/* truncate text with ellipsis if too long */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
border-top-width: 1px;
border-color: #242643;
border-style: solid;
border:none;
/* Force Hardware Acceleration */
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
-moz-transition: opacity 0.3s, -moz-transform 0.3s;
}
.lg-dropdown-content.is-hidden > li > a, .lg-dropdown-content.move-out > li > a, .lg-dropdown-content ul.is-hidden > li > a, .lg-dropdown-content ul.move-out > li > a {
opacity: 1;
}
.lg-dropdown-content.is-hidden, .lg-dropdown-content ul.is-hidden {
/* push the secondary dropdown items to the right */
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
}
.lg-dropdown-content ul.move-out > li > a{
/* push the dropdown items to the left when secondary dropdown slides in */
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
visibility: hidden;
}
.lg-dropdown-content .see-all a {
color: #5f88c3;
}
.lg-dropdown-content.move-out > li > a{
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
.lg-dropdown-content .lg-menu {
top: 100%;
height: auto;
overflow: hidden;
padding-bottom: 65px;
background-color: #ffffff;
box-shadow: 0 1px 2px rgba(86, 86, 90, 0.5);
}
.lg-dropdown-content .lg-menu.is-hidden {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
.lg-dropdown-content .lg-menu.fade-in {
/* animate fade in */
-webkit-animation: xs-fade-in 0.2s;
-moz-animation: xs-fade-in 0.2s;
animation: xs-fade-in 0.2s;
}
.lg-dropdown-content .lg-menu.fade-out {
/* animate fade out */
-webkit-animation: xs-fade-out 0.2s;
-moz-animation: xs-fade-out 0.2s;
animation: xs-fade-out 0.2s;
}
.lg-dropdown-content .lg-menu > .see-all {
position: absolute;
bottom: 1px;
height: 45px;
text-align: center;
}
.lg-dropdown-content .lg-menu > .see-all a {
margin: 0;
height: 100%;
line-height: 45px;
background: #ebebeb;
pointer-events: auto;
-webkit-transition: color 0.2s, background-color 0.2s;
-moz-transition: color 0.2s, background-color 0.2s;
transition: color 0.2s, background-color 0.2s;
}
.lg-dropdown-content .lg-menu > .see-all a:hover {
color: #ffffff;
background-color: #111433;
}
.lg-dropdown-content .lg-menu > li {
/* 3 column */
width: 33.333%;
float: left;
}
.lg-dropdown-content .lg-menu::before {
/* this is the separation line in the middle of the .lg-menu element */
position: absolute;
content: '';
top: 290px;
left: 15px;
right: 15px;
height: 1px;
width: 100%;
background-color: #ebebeb;
}
.lg-dropdown-content .lg-menu > li > a {
color: #5f88c3;
font-size: 1.6rem;
margin-bottom: 10px;
line-height: 30px;
height: 30px;
pointer-events: none;
}
.lg-dropdown-content .lg-menu > li > a::after, .lg-dropdown-content .lg-menu > li > a::before {
/* hide the arrow */
display: none;
}
.lg-dropdown-content .lg-menu.move-out > li > a {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
.lg-dropdown-content .lg-menu > li {
margin: 20px 0;
border-right: 1px solid #ebebeb;
padding: 0 30px;
height: 250px;
}
.lg-dropdown-content .lg-menu > li > ul {
-webkit-transform: translate(0);
-moz-transform: translate(0);
-ms-transform: translate(0);
-o-transform: translate(0);
transform: translate(0);
position: relative;
height: auto;
}
.lg-dropdown-content .lg-menu > li > ul > .go-back {
display: none;
}
.lg-dropdown-content .lg-menu a {
line-height: 22px;
height: 20px;
font-size: 1.3rem;
padding-left: 0;
}
.lg-dropdown-content .lg-menu ul {
padding-bottom: 25px;
overflow: hidden;
height: auto;
min-height: 100%;
}
.lg-dropdown-content .lg-menu .go-back a {
padding-left: 20px;
}
.lg-dropdown-content .lg-menu .go-back a::before, .lg-dropdown-content .lg-menu .go-back a::after {
left: 0;
}
.lg-dropdown-content .lg-menu .see-all {
/*position: absolute;*/
/*bottom: 0;*/
/*left: 0;*/
width: 100%;
}
.lg-dropdown-content > .has-children > ul {
visibility: hidden;
}
.lg-dropdown-content > .has-children > ul.is-active {
/* when hover over .lg-dropdown-content items - show subnavigation */
visibility: visible;
}
.lg-dropdown-content > .has-children > .lg-menu.is-active > li > ul {
/* if .lg-menu is visible - show also subnavigation */
visibility: visible;
}
.lg-dropdown-content > .has-children > a.is-active {
/* hover effect for .lg-dropdown-content items with subnavigation */
color: #5f88c3;
}
.lg-dropdown-content > .has-children > a.is-active::before, .lg-dropdown-content > .has-children > a.is-active::after {
background: #5f88c3;
}
.has-children > a::before, .go-back a::before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.has-children > a::after, .go-back a::after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.has-children.root-menu > a::after {
-webkit-transform: rotate(130deg);
-moz-transform: rotate(130deg);
-ms-transform: rotate(130deg);
-o-transform: rotate(130deg);
transform: rotate(130deg);
}
.has-children > a {
padding-right: 40px;
}
.has-children > a::before, .has-children > a::after {
/* arrow goes on the right side - children navigation */
right: 20px;
-webkit-transform-origin: 9px 50%;
-moz-transform-origin: 9px 50%;
-ms-transform-origin: 9px 50%;
-o-transform-origin: 9px 50%;
transform-origin: 9px 50%;
}
.lg-dropdown-content .go-back a {
padding-left: 40px;
}
.lg-dropdown-content .go-back a::before, .lg-dropdown-content .go-back a::after {
/* arrow goes on the left side - go back button */
left: 20px;
-webkit-transform-origin: 1px 50%;
-moz-transform-origin: 1px 50%;
-ms-transform-origin: 1px 50%;
-o-transform-origin: 1px 50%;
transform-origin: 1px 50%;
}
.root-menu.has-children > a::before, .root-menu.has-children > a::after {
background: #fff;
}
.has-children > a::before, .has-children > a::after, .go-back a::before, .go-back a::after {
/* arrow icon in CSS - for element with nested unordered lists */
content: '';
position: absolute;
top: 50%;
margin-top: 1px;
display: inline-block;
height: 2px;
width: 10px;
background: #ffffff;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
#media only screen and (min-width: 1024px) {
.has-children > a::before, .has-children > a::after, .go-back a::before, .go-back a::after {
background: #b3b3b3;
}
}
<head>
<!-- css bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- import jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/kamens/jQuery-menu-aim/master/jquery.menu-aim.js"></script>
<!-- END import jquery -->
</head>
<!-- header start -->
<header class="header-pos navbar-fixed-top">
<div class="header-bottom-area" >
<div class="container-fluid">
<div class="inner-container">
<div class="row">
<div class="col-lg-12" style="padding:0px;">
<nav class="lg-dropdown dropdown-is-active">
<ul class="lg-dropdown-content">
<li class="has-children root-menu">
Products
<ul class="lg-menu is-hidden fade-out">
<li class="see-all">All Products</li>
<li class="has-children">Fashion
<ul class="is-hidden column-two move-out">
<li class="go-back">Products</li>
<li class="see-all">All Fashion</li>
<li class="has-children">Women Fashion
<ul class="column-two menu-level-2">
<li class="go-back back-width">Back</li>
<li class="see-all">All Women Fashion</li>
<li>Tudung</li>
<li>safari</li>
<li>safari 2</li>
<li>Jubah</li>
<li>Cheong Sam</li>
</ul>
</li>
<li>Baby Fashion</li>
<li>Man Fashion</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
</header>

Safari is bugged in column-count rules.
Remove in class .lg-dropdown-content .lg-menu ul the min-height in % rules or define it in px.

overlay issue with menu

I'm having the issue with the overlay of a menu, when I open the menu the content in the background is still visible, i have tried playing with the z-index but it doesn't help.
The paragraph is seen in light gray when you open the menu .
$("#menu").click(function() {
$(".nav").toggleClass('is-open');
$(".overlay").toggleClass('is-visible');
$(this).toggleClass('open');
});
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
html {
color: #222;
font-family: Avenir, sans-serif;
}
a {
color: #111;
display: inline-block;
text-decoration: none;
padding: 10px 0;
text-transform: uppercase;
font-weight: lighter;
opacity: .7;
transition: all 0.4s ease-in-out;
}
a:hover {
opacity: 1;
}
.nav {
text-align: right;
float: right;
}
.nav li {
transition-delay: 0.15s;
transform: translate(30px, 0);
opacity: 0;
transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}
.nav.is-open li {
transform: translate(0px, 0);
opacity: 1;
}
.nav.is-open li:nth-child(1) {
transition-delay: 0.1s;
}
.nav.is-open li:nth-child(2) {
transition-delay: 0.15s;
}
.nav.is-open li:nth-child(3) {
transition-delay: 0.2s;
}
.nav.is-open li:nth-child(4) {
transition-delay: 0.25s;
}
.nav.is-open li:nth-child(5) {
transition-delay: .3s;
}
.nav.is-open li a {
color: #fff;
}
#menu {
float: right;
width: 25px;
height: 15px;
position: relative;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .3s ease-in-out;
-moz-transition: .3s ease-in-out;
-o-transition: .3s ease-in-out;
transition: .3s ease-in-out;
cursor: pointer;
}
#menu span {
display: block;
position: absolute;
height: 2px;
width: 100%;
background: #222;
border-radius: 2px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .15s ease-in-out;
-moz-transition: .15s ease-in-out;
-o-transition: .15s ease-in-out;
transition: .15s ease-in-out;
}
#menu span:nth-child(1) {
top: 0px;
}
#menu span:nth-child(2),
#menu span:nth-child(3) {
top: 9px;
}
#menu span:nth-child(4) {
top: 18px;
}
#menu.open span:nth-child(1) {
top: 9px;
width: 0%;
left: 50%;
}
#menu.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#menu.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#menu.open span:nth-child(4) {
top: 9px;
width: 0%;
left: 50%;
}
#menu.open span {
background: #fff;
}
header {
float: right;
padding: 50px;
}
header {
position: relative;
}
.overlay {
background: transparent;
width: 100%;
height: 100vh;
z-index: -4;
transition: background .5s ease-in-out;
}
.overlay.is-visible {
background: #000;
position: absolute;
z-index: -2;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<a id="menu" href="#">
<span></span>
<span></span>
<span></span>
<span></span>
</a>
<nav>
<ul class="nav">
<li>Home
</li>
<li>About
</li>
<li>Portfolio
</li>
<li>Blog
</li>
<li>Contact
</li>
</ul>
</nav>
</header>
<div class="overlay">Hello,<br>this is the para that is still visible when you open the menu</div>

If you want to have different colors per paragraph, I suggest you to use a pseudo-element inside your .overlay element. You'll be able to colorize it, and it will hide your content:
.overlay {
position: relative;
...
}
.overlay.is-visible:after {
content: '';
background: #000;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
}
Whole snippet:
$("#menu").click(function() {
$(".nav").toggleClass('is-open');
$(".overlay").toggleClass('is-visible');
$(this).toggleClass('open');
});
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
html {
color: #222;
font-family: Avenir, sans-serif;
}
a {
color: #111;
display: inline-block;
text-decoration: none;
padding: 10px 0;
text-transform: uppercase;
font-weight: lighter;
opacity: .7;
transition: all 0.4s ease-in-out;
}
a:hover {
opacity: 1;
}
.nav {
text-align: right;
float: right;
}
.nav li {
transition-delay: 0.15s;
transform: translate(30px, 0);
opacity: 0;
transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}
.nav.is-open li {
transform: translate(0px, 0);
opacity: 1;
}
.nav.is-open li:nth-child(1) {
transition-delay: 0.1s;
}
.nav.is-open li:nth-child(2) {
transition-delay: 0.15s;
}
.nav.is-open li:nth-child(3) {
transition-delay: 0.2s;
}
.nav.is-open li:nth-child(4) {
transition-delay: 0.25s;
}
.nav.is-open li:nth-child(5) {
transition-delay: .3s;
}
.nav.is-open li a {
color: #fff;
}
#menu {
float: right;
width: 25px;
height: 15px;
position: relative;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .3s ease-in-out;
-moz-transition: .3s ease-in-out;
-o-transition: .3s ease-in-out;
transition: .3s ease-in-out;
cursor: pointer;
}
#menu span {
display: block;
position: absolute;
height: 2px;
width: 100%;
background: #222;
border-radius: 2px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .15s ease-in-out;
-moz-transition: .15s ease-in-out;
-o-transition: .15s ease-in-out;
transition: .15s ease-in-out;
}
#menu span:nth-child(1) {
top: 0px;
}
#menu span:nth-child(2),
#menu span:nth-child(3) {
top: 9px;
}
#menu span:nth-child(4) {
top: 18px;
}
#menu.open span:nth-child(1) {
top: 9px;
width: 0%;
left: 50%;
}
#menu.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#menu.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#menu.open span:nth-child(4) {
top: 9px;
width: 0%;
left: 50%;
}
#menu.open span {
background: #fff;
}
header {
float: right;
padding: 50px;
}
header {
position: relative;
}
.overlay {
position: relative;
background: transparent;
width: 100%;
height: 100vh;
z-index: -4;
transition: background .5s ease-in-out;
}
.overlay.is-visible:after {
content: '';
background: #000;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<a id="menu" href="#">
<span></span>
<span></span>
<span></span>
<span></span>
</a>
<nav>
<ul class="nav">
<li>Home
</li>
<li>About
</li>
<li>Portfolio
</li>
<li>Blog
</li>
<li>Contact
</li>
</ul>
</nav>
</header>
<div class="overlay">Hello,<br>this is the para that is still visible when you open the menu</div>

Below code is working for your.
$("#menu").click(function () {
$(".nav").toggleClass('is-open');
$(".overlay").toggleClass('is-visible');
$(this).toggleClass('open');
});
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
html {
color: #222;
font-family: Avenir, sans-serif;
}
a {
color: #111;
display: inline-block;
text-decoration: none;
padding: 10px 0;
text-transform: uppercase;
font-weight: lighter;
opacity: .7;
transition: all 0.4s ease-in-out;
}
a:hover {
opacity: 1;
}
.nav {
text-align: right;
float: right;
}
.nav li {
transition-delay: 0.15s;
transform: translate(30px, 0);
opacity: 0;
transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}
.nav.is-open li {
transform: translate(0px, 0);
opacity: 1;
}
.nav.is-open li:nth-child(1) {
transition-delay: 0.1s;
}
.nav.is-open li:nth-child(2) {
transition-delay: 0.15s;
}
.nav.is-open li:nth-child(3) {
transition-delay: 0.2s;
}
.nav.is-open li:nth-child(4) {
transition-delay: 0.25s;
}
.nav.is-open li:nth-child(5) {
transition-delay: .3s;
}
.nav.is-open li a {
color: #fff;
}
#menu {
float: right;
width: 25px;
height: 15px;
position: relative;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .3s ease-in-out;
-moz-transition: .3s ease-in-out;
-o-transition: .3s ease-in-out;
transition: .3s ease-in-out;
cursor: pointer;
}
#menu span {
display: block;
position: absolute;
height: 2px;
width: 100%;
background: #222;
border-radius: 2px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .15s ease-in-out;
-moz-transition: .15s ease-in-out;
-o-transition: .15s ease-in-out;
transition: .15s ease-in-out;
}
#menu span:nth-child(1) {
top: 0px;
}
#menu span:nth-child(2),
#menu span:nth-child(3) {
top: 9px;
}
#menu span:nth-child(4) {
top: 18px;
}
#menu.open span:nth-child(1) {
top: 9px;
width: 0%;
left: 50%;
}
#menu.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#menu.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#menu.open span:nth-child(4) {
top: 9px;
width: 0%;
left: 50%;
}
#menu.open span {
background: #fff;
}
header {
float: right;
padding: 50px;
}
header {
position: relative;
z-index:2
}
.overlay {
background: transparent;
width: 100%;
height: 100vh;
z-index: -4;
transition: background .5s ease-in-out;
position:absolute;
top:0px;
}
.overlay-2 {
width: 100%;
}
.overlay.is-visible {
background: #000;
position: absolute;
z-index: 1;
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<a id="menu" href="#">
<span></span>
<span></span>
<span></span>
<span></span>
</a>
<nav>
<ul class="nav">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div class="overlay-2">Hello, <br> this is the para that is still visible when you open the menu</div>
<div class="overlay"></div>
Or
You want single div with .overlay then write below line in css.
.overlay.is-visible {
color:transparent;
}

In the js code:
$("#menu").click(function() {
$(".nav").toggleClass('is-open');
$(".overlay").toggleClass('is-visible');
$(".overlay p").toggle('display');
$(this).toggleClass('open');
});
And in the html add p tag to content :
<div class="overlay"><p>Hello, <br> this is the para that is still visible when you open the menu</p></div>

Getting image to display after hiding it

I am working on a slideout nav screen. I got the horizontal slide out menu to work perfectly without media queries, but when I tried to add my slide out navigation menu to my normal navigation menu, I cannot get the three line hamburger menu image to display when in a media screen on max-width: 640px;. I hide the nav-btn (menu image) when the normal navigation menu is displaying, but I want the nav-btn to display when I get to the smaller screen size to allow me to open the menu.
Does anyone see why my nav-btn will not display within my media query?
//open the lateral panel
$('.nav-btn').on('click', function(event){
event.preventDefault();
$('.nav-panel').addClass('is-visible');
});
//clode the lateral panel
$('.nav-panel').on('click', function(event){
if( $(event.target).is('.nav-panel') || $(event.target).is('.nav-panel-close') ) {
$('.nav-panel').removeClass('is-visible');
event.preventDefault();
}
});
.nav_list {
text-decoration: none;
background-color: #F0F0F0;
margin: 0;
list-style: none;
text-align: right;
width: 100%;
padding: 0;
}
.nav_list > a {
display: inline-block;
padding: 25px 15px;
text-decoration: none;
}
.nav_list > a > li {
text-decoration: none;
font-size: 1.2em;
color: #45a5ba;
}
.nav_list > a:hover {
color: #FFF;
background-color: #CCC;
}
.nav-btn {
display: none;
}
/*.nav-panel {
display: none;
}*/
#media screen and (max-width:640px) {
.header {
display: none;
}
.nav-panel {
display: block;
}
.nav_list {
text-decoration: none;
background-color: #F0F0F0;
margin: 0;
list-style: none;
text-align: right;
width: 100%;
padding: 0;
}
.nav_list > a {
display: block;
padding: 15px 15px;
text-decoration: none;
/*border-bottom: 1px solid #FFF;*/
}
.nav_list > a > li {
text-decoration: none;
font-size: 1.2em;
color: #45a5ba;
}
.nav_list > a:hover {
color: #FFF;
background-color: #CCC;
}
.nav-btn {
position: absolute;
display: block;
right: 2%;
top: 3%;
}
.nav-panel {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
visibility: hidden;
-webkit-transition: visibility 1s;
-moz-transition: visibility 1s;
transition: visibility 1s;
}
.nav-panel::after {
/* overlay layer */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: transparent;
-webkit-transition: background 0.8s 0.8s;
-moz-transition: background 0.8s 0.8s;
transition: background 0.8s 0.8s;
}
.nav-panel.is-visible {
visibility: visible;
-webkit-transition: visibility 0s 0s;
-moz-transition: visibility 0s 0s;
transition: visibility 0s 0s;
}
.nav-panel.is-visible::after {
background: rgba(0, 0, 0, 0.6);
-webkit-transition: background 0.3s 0s;
-moz-transition: background 0.3s 0s;
transition: background 0.3s 0s;
}
.nav-panel.is-visible .nav-panel-close::before {
-webkit-animation: cd-close-1 0.6s 0.3s;
-moz-animation: cd-close-1 0.6s 0.3s;
animation: cd-close-1 0.6s 0.3s;
}
.nav-panel.is-visible .nav-panel-close::after {
-webkit-animation: cd-close-2 0.6s 0.3s;
-moz-animation: cd-close-2 0.6s 0.3s;
animation: cd-close-2 0.6s 0.3s;
}
#-webkit-keyframes cd-close-1 {
0%, 50% {
-webkit-transform: rotate(0);
}
100% {
-webkit-transform: rotate(45deg);
}
}
#-moz-keyframes cd-close-1 {
0%, 50% {
-moz-transform: rotate(0);
}
100% {
-moz-transform: rotate(45deg);
}
}
#keyframes cd-close-1 {
0%, 50% {
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
}
#-webkit-keyframes cd-close-2 {
0%, 50% {
-webkit-transform: rotate(0);
}
100% {
-webkit-transform: rotate(-45deg);
}
}
#-moz-keyframes cd-close-2 {
0%, 50% {
-moz-transform: rotate(0);
}
100% {
-moz-transform: rotate(-45deg);
}
}
#keyframes cd-close-2 {
0%, 50% {
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
}
.nav-panel-header {
position: fixed;
width: 70%;
height: 50px;
line-height: 50px;
background: rgba(255, 255, 255, 0.96);
z-index: 2;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
-webkit-transition: top 0.3s 0s;
-moz-transition: top 0.3s 0s;
transition: top 0.3s 0s;
}
#nav-slide-title {
font-weight: bold;
color: #45a5ba;
padding-left: 5%;
}
.from-right .nav-panel-header, .from-left .nav-panel-header {
top: -50px;
}
.from-right .nav-panel-header {
right: 0;
}
.from-left .nav-panel-header {
left: 0;
}
.is-visible .nav-panel-header {
top: 0;
-webkit-transition: top 0.3s 0.3s;
-moz-transition: top 0.3s 0.3s;
transition: top 0.3s 0.3s;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<header class="header">
<div class="header_wrap">
<div class="logo">Optimum Designs</div>
<nav>
<img src="http://optimumwebdesigns.com/icons/mobile_menu_bttn.png" style="height: 28px; width: 28px;">
<!-- <span class="nav-btn"></span> -->
<ul class="nav_list">
<li>Home</li>
<li>Work</li>
<li>Approach</li>
<li>Company</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
<main class="cd-main-content">
<h1>Slide In Panel</h1>
</main>
<div class="nav-panel from-right">
<header class="nav-panel-header">
<div id="nav-slide-title">Menu</div>
Close
</header>
<div class="nav-panel-container">
<div class="nav-panel-content">
<ul class="nav_list">
<li>Home</li>
<li>Work</li>
<li>Approach</li>
<li>Company</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div> <!-- nav-panel-content -->
</div> <!-- nav-panel-container -->
</div> <!-- nav-panel -->

I figured it out. I had the nav-btn within my header div. I was doing this .header {display: none;} which was not allowing my button to show within my media query.
For those that looked, thanks.

Change css:hover effect to jquery.onclick()

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

Categories