CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Daniel Edwards
Daniel Edwards

Reputation: 163

Click outside nav to close

I have the below code which is working fine, however I need it to close the nav when clicked on the outside of the nav (so not the button)

I have tried this but it doesnt work

$("body").click(function (e) {
         $('#navwrapper').removeClass('is-visible');
    });

any help would be appreciated

many thanks

	var offset = 0;
			
				var navigationContainer = $('#cd-nav'),
			    mainNavigation = navigationContainer.find('#cd-main-nav ul');
			
			
				checkMenu();
				$(window).scroll(function(){
					checkMenu();
				});
			
				$('.cd-nav-trigger').click(function(){
					$('.content').toggleClass('static');
				})
			
				$('.cd-nav-trigger').on('click', function(){
					$(this).toggleClass('menu-is-open');
					mainNavigation.off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend').toggleClass('is-visible');
				});
			
				function checkMenu() {
					if( $(window).scrollTop() > offset && !navigationContainer.hasClass('is-fixed')) {
						navigationContainer.addClass('is-fixed').find('.cd-nav-trigger').one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(){
							mainNavigation.addClass('has-transitions');
						});
					} else if ($(window).scrollTop() <= offset) {
						//check if the menu is open when scrolling up
						if( mainNavigation.hasClass('is-visible')  && !$('html').hasClass('no-csstransitions') ) {
							//close the menu with animation
							mainNavigation.addClass('is-hidden').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
								//wait for the menu to be closed and do the rest
								mainNavigation.removeClass('is-visible is-hidden has-transitions');
								navigationContainer.removeClass('is-fixed');
								$('.cd-nav-trigger').removeClass('menu-is-open');
							});
						//check if the menu is open when scrolling up - fallback if transitions are not supported
						} else if( mainNavigation.hasClass('is-visible')  && $('html').hasClass('no-csstransitions') ) {
								mainNavigation.removeClass('is-visible has-transitions');
								navigationContainer.removeClass('is-fixed');
								$('.cd-nav-trigger').removeClass('menu-is-open');
								
						//scrolling up with menu closed
					} else {
							navigationContainer.removeClass('is-fixed');
							mainNavigation.removeClass('has-transitions');
						}
					} 
				}
#cd-nav  {
  outline: 0px;
  z-index: 1002;
  position: absolute;
  display: block;
}
#cd-nav ul {

  position: fixed;
  width: 90%;

  right: 5%;
  bottom: 80px;
  padding-bottom:20px;
  box-shadow: 0 0 10px rgba(0, 0,0, 0.4);
  background: white;
  visibility: hidden;
  overflow: hidden;
  z-index: 1;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
  -webkit-transform-origin: 100% 100%;
  -moz-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  -o-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
  -webkit-transition: -webkit-transform 0.3s, visibility 0s 0.3s;
  -moz-transition: -moz-transform 0.3s, visibility 0s 0.3s;
  transition: transform 0.3s, visibility 0s 0.3s;
}
#cd-nav ul li {
   -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  background-color: #ffffff;
  width: 90%;
  padding-bottom: 10px;
  padding-top: 10px;
  margin-left: 5%;
  border-bottom: 1px solid rgb(235, 235, 235);
}
#cd-nav ul.is-visible {
  visibility: visible;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  -webkit-transition: -webkit-transform 0.3s, visibility 0s 0s;
  -moz-transition: -moz-transform 0.3s, visibility 0s 0s;
  transition: transform 0.3s, visibility 0s 0s;
    max-height: 70%;
  overflow: scroll;
}

#cd-nav ul.is-visible::-webkit-scrollbar {
    -webkit-appearance: none;
}

#cd-nav ul.is-visible::-webkit-scrollbar:vertical {
    width: 12px;
}

#cd-nav ul.is-visible::-webkit-scrollbar:horizontal {
    height: 12px;
}

#cd-nav ul.is-visible::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .5);
    border-radius: 10px;
    border: 2px solid #ffffff;
}

#cd-nav ul.is-visible::-webkit-scrollbar-track {
    border-radius: 10px;  
    background-color: #ffffff; 
}

#cd-nav li a {
   display: block;
  text-decoration: none;
  color: #57585b;
  overflow: hidden;
  width: 95%;
}

.cd-nav-trigger {
  position: fixed;
  bottom: 40px;
  right: 5%;
  width: 45%;
  height: 45px;
  background: #ecb75f;
  white-space: nowrap;
  z-index: 2;
  color: #000000 !important;
  line-height: 45px;
  text-decoration: none;
  text-align: center;
  border-right: 1px solid #57585b;
  border-top: 1px solid #57585b;
  border-bottom: 1px solid #57585b;
}

