Menu icon Foundation
OffCanvas Issue - Foundation 6

## Application.html.erb layout file ##

<html>
<head>
    <title>MicroBlogUikit</title>
	<%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
	<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<%= csrf_meta_tags %>
</head>
<body>
	<div class="off-canvas-wrapper" >
		<div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
		<header>
				<div class="off-canvas position-left" id="OffCanvas" data-off-canvas>
					<ul class="menu vertical">
						<li><%= link_to "Plant", root_path, class: 'menu-text'  %></li>
						<%= render 'layouts/shared/navigation_links' %>
					</ul>
				</div>
				<div class="off-canvas-content show-for-medium" data-off-canvas-content>
					<div class="title-bar">
						<div class="title-bar-left">
							<ul class="menu" id="navigation-list">
								<li><%= link_to "Plant", root_path, class: 'menu-text'  %></li>
								<%= render 'layouts/shared/navigation_links' %>
							</ul>
						</div>
						<div class="title-bar-right">
							<ul class="menu">
								<li><input type="search" placeholder="search"></li>
								<li><button type="button" class="button">Search</button></li>
							</ul>
						</div>
					</div>
				</div>
				<div class="hide-for-medium">
					<div class="menu">
						<button type="button" class="button" data-toggle="OffCanvas">Open Menu</button>
					</div>
				</div>
			</header>
			<div class="container">
				<p class="notice "><%= notice %></p>
				<p class="alert"><%= alert %></p>
				<%= yield %>
			</div>
		</div>
	</div>
</body>
</html>
            

         

## application.js file ##
            
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require foundation.min
//= require foundation
//= require what-input.min
//= require app
//= require_tree .

I'm working with Foundation 6 in a mini-project to keep me honest. I've download foundation and added the files to my project. I've linked them as well. I have the CSS portion working just fine. I'm working in Rails.

However, I've ran into a problem with offCanvas. I simply can't get the button click to show the offcanvas element.

Any help would be appreciated. Below is code and an image.

Thanks in advance.

Microblog offcanvas

javascript6railsoffcanvas

## Application.html.erb layout file ##

<html>
<head>
    <title>MicroBlogUikit</title>
	<%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
	<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<%= csrf_meta_tags %>
</head>
<body>
	<div class="off-canvas-wrapper" >
		<div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
		<header>
				<div class="off-canvas position-left" id="OffCanvas" data-off-canvas>
					<ul class="menu vertical">
						<li><%= link_to "Plant", root_path, class: 'menu-text'  %></li>
						<%= render 'layouts/shared/navigation_links' %>
					</ul>
				</div>
				<div class="off-canvas-content show-for-medium" data-off-canvas-content>
					<div class="title-bar">
						<div class="title-bar-left">
							<ul class="menu" id="navigation-list">
								<li><%= link_to "Plant", root_path, class: 'menu-text'  %></li>
								<%= render 'layouts/shared/navigation_links' %>
							</ul>
						</div>
						<div class="title-bar-right">
							<ul class="menu">
								<li><input type="search" placeholder="search"></li>
								<li><button type="button" class="button">Search</button></li>
							</ul>
						</div>
					</div>
				</div>
				<div class="hide-for-medium">
					<div class="menu">
						<button type="button" class="button" data-toggle="OffCanvas">Open Menu</button>
					</div>
				</div>
			</header>
			<div class="container">
				<p class="notice "><%= notice %></p>
				<p class="alert"><%= alert %></p>
				<%= yield %>
			</div>
		</div>
	</div>
</body>
</html>
            

         

## application.js file ##
            
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require foundation.min
//= require foundation
//= require what-input.min
//= require app
//= require_tree .

I'm working with Foundation 6 in a mini-project to keep me honest. I've download foundation and added the files to my project. I've linked them as well. I have the CSS portion working just fine. I'm working in Rails.

However, I've ran into a problem with offCanvas. I simply can't get the button click to show the offcanvas element.

Any help would be appreciated. Below is code and an image.

Thanks in advance.

Microblog offcanvas
Brian Tan almost 4 years ago

Common off-canvas mistakes: off-canvas-content is for main content.

