Menu icon Foundation
I could us some advice on my off-canvas and top- nav (codepen included).

I made a off-canvas, and top-bar navigation, and was I was wondering if my html code looks okay? I was thinking about doing some YouTube tutorials on Foundation, but I want to make sure my code is "up to speed." Do you see anything that you would differently, or have I forgotten something. The off-canvas appears on large screen, but when you go down to a small screen, I revealed the top-bar navigation. Here is a link to my codepen. https://codepen.io/mike316/pen/VWwQXK

 

And here is the html below

<!doctype html>
<html class="no-js" lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Foundation for Sites</title>
    <link rel="stylesheet" href="css/foundation.css">
    <link rel="stylesheet" href="css/app.css">
  </head>
  <body>
    <div class="off-canvas-wrapper">
	    <div class="off-canvas position-left show-for-medium" id="offCanvas" data-transition="overlap" data-off-canvas>
	      <ul class="menu vertical">
	        <li><a href="#">Home</a></li>
	        <li><a href="#">About</a></li>
	        <li><a href="#">References</a></li>
	        <li><a href="#">Contact</a></li>
	      </ul>
	      <button class="close-button" aria-label="Close menu" type="button" data-close>
	        <span aria-hidden="true">&times;</span>
	      </button>
	    </div> <!-- off-canvas -->
	    <div class="off-canvas-content" data-off-canvas-content>
	      <div class="expanded row">
	        <div class="title-bar" data-responsive-toggle="menu">
            <button class="menu-icon" type="button" data-toggle></button>
            <div class="title-bar-title">Menu</div>
	        </div>
	        <div class="top-bar show-for-small-only" id="menu">
	            <div class="top-bar-left">
	              <ul class="dropdown vertical menu" data-dropdown-menu>
	              <li class="menu-text">Foundation 6</li>
	              <li><a href="#">Home</a></li>
	              <li><a href="#">About</a></li>
	              <li><a href="#">References</a></li>
	              <li><a href="#">Contact</a></li>
	              </ul>
	            </div>
	        </div>
	        <button type="button" class="button show-for-medium float-right" data-toggle="offCanvas">Menu</button>
	        <h1 class="text-center">Welcome</h1>
	      </div><!-- Top bar navigation -->
	    </div><!-- off canvas content -->
    </div><!-- off canvas wrapper-->
    <script src="js/vendor/jquery.js"></script>
    <script src="js/vendor/what-input.js"></script>
    <script src="js/vendor/foundation.js"></script>
    <script src="js/app.js"></script>
  </body>
</html>

off-canvastop-barfoundation 6Foundation for Sites

I made a off-canvas, and top-bar navigation, and was I was wondering if my html code looks okay? I was thinking about doing some YouTube tutorials on Foundation, but I want to make sure my code is "up to speed." Do you see anything that you would differently, or have I forgotten something. The off-canvas appears on large screen, but when you go down to a small screen, I revealed the top-bar navigation. Here is a link to my codepen. https://codepen.io/mike316/pen/VWwQXK

 

And here is the html below

<!doctype html>
<html class="no-js" lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Foundation for Sites</title>
    <link rel="stylesheet" href="css/foundation.css">
    <link rel="stylesheet" href="css/app.css">
  </head>
  <body>
    <div class="off-canvas-wrapper">
	    <div class="off-canvas position-left show-for-medium" id="offCanvas" data-transition="overlap" data-off-canvas>
	      <ul class="menu vertical">
	        <li><a href="#">Home</a></li>
	        <li><a href="#">About</a></li>
	        <li><a href="#">References</a></li>
	        <li><a href="#">Contact</a></li>
	      </ul>
	      <button class="close-button" aria-label="Close menu" type="button" data-close>
	        <span aria-hidden="true">&times;</span>
	      </button>
	    </div> <!-- off-canvas -->
	    <div class="off-canvas-content" data-off-canvas-content>
	      <div class="expanded row">
	        <div class="title-bar" data-responsive-toggle="menu">
            <button class="menu-icon" type="button" data-toggle></button>
            <div class="title-bar-title">Menu</div>
	        </div>
	        <div class="top-bar show-for-small-only" id="menu">
	            <div class="top-bar-left">
	              <ul class="dropdown vertical menu" data-dropdown-menu>
	              <li class="menu-text">Foundation 6</li>
	              <li><a href="#">Home</a></li>
	              <li><a href="#">About</a></li>
	              <li><a href="#">References</a></li>
	              <li><a href="#">Contact</a></li>
	              </ul>
	            </div>
	        </div>
	        <button type="button" class="button show-for-medium float-right" data-toggle="offCanvas">Menu</button>
	        <h1 class="text-center">Welcome</h1>
	      </div><!-- Top bar navigation -->
	    </div><!-- off canvas content -->
    </div><!-- off canvas wrapper-->
    <script src="js/vendor/jquery.js"></script>
    <script src="js/vendor/what-input.js"></script>
    <script src="js/vendor/foundation.js"></script>
    <script src="js/app.js"></script>
  </body>
</html>
Rafi Benkual 2 months ago

Looks good to me! You do not need the top-bar in there if you are only showing the off-canvas. Here is codepen with the modified code https://codepen.io/rafibomb/pen/mwELvB

 

It would be awesome to see some tutorials from you - especially the entry level kind. We'd be happy to help and review any content :)

Zurb Rules 2 months ago

Thanks for the kind words Rafi, and the Codepen.