span.Icontext {
float: left;
  width: 66px;
  white-space: normal;
  line-height: 17px;
  padding-left: 28px;
  padding-top: 4px;
}
.cd-nav-left {  position: fixed;
  bottom: 40px;
  left: 5%;
  width: 45%;
  height: 45px;
  background: #fafafb;
  white-space: nowrap;
  z-index: 2;
  color: #57585b;
  line-height: 45px;
  text-decoration: none;
  text-align: center;
  border-left: 1px solid #57585b;
  border-top: 1px solid #57585b;
  border-bottom: 1px solid #57585b;
 }


.navIcon {font-size: 26px;  vertical-align: middle;}


.rotate{
    -webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
	transition: all 0.2s linear;
    display: inline-block;
}

.rotate.down{
    -moz-transform:rotate(180deg);
    -webkit-transform:rotate(180deg);
    -o-transform:rotate(180deg);
     -ms-transform:rotate(180deg);
    transform:rotate(180deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cd-nav">
		<a href="#0" class="cd-nav-trigger"><span class="Icontext">subnav</span><span class="rotate ha ha-th navIcon"></span></a>
		<a href="#0" class="cd-nav-left">Compare park</a>
		

		<nav id="cd-main-nav">
			<ul id="navwrapper">
				<li><a href="http://www.google.co.uk">Homepage</a></li>
				<li><a href="#0">Services</a></li>
				<li><a href="#0">Portfolio</a></li>
				<li><a href="#0">Pricing</a></li>
				<li><a href="#0">Contact</a></li>
				<li><a href="#0">Homepage</a></li>
				<li><a href="#0">Services</a></li>
				<li><a href="#0">Portfolio</a></li>
				<li><a href="#0">Pricing</a></li>
				<li><a href="#0">Contact</a></li>
				<li><a href="#0">Homepage</a></li>
				<li><a href="#0">Services</a></li>
				<li><a href="#0">Portfolio</a></li>
				<li><a href="#0">Pricing</a></li>
				<li><a href="#0">Contact</a></li>
			</ul>
		</nav>
	</div>

Upvotes: 0

Views: 3442

Answers (1)

Alvaro Montoro
Alvaro Montoro

Reputation: 29645

The code works fine, there are only two minor tweaks to make it work completely:

  1. Attach the click event listener to the document and not to the body.

    $(document).on("click", function() {
   $('#navwrapper').removeClass('is-visible');
});

    Right now you only have one element (#cd-nav) in the body, and it has position:absolute; That means that it is taken out of the regular flow of the document, "emptying" the body, that will have a height of 0 and you will never be able to click on it. So attach the event handler to the document instead of the body.

    Note: This many not be necessary on the real page, as I guess that you will have more content that will occupy the window, but it applies for the demo that you posted in the question.

  2. Stop propagation of events when the element that opens the menu is clicked.

    $('.cd-nav-trigger').on('click', function(e){
    e.preventDefault();
    e.stopPropagation();

    The click event will bubble to the body and the document, so even if the trigger displays it, then the event will bubble up and the click event handler of the document will hide it. You want to stop the propagation to avoid that.

You can see it working in this code (find the changes by looking for the comment // AM below):

var offset = 0;

var navigationContainer = $('#cd-nav'),
    mainNavigation = navigationContainer.find('#cd-main-nav ul');


checkMenu();

// AM: add the listener to the document
$(document).on("click", function() {
  $('#navwrapper').removeClass('is-visible')
});

$(window).scroll(function(){
  checkMenu();
});

$('.cd-nav-trigger').click(function(){
  $('.content').toggleClass('static');
})

$('.cd-nav-trigger').on('click', function(e){
  // AM: prevent the default behavior
  e.preventDefault();
  e.stopPropagation();
  $(this).toggleClass('menu-is-open');
  mainNavigation.off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend').toggleClass('is-visible');
});

function checkMenu() {
  if( $(window).scrollTop() > offset && !navigationContainer.hasClass('is-fixed')) {
    navigationContainer.addClass('is-fixed').find('.cd-nav-trigger').one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(){
      mainNavigation.addClass('has-transitions');
    });
  } else if ($(window).scrollTop() <= offset) {
    //check if the menu is open when scrolling up
    if( mainNavigation.hasClass('is-visible')  && !$('html').hasClass('no-csstransitions') ) {
      //close the menu with animation
      mainNavigation.addClass('is-hidden').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
        //wait for the menu to be closed and do the rest
        mainNavigation.removeClass('is-visible is-hidden has-transitions');
        navigationContainer.removeClass('is-fixed');
        $('.cd-nav-trigger').removeClass('menu-is-open');
      });
      //check if the menu is open when scrolling up - fallback if transitions are not supported
    } else if( mainNavigation.hasClass('is-visible')  && $('html').hasClass('no-csstransitions') ) {
      mainNavigation.removeClass('is-visible has-transitions');
      navigationContainer.removeClass('is-fixed');
      $('.cd-nav-trigger').removeClass('menu-is-open');

      //scrolling up with menu closed
    } else {
      navigationContainer.removeClass('is-fixed');
      mainNavigation.removeClass('has-transitions');
    }
  } 
}
#cd-nav  {
  outline: 0px;
  z-index: 1002;
  position: absolute;
  display: block;
}
#cd-nav ul {

  position: fixed;
  width: 90%;

  right: 5%;
  bottom: 80px;
  padding-bottom:20px;
  box-shadow: 0 0 10px rgba(0, 0,0, 0.4);
  background: white;
  visibility: hidden;
  overflow: hidden;
  z-index: 1;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
  -webkit-transform-origin: 100% 100%;
  -moz-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  -o-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
  -webkit-transition: -webkit-transform 0.3s, visibility 0s 0.3s;
  -moz-transition: -moz-transform 0.3s, visibility 0s 0.3s;
  transition: transform 0.3s, visibility 0s 0.3s;
}
#cd-nav ul li {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  background-color: #ffffff;
  width: 90%;
  padding-bottom: 10px;
  padding-top: 10px;
  margin-left: 5%;
  border-bottom: 1px solid rgb(235, 235, 235);
}
#cd-nav ul.is-visible {
  visibility: visible;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  -webkit-transition: -webkit-transform 0.3s, visibility 0s 0s;
  -moz-transition: -moz-transform 0.3s, visibility 0s 0s;
  transition: transform 0.3s, visibility 0s 0s;
  max-height: 70%;
  overflow: scroll;
}