A sample structure as follows:

 <div class="off-canvas-wrapper">
    <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
      <!-- title-bar -->
      <div class="title-bar">
        <div class="title-bar-left">
        </div>
        <div class="title-bar-right">
        </div>
      </div>
      <!-- left menu -->
      <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas>
      </div>
      <!-- right menu -->
      <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
      </div>
      <!-- original conten goes in this container -->
      <div class="off-canvas-content" data-off-canvas-content>
        <p class="notice "><%= notice %></p>
        <p class="alert"><%= alert %></p>
        <%= yield %>
      </div>
    <!-- closing wrappers -->
    </div>
  </div>

Troy Starwalt almost 4 years ago

Brian - thanks for the reply. Just to clarify what I'm trying to do:

I am planning to have one top menu/nav bar. Once the page is resize or opened up on the phone, I want the top menu bar to replaced with a simple hamburger menu that opens up an off-canvas menu for mobile users.

So, would I still put my top menu/nav bar in the off-canvas-wrapper-inner?

Thanks again!

Brian Tan almost 4 years ago

Ok. I think you need this. Check the sample below for responsive small hamburger off-canvas title-bar / medium top-bar menu. Both having left and right menu. Remove 1 or the other as needed.

  <div class="off-canvas-wrapper">
    <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>

      <!-- small off-canvas title bar -->
      <div class="title-bar" data-responsive-toggle="wideMenu" data-hide-for="medium">
        <div class="title-bar-left">
          <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
          <span class="title-bar-title">Foundation</span>
        </div>
        <div class="title-bar-right">
          <span class="title-bar-title">Login</span>
          <button class="menu-icon" type="button" data-open="offCanvasRight"></button>
        </div>
      </div>

      <!-- left menu -->
      <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas>
        <ul class="vertical dropdown menu" data-dropdown-menu>
          <li><a href="left_item_1">Left item 1</a></li>
          <li><a href="left_item_2">Left item 2</a></li>
          <li><a href="left_item_3">Left item 3</a></li>
        </ul>
      </div>
      <!-- right menu -->
      <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
        <ul class="vertical dropdown menu" data-dropdown-menu>
          <li><a href="right_item_1">Right item 1</a></li>
          <li><a href="right_item_2">Right item 2</a></li>
          <li><a href="right_item_3">Right item 3</a></li>
        </ul>
      </div>

     <!-- medium top-bar menu -->
      <div id="wideMenu" class="top-bar">
        <div class="top-bar-left">
          <ul class="dropdown menu" data-dropdown-menu>
            <li class="menu-text">Foundation</li>
            <li class="has-submenu">
              <a href="#">Item 1</a>
              <ul class="menu submenu vertical" data-submenu>
                <li><a href="left_wide_11">Left wide 11</a></li>
                <li><a href="left_wide_12">Left wide 12</a></li>
                <li><a href="left_wide_13">Left wide 13</a></li>
              </ul>
            </li>
            <li class="has-submenu">
              <a href="#">Item 2</a>
              <ul class="menu submenu vertical" data-submenu>
                <li><a href="left_wide_21">Left wide 21</a></li>
                <li><a href="left_wide_22">Left wide 22</a></li>
                <li><a href="left_wide_23">Left wide 23</a></li>
              </ul>
            </li>
          </ul>
        </div>
        <div class="top-bar-right">
          <ul class="menu">
            <li><input type="search" placeholder="Search"></li>
            <li><button class="button">Search</button></li>
          </ul>
        </div>
      </div>

      <!-- original content goes in this container -->
      <div class="off-canvas-content" data-off-canvas-content>
<h3>Original content</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>

    <!-- closing off -->
    </div>
  </div>

Troy Starwalt almost 4 years ago

Thanks again. I"ve refactored my code, but still response in regards to showing the off canvas portion. Do I need to add any of my one javascript for this or is it taken care of in the supplied js files?

Troy

Brian Tan almost 4 years ago

Just use the distributed foundation.js, plus the initialization $(document).foundation(); at the end.

Depending on your configuration, it can probably be found in bower_components/foundation-sites/dist/foundation.js

Troy Starwalt almost 4 years ago

I have it in app.js. I'll dig around more to see if I can get it working. Thanks for all of your time and help Brian.

Troy

Ryan McCready almost 3 years ago

Good news! Thanks to your feedback there was a push to build something better. In Foundation 6.3, released on Dec 15th, there is an all new improved off-canvas. We’d love to hear the challenges or common patterns with off-canvas are you working with. Check out the details and jump in on the conversation!

 

 

http://foundation.zurb.com/forum/posts/49868-new-improved-off-canvas-in-foundation-63