0 Replies - 374 Views - Last Post: 24 May 2018 - 08:49 AM

#1 pfar54   User is offline

  • D.I.C Regular

Reputation: 0
  • View blog
  • Posts: 462
  • Joined: 30-April 15

Add/Remove class to get a menu to display

Posted 24 May 2018 - 08:49 AM

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?

jsfiddle link for demonstration

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

}


<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><a href="http://localhost:8080/about.php">ABOUT</a></li>
			<li id="serviceClick">SOLUTIONS</li>
			<div id="serviceNav">
				<div id="serviceNavInner">
					<div id="serviceNavBlock1" class="iblock">
							<a href="http://localhost:8080/solutions.php"><button class="buttonInv2" id="solOverviewB">Solutions Overview</button></a>
					</div><div id="serviceNavBlock2" class="iblock">
					</div>
				</div>
			</div>
			<li><a href="http://localhost:8080/learn.php">LEARN</a></li>
			<li><a href="http://localhost:8080/contact.php">CONTACT</a></li>
			<li><a href="http://localhost:8080/quote.php" class="navInverse" id="quoteButton">REQUEST QUOTE</a></li>
		</ul>
	</div>
</nav>


Is This A Good Question/Topic? 0
  • +

Page 1 of 1