Menu icon Foundation
Foundation 5 and IE8 -- toggle menu not working

I'm working with Foundation 5, doing a tutorial on the topbar toggle menu. My code works fine in Chrome; when viewport is small, the menu button appears and clicking on it reveals the menu items. In IE8, however, the menu button doesn't replace the menu at any viewport width. I'm not getting any javascript errors, but when I run debugging in developer tools, I do see this message:
LOG: Selector '[class*="column"]+[class*="column"]:last-child' threw exception 'Error: SYNTAX_ERR: The string "[class*="column"]+[class*="column"]:last-child", is not a valid CSS selector.

My code is below. Note that it's not the version of jQuery that's the problem, the menu works fine in Chrome with jQuery 1.10.2.

Thanks!

<!doctype html>
<!--[if lt IE 9]>
    	<html class="no-js lt-ie9" lang="en">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<![endif]-->
<!--[if gt IE 8]><!--><html class="no-js" lang="en"><!--<![endif]-->
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bikes Rock! Foundation 5 Basic Features</title>
	<link rel="stylesheet" href="css/normalize.css" />
    <link rel="stylesheet" href="css/foundation.css" />
	
	<!--[if lt IE 9]>
		<style>
			div#firstRow {
				margin-top: 50px;
			}
		
			.lt-ie9 .top-bar {
			  background: #2f2f2f;
			  *zoom: 1;
			  overflow: visible; 
			}
			.lt-ie9 .top-bar:before, .lt-ie9 .top-bar:after {
			  content: " ";
			  display: table; 
			}
			.lt-ie9 .top-bar:after { clear: both; }
			.lt-ie9 .top-bar .toggle-topbar { display: none; }
			.lt-ie9 .top-bar .title-area { float: left; }
			.lt-ie9 .top-bar .name h1 a { width: auto; }
			.lt-ie9 .top-bar input,
			.lt-ie9 .top-bar .button {
			  line-height: 2em;
			  font-size: 0.875em;
			  height: 2em;
			  padding: 0 10px;
			  position: relative;
			  top: 8px; 
			}
			.lt-ie9 .top-bar.expanded { background: #111111; }
			.lt-ie9 .contain-to-grid .top-bar {
			  max-width: 57.5em;
			  margin: 0 auto; 
			}
			.lt-ie9 .top-bar-section {
			  -webkit-transition: none 0 0;
			  -moz-transition: none 0 0;
			  transition: none 0 0;
			  left: 0 !important; 
			}
			.lt-ie9 .top-bar-section ul {
			  width: auto;
			  height: auto !important;
			  display: inline; 
			}
			.lt-ie9 .top-bar-section ul li { float: left; }
			.lt-ie9 .top-bar-section ul li > a { padding-right: 14px !important; }
			.lt-ie9 .top-bar-section ul li .js-generated { display: none; }
			.lt-ie9 .top-bar-section li a:not(.button) {
			  padding: 0 15px;
			  line-height: 45px;
			  background: #111111; 
			}
			.lt-ie9 .top-bar-section li a:not(.button):hover { background: #2b2b2b; }
			.lt-ie9 .top-bar-section .has-dropdown > a { padding-right: 35px !important; }
			.lt-ie9 .top-bar-section .has-dropdown > a:after {
			  content: "";
			  display: block;
			  width: 0;
			  height: 0;
			  border: solid 5px;
			  border-color: rgba(255, 255, 255, 0.5) transparent transparent transparent;
			  margin-top: -2.5px; 
			}
			.lt-ie9 .top-bar-section .has-dropdown.moved { position: relative; }
			.lt-ie9 .top-bar-section .has-dropdown.moved > .dropdown { visibility: hidden; }
			.lt-ie9 .top-bar-section .has-dropdown:hover > .dropdown, 
			.lt-ie9 .top-bar-section .has-dropdown:active > .dropdown { visibility: visible; }
			.lt-ie9 .top-bar-section .has-dropdown .dropdown li.has-dropdown > a:after {
			  border: none;
			  content: "\00bb";
			  margin-top: -7px;
			  right: 5px; 
			}
			.lt-ie9 .top-bar-section .dropdown {
			  left: 0;
			  top: auto;
			  background: transparent; 
			}
			.lt-ie9 .top-bar-section .dropdown li a {
			  line-height: 1;
			  white-space: nowrap;
			  padding: 7px 15px;
			  background: #1e1e1e; 
			}
			.lt-ie9 .top-bar-section .dropdown li label {
			  white-space: nowrap;
			  background: #1e1e1e; 
			}
			.lt-ie9 .top-bar-section .dropdown li .dropdown {
			  left: 100%;
			  top: 0; 
			}
			.lt-ie9 .top-bar-section > ul > .divider {
			  border-bottom: none;
			  border-top: none;
			  border-right: solid 1px #2b2b2b;
			  border-left: solid 1px black;
			  clear: none;
			  height: 45px;
			  width: 0px; 
			}
			.lt-ie9 .top-bar-section .has-form {
			  background: #111111;
			  padding: 0 15px;
			  height: 45px; 
			}
			.lt-ie9 .top-bar-section ul.right li .dropdown {
			  left: auto;
			  right: 0; 
			}
			.lt-ie9 .top-bar-section ul.right li .dropdown li .dropdown { right: 100%; }
		</style>
	<![endif]-->

    <script src="js/vendor/modernizr.js"></script>
	<!--[if lt IE 9]>
	  <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script>
	  <script src="//s3.amazonaws.com/nwapi/nwmatcher/nwmatcher-1.2.5-min.js"></script>
	  <script src="//html5base.googlecode.com/svn-history/r38/trunk/js/selectivizr-1.0.3b.js"></script>
	  <script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.1.0/respond.min.js"></script>
	<![endif]-->
	</head>
	<body>
		<div class="contain-to-grid"><!-- fixed class can cause topbar to overlap content on IE8 at small width-->
			<!--[if lt IE 9]>
				<nav class="top-bar">
			<![endif]-->
			<!--[if gt IE 8]><!--><nav class="top-bar" data-topbar><!--<![endif]-->
			<!--"data-topbar" causes IE8 to throw JS error, but is necessary to make menu items appear when menu icon (appears at small width) is clicked. Alternate code may be necessary. Normally we'd just put data-topbar in tag all by itself, with no "=", but instead we're using data-topbar="topbar" to satisfy well-formed XML-->
				<ul class="title-area">
					<li class="name">
						<h1><a href="bikesrock.html">BikesRock</a></h1>
					</li>
					 <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
					<li class="toggle-topbar menu-icon"><a href="">Menu</a></li><!--  toggle-topbar means appear when width is small-->
				</ul>
				<section class="top-bar-section">
					<ul class="right">
						<li class="divider"></li>
						<li><a href="#">About</a></li>
						<li class="divider"></li>
						<li><a href="#">Contact</a></li>
						<li class="divider"></li>
						<li><a href="#">Top Bikes</a></li>
						<li class="divider"></li>
					</ul>
				</section>
			</nav>
		</div>

		<!-- In below -- want to figure out how to make bike on right disappear and hero div to take up 12 column width.-->
		<div class="row" id="firstRow">
			<div class="large-8 small-8 columns">
				<div class="panel">
					<h2 style="word-wrap:break-word;">Welcome to BikesRock.info!</h2>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil, non, voluptatibus tenetur autem recusandae magnam soluta officia ad error. Sapiente, magnam, praesentium ipsam libero eveniet ipsa esse voluptate aspernatur a facere. Quasi, dignissimos, recusandae. Amet, eum, vitae, eaque, sed facere quam necessitatibus laboriosam voluptatem consectetur culpa esse animi eveniet fugit similique repudiandae veniam rerum commodi tempora aut fuga iusto perferendis recusandae minima laborum quasi officiis dicta distinctio nam officia ratione quis error minus reprehenderit hic itaque facilis asperiores provident labore eos quibusdam aperiam numquam. Laudantium, iusto, eligendi a aut deserunt repudiandae sunt impedit quas esse perspiciatis officia itaque excepturi ratione!
					</p>
					
					<a href="#" class="button round">Find out more!</a>
				</div>
			</div>
			<div class="large-4 small-4 columns">
				<img src="img/bikes2.jpg" />
			</div>
		</div>

		<hr />

		<div class="row">
			<div class="large-12 columns">
				<h3>What is BikesRock.info?</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, labore, dignissimos beatae in cum fugiat qui ex voluptatum corrupti voluptate nihil eaque rerum maiores soluta fuga rem nemo! Temporibus, distinctio, doloribus magnam dolorum provident illum accusamus suscipit error ut doloremque. Impedit, et natus ullam consectetur praesentium architecto assumenda nostrum eveniet est voluptas ipsa vitae voluptatum inventore placeat suscipit quas ut officiis autem magni quos eligendi! Alias, nesciunt corporis rerum doloribus cupiditate qui tenetur deserunt vero.
				</p>
			</div>
		</div>

		<hr />

		<div class="row">
			<div class="large-12 columns">
				<h3>Our Top Bikes:</h3>
				<ul class="large-block-grid-3">
					<li><img src="img/bikes3.jpg" alt=""></li>
					<li><img src="img/bikes4.jpg" alt=""></li>
					<li><img src="img/bikes5.jpg" alt=""></li>
					<li><img src="img/bikes6.jpg" alt=""></li>
					<li><img src="img/bikes7.jpg" alt=""></li>
					<li><img src="img/bikes8.jpg" alt=""></li>
				</ul>
			</div>
		</div>

		<!-- Note - Foundation 5 natively uses jquery 2. But IE8 will throw a js error with jQuery 2.x or 1.11, so using 1.10.2 as hack for that browser.-->
		<!-- Also note that Microsoft no longer supports Windows XP as of April 2014, so IE8 may become a security risk for clients. Use of IE8 is not recommended.-->

		<!--[if lt IE 9]>
			<script src="js/vendor/jquery1.10.2.min.js"></script>
		<![endif]-->
		<![if !IE]>
			<script src="js/vendor/jquery2.1.0.js"></script>
		<![endif]>
		<script src="js/foundation.min.js"></script>
		<script>
		  $(document).foundation();
		</script>
		<script src="js/rem.js"></script>
	</body>
</html>
            

         

ie8Foundation 5topbar

I'm working with Foundation 5, doing a tutorial on the topbar toggle menu. My code works fine in Chrome; when viewport is small, the menu button appears and clicking on it reveals the menu items. In IE8, however, the menu button doesn't replace the menu at any viewport width. I'm not getting any javascript errors, but when I run debugging in developer tools, I do see this message:
LOG: Selector '[class*="column"]+[class*="column"]:last-child' threw exception 'Error: SYNTAX_ERR: The string "[class*="column"]+[class*="column"]:last-child", is not a valid CSS selector.

My code is below. Note that it's not the version of jQuery that's the problem, the menu works fine in Chrome with jQuery 1.10.2.

Thanks!

<!doctype html>
<!--[if lt IE 9]>
    	<html class="no-js lt-ie9" lang="en">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<![endif]-->
<!--[if gt IE 8]><!--><html class="no-js" lang="en"><!--<![endif]-->
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bikes Rock! Foundation 5 Basic Features</title>
	<link rel="stylesheet" href="css/normalize.css" />
    <link rel="stylesheet" href="css/foundation.css" />
	
	<!--[if lt IE 9]>
		<style>
			div#firstRow {
				margin-top: 50px;
			}
		
			.lt-ie9 .top-bar {
			  background: #2f2f2f;
			  *zoom: 1;
			  overflow: visible; 
			}
			.lt-ie9 .top-bar:before, .lt-ie9 .top-bar:after {
			  content: " ";
			  display: table; 
			}
			.lt-ie9 .top-bar:after { clear: both; }
			.lt-ie9 .top-bar .toggle-topbar { display: none; }
			.lt-ie9 .top-bar .title-area { float: left; }
			.lt-ie9 .top-bar .name h1 a { width: auto; }
			.lt-ie9 .top-bar input,
			.lt-ie9 .top-bar .button {
			  line-height: 2em;
			  font-size: 0.875em;
			  height: 2em;
			  padding: 0 10px;
			  position: relative;
			  top: 8px; 
			}
			.lt-ie9 .top-bar.expanded { background: #111111; }
			.lt-ie9 .contain-to-grid .top-bar {
			  max-width: 57.5em;
			  margin: 0 auto; 
			}
			.lt-ie9 .top-bar-section {
			  -webkit-transition: none 0 0;
			  -moz-transition: none 0 0;
			  transition: none 0 0;
			  left: 0 !important; 
			}
			.lt-ie9 .top-bar-section ul {
			  width: auto;
			  height: auto !important;
			  display: inline; 
			}
			.lt-ie9 .top-bar-section ul li { float: left; }
			.lt-ie9 .top-bar-section ul li > a { padding-right: 14px !important; }
			.lt-ie9 .top-bar-section ul li .js-generated { display: none; }
			.lt-ie9 .top-bar-section li a:not(.button) {
			  padding: 0 15px;
			  line-height: 45px;
			  background: #111111; 
			}
			.lt-ie9 .top-bar-section li a:not(.button):hover { background: #2b2b2b; }
			.lt-ie9 .top-bar-section .has-dropdown > a { padding-right: 35px !important; }
			.lt-ie9 .top-bar-section .has-dropdown > a:after {
			  content: "";
			  display: block;
			  width: 0;
			  height: 0;
			  border: solid 5px;
			  border-color: rgba(255, 255, 255, 0.5) transparent transparent transparent;
			  margin-top: -2.5px; 
			}
			.lt-ie9 .top-bar-section .has-dropdown.moved { position: relative; }
			.lt-ie9 .top-bar-section .has-dropdown.moved > .dropdown { visibility: hidden; }
			.lt-ie9 .top-bar-section .has-dropdown:hover > .dropdown, 
			.lt-ie9 .top-bar-section .has-dropdown:active > .dropdown { visibility: visible; }
			.lt-ie9 .top-bar-section .has-dropdown .dropdown li.has-dropdown > a:after {
			  border: none;
			  content: "\00bb";
			  margin-top: -7px;
			  right: 5px; 
			}
			.lt-ie9 .top-bar-section .dropdown {
			  left: 0;
			  top: auto;
			  background: transparent; 
			}
			.lt-ie9 .top-bar-section .dropdown li a {
			  line-height: 1;
			  white-space: nowrap;
			  padding: 7px 15px;
			  background: #1e1e1e; 
			}
			.lt-ie9 .top-bar-section .dropdown li label {
			  white-space: nowrap;
			  background: #1e1e1e; 
			}
			.lt-ie9 .top-bar-section .dropdown li .dropdown {
			  left: 100%;
			  top: 0; 
			}
			.lt-ie9 .top-bar-section > ul > .divider {
			  border-bottom: none;
			  border-top: none;
			  border-right: solid 1px #2b2b2b;
			  border-left: solid 1px black;
			  clear: none;
			  height: 45px;
			  width: 0px; 
			}
			.lt-ie9 .top-bar-section .has-form {
			  background: #111111;
			  padding: 0 15px;
			  height: 45px; 
			}
			.lt-ie9 .top-bar-section ul.right li .dropdown {
			  left: auto;
			  right: 0; 
			}
			.lt-ie9 .top-bar-section ul.right li .dropdown li .dropdown { right: 100%; }
		</style>
	<![endif]-->

    <script src="js/vendor/modernizr.js"></script>
	<!--[if lt IE 9]>
	  <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script>
	  <script src="//s3.amazonaws.com/nwapi/nwmatcher/nwmatcher-1.2.5-min.js"></script>
	  <script src="//html5base.googlecode.com/svn-history/r38/trunk/js/selectivizr-1.0.3b.js"></script>
	  <script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.1.0/respond.min.js"></script>
	<![endif]-->
	</head>
	<body>
		<div class="contain-to-grid"><!-- fixed class can cause topbar to overlap content on IE8 at small width-->
			<!--[if lt IE 9]>
				<nav class="top-bar">
			<![endif]-->
			<!--[if gt IE 8]><!--><nav class="top-bar" data-topbar><!--<![endif]-->
			<!--"data-topbar" causes IE8 to throw JS error, but is necessary to make menu items appear when menu icon (appears at small width) is clicked. Alternate code may be necessary. Normally we'd just put data-topbar in tag all by itself, with no "=", but instead we're using data-topbar="topbar" to satisfy well-formed XML-->
				<ul class="title-area">
					<li class="name">
						<h1><a href="bikesrock.html">BikesRock</a></h1>
					</li>
					 <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
					<li class="toggle-topbar menu-icon"><a href="">Menu</a></li><!--  toggle-topbar means appear when width is small-->
				</ul>
				<section class="top-bar-section">
					<ul class="right">
						<li class="divider"></li>
						<li><a href="#">About</a></li>
						<li class="divider"></li>
						<li><a href="#">Contact</a></li>
						<li class="divider"></li>
						<li><a href="#">Top Bikes</a></li>
						<li class="divider"></li>
					</ul>
				</section>
			</nav>
		</div>

		<!-- In below -- want to figure out how to make bike on right disappear and hero div to take up 12 column width.-->
		<div class="row" id="firstRow">
			<div class="large-8 small-8 columns">
				<div class="panel">
					<h2 style="word-wrap:break-word;">Welcome to BikesRock.info!</h2>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil, non, voluptatibus tenetur autem recusandae magnam soluta officia ad error. Sapiente, magnam, praesentium ipsam libero eveniet ipsa esse voluptate aspernatur a facere. Quasi, dignissimos, recusandae. Amet, eum, vitae, eaque, sed facere quam necessitatibus laboriosam voluptatem consectetur culpa esse animi eveniet fugit similique repudiandae veniam rerum commodi tempora aut fuga iusto perferendis recusandae minima laborum quasi officiis dicta distinctio nam officia ratione quis error minus reprehenderit hic itaque facilis asperiores provident labore eos quibusdam aperiam numquam. Laudantium, iusto, eligendi a aut deserunt repudiandae sunt impedit quas esse perspiciatis officia itaque excepturi ratione!
					</p>
					
					<a href="#" class="button round">Find out more!</a>
				</div>
			</div>
			<div class="large-4 small-4 columns">
				<img src="img/bikes2.jpg" />
			</div>
		</div>

		<hr />

		<div class="row">
			<div class="large-12 columns">
				<h3>What is BikesRock.info?</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, labore, dignissimos beatae in cum fugiat qui ex voluptatum corrupti voluptate nihil eaque rerum maiores soluta fuga rem nemo! Temporibus, distinctio, doloribus magnam dolorum provident illum accusamus suscipit error ut doloremque. Impedit, et natus ullam consectetur praesentium architecto assumenda nostrum eveniet est voluptas ipsa vitae voluptatum inventore placeat suscipit quas ut officiis autem magni quos eligendi! Alias, nesciunt corporis rerum doloribus cupiditate qui tenetur deserunt vero.
				</p>
			</div>
		</div>

		<hr />

		<div class="row">
			<div class="large-12 columns">
				<h3>Our Top Bikes:</h3>
				<ul class="large-block-grid-3">
					<li><img src="img/bikes3.jpg" alt=""></li>
					<li><img src="img/bikes4.jpg" alt=""></li>
					<li><img src="img/bikes5.jpg" alt=""></li>
					<li><img src="img/bikes6.jpg" alt=""></li>
					<li><img src="img/bikes7.jpg" alt=""></li>
					<li><img src="img/bikes8.jpg" alt=""></li>
				</ul>
			</div>
		</div>

		<!-- Note - Foundation 5 natively uses jquery 2. But IE8 will throw a js error with jQuery 2.x or 1.11, so using 1.10.2 as hack for that browser.-->
		<!-- Also note that Microsoft no longer supports Windows XP as of April 2014, so IE8 may become a security risk for clients. Use of IE8 is not recommended.-->

		<!--[if lt IE 9]>
			<script src="js/vendor/jquery1.10.2.min.js"></script>
		<![endif]-->
		<![if !IE]>
			<script src="js/vendor/jquery2.1.0.js"></script>
		<![endif]>
		<script src="js/foundation.min.js"></script>
		<script>
		  $(document).foundation();
		</script>
		<script src="js/rem.js"></script>
	</body>
</html>
            

         
Wing-Hou Chan about 5 years ago

Hey Christophe!

Foundation doesn't support IE8. Check out this for more details: http://foundation.zurb.com/docs/compatibility.html

There is a great discussion going on about Foundation 5 and IE8 and the thread is here: http://foundation.zurb.com/forum/posts/241-foundation-5-and-ie8

Post any suggestions or comments there!

Christophe Maso about 5 years ago

Hi Wing-Hou, thanks for replying! I know it doesn't, but some of our clients want their pages to be responsive in IE8 anyway, so I've been combing the web for the past couple days looking for workarounds and polyfills. I've read both of the articles you linked to -- the code from the 2nd link is in my code, right below where Modernizr.js is called. It works quite well as far getting the page to look the way it should, but obviously not so much with the functionality. The CSS between the style tags is something I came across at https://gist.github.com/tmayr/5190565, listed as "Foundation Topbar IE8 Fix". It makes the menu functional, but the menu won't toggle to the icon menu when the viewport is small. The links just stay there and keep shifting to left, until they disappear (somewhere around 340px wide).

Has anyone had any success with F5's toggle topbar menu in IE8?

Jeremy Englert about 5 years ago

Foundation 5 uses jQuery 2.x, which doesn't work with IE8. Have you tried using an older version of jQuery?

Wing-Hou Chan about 5 years ago

@Jeremy

Yep Christophe has:

<!--[if lt IE 9]>
  <script src="js/vendor/jquery1.10.2.min.js"></script>
<![endif]-->
<![if !IE]>
  <script src="js/vendor/jquery2.1.0.js"></script>
<![endif]>

@Christophe

Oh, yeah, missed that.

You mean once the viewport shrinks, topbar doesn't hide the links and show the hamburger icon?

If this is the case, that is a CSS problem.

If the hamburger icon does show after the topbar shrinks, then that's a JS problem.

Petr Certik almost 5 years ago

The issue might be with selectivizr. Quoting from their homepage: "The emulation is not dynamic. Once the styles are applied they are fixed so changes to the DOM won't be reflected."

Does topbar manipulate the DOM?

Luca Pastorello over 4 years ago

There is no easy way to do that,
unlike other foundation javascripts (like foundation.tabs.js, foundation.equalizer.js)
foundation.dropdown.js heavily leverages on ecma5 strict language.

So, many methods like getElementsByClassName, window.outerWidth, etc. etc. are not supported by IE8.

In case of IE8,
I suggest you to unbind all events from that dropdown and mount a IE8 compatible script to handle it or give to the dropdown another kind of fallback.

(it's also possible to rewrite line-by-line (~440) all unsupported methods from foundation.dropdown.js appliyng it's relative javascript fallback)