#cd-nav ul.is-visible::-webkit-scrollbar {
  -webkit-appearance: none;
}

#cd-nav ul.is-visible::-webkit-scrollbar:vertical {
  width: 12px;
}

#cd-nav ul.is-visible::-webkit-scrollbar:horizontal {
  height: 12px;
}

#cd-nav ul.is-visible::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, .5);
  border-radius: 10px;
  border: 2px solid #ffffff;
}

#cd-nav ul.is-visible::-webkit-scrollbar-track {
  border-radius: 10px;  
  background-color: #ffffff; 
}

#cd-nav li a {
  display: block;
  text-decoration: none;
  color: #57585b;
  overflow: hidden;
  width: 95%;
}

.cd-nav-trigger {
  position: fixed;
  bottom: 40px;
  right: 5%;
  width: 45%;
  height: 45px;
  background: #ecb75f;
  white-space: nowrap;
  z-index: 2;
  color: #000000 !important;
  line-height: 45px;
  text-decoration: none;
  text-align: center;
  border-right: 1px solid #57585b;
  border-top: 1px solid #57585b;
  border-bottom: 1px solid #57585b;
}

span.Icontext {
  float: left;
  width: 66px;
  white-space: normal;
  line-height: 17px;
  padding-left: 28px;
  padding-top: 4px;
}
.cd-nav-left {  position: fixed;
  bottom: 40px;
  left: 5%;
  width: 45%;
  height: 45px;
  background: #fafafb;
  white-space: nowrap;
  z-index: 2;
  color: #57585b;
  line-height: 45px;
  text-decoration: none;
  text-align: center;
  border-left: 1px solid #57585b;
  border-top: 1px solid #57585b;
  border-bottom: 1px solid #57585b;
}


.navIcon {font-size: 26px;  vertical-align: middle;}


.rotate{
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  transition: all 0.2s linear;
  display: inline-block;
}

.rotate.down{
  -moz-transform:rotate(180deg);
  -webkit-transform:rotate(180deg);
  -o-transform:rotate(180deg);
  -ms-transform:rotate(180deg);
  transform:rotate(180deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cd-nav">
  <a href="#0" class="cd-nav-trigger"><span class="Icontext">subnav</span><span class="rotate ha ha-th navIcon"></span></a>
  <a href="#0" class="cd-nav-left">Compare park</a>


  <nav id="cd-main-nav">
    <ul id="navwrapper">
      <li><a href="http://www.google.co.uk">Homepage</a></li>
      <li><a href="#0">Services</a></li>
      <li><a href="#0">Portfolio</a></li>
      <li><a href="#0">Pricing</a></li>
      <li><a href="#0">Contact</a></li>
      <li><a href="#0">Homepage</a></li>
      <li><a href="#0">Services</a></li>
      <li><a href="#0">Portfolio</a></li>
      <li><a href="#0">Pricing</a></li>
      <li><a href="#0">Contact</a></li>
      <li><a href="#0">Homepage</a></li>
      <li><a href="#0">Services</a></li>
      <li><a href="#0">Portfolio</a></li>
      <li><a href="#0">Pricing</a></li>
      <li><a href="#0">Contact</a></li>
    </ul>
  </nav>
</div>

Upvotes: 1

Related Questions