search increase and decrease in width just when the .search_icon is clicked,because in actual moment its changing size when im clicking .search class.And can someone explaing why these code doesnt work with actual jquery library version,thanks.
https://codepen.io/anon/pen/ENqppw
<div class="search">
<input type="text" class="inp"><span class="search_icon"></span></input>
</div>
$background-color: #2A2E37;
$search-bg-color: #242628;
$icon-color: #00FEDE;
$transition: all 0.5s ease;
.inp{
width: 240px;
height: 60px;
box-shadow: none;
border: none;
background: transparent;
color: #fff;
padding: 20px 0px 20px 45px;
font-size: 40px;
&:focus {
outline: none;
}
}
.search {
width:100px;
height:100px;
background: #3a3a3a;
transition: all 0.7s ease;
margin:50px;
position:absolute;
&.open {
width: 90%;
}
}
.search_icon {
width: 34px;
height: 34px;
border-radius: 40px;
border: 3px solid $icon-color;
display: block;
position: relative;
margin-top:-77px;
margin-left:20px;
transition: $transition;
&:before {
content: '';
width: 3px;
height: 15px;
position: absolute;
right: -2px;
top: 30px;
display: block;
background-color: $icon-color;
transform: rotate(-45deg);
transition: $transition;
}
&:after {
content: '';
width: 3px;
height: 15px;
position: absolute;
right: -12px;
top: 40px;
display: block;
background-color: $icon-color;
transform: rotate(-45deg);
transition: $transition;
}
.open & {
width: 50px;
height: 50px;
border-radius: 60px;
margin-left:95%;
&:before {
transform: rotate(45deg);
right: 23px;
top: 12px;
height: 29px;
}
&:after {
transform: rotate(-45deg);
right: 23px;
top: 12px;
height: 29px;
}
}
}
$(function() {
$('.search').on('click', function() {
$(this).toggleClass('open');
$(this).toggleClass('clicked');
});
});
You can use this instead:
$(function() {
$('.search').on('click', function() { // Expand search on click on it
$(this).addClass('open clicked');
});
$('.search_icon').on('click', function(e) { // Collapse search on click on search icon
e.stopPropagation();
$(this).closest('.search').removeClass('open clicked');
});
});
Related
I make a side pull-down menu. Does not work. Please tell me what the problem is
The menu does not open and does not display any errors. I have already tried everything that I could and zero result.
function left_menu(selector){
let menu = $(selector);
let button = menu.find('.left_menu_button');
let links = menu.find('.left_menu_link');
let overlay = menu.find('.left_menu_close_container');
button.on('click', (e) => {
e.preventDefault();
loggleMenu();
});
links.on('click', () => loggleMenu());
overlay.on('click', () => loggleMenu());
function loggleMenu(){
menu.toggleClass('left_menu_main_div_active');
if(menu.hasClass('left_menu_main_div_active')){
$('body').css('overflow', 'hidden');
}else{
$('body').css('overflow', 'visible');
}
}
}
left_menu('.left_menu_main_div');
.left_menu_button{
position: absolute;
left: 10px;
z-index: 30;
width: 50px;
height: 50px;
border-radius: 50%;
}
.left_menu_button:hover .left_menu_span{
background-color: black;
width: 35px;
height: 5px;
transition: 0.4s;
}
.left_menu_button:hover .left_menu_span::after{
background-color: black;
width: 35px;
height: 5px;
transition: 0.4s;
margin-top: 2px;
}
.left_menu_button:hover .left_menu_span::before{
background-color: black;
width: 35px;
height: 5px;
transition: 0.4s;
margin-top: -2px;
}
.left_menu_span,
.left_menu_span::after,
.left_menu_span::before{
position: absolute;
width: 30px;
height: 4px;
background-color: #1f1a1e;
}
.left_menu_span{
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.left_menu_span::before{
content: '';
top: -10px;
}
.left_menu_span::after{
content: '';
top: 10px;
}
.left_menu_main_div_active .left_menu_span{
background-color: transparent;
}
.left_menu_main_div_active .left_menu_span::before{
top: 0;
transform: rotate(45deg);
}
.left_menu_main_div_active .left_menu_span::after{
top: 0;
transform: rotate(-45deg);
}
.left_menu_nav{
padding-top: 55px;
position: fixed;
z-index: 20;
display: flex;
flex-flow: column;
height: 100%;
width: 20%;
background-color: #2a2a2a;
overflow-y: auto;
left: -100%;
}
.left_menu_main_div_active .left_menu_nav{
left: 0;
}
.left_menu_link{
text-align: center;
padding: 10px;
font-size: 12px;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 5px;
font-weight: bold;
color: white;
margin-top: 10px;
}
.left_menu_link:hover{
filter: brightness(0.7);
border: 1px solid black;
border-radius: 3px;
transition: 0.7s;
}
.left_menu_close_container{
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
}
.left_menu_main_div_active .left_menu_close_container{
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="left_menu_container">
<div class="left_menu_main_div">
<a href="#" class="left_menu_button">
<span class="left_menu_span"></span>
</a>
<nav class="left_menu_nav">
Инвентарь
Персонаж
Ремесло
Охота
</nav>
<div class="left_menu_close_container"></div>
</div>
</div>
Shouldn't function loggleMenu( be function ToggleMenu(?
Also where are you loading the script in the html?
Pop a few console.Log() calls into the script and see where it gets up to or fails.
I want to make checkbox marked at the entrance to the site and changed accordingly as if it was clicked. How can I achieve this?
I tried to simulate the click () method but it didn't help.
So how can I do it?
HTML
#toggleShapeChangeInfo {
font-size: 30px;
top: 25%;
left: 20%;
transform: translate(-25%, -50%);
position: absolute;
pointer-events: none;
}
.lbl {
position: absolute;
display: block;
height: 5%;
width: 25%;
top: 20%;
left: 10%;
background: #898989;
border-radius: 100px;
cursor: pointer;
transition: all 0.3s ease;
}
.lbl:after {
position: absolute;
left: -2px;
top: -3px;
display: block;
width: 50%;
height: 120%;
border-radius: 100px;
background: #fff;
box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.05);
content: '';
transition: all 0.3s ease;
}
.lbl:active:after {
transform: scale(1.15, 0.85);
}
.cbx:checked~label {
background: #6fbeb5;
}
.cbx:checked~label:after {
left: 50%;
background: #179588;
}
.cbx:disabled~label {
background: #d5d5d5;
}
.cbx:disabled~label:after {
background: #bcbdbc;
}
.hidden {
display: none;
}
<div id='toggleShapeChange'>
<input type="checkbox" id="unchecked" class="cbx hidden" />
<label for="unchecked" class="lbl"></label>
<p id="toggleShapeChangeInfo">On</p>
</div>
I would be grateful for help.
It looks like your post is mostly code; please add some more details.
Adding checked attribute will fix your issue
<input type="checkbox" id="unchecked" class="cbx hidden" checked />
#toggleShapeChangeInfo {
font-size: 30px;
top: 25%;
left: 20%;
transform: translate(-25%, -50%);
position: absolute;
pointer-events: none;
}
.lbl {
position: absolute;
display: block;
height: 5%;
width: 25%;
top: 20%;
left: 10%;
background: #898989;
border-radius: 100px;
cursor: pointer;
transition: all 0.3s ease;
}
.lbl:after {
position: absolute;
left: -2px;
top: -3px;
display: block;
width: 50%;
height: 120%;
border-radius: 100px;
background: #fff;
box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.05);
content: '';
transition: all 0.3s ease;
}
.lbl:active:after {
transform: scale(1.15, 0.85);
}
.cbx:checked~label {
background: #6fbeb5;
}
.cbx:checked~label:after {
left: 50%;
background: #179588;
}
.cbx:disabled~label {
background: #d5d5d5;
}
.cbx:disabled~label:after {
background: #bcbdbc;
}
.hidden {
display: none;
}
.cbx ~ #toggleShapeChangeInfo:after {
content: 'Off'
}
.cbx:checked~#toggleShapeChangeInfo:after {
content: 'On'
}
<div id='toggleShapeChange'>
<input type="checkbox" id="unchecked" class="cbx hidden" checked />
<label for="unchecked" class="lbl"></label>
<p id="toggleShapeChangeInfo"></p>
</div>
I'm making a webpage. I created a popup that when I hover the div, the popup opens and if not, it closes.
I want to make a function that if I click on the div, the popup stay open without hover. How I can do? Thanks in advance.
I have this code:
HTML:
<div class="password-lost-tooltip" onclick="blockTooltip()">Lost password?
<span class="password-lost-tooltiptext" id="lostpasswordtooltip">LOL</span>
</div>
CSS:
.password-lost-tooltip {
position: relative;
display: inline-block;
position: fixed;
top: 55px;
left: 380px;
font-family: 'Nunito', sans-serif;
font-size: 15;
text-decoration: none;
transition-duration: 0.3s;
color: grey;
}
.password-lost-tooltip:hover {
color: black;
cursor: pointer;
}
.password-lost-tooltip .password-lost-tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
position: fixed;
top: 49px;
left: 610px;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}
.password-lost-tooltip .password-lost-tooltiptext::after {
content: "";
position: fixed;
transform: rotate(90deg);
top: 57.5px;
left: 542.5px;
margin-left: -5px;
border-width: 6px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.password-lost-tooltip:hover .password-lost-tooltiptext {
visibility: visible;
opacity: 1;
}
You can use onClick and onBlur events to set or remove a class on the div which then should be added to the css to control the visibility.
Please checkout this running example:
function blockTooltip () {
document.querySelector('.password-lost-tooltip').classList.add('showTip');
}
function hideTooltip () {
document.querySelector('.password-lost-tooltip').classList.remove('showTip');
}
.password-lost-tooltip {
position: relative;
display: inline-block;
position: fixed;
top: 55px;
left: 380px;
font-family: 'Nunito', sans-serif;
font-size: 15;
text-decoration: none;
transition-duration: 0.3s;
color: grey;
}
.password-lost-tooltip:hover {
color: black;
cursor: pointer;
}
.password-lost-tooltip .password-lost-tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
position: fixed;
top: 49px;
left: 610px;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}
.password-lost-tooltip .password-lost-tooltiptext::after {
content: "";
position: fixed;
transform: rotate(90deg);
top: 57.5px;
left: 542.5px;
margin-left: -5px;
border-width: 6px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.password-lost-tooltip:hover .password-lost-tooltiptext {
visibility: visible;
opacity: 1;
}
.password-lost-tooltip.showTip .password-lost-tooltiptext {
visibility: visible;
opacity: 1;
}
<div class="password-lost-tooltip" tabindex="0"
onclick="blockTooltip()" onblur="hideTooltip()">Lost password?
<span class="password-lost-tooltiptext" id="lostpasswordtooltip">LOL</span>
</div>
I started programming the mobile version of my nav menu earlier. I had to rework my #serviceNav to get it to work in a mobile setting. When doing this I changed my javascript from this:
/*$('#serviceClick').click( function () {
$('#serviceNav').addClass('activeSol');
});*/
$('[data-pop-close]').on('click', function(e) {
//var targeted_pop = $(this).attr('data-pop-close');
$('#serviceNav').removeClass('active');
$('body').css('overflow', 'auto');
e.preventDefault();
});
To this:
$('#serviceClick').click(function() {
var relative = $(this);
if (!relative.hasClass('activeSol')) {
$('.activeSol').removeClass('activeSol').next('#serviceNav').slideUp(500);
relative.addClass('activeSol').next('#serviceNav').slideDown();
//$('.infoTitles:before').addClass('opened');
} else {
relative.removeClass('activeSol').next('#serviceNav').slideUp(500);
}
return false;
});
The issue that I am having now that I previously didn't with my javascript code is that now my desktop media query version of my #serviceNav is not displaying, however it does display and function in the mobile setting. The trigger for this menu is the menu item called "Solutions". You can see that in a media query over 640px that nothing happens, but 640px or less it applies the fadeDown function.
Does anyone see why this is not working for the larger version media query?
Here is a jsfiddle
Full code:
$('#mobile-button').on('click', function () {
$('#nav-pop').addClass('active');
$('html').addClass('is-navOpen');
});
/*$('#serviceClick').click( function () {
$('#serviceNav').addClass('activeSol');
});*/
$('#serviceClick').click(function() {
var relative = $(this);
if (!relative.hasClass('activeSol')) {
$('.activeSol').removeClass('activeSol').next('#serviceNav').slideUp(500);
relative.addClass('activeSol').next('#serviceNav').slideDown();
} else {
relative.removeClass('activeSol').next('#serviceNav').slideUp(500);
}
return false;
});
nav {
background: #FFF;
height: 70px;
width: 100%;
max-width: 100%;
box-shadow: 0px 6px 15px -4px rgba(0,0,0,0.12);
position: fixed;
top: 0;
z-index: 999;
box-sizing: border-box;
}
#nav-logo {
float: left;
height: 100%;
width: auto;
display: block;
position: relative;
margin-left: 5%;
}
#nav-logo img {
height: 80%;
width: auto;
position: absolute;
top: 50%;
transform: translateY(-50%);-webkit-transform: translateY(-50%);
}
#mobile-button {
background-image: url("https://s3.us-east-2.amazonaws.com/mbkitsystems/menu.svg");
background-size: 30px 30px;
float: right;
width: 30px;
height: 30px;
margin-right: 5%;
margin-top: 15px;
cursor: pointer;
display: none;
transition: ease 0.3s;-webkit-transition: ease 0.3s;
}
#mobile-button:hover {
transition: ease 0.3s;-webkit-transition: ease 0.3s;
}
#nav-pop {
float: right;
display: block;
margin-right: 5%;
margin-top: 25px;
transition: ease 0.5s;-webkit-transition: ease 0.5s;
}
#nav-pop.active {
opacity: 1;
background: rgba(0,0,0,0.8);
background: #2f2f2f;
right: 0;
margin-top: 0;
margin-right: 0;
z-index: 999999;
transition: ease 0.6s;-webkit-transition: ease 0.6s;
transform: translateX(0);-webkit-transform: translateX(0);
box-shadow: -9px 0px 9px 1px rgba(0,0,0,.2);
}
#nav-list li {
display: inline-block;
margin: 0 17px;
vertical-align: top;
}
#nav-list li:first-child {
margin-left: 0px;
}
#nav-list li:last-child {
margin-right: 0px;
}
#nav-list li a, #serviceClick {
text-decoration: none;
font-family: 'Muli', sans-serif;
font-size: .9rem;
color: #747678;
letter-spacing: 1px;
vertical-align: top;
transition: all .3s;-webkit-transition: all .3s;
cursor: pointer;
}
#nav-list li a:after, #serviceClick:after {
content: '';
display: block;
width: 0;
margin-top: 6px;
background: #b82222;
height: 2px;
transition: width .3s;
}
#nav-list li a:hover, #serviceClick:hover {
color: #4b4b4b;
transition: all .3s;-webkit-transition: all .3s;
}
#nav-list li a:hover:after, #serviceClick:hover:after {
width: 100%;
transition: width .3s;
}
#nav-list li a.navInverse {
padding: 10px 12px;
border-radius: 2px;
box-sizing: border-box;
font-family: 'Muli', sans-serif;
font-size: 1.2rem;
color: #FFF;
border: 1px solid #b82222;
background: linear-gradient(to right bottom, #b82222, #a51e1e);
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
}
#nav-list li a.navInverse:hover {
background: #b82222;
background: #FFF;
color: #b82222;
/*transition: all 0s;-webkit-transition: all 0s;*/
}
#nav-list li a.navInverse:after {
content: '';
display: none;
width: 0px;
height: 0px;
transition: none;
}
#nav-pop-close {
display: none;
}
#nav-pop-close, #close-panel {
position: relative;
top: 3%;
left: 90%;
background-image: url("https://s3.us-east-2.amazonaws.com/mbkitsystems/icon_close.png");
background-size: 30px 30px;
background-repeat: no-repeat;
height: 30px;
width: 30px;
cursor: pointer;
}
/*- Service NAV -*/
#serviceNav {
width: 100%;
top: -40vh;
left: 0;
z-index: -1;
position: fixed;
background-color: rgba(0,0,0,0);
height: 40vh;
transition: all .4s;
padding: 20px 0;
}
#serviceNav.activeSol {
top: 0;
width: 100%;
background-color: rgba(0,0,0,.9);
z-index: 99999;
height: 40vh;
}
.popup-close {
position: absolute;
right: 12px;
top: 12px;
width: 32px;
height: auto;
}
#serviceNavInner {
margin: 0 5%;
height: 100%;
position: relative;
}
/*--- Block 1 ---*/
#serviceNavBlock1 {
width: 33%;
height: 100%;
border-right: 1px solid rgba(255,255,255,.5);
position: relative;
}
#serviceNavBlock1Wrap {
width: 80%;
text-align: left;
}
/*--- Block 2 ---*/
#serviceNavBlock2 {
width: 66.6%;
height: 100%;
margin: 10px auto;
position: relative;
}
.servNavItemWrap {
display: inline-block;
vertical-align: top;
width: 25%;
margin-bottom: 50px;
text-align: center;
cursor: pointer;
-webkit-backface-visibility: hidden;
}
.servNavItemWrap img {
width: 75px;
height: 75px;
-webkit-transition: all 0.25s;transition: all 0.25s;
}
.servNavItemWrap:hover img {
-webkit-transition: all 0.25s;transition: all 0.25s;
-webkit-transform: scale(1.1);transform: scale(1.1);
-webkit-backface-visibility: hidden;
}
.servNavItemWrap a {
text-decoration: none;
outline: none;
box-sizing: border-box;
}
.servNavItemTitle {
margin-top: 5px;
-webkit-transition: all 0.25s;transition: all 0.25s;
}
.servNavItemWrap:hover .servNavItemTitle {
color: #FFF;
-webkit-transition: all 0.25s;transition: all 0.25s;
}
/*---------------------------------------------- MEDIA QUERY 640 --------------------------------------------*/
#media screen and (max-width:640px) {
#mobile-button {
display: block;
}
#nav-pop {
float: none;
opacity: 0;
position: fixed;
margin-top: 0;
width: 75%;
right: -100%;
height: 100vh;
transform: translateX(100%);-webkit-transform: translateX(100%);
}
#nav-pop-close {
display: block;
background-size: 20px 20px;
height: 20px;
width: 20px;
}
#nav-list {
margin-top: 20px;
}
#nav-list li {
display: block;
position: relative;
width: 100%;
margin: 0;
padding: 20px 10%;
background: linear-gradient(to bottom right, #151515, #2f2f2f);
background: #2f2f2f;
text-align: left;
cursor: pointer;
border-bottom: .3px solid #FFF;
}
#quoteButton {
position: absolute;
width: 100%;
bottom: 0;
left: 0;
}
#nav-list li:hover #quoteButton {
background: #2f2f2f;
}
#nav-list li:hover, #nav-list li:active {
background: #000;
}
#nav-list li:first-child {
margin-left: 0;
}
#nav-list li:last-child {
margin: 20px auto;
text-align: center;
border-bottom: none;
background: #2f2f2f;
padding: 20px 0;
}
#nav-list li a, #serviceClick {
font-family: 'Nunito', sans-serif;
font-size: .8rem;
color: #FFF;
letter-spacing: .3rem;
}
#nav-list li a:after, #serviceClick:after {
display: none;
}
#nav-list li a:hover, #serviceClick:hover {
color: #FFF;
}
#nav-list li a:hover:after, #serviceClick:hover:after {
width: 0%;
}
/*- Service NAV -*/
#serviceNav {
width: 100%;
z-index: 1;
position: relative;
background-color: rgba(0,0,0,0);
height: 200px;
transition: all .4s;
padding: 10px 0;
display: none;
top: 0;
}
#serviceNav.activeSol {
background-color: #000;
z-index: 9999999;
height: auto;
min-height: 20%;
top: 0;
border-bottom: .01em solid #FFF;
}
.popup-close {
display: none;
}
#serviceNavInner {
margin: 0 2.5%;
}
/*--- Block 1 ---*/
#serviceNavBlock1 {
width: 100%;
height: 50px;
border-right: none;
display: block;
position: relative;
}
#serviceNavBlock1Wrap {
width: 100%;
text-align: center;
}
#navOverviewT, #navOverviewP {
display: none;
}
#solOverviewB {
font-size: .7rem;
}
/*--- Block 2 ---*/
#serviceNavBlock2 {
width: 100%;
height: 100%;
margin: 10px auto;
display: block;
}
.servNavItemWrap {
display: inline-block;
width: 25%;
margin-bottom: 15px;
}
.servNavItemWrap img {
width: 30px;
height: 30px;
}
.servNavItemTitle {
margin-top: 5px;
font-size: .5rem;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav>
<div id="nav-logo">
</div>
<div id="mobile-button"><img src="" class="hidden" alt=""></div>
<div id="nav-pop">
<div id="nav-pop-close"></div>
<ul id="nav-list">
<li>ABOUT</li>
<li id="serviceClick">SOLUTIONS</li>
<div id="serviceNav">
<div id="serviceNavInner">
<div id="serviceNavBlock1" class="iblock">
<button class="buttonInv2" id="solOverviewB">Solutions Overview</button>
</div><div id="serviceNavBlock2" class="iblock">
</div>
</div>
</div>
<li>LEARN</li>
<li>CONTACT</li>
<li>REQUEST QUOTE</li>
</ul>
</div>
</nav>
There is a lot going on here and frankly, it's hard to decipher but I think "Nothing happens" is relative. When inspecting the element in dev console you can see the Javascript styling is being added appropriately. So something is happening, it's simply happening off screen because you've told it to. I think the culprit here, is the >640px positioning of your #serviceNav element is maintained at top: -40vh; That's a lot. When removing this value the button displays as follows:
Note: you will have to change some other things around as this displays it on page load. But you get the idea
I have been stuck on a sliding down menu, but have made some headway with it. I had to modify a lot to make it work for both desktop and mobile viewports. The only thing I am stuck on now is getting the menu to close in a < 640px viewport.
In my snippet and jsfiddle below there is a lot of code, but the only code that really matters to this question is the javascript below:
$('#serviceClick').click( function () {
var relative = $(this);
if (!relative.hasClass('activeSol')) {
$('#serviceNav').removeClass('activeSol');
$('#serviceNav').addClass('activeSol').slideDown();
} else {
$('#serviceNav').removeClass('activeSol').slideUp(500);
}
return false;
});
Basically my else statement is now removing the class 'activeSol` and then sliding up the selection.
In the mobile viewport, after clicking on "Solutions" the menu expands, but when you click on "Solutions" again, nothing happens.
It seems as if the variable relative is never reading as the class appended to it, making the click function run else. I did a simple console.log and the else never runs. I tried changing the click function to a change, but then the menu never triggers.
Does anyone see what is causing my else statement to not removeClass from serviceNav and slideUp?
JSfiddle link to see in mobile viewport.
$('#serviceClick').click( function () {
var relative = $(this);
if (!relative.hasClass('activeSol')) {
$('#serviceNav').removeClass('activeSol');
$('#serviceNav').addClass('activeSol').slideDown();
} else {
$('#serviceNav').removeClass('activeSol').slideUp(500);
}
return false;
});
$('[data-pop-close]').on('click', function(e) {
//var targeted_pop = $(this).attr('data-pop-close');
$('#serviceNav').removeClass('activeSol');
$('body').css('overflow', 'auto');
e.preventDefault();
});
nav {
background: #FFF;
height: 70px;
width: 100%;
max-width: 100%;
box-shadow: 0px 6px 15px -4px rgba(0,0,0,0.12);
position: fixed;
top: 0;
z-index: 999;
box-sizing: border-box;
}
#nav-logo {
float: left;
height: 100%;
width: auto;
display: block;
position: relative;
margin-left: 5%;
}
#nav-logo img {
height: 80%;
width: auto;
position: absolute;
top: 50%;
transform: translateY(-50%);-webkit-transform: translateY(-50%);
}
#mobile-button {
background-image: url("https://s3.us-east-2.amazonaws.com/mbkitsystems/menu.svg");
background-size: 30px 30px;
float: right;
width: 30px;
height: 30px;
margin-right: 5%;
margin-top: 15px;
cursor: pointer;
display: none;
transition: ease 0.3s;-webkit-transition: ease 0.3s;
}
#mobile-button:hover {
transition: ease 0.3s;-webkit-transition: ease 0.3s;
}
#nav-pop {
float: right;
display: block;
margin-right: 5%;
margin-top: 25px;
transition: ease 0.5s;-webkit-transition: ease 0.5s;
}
#nav-pop.active {
opacity: 1;
background: rgba(0,0,0,0.8);
background: #2f2f2f;
right: 0;
margin-top: 0;
margin-right: 0;
z-index: 999999;
transition: ease 0.6s;-webkit-transition: ease 0.6s;
transform: translateX(0);-webkit-transform: translateX(0);
box-shadow: -9px 0px 9px 1px rgba(0,0,0,.2);
}
#nav-list li {
display: inline-block;
margin: 0 17px;
vertical-align: top;
}
#nav-list li:first-child {
margin-left: 0px;
}
#nav-list li:last-child {
margin-right: 0px;
}
#nav-list li a, #serviceClick {
text-decoration: none;
font-family: 'Muli', sans-serif;
font-size: .9rem;
color: #747678;
letter-spacing: 1px;
vertical-align: top;
transition: all .3s;-webkit-transition: all .3s;
cursor: pointer;
}
#nav-list li a:after, #serviceClick:after {
content: '';
display: block;
width: 0;
margin-top: 6px;
background: #b82222;
height: 2px;
transition: width .3s;
}
#nav-list li a:hover, #serviceClick:hover {
color: #4b4b4b;
transition: all .3s;-webkit-transition: all .3s;
}
#nav-list li a:hover:after, #serviceClick:hover:after {
width: 100%;
transition: width .3s;
}
#nav-list li a.navInverse {
padding: 10px 12px;
border-radius: 2px;
box-sizing: border-box;
font-family: 'Muli', sans-serif;
font-size: 1.2rem;
color: #FFF;
border: 1px solid #b82222;
background: linear-gradient(to right bottom, #b82222, #a51e1e);
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
}
#nav-list li a.navInverse:hover {
background: #b82222;
background: #FFF;
color: #b82222;
/*transition: all 0s;-webkit-transition: all 0s;*/
}
#nav-list li a.navInverse:after {
content: '';
display: none;
width: 0px;
height: 0px;
transition: none;
}
#nav-pop-close {
display: none;
}
#nav-pop-close, #close-panel {
position: relative;
top: 3%;
left: 90%;
background-image: url("https://s3.us-east-2.amazonaws.com/mbkitsystems/icon_close.png");
background-size: 30px 30px;
background-repeat: no-repeat;
height: 30px;
width: 30px;
cursor: pointer;
}
/*- Service NAV -*/
#serviceNav {
width: 100%;
top: -40vh;
left: 0;
z-index: -1;
position: fixed;
background-color: rgba(0,0,0,0);
height: 40vh;
transition: all .4s;
padding: 20px 0;
}
#serviceNav.activeSol {
top: 0;
width: 100%;
background-color: rgba(0,0,0,.9);
z-index: 99999;
height: 40vh;
}
.popup-close {
position: absolute;
right: 12px;
top: 12px;
width: 32px;
height: auto;
}
#serviceNavInner {
margin: 0 5%;
height: 100%;
position: relative;
}
/*--- Block 1 ---*/
#serviceNavBlock1 {
width: 33%;
height: 100%;
border-right: 1px solid rgba(255,255,255,.5);
position: relative;
}
#serviceNavBlock1Wrap {
width: 80%;
text-align: left;
}
/*--- Block 2 ---*/
#serviceNavBlock2 {
width: 66.6%;
height: 100%;
margin: 10px auto;
position: relative;
}
.servNavItemWrap {
display: inline-block;
vertical-align: top;
width: 25%;
margin-bottom: 50px;
text-align: center;
cursor: pointer;
-webkit-backface-visibility: hidden;
}
.servNavItemWrap img {
width: 75px;
height: 75px;
-webkit-transition: all 0.25s;transition: all 0.25s;
}
.servNavItemWrap:hover img {
-webkit-transition: all 0.25s;transition: all 0.25s;
-webkit-transform: scale(1.1);transform: scale(1.1);
-webkit-backface-visibility: hidden;
}
.servNavItemWrap a {
text-decoration: none;
outline: none;
box-sizing: border-box;
}
.servNavItemTitle {
margin-top: 5px;
-webkit-transition: all 0.25s;transition: all 0.25s;
}
.servNavItemWrap:hover .servNavItemTitle {
color: #FFF;
-webkit-transition: all 0.25s;transition: all 0.25s;
}
/*---------------------------------------------- MEDIA QUERY 640 --------------------------------------------*/
#media screen and (max-width:640px) {
#mobile-button {
display: block;
}
#nav-pop {
float: none;
opacity: 0;
position: fixed;
margin-top: 0;
width: 75%;
right: -100%;
height: 100vh;
transform: translateX(100%);-webkit-transform: translateX(100%);
}
#nav-pop-close {
display: block;
background-size: 20px 20px;
height: 20px;
width: 20px;
}
#nav-list {
margin-top: 20px;
}
#nav-list li {
display: block;
position: relative;
width: 100%;
margin: 0;
padding: 20px 10%;
background: linear-gradient(to bottom right, #151515, #2f2f2f);
background: #2f2f2f;
text-align: left;
cursor: pointer;
border-bottom: .3px solid #FFF;
}
#quoteButton {
position: absolute;
width: 100%;
bottom: 0;
left: 0;
}
#nav-list li:hover #quoteButton {
background: #2f2f2f;
}
#nav-list li:hover, #nav-list li:active {
background: #000;
}
#nav-list li:first-child {
margin-left: 0;
}
#nav-list li:last-child {
margin: 20px auto;
text-align: center;
border-bottom: none;
background: #2f2f2f;
padding: 20px 0;
}
#nav-list li a, #serviceClick {
font-family: 'Nunito', sans-serif;
font-size: .8rem;
color: #FFF;
letter-spacing: .3rem;
}
#nav-list li a:after, #serviceClick:after {
display: none;
}
#nav-list li a:hover, #serviceClick:hover {
color: #FFF;
}
#nav-list li a:hover:after, #serviceClick:hover:after {
width: 0%;
}
/*- Service NAV -*/
#serviceNav {
width: 100%;
z-index: 1;
position: relative;
background-color: rgba(0,0,0,0);
height: 200px;
transition: all .4s;
padding: 10px 0;
display: none;
top: 0;
}
#serviceNav.activeSol {
background-color: #000;
z-index: 9999999;
height: auto;
min-height: 20%;
top: 0;
border-bottom: .01em solid #FFF;
}
.popup-close {
display: none;
}
#serviceNavInner {
margin: 0 2.5%;
}
/*--- Block 1 ---*/
#serviceNavBlock1 {
width: 100%;
height: 50px;
border-right: none;
display: block;
position: relative;
}
#serviceNavBlock1Wrap {
width: 100%;
text-align: center;
}
#navOverviewT, #navOverviewP {
display: none;
}
#solOverviewB {
font-size: .7rem;
}
/*--- Block 2 ---*/
#serviceNavBlock2 {
width: 100%;
height: 100%;
margin: 10px auto;
display: block;
}
.servNavItemWrap {
display: inline-block;
width: 25%;
margin-bottom: 15px;
}
.servNavItemWrap img {
width: 30px;
height: 30px;
}
.servNavItemTitle {
margin-top: 5px;
font-size: .5rem;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav>
<div id="nav-logo">
</div>
<div id="mobile-button"><img src="" class="hidden" alt=""></div>
<div id="nav-pop">
<div id="nav-pop-close"></div>
<ul id="nav-list">
<li>ABOUT</li>
<li id="serviceClick">SOLUTIONS</li>
<div id="serviceNav">
<div id="serviceNavInner">
<div id="serviceNavBlock1" class="iblock">
<button class="buttonInv2" id="solOverviewB">Solutions Overview</button>
</div><div id="serviceNavBlock2" class="iblock">
</div>
</div>
</div>
<li>LEARN</li>
<li>CONTACT</li>
<li>REQUEST QUOTE</li>
</ul>
</div>
</nav>
var relative = $(this);
Is picking the serviceClick list item (li) and then you are checking
if (!relative.hasClass('activeSol')) {
but you never added the class to the li, instead you added it to the div #serviceNav.
I think changing
if (!relative.hasClass('activeSol')) {
to
if (!$('#serviceNav').hasClass('activeSol')) {
should work.
Your shouldn't check for $("#serviceClick") for class activeSol, should check on $("#serviceNav") instead.
if (!$('#serviceNav').hasClass('activeSol')) {
$('#serviceNav').removeClass('activeSol');
$('#serviceNav').addClass('activeSol').slideDown();
} else {
$('#serviceNav').removeClass('activeSol').slideUp(500);
}
relative doesn't have the class 'activeSol' and will never have it, in order to have it toggle the visibility of your menu, you should add and remove classes to it, like this:
$('#serviceClick').click( function () {
var relative = $(this);
if (!relative.hasClass('opened')) { // if it's not opened
relative.addClass('opened'); // open it
$('#serviceNav').removeClass('activeSol');
$('#serviceNav').addClass('activeSol').slideDown();
} else { // if it's opened
relative.removeClass('opened'); // close it
$('#serviceNav').removeClass('activeSol').slideUp(500);
}
return false;
});