fast responsive navigation in CSS & jQuery

Question

I spent many weeks, even months, to get this menu working. It is my very first "bigger" work in programming at all.

The menu is fully responsive and has some features such like:

sub and sub-sub menu expand to the left if there is not enough space to the right
touch-friendly
pretty fast

In particular, I would like to know if I have unwanted event bubbling in my JavaScript/jQuery code. And also if there are general mistakes and/or bad code style.

I would also like to know if my code is overall too complicated for a "simple" menu because I feel like it is.

Future work planned is to add a minimal CSS only fallback solution with the noscript tag.

here is also a link to my codepen

jQuery( document ).ready( function( $ ) {

		// add JS-classes into the HTML-Tag
		$('html').addClass('js');

		// add classes for sub menus and sub menus toggle button
		$(".site-nav li > ul").parent('li').addClass('has-sub-menu');
		$(".site-nav li > ul").addClass('sub-menu');

		// create button for expand- und collapse the menu and render it into the header
		var create_toggle_nav_button = ['<div class="toggle-site-nav">Menu</div>'].join("");
		$("header").append(create_toggle_nav_button); 

		// create button for expand- und collapse the sub menu  for mobile view and add them to all sub menus
		var create_sub_toggle_button = ['<span class="toggle-sub-menu"></span>'].join("");
		$(".has-sub-menu > a").after(create_sub_toggle_button);

		// define variables
		var $menu = $('.site-nav'),
		$toggle_nav = $('.toggle-site-nav'),
		$toggle_sub_menu = $('.toggle-sub-menu');

		// collapse and expand function of the main menu
		$toggle_nav.click(function(e) {
			e.preventDefault();
			$menu.slideToggle();
		});

		// collapse and expand function of the drop down menu for mobile view
		$toggle_sub_menu.click(function(e) {
			e.preventDefault();
			var $this = $(this);
			$this.toggleClass('active').next('ul').slideToggle();
		});

		// display hidden elements again, when browserwindow is resized by user
		$(window).resize(function(){
		  var w = $(window).width();
		  if(w > 900) {
			  $('.site-nav').removeAttr('style');
			  $('.sub-menu').removeAttr('style');
		  }
	  	});

	  	// collapse navigation automatically to the left, when it run out of the viewport
		$(".site-nav .has-sub-menu").on('mouseenter mouseleave', function (e) {

	        var nav_element = $('ul:first', this);
	        var element_offset = nav_element .offset();
	        var element_offset_left = element_offset.left;
	        var element_width = nav_element.width();
	        var viewport_width = $(window).width();

	        var element_in_viewport = (element_offset_left + element_width <= viewport_width);
	                 
	        if ( ! element_in_viewport ) {
	            $(this).addClass('sub-left');
	        } else {
	            $(this).removeClass('sub-left');
	        }
	    });
		
});

