Excuse me. Is there any issues with Bootstraps when using CSS3 (I can't remove bootstraps because they're needed for my site). Here is the code:
<form onsubmit="submitFn(this, event);">
<div id="search-wrapper">
<div id="input-holder">
<input type="text" id="search-input" placeholder="Type to search" />
<button id="search-icon" onclick="searchToggle(this, event);"><span></span></button>
</div>
<span id="close" onclick="searchToggle(this, event);"></span>
<div id="result-container">
</div>
</div>
</form>
html,body {
height: 100%;
}
body {
padding: 0px;
margin:0px;
background-position: center;
background-size: cover; background-attachment: fixed;
background-repeat: no-repeat;
background-color: aqua;
}
#search-wrapper {
position: absolute;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
top:50%;
left:50%;
}
#search-wrapper.active {}
#search-wrapper #input-holder {
overflow: hidden;
height: 70px;
background: rgba(255,255,255,0);
border-radius:6px;
position: relative;
width:70px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#search-wrapper.active #input-holder {
border-radius: 50px;
width:450px;
background: rgba(34, 215, 228, 0.5);
-webkit-transition: all .5s cubic-bezier(0.000, 0.105, 0.035, 1.570);
-moz-transition: all .5s cubic-bezier(0.000, 0.105, 0.035, 1.570);
transition: all .5s cubic-bezier(0.000, 0.105, 0.035, 1.570);
}
#search-wrapper #input-holder #search-input {
width:100%;
height: 50px;
padding:0px 70px 0 20px;
opacity: 0;
position: absolute;
top:0px;
left:0px;
background: transparent;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border:none;
outline:none;
font-family:"Open Sans", Arial, Verdana;
font-size: 16px;
font-weight: 400;
line-height: 20px;
color:#FFF;
-webkit-transform: translate(0, 60px);
-moz-transform: translate(0, 60px);
transform: translate(0, 60px);
-webkit-transition: all .3s cubic-bezier(0.000, 0.105, 0.035, 1.570);
-moz-transition: all .3s cubic-bezier(0.000, 0.105, 0.035, 1.570);
transition: all .3s cubic-bezier(0.000, 0.105, 0.035, 1.570);
-webkit-transition-delay: 0.3s;
-moz-transition-delay: 0.3s;
transition-delay: 0.3s;
}
#search-wrapper.active #input-holder #search-input {
opacity: 1;
-webkit-transform: translate(0, 10px);
-moz-transform: translate(0, 10px);
transform: translate(0, 10px);
}
#search-wrapper #input-holder #search-icon {
width:70px;
height:70px;
border:none;
border-radius:6px;
background: #FFF;
padding:0px;
outline:none;
position: relative;
z-index: 2;
float:right;
cursor: pointer;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#search-wrapper.active #input-holder #search-icon {
width: 50px;
height:50px;
margin: 10px;
border-radius: 30px;
}
#search-wrapper #input-holder #search-icon span {
width:22px !important;
height:22px !important;
display: inline-block !important;
vertical-align: middle !important;
position:relative !important;
-webkit-transform: rotate(45deg) !important;
-moz-transform: rotate(45deg) !important;
transform: rotate(45deg) !important;
-webkit-transition: all .4s cubic-bezier(0.650, -0.600, 0.240, 1.650) !important;
-moz-transition: all .4s cubic-bezier(0.650, -0.600, 0.240, 1.650) !important;
transition: all .4s cubic-bezier(0.650, -0.600, 0.240, 1.650) !important;
}
#search-wrapper.active #input-holder #search-icon span {
-webkit-transform: rotate(-45deg) !important;
-moz-transform: rotate(-45deg) !important;
transform: rotate(-45deg) !important;
}
#search-wrapper #input-holder #search-icon span::before, #search-wrapper #input-holder #search-icon span::after {
position: absolute !important;
content:'' !important;
}
#search-wrapper #input-holder #search-icon span::before {
width: 4px !important;
height: 11px !important;
left: 9px !important;
top: 18px !important;
border-radius: 2px !important;
background: aqua !important;
}
#search-wrapper #input-holder #search-icon span::after {
width: 14px !important;
height: 14px !important;
left: 0px !important;
top: 0px !important;
border-radius: 16px !important;
border: 4px solid aqua !important;
}
#search-wrapper #close {
position: absolute;
z-index: 1;
top:24px;
right:20px;
width:25px;
height:25px;
cursor: pointer;
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
transform: rotate(-180deg);
-webkit-transition: all .3s cubic-bezier(0.285, -0.450, 0.935, 0.110);
-moz-transition: all .3s cubic-bezier(0.285, -0.450, 0.935, 0.110);
transition: all .3s cubic-bezier(0.285, -0.450, 0.935, 0.110);
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
transition-delay: 0.2s;
}
#search-wrapper.active #close {
right:-50px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all .6s cubic-bezier(0.000, 0.105, 0.035, 1.570);
-moz-transition: all .6s cubic-bezier(0.000, 0.105, 0.035, 1.570);
transition: all .6s cubic-bezier(0.000, 0.105, 0.035, 1.570);
-webkit-transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
transition-delay: 0.5s;
}
#search-wrapper #close::before, #search-wrapper #close::after {
position:absolute;
content:'';
background: #FFF;
border-radius: 2px;
}
#search-wrapper #close::before {
width: 5px;
height: 25px;
left: 10px;
top: 0px;
}
#search-wrapper #close::after {
width: 25px;
height: 5px;
left: 0px;
top: 10px;
}
#search-wrapper #result-container {
width: 100%;
position: absolute;
top:80px;
left:0px;
text-align: center;
font-family: "Open Sans", Arial, Verdana;
font-size: 14px;
display:none;
color:#B7B7B7;
}
#media screen and (max-width: 560px) {
#search-wrapper.active #input-holder {width:200px;}
}
function searchToggle(obj, evt) {
const container = $(obj).closest('#search-wrapper');
if (!container.hasClass('active')) {
container.addClass('active');
evt.preventDefault();
} else if (container.hasClass('active') && $(obj)
.closest('#input-holder').length == 0) {
container.removeClass('active');
// clear input
container.find('#search-input').val('');
// clear and hide result container when we press close
container.find('#result-container').fadeOut(100, function() {
$(this).empty();
});
}
}
function submitFn(obj, evt) {
value = $(obj).find('#search-input').val().trim();
_html = 'Searching for: ';
if (!value.length) {
_html = 'Ehem, I can\'t search nothing';
} else {
_html += '<b>' + value + '</b>';
}
$(obj).find('#result-container').html('<span>' + _html + '</span>');
$(obj).find('#result-container').fadeIn(100);
evt.preventDefault();
}
Here is a picture if I don't use bootstrap:
Dont't use bootstraps
And here is the picture if I use bootstrap:
enter image description here
I'm quite a newbie and I have learnt to code this on the internet. I appreciated your help.
I have figure out adding box-sizing: content-box !important; to every things have ::after, ::before help this
Related
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>
This question already has answers here:
How do I detect a click outside an element?
(91 answers)
Closed 5 years ago.
i'm actually searching how to close div when clicking outside, but i have no idea how to do it.
I have tried many things like using the attribute .removeClass with a boolean, add a removeEventListener or even with collapse but i didn't understand that one , but nothings worked for me... I'm really stucked.
Here's my code actually :
(function() {
var hamburger = {
navToggle: document.querySelector('.nav-toggle'),
nav: document.querySelector('nav'),
doToggle: function (e) {
e.preventDefault();
this.navToggle.classList.toggle('expanded');
this.nav.classList.toggle('expanded');
}
};
hamburger.navToggle.addEventListener('click', function (e) {
hamburger.doToggle(e);
});
hamburger.nav.addEventListener('click', function (e) {
hamburger.doToggle(e);
});
}());
.nav2 {
-webkit-transition: left 0.5s ease;
-moz-transition: left 0.5s ease;
-ms-transition: left 0.5s ease;
-o-transition: left 0.5s ease;
transition: left 0.5s ease;
background: #000000;
color: #ff4c4d;
cursor: pointer;
font-size: 2rem;
height: 100vh;
left: -20rem;
padding: 6rem 2rem 2rem 2rem;
position: fixed;
top: 0;
width: 49vw;
z-index: 1;
opacity: 0.90;
z-index: 2;
}
.nav2.expanded { left: 0; }
.nav2 ul {
position: absolute;
top: 40%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
list-style: none;
margin: 0;
padding: 0;
}
.nav-toggle {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
cursor: pointer;
position: fixed;
top: 2rem;
width: 10vw;
z-index: 3;
}
.nav-toggle:hover { opacity: 0.8; }
.nav-toggle .nav-toggle-bar, .nav-toggle .nav-toggle-bar::after, .nav-toggle .nav-toggle-bar::before {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
background: #5080ff;
content: '';
height: 0.7vh;
width: 100%;
z-index: 4;
}
.nav-toggle .nav-toggle-bar { margin-top: 0; border-radius: 4px;}
.nav-toggle .nav-toggle-bar::after { margin-top: 1.5vh; border-radius: 4px;}
.nav-toggle .nav-toggle-bar::before { margin-top: -1.5vh; border-radius: 4px;}
.nav-toggle.expanded .nav-toggle-bar { background: transparent; }
.nav-toggle.expanded .nav-toggle-bar::after, .nav-toggle.expanded .nav-toggle-bar::before {
background: #85faff;
margin-top: 0;
}
.nav-toggle.expanded .nav-toggle-bar::after {
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.nav-toggle.expanded .nav-toggle-bar::before {
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="nav-toggle">
<div class="nav-toggle-bar"></div>
</div>
<nav class="nav2">
<ul class="link2">
<img src="./assets/img/bosewhite.png" class="bose-white">
<br>
<li><a class="link" href="#">Home</a></li><br>
<li><a class="link" href="#">Portfolio</a></li><br>
<li><a class="link" href="#">About</a></li><br>
<li><a class="link" href="#">Contact</a></li><br>
</ul>
</nav>
You can use bind to the click event on body and then check that the event path does not include the nav menu:
(function() {
var hamburger = {
navToggle: document.querySelector('.nav-toggle'),
nav: document.querySelector('nav'),
open: function (e) {
e.preventDefault();
this.navToggle.classList.add('expanded');
this.nav.classList.add('expanded');
},
close: function (e) {
e.preventDefault();
this.navToggle.classList.remove('expanded');
this.nav.classList.remove('expanded');
}
};
hamburger.navToggle.addEventListener('click', function (e) {
if (hamburger.nav.classList.contains('expanded')) {
hamburger.close(e);
} else {
hamburger.open(e);
}
});
hamburger.nav.addEventListener('click', function (e) {
hamburger.open(e);
});
document.addEventListener('click', function (e) {
if (e.path.indexOf(hamburger.navToggle) < 0 && e.path.indexOf(hamburger.nav) < 0) {
hamburger.close(e);
}
});
}());
.nav2 {
-webkit-transition: left 0.5s ease;
-moz-transition: left 0.5s ease;
-ms-transition: left 0.5s ease;
-o-transition: left 0.5s ease;
transition: left 0.5s ease;
background: #000000;
color: #ff4c4d;
cursor: pointer;
font-size: 2rem;
height: 100vh;
left: -20rem;
padding: 6rem 2rem 2rem 2rem;
position: fixed;
top: 0;
width: 49vw;
z-index: 1;
opacity: 0.90;
z-index: 2;
}
.nav2.expanded { left: 0; }
.nav2 ul {
position: absolute;
top: 40%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
list-style: none;
margin: 0;
padding: 0;
}
.nav-toggle {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
cursor: pointer;
position: fixed;
top: 2rem;
width: 10vw;
z-index: 3;
}
.nav-toggle:hover { opacity: 0.8; }
.nav-toggle .nav-toggle-bar, .nav-toggle .nav-toggle-bar::after, .nav-toggle .nav-toggle-bar::before {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
background: #5080ff;
content: '';
height: 0.7vh;
width: 100%;
z-index: 4;
}
.nav-toggle .nav-toggle-bar { margin-top: 0; border-radius: 4px;}
.nav-toggle .nav-toggle-bar::after { margin-top: 1.5vh; border-radius: 4px;}
.nav-toggle .nav-toggle-bar::before { margin-top: -1.5vh; border-radius: 4px;}
.nav-toggle.expanded .nav-toggle-bar { background: transparent; }
.nav-toggle.expanded .nav-toggle-bar::after, .nav-toggle.expanded .nav-toggle-bar::before {
background: #85faff;
margin-top: 0;
}
.nav-toggle.expanded .nav-toggle-bar::after {
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.nav-toggle.expanded .nav-toggle-bar::before {
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="nav-toggle">
<div class="nav-toggle-bar"></div>
</div>
<nav class="nav2">
<ul class="link2">
<img src="./assets/img/bosewhite.png" class="bose-white">
<br>
<li><a class="link" href="#">Home</a></li><br>
<li><a class="link" href="#">Portfolio</a></li><br>
<li><a class="link" href="#">About</a></li><br>
<li><a class="link" href="#">Contact</a></li><br>
</ul>
</nav>
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>
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>
Hi everyone i have one problem with ajax hover. I am trying to make a userHoverCard like tumblr. But the hover animation not working when i use it with ajax.
This is working DEMO without ajax only css. In this demo you can see when you hover image then .p-tooltip will open with animation effect.
But if you click this DEMO from my test page then you can see when you hover an image then .p-tooltip will not open with animation effect.
HTML
<div class="p-tooltip"></div>
<div class="summary" data-id="25">
</div>
<div class="summary" data-id="20">
</div>
<div class="summary" data-id="25">
</div>
This is my ajax code:
$(document).ready(function() {
function showProfileTooltip(e, id){
e.append($('.p-tooltip').css({
'top':'20',
'left':'80'
}).show());
//send id & get info from get_profile.php
$.ajax({
url: 'get_profile.php?uid='+id,
beforeSend: function(){
$('.p-tooltip').html('Loading..');
},
success: function(html){
$('.p-tooltip').html(html);
}
});
}
function hideProfileTooltip(){
$('.p-tooltip').hide().fadeIn('fast');
}
$('.summary a').hover(function(e){
var id = $(this).attr('data-id');
showProfileTooltip($(this), id);
}, function(){
setTimeout(function(){
hideProfileTooltip();
},2000);
});
});
And here is CSS code:
.summary {
margin: 50px auto 0;
width: 50px;
height: 50px;
position: relative;
}
.profile-ava {
width: 50px;
height: 50px;
background-image: url(http://gravatar.com/avatar/3913c4e14034c0a7f28db2c632290c21?s=80);
border-radius: 3px;
background-size: 50px 50px;
display: block;
}
.summary a:hover:before {
content: '';
position: absolute;
display: block;
bottom: -10px;
left: 0;
height: 10px;
width: 100%;
z-index: 2;
}
.p-tooltip {
position: absolute;
margin-top: 10px;
top: 100%;
left: 50%;
margin-left: -140px;
width: 280px;
max-height: 120px;
border-radius: 5px;
overflow: hidden;
background-color: #F0F0F0;
visibility: hidden;
opacity: 0;
transition: all 0.5s ease;
}
.profile-header {
height: 120px;
background-image: url(https://pbs.twimg.com/profile_banners/571038694/1395748220/1500x500);
background-size: auto 120px;
background-position: 50%;
}
.profile-navigation {
position: absolute;
top: 0;
left: 0;
padding: 10px;
width: 100%;
box-sizing: border-box;
}
.profile-nick {
color: #fff;
margin: 0;
padding: 0.4em 0;
font-size: 0.8em;
font-weight: bold;
}
.profile-action {
float: right;
background-color: #eee;
padding: 0.4em;
border-radius: 2px;
color: inherit;
text-decoration: none;
font-size: 0.8em;
font-weight: bold;
}
.p-tooltip .profile-ava {
margin: -40px auto 0;
width: 80px;
height: 80px;
background-size: 80px;
border: 3px solid #F0F0F0;
border-radius: 5px;
}
.profile-info {
text-align: center;
padding: 10px;
opacity: 0;
}
.profile-title {font-size: 1.6em; margin: 0;}
.profile-description {
margin: 0;
font-size: 0.8em;
}
.profile-items {margin: 0px; padding: 10px;}
.profile-items:after {
content: '';
display: table;
clear: both;
}
.profile-items li {
width: 80px;
height: 80px;
background-size: cover;
background-position: center;
float: left;
display: block;
border-radius: 3px;
}
.profile-items li:not(:first-child) {margin-left: 10px;}
.profile-items li:nth-child(1) {
background-image: url(https://o.twimg.com/1/proxy.jpg?t=FQQVBBgwaHR0cHM6Ly9pLnl0aW1nLmNvbS92aS9CM3lna2lYRXVyWS9ocWRlZmF1bHQuanBnFAIWABIA&s=z1wybbbNHF0pyLthl3xhxVBNjbYlAEWEzPd-dUtrWOY);
}
.profile-items li:nth-child(2) {
background-image: url(https://pbs.twimg.com/media/B7pkXfgCIAAwoY0.jpg:thumb);
}
.profile-items li:nth-child(3) {
background-image: url(https://pbs.twimg.com/media/B7A3NHjIIAIt6eg.png:large);
}
.profile-header {
-webkit-transform: translate(0, -50px);
-moz-transform: translate(0, -50px);
transform: translate(0, -50px);
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
-webkit-transition-delay: 0.1s;
-moz-transition-delay: 0.1s;
transition-delay: 0.1s;
opacity: 0;
}
.profile-info {
-webkit-transform: translate(0, 50px);
-moz-transform: translate(0, 50px);
transform: translate(0, 50px);
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
-webkit-transition-delay: 0.1s;
-moz-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.p-tooltip .profile-ava {
-webkit-transform: scale(0.5) translate(0, -10px);
-moz-transform: scale(0.5) translate(0, -10px);
transform: scale(0.5) translate(0, -10px);
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-webkit-transition-delay: 0.1s;
-moz-transition-delay: 0.1s;
transition-delay: 0.1s;
opacity: 0;
}
.profile-items li {
-webkit-transform: translate(0, 50px);
-moz-transform: translate(0, 50px);
transform: translate(0, 50px);
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
-webkit-transition-delay: 0.3s;
-moz-transition-delay: 0.3s;
transition-delay: 0.3s;
opacity: 0;
}
.profile-items li:nth-child(2) {
-webkit-transition-delay: 0.35s;
-moz-transition-delay: 0.35s;
transition-delay: 0.35s;
}
.profile-items li:nth-child(3) {
-webkit-transition-delay: 0.4s;
-moz-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.summary:hover .p-tooltip {
visibility: visible;
opacity: 1;
max-height: 600px;
}
.summary:hover .profile-header,
.summary:hover .profile-info,
.summary:hover .p-tooltip .profile-ava,
.summary:hover .profile-items li {
-webkit-transform: translate(0,0) scale(1);
-moz-transform: translate(0,0) scale(1);
transform: translate(0,0) scale(1);
opacity: 1;
}
Anyone can help me please!
Essentially, I've created a pretty clever workaround. It is a mask that covers the image (invisible) until the html is loaded, then the hover css takes place after the z-index is lowered. The hover javascript is on the container.
FIDDLE
.summary {
margin: -50px auto 0;
width: 50px;
height: 50px;
position: relative;
z-index: 0;
}
.summary-mask {
margin: 50px auto 0;
width: 50px;
height: 50px;
position: relative;
z-index: 1;
}
.loaded .summary-mask {
z-index: -1;
}
HTML
<div class="the-container">
<div class="summary-mask"></div>
<div class="summary" data-id="100">
<div class="user-container"></div>
</div>
</div>
JS
var response = '<div class="p-tooltip"> <div class="profile-header"></div> <div class="profile-navigation"> Follow <p class="profile-nick"> Page Name </p> </div> <div class="profile-ava"></div> <div class="profile-info"> <h1 class="profile-title">Username</h1> <p class="profile-description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy ..</p> </div> <ul class="profile-items"> <li></li> <li></li> <li></li> </ul> </div>';
$(document).ready(function () {
function showProfileTooltip(e, id) {
//send id & get info from get_profile.php
$.ajax({
url: '/echo/html/',
data: {
html: response,
delay: 0
},
method: 'post',
success: function (returnHtml) {
e.find('.user-container').html(returnHtml).promise().done(function () {
$('.the-container').addClass('loaded');
});
}
});
}
function hideProfileTooltip() {
$('.the-container').removeClass('loaded');
}
$('.the-container').hover(function (e) {
var id = $(this).find('.summary').attr('data-id');
showProfileTooltip($(this), id);
}, function () {
hideProfileTooltip();
});
});
When you are showing the card, it only contains the loading message. When the content arrives and you put it in the card, that isn't a CSS change, so the transition isn't activated.
If you wait until the content has arrives to show the card, there is something to animate.