* {
 	margin:0;
	padding:0;
	list-style:none;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

body::after {
	content:'';
	position: fixed;
	bottom:1em;
	right:1em;
	opacity: 0.5;
	font-size: 0.8em;
	z-index: 10;
}

header {
	width:100%;
	background: white;
}

.container {
	max-width:1000px;
	margin:0 auto;
 }

.logo {
	display:block;
	width:100%;
	padding:1em;
	text-decoration:none;
	color:gray; /* ? */
}

.site-nav {
	z-index: 10;
}

.site-nav>ul {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: stretch;
  flex-wrap: wrap;
  margin: auto;
}

.site-nav >ul> li {
	display: inline-block;
  flex-wrap:wrap;
  width:auto;
  padding:0;
}

.site-nav a {
	display:inline-flex;
  align-content: stretch;
  padding:1em;
  white-space: nowrap;
	text-decoration:none;
  height:100%;
	width:100%;
	color:white;     /* text color of all */
	background:#5a595a; /* background color main nav Link 1 */
	border-top: 1px solid rgba(0,0,0,0.5);
	z-index: 10;
}

.site-nav a:hover {
	background:#8c8e94; /* mouseover color Link 1 and Link 1.1 opacity */
}

.js .site-nav {
	display:none;
}

.js .sub-menu {
	display:none;
  position:absolute;
  top:100%;
  left:0px;
  z-index: 12;
}

.js .sub-menu .sub-menu {
  top:0px;
  right:100%;
  left:auto;
  text-align:right;
}

  .js .has-sub-menu { 
  position:relative;
  top:100%;
  left:0px;
}

.sub-menu li:last-of-type {
	padding-bottom:0;
}

.sub-menu a {
	background:#676567; /* background color menu 2.1 only */
}

.sub-menu .sub-menu a {
	background:#747274; /* background color menu 2.1.1 only */
}

.sub-menu .sub-menu a:hover {
	background:#8c8e94; /* mouseover color Link 1 and Link 1.1 */
}

/* toggles */

.toggle-site-nav {
	background:#5a595a; /* background color of menu button when resized */
	display:block;
	position:absolute;
	right:0;
	top:0;
	padding:1em;
	color:white; /* text color of the word menu in menu button when resized */
	cursor:pointer;
	z-index: 10;
}

.toggle-site-nav:hover {
	background:rgba(0,0,0,0.5); /* mouseover color of menu button when resized */
}

.toggle-sub-menu {
	display:none;
}

.js .toggle-sub-menu {
	display:flex;
  position:absolute;
  align-content: center;
  right:0em;
 	top:1.05em; /* hight of the borders */
	background:#817e81; /* backgound of annoying squares when resized */
	height: 15px;
	width: 15px;
	cursor:pointer;
  z-index: 11;
}

.js .toggle-sub-menu.active {
	background: #DCDCDC; /* color of annoying square after clicking on it when resized */
}
	
.toggle-sub-menu:hover,
.toggle-sub-menu.active:hover  {
	background-color: rgba(0,0,0,0.4); /* mouseover of annoying squares when resized */
}

@media screen and (min-width:900px) {
	
	.logo {
		width:auto;
		float:left;	
	}
	
	.site-nav {
		width:auto;
		display: flex !important;
	}

	.site-nav a {
		border:none;
	}
	
	.site-nav li {
		width:auto;
		padding:0;
	}

	.site-nav li:hover {
		background:rgba(52,50,52,1); /* mouseover background color of all menu */
	}

	.has-sub-menu a {
		padding-right: 2em; /* check this value */
	}

	.has-sub-menu:after { /* check this for editing the stripes */
		display:block;
    content:'';
    text-indent: -9999px;
    width: 18px;
    height: 18px;
    background: url(http://undefined.bplaced.net/ic_expand_more_18px.svg);
    background-size: 18px 18px;
    position: absolute;
    align-content: center;
		top:1.0em;
		right: 0.5em;
  }

	/* sub menu */
	.site-nav li:hover > .sub-menu {
		display: block;
	  	position: absolute;
	  	width: 300px; /* width of sub menus */
	  	padding: 0 25px 25px 25px;
	  	left: -25px;
	}

	.sub-menu {display:none;}
	
	.sub-menu li {
		width:100%;	
	}
	
	.sub-menu > a {
		width:100%;
		display:block;	
	}

	.has-sub-menu .has-sub-menu:after {
		display:block;
    content:'';
    text-indent: -9999px;
    width: 18px;
    height: 18px;
    background: url(http://undefined.bplaced.net/ic_chevron_right_18px.svg);
    background-size: 18px 18px;
    position: absolute;
    align-content: center;
    top:1.0em;
    right: 0.5em;
 	}
	
	.has-sub-menu .has-sub-menu:hover .sub-menu {
		display:block;	
		position:absolute;
	  width: 300px; /* width of subsub menues */
	  padding: 0 25px 25px 25px;
	  left: 224px;
	  top: 0px;
	}
	
	.toggle-site-nav,
	.toggle-sub-menu {
		display:none !important;	
	}

	/* navigations items, which collapse to the left */

	.sub-left > .sub-menu {
		left:auto;
		right:0;
	}

	.site-nav .sub-menu .sub-left > .sub-menu {
		left:-275px;
	}
}


@media screen and (max-width: 899px){
.site-nav>ul {
    display: block !important;
    width: 100%;
    margin: auto;
}
  
.site-nav >ul> li {
    display: block !important;
    margin: auto;
    width: 100%;
}
  
.site-nav {
    z-index: 13;
    margin-top: 19px;
  }
  
 .js .toggle-sub-menu {
	  display:block;
    position:absolute;
    align-content: center;
    right:0.3em;
 	  top:0.29em; /* hight of the borders */
	  background:#817e81; /* backgound of annoying squares when resized */
	  width:2.7em;
	  height:2.7em;
	  cursor:pointer;
    z-index: 11;
  } 
  
  .toggle-sub-menu:before {
	  display: block;
    content: '';
    text-indent: -9999px;
    width: 36px;
    height: 36px;
    background: url(http://undefined.bplaced.net/ic_expand_more_36px_wt.svg);
    background-size: 36px 36px;
    position: absolute;
    align-content: center;
    top: 0.2em;
    left: 0.1118em;
 	}
  
  .js .toggle-sub-menu.active {
	  background: #141614; /* color of annoying square after clicking on it when resized */
  }
	  
 .toggle-sub-menu:hover,
 .toggle-sub-menu.active:hover  {
	  background-color: #313431; /* mouseover of annoying squares when resized */
  }

 .sub-menu {
		display: block;
    margin: auto;
    width: 100%;/* width of sub menu */
  }
	
 .has-sub-menu  {
    display: block !important;
    margin: auto !important;
    width: 100% !important;/* width of subsub menu */
  }
  
  /* sub menu */
	
 .has-sub-menu .has-sub-menu .sub-menu {
		display:none;	
		position:relative;
	  width: 100%; /* width of subsub menues */
	  margin: auto;
	  left: 0px;
    top: auto;
    z-index: 99999;
	}
  
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <div class="container">
   <a href="#" class="logo"></a>
    <nav class="site-nav">
      <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a>
          <ul>
            <li><a href="#">Link 2.1</a></li>
            <li><a href="#">Link 2.1</a>
              <ul>
                <li><a href="#">Link 2.1.1</a></li>
                <li><a href="#">Link 2.1.2</a></li>
                <li><a href="#">Link 2.1.3</a></li>
                <li><a href="#">Link 2.1.4</a></li>
              </ul>
            </li>
            <li><a href="#">Link 2.1</a></li>
          </ul>
        </li>
        <li><a href="#">loooooong</a>
          <ul>
            <li><a href="#">Link 3.1</a></li>
            <li><a href="#">Link 3.2</a></li>
            <li><a href="#">Link 3.3</a></li>
            <li><a href="#">loooooooooooooooooong</a></li>
            <li><a href="#">Link 3.5</a></li>
          </ul>
        </li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>
        <li><a href="#">Link 6</a></li>
        <li><a href="#">Link 7</a>
          <ul>
            <li><a href="#">Link 7.1</a></li>
            <li><a href="#">Link 7.2</a></li>
            <li><a href="#">Link 7.3</a>
              <ul>
                <li><a href="#">Link 7.3.1</a></li>
                <li><a href="#">Link 7.3.2</a></li>
                <li><a href="#">loooooooong</a></li>
                <li><a href="#">Link 7.3.4</a></li>
                <li><a href="#">Link 7.3.5</a></li>
              </ul>
            </li>
            <li><a href="#">Link 7.4</a></li>
            <li><a href="#">Link 7.5</a></li>
          </ul>
        </li>
        <li><a href="#">Link 8</a></li>
      </ul>
    </nav>

  </div>
</header>

I wrestled a bear once. · Accepted Answer · 2017-11-22 16:41:04Z

As I mentioned in your meta post, avoid excessive comments. They make your code smelly and long and they don't help.
Avoid adding classnames with JS when you can do it with markup instead. Sure it's less work to do it with JS but it's hacky and less performant.
Same goes for adding HTML with JS. Avoid it.
If you join('') an array with a single string in it you're just gonna get your single string back, so why use the array at all? In fact, why use a variable at all? You're just creating junk that will need to be garbage collected. Skip all that and just pass the string to jQuery.
It's a good idea to define your vars at the top so you can easily go back and see what's been defined later.
Keep in mind that every variable you creating is taking up space in memory and will eventually have to be garbage collected so try not to create variables all willy-nilly, especially ones that you will only use once, like var $this = $(this);. Just use $(this), no reason to create a variable for it.
I ignored this in my re-write, but you should avoid using the style attribute, and you should prefer media queries over the window's resize event.
You can remove the attribute from both elements at once and save yourself a line of code.. $('.site-nav, .sub-menu').removeAttr('style');
Set up multiple vars in a single statement.
I would have preferred ternary to a simple if/else, but if you do have to use the if else, don't negate the condition since you're doing something in both cases anyway.

jQuery(document).ready(function($) {

  var $menu = $('.site-nav'),
    $toggle_nav = $('.toggle-site-nav'),
    $toggle_sub_menu = $('.toggle-sub-menu');

  $('html').addClass('js');

  // main menu
  $toggle_nav.click(function(e) {
    e.preventDefault();
    $menu.slideToggle();
  });

  // drop down menu for mobile view
  $toggle_sub_menu.click(function(e) {
    e.preventDefault();
    $(this).toggleClass('active').next('ul').slideToggle();
  });

  // display hidden elements again, when browserwindow is resized by user
  $(window).resize(function() {
    if ($(window).width() > 900) {
      $('.site-nav, .sub-menu').removeAttr('style');
    }
  });

  // collapse navigation when it run out of the viewport
  $(".site-nav .has-sub-menu").on('mouseenter mouseleave', function(e) {

    var nav_element = $('ul:first', this),
      element_offset = nav_element.offset(),
      element_offset_left = element_offset.left,
      element_width = nav_element.width(),
      viewport_width = $(window).width(),
      element_in_viewport = (element_offset_left + element_width <= viewport_width);

    element_in_viewport ? 
      $(this).removeClass('sub-left') : 
      $(this).addClass('sub-left') ;
  });

});

* {
  margin: 0;
  padding: 0;
  list-style: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

body::after {
  content: '';
  position: fixed;
  bottom: 1em;
  right: 1em;
  opacity: 0.5;
  font-size: 0.8em;
  z-index: 10;
}

header {
  width: 100%;
  background: white;
}

.container {
  max-width: 1000px;
  margin: 0 auto;
}

.logo {
  display: block;
  width: 100%;
  padding: 1em;
  text-decoration: none;
  color: gray;
  /* ? */
}

.site-nav {
  z-index: 10;
}

.site-nav>ul {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: stretch;
  flex-wrap: wrap;
  margin: auto;
}

.site-nav>ul>li {
  display: inline-block;
  flex-wrap: wrap;
  width: auto;
  padding: 0;
}

.site-nav a {
  display: inline-flex;
  align-content: stretch;
  padding: 1em;
  white-space: nowrap;
  text-decoration: none;
  height: 100%;
  width: 100%;
  color: white;
  /* text color of all */
  background: #5a595a;
  /* background color main nav Link 1 */
  border-top: 1px solid rgba(0, 0, 0, 0.5);
  z-index: 10;
}

.site-nav a:hover {
  background: #8c8e94;
  /* mouseover color Link 1 and Link 1.1 opacity */
}

.js .site-nav {
  display: none;
}

.js .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0px;
  z-index: 12;
}

.js .sub-menu .sub-menu {
  top: 0px;
  right: 100%;
  left: auto;
  text-align: right;
}

.js .has-sub-menu {
  position: relative;
  top: 100%;
  left: 0px;
}

.sub-menu li:last-of-type {
  padding-bottom: 0;
}

.sub-menu a {
  background: #676567;
  /* background color menu 2.1 only */
}

.sub-menu .sub-menu a {
  background: #747274;
  /* background color menu 2.1.1 only */
}

.sub-menu .sub-menu a:hover {
  background: #8c8e94;
  /* mouseover color Link 1 and Link 1.1 */
}


/* toggles */

.toggle-site-nav {
  background: #5a595a;
  /* background color of menu button when resized */
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  padding: 1em;
  color: white;
  /* text color of the word menu in menu button when resized */
  cursor: pointer;
  z-index: 10;
}

.toggle-site-nav:hover {
  background: rgba(0, 0, 0, 0.5);
  /* mouseover color of menu button when resized */
}

.toggle-sub-menu {
  display: none;
}

.js .toggle-sub-menu {
  display: flex;
  position: absolute;
  align-content: center;
  right: 0em;
  top: 1.05em;
  /* hight of the borders */
  background: #817e81;
  /* backgound of annoying squares when resized */
  height: 15px;
  width: 15px;
  cursor: pointer;
  z-index: 11;
}

.js .toggle-sub-menu.active {
  background: #DCDCDC;
  /* color of annoying square after clicking on it when resized */
}

.toggle-sub-menu:hover,
.toggle-sub-menu.active:hover {
  background-color: rgba(0, 0, 0, 0.4);
  /* mouseover of annoying squares when resized */
}

@media screen and (min-width:900px) {
  .logo {
    width: auto;
    float: left;
  }
  .site-nav {
    width: auto;
    display: flex !important;
  }
  .site-nav a {
    border: none;
  }
  .site-nav li {
    width: auto;
    padding: 0;
  }
  .site-nav li:hover {
    background: rgba(52, 50, 52, 1);
    /* mouseover background color of all menu */
  }
  .has-sub-menu a {
    padding-right: 2em;
    /* check this value */
  }
  .has-sub-menu:after {
    /* check this for editing the stripes */
    display: block;
    content: '';
    text-indent: -9999px;
    width: 18px;
    height: 18px;
    background: url(http://undefined.bplaced.net/ic_expand_more_18px.svg);
    background-size: 18px 18px;
    position: absolute;
    align-content: center;
    top: 1.0em;
    right: 0.5em;
  }
  /* sub menu */
  .site-nav li:hover>.sub-menu {
    display: block;
    position: absolute;
    width: 300px;
    /* width of sub menus */
    padding: 0 25px 25px 25px;
    left: -25px;
  }
  .sub-menu {
    display: none;
  }
  .sub-menu li {
    width: 100%;
  }
  .sub-menu>a {
    width: 100%;
    display: block;
  }
  .has-sub-menu .has-sub-menu:after {
    display: block;
    content: '';
    text-indent: -9999px;
    width: 18px;
    height: 18px;
    background: url(http://undefined.bplaced.net/ic_chevron_right_18px.svg);
    background-size: 18px 18px;
    position: absolute;
    align-content: center;
    top: 1.0em;
    right: 0.5em;
  }
  .has-sub-menu .has-sub-menu:hover .sub-menu {
    display: block;
    position: absolute;
    width: 300px;
    /* width of subsub menues */
    padding: 0 25px 25px 25px;
    left: 224px;
    top: 0px;
  }
  .toggle-site-nav,
  .toggle-sub-menu {
    display: none !important;
  }
  /* navigations items, which collapse to the left */
  .sub-left>.sub-menu {
    left: auto;
    right: 0;
  }
  .site-nav .sub-menu .sub-left>.sub-menu {
    left: -275px;
  }
}

@media screen and (max-width: 899px) {
  .site-nav>ul {
    display: block !important;
    width: 100%;
    margin: auto;
  }
  .site-nav>ul>li {
    display: block !important;
    margin: auto;
    width: 100%;
  }
  .site-nav {
    z-index: 13;
    margin-top: 19px;
  }
  .js .toggle-sub-menu {
    display: block;
    position: absolute;
    align-content: center;
    right: 0.3em;
    top: 0.29em;
    /* hight of the borders */
    background: #817e81;
    /* backgound of annoying squares when resized */
    width: 2.7em;
    height: 2.7em;
    cursor: pointer;
    z-index: 11;
  }
  .toggle-sub-menu:before {
    display: block;
    content: '';
    text-indent: -9999px;
    width: 36px;
    height: 36px;
    background: url(http://undefined.bplaced.net/ic_expand_more_36px_wt.svg);
    background-size: 36px 36px;
    position: absolute;
    align-content: center;
    top: 0.2em;
    left: 0.1118em;
  }
  .js .toggle-sub-menu.active {
    background: #141614;
    /* color of annoying square after clicking on it when resized */
  }
  .toggle-sub-menu:hover,
  .toggle-sub-menu.active:hover {
    background-color: #313431;
    /* mouseover of annoying squares when resized */
  }
  .sub-menu {
    display: block;
    margin: auto;
    width: 100%;
    /* width of sub menu */
  }
  .has-sub-menu {
    display: block !important;
    margin: auto !important;
    width: 100% !important;
    /* width of subsub menu */
  }
  /* sub menu */
  .has-sub-menu .has-sub-menu .sub-menu {
    display: none;
    position: relative;
    width: 100%;
    /* width of subsub menues */
    margin: auto;
    left: 0px;
    top: auto;
    z-index: 99999;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <div class="container">
    <a href="#" class="logo"></a>
    <nav class="site-nav">
      <ul>
        <li><a href="#">Link 1</a></li>
        <li class='has-sub-menu'><a href="#">Link 2</a>
        <span class="toggle-sub-menu"></span>
          <ul class='sub-menu'>
            <li><a href="#">Link 2.1</a></li>
            <li class='has-sub-menu'><a href="#">Link 2.1</a>
            <span class="toggle-sub-menu"></span>
              <ul class='sub-menu'>
                <li><a href="#">Link 2.1.1</a></li>
                <li><a href="#">Link 2.1.2</a></li>
                <li><a href="#">Link 2.1.3</a></li>
                <li><a href="#">Link 2.1.4</a></li>
              </ul>
            </li>
            <li><a href="#">Link 2.1</a></li>
          </ul>
        </li>
        <li class='has-sub-menu'><a href="#">loooooong</a>
        <span class="toggle-sub-menu"></span>
          <ul class='sub-menu'>
            <li><a href="#">Link 3.1</a></li>
            <li><a href="#">Link 3.2</a></li>
            <li><a href="#">Link 3.3</a></li>
            <li><a href="#">loooooooooooooooooong</a></li>
            <li><a href="#">Link 3.5</a></li>
          </ul>
        </li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>
        <li><a href="#">Link 6</a></li>
        <li class='has-sub-menu'><a href="#">Link 7</a>
        <span class="toggle-sub-menu"></span>
          <ul class='sub-menu'>
            <li><a href="#">Link 7.1</a></li>
            <li><a href="#">Link 7.2</a></li>
            <li class='has-sub-menu'><a href="#">Link 7.3</a>
            <span class="toggle-sub-menu"></span>
              <ul class='sub-menu'>
                <li><a href="#">Link 7.3.1</a></li>
                <li><a href="#">Link 7.3.2</a></li>
                <li><a href="#">loooooooong</a></li>
                <li><a href="#">Link 7.3.4</a></li>
                <li><a href="#">Link 7.3.5</a></li>
              </ul>
            </li>
            <li><a href="#">Link 7.4</a></li>
            <li><a href="#">Link 7.5</a></li>
          </ul>
        </li>
        <li><a href="#">Link 8</a></li>
      </ul>
    </nav>

  </div>
  <div class="toggle-site-nav">Menu</div>
</header>

thank you very much for your answer, I really appreciate that. I should have mentioned that adding the classnames and HTML in js was the best solution because the HTML is generated by a pretty annoying CMS I am forced to work with. I tried to touch the code as less as possible. The CMS relies on its own proprietary language which "extend" the HTML markup. But it really is a mess. example: <cc:loop type="topic" obj="mytopic" maintopic="&mymaintopic.number"> Thank you very much for all your suggestions and improvements. I will try and see what I can adapt of it. — undefined, Nov 23, 2017 at 10:58
For the style attribute, it was just easier to use that instead of creating media queries. And about the comments, I totally agree. I added most of them just for my mind, like reminders. Again, thank you very much — undefined, Nov 23, 2017 at 11:02
Adding to your answer, you should store the result of $(window) into a variable. You call it twice on your code, and n times (once per resize event). Storing it in a variable will skip all that calling. — Ismael Miguel, Dec 4, 2017 at 0:46
yea the resize event is something that's going to be called several times per second so definitely worth putting it in a var, but like I said better to avoid the resize event entirely and use media queries and css instead — I wrestled a bear once., Dec 4, 2017 at 4:27

Stack Exchange Network

fast responsive navigation in CSS & jQuery

1 Answer 1

Your Answer

Not the answer you're looking for? Browse other questions tagged
javascript
jquery
css
or ask your own question.

Hot Network Questions

fast responsive navigation in CSS & jQuery

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged javascriptjquerycss or ask your own question.

Related

Hot Network Questions

Not the answer you're looking for? Browse other questions tagged
javascript
jquery
css
or ask your own question.