Menu icon Foundation

Developer | Layton, UT

My Posts




My Comments

Zack Warren commented on [email protected]'s post about 2 years

Same issue here. Any updates on this?

Zack Warren commented on Zack Warren's post almost 4 years

I've updated this repository with the latest clips...

https://github.com/zacksmash/foundation-coda-clips

Let me know how it works for you!

Zack Warren commented on Zack Warren's post almost 4 years

@Kemie Guaida Ortega I will be updating these very soon!

Zack Warren commented on Bill Sholar's post almost 4 years

Here's my top-bar component. I've added one custom class, .menu-items, otherwise it's completely native classes and markup... just a little extra styling.

For a drill down menu, just change data-responsive-menu="accordion medium-dropdown"> to data-responsive-menu="drilldown medium-dropdown"> and remove the .nested class from the sub ul's.

If you change the $topbar-breakpoint variable to large, remember to change all of the medium classes in the HTML as well.

Nav HTML:

<nav class="title-bar" data-responsive-toggle="top-bar-menu" data-hide-for="medium">
  <div class="title-bar-left">
    <a href="#"><img src="http://placehold.it/150x48&text=logo" alt="Logo"></a>
  </div>

  <div class="title-bar-right">
    <button class="menu-icon" type="button" data-toggle></button>
  </div>
</nav>

<nav class="top-bar" id="top-bar-menu">
  <div class="row">
    <div class="top-bar-left show-for-medium">
      <ul class="menu menu-items">
        <li><a href="#"><img src="http://placehold.it/150x48&text=logo" alt="logo"></a></li>
      </ul>
    </div>
    <div class="top-bar-right">
      <ul class="vertical medium-horizontal menu menu-items" data-responsive-menu="accordion medium-dropdown">
        <li>
          <a href="#">Item 1</a>
          <ul class="menu vertical nested">
            <li>
              <a href="#">Item 1A</a>
              <ul class="menu vertical nested">
                <li><a href="#">Item 1Ai</a></li>
                <li><a href="#">Item 1Aii</a></li>
                <li><a href="#">Item 1Aiii</a></li>
              </ul>
            </li>
            <li><a href="#">Item 1B</a></li>
            <li><a href="#">Item 1C</a></li>
          </ul>
        </li>
        <li>
          <a href="#">Item 2</a>
          <ul class="menu vertical nested">
            <li><a href="#">Item 2A</a></li>
            <li><a href="#">Item 2B</a></li>
          </ul>
        </li>
        <li><a href="#">Item 3</a></li>
      </ul>
    </div>
  </div>
</nav>

Custom SCSS:

/// Media query to show full menu
/// @type String
$topbar-breakpoint: medium !default;

/// Height of topbar at $topbar-breakpoint and up.
/// @type Number
$topbar-height: 65px !default;

/// Height of title bar below $topbar-breakpoint.
/// @type Number
$titlebar-height: 45px !default;

/// Adds styles for a top bar container.
@include breakpoint($topbar-breakpoint) {
  .top-bar {
    .menu-items {
      > li {
        > a {
          height: rem-calc($topbar-height);
          line-height: rem-calc($topbar-height);
          padding: 0 1rem;
        }
      }
    }
  }

  .dropdown.menu > .is-dropdown-submenu-parent.has-submenu > a::after {
    // Hides arrow on top-level menu items
    display: none;
  }
}

/// Removes float on 'medium' if $topbar-breakpoint equals large.
@if $topbar-breakpoint == 'large' {
  .top-bar-right {
    float: none;

    @include breakpoint($topbar-breakpoint) {
      float: right;
    }
  }
}

/// Adds styles for a title bar container.
.title-bar {
  height: rem-calc($titlebar-height);

  .title-bar-left {
    a {
      padding: 0 0 0 .5rem;
    }

    img {
      height: rem-calc($titlebar-height) - 1rem;
    }
  }
}

And from the _settings.scss file:

// 35. Top Bar
// -----------

$topbar-padding: 0rem;
...
$topbar-link-color: $dark-gray;

Zack Warren commented on Rafi Benkual's post over 5 years

I'm using an installing of Foundation via CodeKit and nothing is working when I compile app.scss. I get error after error. Any thoughts on this?

Zack Warren commented on Iain MacDonald's post over 5 years

I posted this in another post, but this is how I get started with Foundation/Sass/Compass

Here's my Foundation workflow with SCSS/Sass.

From terminal, cd into your project folder and run this:

bower install zurb/bower-foundation

That should create a folder called bower_components

Then, download this:

https://github.com/zurb/foundation-compass-template/archive/master.zip

After you download that, copy the contents of the folder into the same folder as your bower_components.

So, you should now have a project that has 3 folders

your_project/
|---bower_components/
|---js/
|---scss/ <-- Use this folder to modify your Sass
|---index.html

Now, you can use this as a doc template.

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation</title>
    <link rel="stylesheet" href="bower_components/foundation/css/normalize.css" />
    <link rel="stylesheet" href="css/app.css" />
    <script src="bower_components/modernizr/modernizr.js"></script>
  </head>
  <body>

    <!-- content goes here -->

    <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <script src="bower_components/fastclick/lib/fastclick.js"></script>
    <script src="bower_components/foundation/js/foundation.min.js"></script>
    <script src="js/app.js"></script>
  </body>
</html> 

If you need to modify any SCSS, use the SCSS folder in the top level, not the one in the bower_components.

Zack Warren commented on Allan Kendall's post over 5 years

Here's my Foundation workflow with SCSS/Sass.

From terminal, cd into your project folder and run this:

bower install zurb/bower-foundation

That should create a folder called bower_components

Then, download this:

https://github.com/zurb/foundation-compass-template/archive/master.zip

After you download that, copy the contents of the folder into the same folder as your bower_components.

So, you should now have a project that has 3 folders

your_project/
|---bower_components/
|---js/
|---scss/ <-- Use this folder to modify your Sass
|---index.html

Now, you can use this as a doc template.

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation</title>
    <link rel="stylesheet" href="bower_components/foundation/css/normalize.css" />
    <link rel="stylesheet" href="css/app.css" />
    <script src="bower_components/modernizr/modernizr.js"></script>
  </head>
  <body>

    <!-- content goes here -->

    <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <script src="bower_components/fastclick/lib/fastclick.js"></script>
    <script src="bower_components/foundation/js/foundation.min.js"></script>
    <script src="js/app.js"></script>
  </body>
</html> 

If you need to modify any SCSS, use the SCSS folder in the top level, not the one in the bower_components.

Zack Warren commented on Apple's post over 5 years

On Foundation 5.2.2, this code works for me for Horiz. Tabs and Vert. Tabs. You may need to update the path to each asset, but this code works.

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation</title>
    <link rel="stylesheet" href="bower_components/foundation/css/normalize.css" />
    <link rel="stylesheet" href="css/app.css" />
    <script src="bower_components/modernizr/modernizr.js"></script>
  </head>
  <body>

    <div class="contain-to-grid sticky">  
      <nav class="top-bar" data-topbar>
        <ul class="title-area">
          <li class="name">
            <h1><a href="#">My Site</a></h1>
          </li>
          <li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
        </ul>

        <section class="top-bar-section">
          <!-- Right Nav Section -->
          <ul class="right">
            <li class="active"><a href="#">Right Button Active</a></li>
            <li class="has-dropdown">
              <a href="#">Right Button Dropdown</a>
              <ul class="dropdown">
                <li><a href="#">First link in dropdown</a></li>
              </ul>
            </li>
          </ul>

          <!-- Left Nav Section -->
          <ul class="left">
            <li><a href="#">Left Nav Button</a></li>
          </ul>
        </section>
      </nav>
    </div>  

    <div class="row">
      <dl class="tabs" data-tab>
        <dd class="active"><a href="#panel2-1">Tab 1</a></dd>
        <dd><a href="#panel2-2">Tab 2</a></dd>
        <dd><a href="#panel2-3">Tab 3</a></dd>
        <dd><a href="#panel2-4">Tab 4</a></dd>
      </dl>
      <div class="tabs-content">
        <div class="content active" id="panel2-1">
          <p>First panel content goes here...</p>
        </div>
        <div class="content" id="panel2-2">
          <p>Second panel content goes here...</p>
        </div>
        <div class="content" id="panel2-3">
          <p>Third panel content goes here...</p>
        </div>
        <div class="content" id="panel2-4">
          <p>Fourth panel content goes here...</p>
        </div>
      </div>
    </div>

    <div class="row">
      <dl class="tabs vertical" data-tab>
        <dd class="active"><a href="#panel1a">Tab 1</a></dd>
        <dd><a href="#panel2a">Tab 2</a></dd>
        <dd><a href="#panel3a">Tab 3</a></dd>
        <dd><a href="#panel4a">Tab 4</a></dd>
      </dl>
      <div class="tabs-content vertical">
        <div class="content active" id="panel1a">
          <p>Panel 1 content goes here.</p>
        </div>
        <div class="content" id="panel2a">
          <p>Panel 2 content goes here.</p>
        </div>
        <div class="content" id="panel3a">
          <p>Panel 3 content goes here.</p>
        </div>
        <div class="content" id="panel4a">
          <p>Panel 4 content goes here.</p>
        </div>
      </div>
    </div>

    <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <script src="bower_components/fastclick/lib/fastclick.js"></script>
    <script src="bower_components/foundation/js/foundation.min.js"></script>
    <script src="js/app.js"></script>
  </body>
</html>

Zack Warren commented on Apple's post over 5 years

After banging my head against the wall, I figured out that it's because you're not including Modernizr. Make sure you include it in the head of your document.

Zack Warren commented on allan ramos's post over 5 years

In foundation 5, you would do that with this. Notice the div that's wrapping the entire nav element.

<div class="sticky">  
  <nav class="top-bar" data-topbar>
    <ul class="title-area">
      <li class="name">
        <h1><a href="#">My Site</a></h1>
      </li>
      <li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
    </ul>

    <section class="top-bar-section">
      <!-- Right Nav Section -->
      <ul class="right">
        <li class="active"><a href="#">Right Button Active</a></li>
        <li class="has-dropdown">
          <a href="#">Right Button Dropdown</a>
          <ul class="dropdown">
            <li><a href="#">First link in dropdown</a></li>
          </ul>
        </li>
      </ul>

      <!-- Left Nav Section -->
      <ul class="left">
        <li><a href="#">Left Nav Button</a></li>
      </ul>
    </section>
  </nav>
</div>


Posts Followed


  • 15
    Replies
  • Foundation 6 Topbar like F5?

    By Bill Sholar

    topbar

    Trying to puzzle out how to make a topbar in F6 that looks and behaves like it does in F5 -- the "Responsive Toggle" example at http://foundation.zurb.com/sites/docs/responsive-navigation.html toggles to the "hamburger" when the window is smaller, but dis... (continued)

    Last Reply by Himanshu Khurana about 3 years ago


Following

    No Content

Followers

My Posts

My Comments

You commented on [email protected]'s post about 2 years

Same issue here. Any updates on this?

You commented on Zack Warren's post almost 4 years

I've updated this repository with the latest clips...

https://github.com/zacksmash/foundation-coda-clips

Let me know how it works for you!

You commented on Zack Warren's post almost 4 years

@Kemie Guaida Ortega I will be updating these very soon!

You commented on Bill Sholar's post almost 4 years

Here's my top-bar component. I've added one custom class, .menu-items, otherwise it's completely native classes and markup... just a little extra styling.

For a drill down menu, just change data-responsive-menu="accordion medium-dropdown"> to data-responsive-menu="drilldown medium-dropdown"> and remove the .nested class from the sub ul's.

If you change the $topbar-breakpoint variable to large, remember to change all of the medium classes in the HTML as well.

Nav HTML:

<nav class="title-bar" data-responsive-toggle="top-bar-menu" data-hide-for="medium">
  <div class="title-bar-left">
    <a href="#"><img src="http://placehold.it/150x48&text=logo" alt="Logo"></a>
  </div>

  <div class="title-bar-right">
    <button class="menu-icon" type="button" data-toggle></button>
  </div>
</nav>

<nav class="top-bar" id="top-bar-menu">
  <div class="row">
    <div class="top-bar-left show-for-medium">
      <ul class="menu menu-items">
        <li><a href="#"><img src="http://placehold.it/150x48&text=logo" alt="logo"></a></li>
      </ul>
    </div>
    <div class="top-bar-right">
      <ul class="vertical medium-horizontal menu menu-items" data-responsive-menu="accordion medium-dropdown">
        <li>
          <a href="#">Item 1</a>
          <ul class="menu vertical nested">
            <li>
              <a href="#">Item 1A</a>
              <ul class="menu vertical nested">
                <li><a href="#">Item 1Ai</a></li>
                <li><a href="#">Item 1Aii</a></li>
                <li><a href="#">Item 1Aiii</a></li>
              </ul>
            </li>
            <li><a href="#">Item 1B</a></li>
            <li><a href="#">Item 1C</a></li>
          </ul>
        </li>
        <li>
          <a href="#">Item 2</a>
          <ul class="menu vertical nested">
            <li><a href="#">Item 2A</a></li>
            <li><a href="#">Item 2B</a></li>
          </ul>
        </li>
        <li><a href="#">Item 3</a></li>
      </ul>
    </div>
  </div>
</nav>

Custom SCSS:

/// Media query to show full menu
/// @type String
$topbar-breakpoint: medium !default;

/// Height of topbar at $topbar-breakpoint and up.
/// @type Number
$topbar-height: 65px !default;

/// Height of title bar below $topbar-breakpoint.
/// @type Number
$titlebar-height: 45px !default;

/// Adds styles for a top bar container.
@include breakpoint($topbar-breakpoint) {
  .top-bar {
    .menu-items {
      > li {
        > a {
          height: rem-calc($topbar-height);
          line-height: rem-calc($topbar-height);
          padding: 0 1rem;
        }
      }
    }
  }

  .dropdown.menu > .is-dropdown-submenu-parent.has-submenu > a::after {
    // Hides arrow on top-level menu items
    display: none;
  }
}

/// Removes float on 'medium' if $topbar-breakpoint equals large.
@if $topbar-breakpoint == 'large' {
  .top-bar-right {
    float: none;

    @include breakpoint($topbar-breakpoint) {
      float: right;
    }
  }
}

/// Adds styles for a title bar container.
.title-bar {
  height: rem-calc($titlebar-height);

  .title-bar-left {
    a {
      padding: 0 0 0 .5rem;
    }

    img {
      height: rem-calc($titlebar-height) - 1rem;
    }
  }
}

And from the _settings.scss file:

// 35. Top Bar
// -----------

$topbar-padding: 0rem;
...
$topbar-link-color: $dark-gray;

You commented on Rafi Benkual's post over 5 years

I'm using an installing of Foundation via CodeKit and nothing is working when I compile app.scss. I get error after error. Any thoughts on this?

You commented on Iain MacDonald's post over 5 years

I posted this in another post, but this is how I get started with Foundation/Sass/Compass

Here's my Foundation workflow with SCSS/Sass.

From terminal, cd into your project folder and run this:

bower install zurb/bower-foundation

That should create a folder called bower_components

Then, download this:

https://github.com/zurb/foundation-compass-template/archive/master.zip

After you download that, copy the contents of the folder into the same folder as your bower_components.

So, you should now have a project that has 3 folders

your_project/
|---bower_components/
|---js/
|---scss/ <-- Use this folder to modify your Sass
|---index.html

Now, you can use this as a doc template.

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation</title>
    <link rel="stylesheet" href="bower_components/foundation/css/normalize.css" />
    <link rel="stylesheet" href="css/app.css" />
    <script src="bower_components/modernizr/modernizr.js"></script>
  </head>
  <body>

    <!-- content goes here -->

    <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <script src="bower_components/fastclick/lib/fastclick.js"></script>
    <script src="bower_components/foundation/js/foundation.min.js"></script>
    <script src="js/app.js"></script>
  </body>
</html> 

If you need to modify any SCSS, use the SCSS folder in the top level, not the one in the bower_components.

You commented on Allan Kendall's post over 5 years

Here's my Foundation workflow with SCSS/Sass.

From terminal, cd into your project folder and run this:

bower install zurb/bower-foundation

That should create a folder called bower_components

Then, download this:

https://github.com/zurb/foundation-compass-template/archive/master.zip

After you download that, copy the contents of the folder into the same folder as your bower_components.

So, you should now have a project that has 3 folders

your_project/
|---bower_components/
|---js/
|---scss/ <-- Use this folder to modify your Sass
|---index.html

Now, you can use this as a doc template.

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation</title>
    <link rel="stylesheet" href="bower_components/foundation/css/normalize.css" />
    <link rel="stylesheet" href="css/app.css" />
    <script src="bower_components/modernizr/modernizr.js"></script>
  </head>
  <body>

    <!-- content goes here -->

    <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <script src="bower_components/fastclick/lib/fastclick.js"></script>
    <script src="bower_components/foundation/js/foundation.min.js"></script>
    <script src="js/app.js"></script>
  </body>
</html> 

If you need to modify any SCSS, use the SCSS folder in the top level, not the one in the bower_components.

You commented on Apple's post over 5 years

On Foundation 5.2.2, this code works for me for Horiz. Tabs and Vert. Tabs. You may need to update the path to each asset, but this code works.

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation</title>
    <link rel="stylesheet" href="bower_components/foundation/css/normalize.css" />
    <link rel="stylesheet" href="css/app.css" />
    <script src="bower_components/modernizr/modernizr.js"></script>
  </head>
  <body>

    <div class="contain-to-grid sticky">  
      <nav class="top-bar" data-topbar>
        <ul class="title-area">
          <li class="name">
            <h1><a href="#">My Site</a></h1>
          </li>
          <li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
        </ul>

        <section class="top-bar-section">
          <!-- Right Nav Section -->
          <ul class="right">
            <li class="active"><a href="#">Right Button Active</a></li>
            <li class="has-dropdown">
              <a href="#">Right Button Dropdown</a>
              <ul class="dropdown">
                <li><a href="#">First link in dropdown</a></li>
              </ul>
            </li>
          </ul>

          <!-- Left Nav Section -->
          <ul class="left">
            <li><a href="#">Left Nav Button</a></li>
          </ul>
        </section>
      </nav>
    </div>  

    <div class="row">
      <dl class="tabs" data-tab>
        <dd class="active"><a href="#panel2-1">Tab 1</a></dd>
        <dd><a href="#panel2-2">Tab 2</a></dd>
        <dd><a href="#panel2-3">Tab 3</a></dd>
        <dd><a href="#panel2-4">Tab 4</a></dd>
      </dl>
      <div class="tabs-content">
        <div class="content active" id="panel2-1">
          <p>First panel content goes here...</p>
        </div>
        <div class="content" id="panel2-2">
          <p>Second panel content goes here...</p>
        </div>
        <div class="content" id="panel2-3">
          <p>Third panel content goes here...</p>
        </div>
        <div class="content" id="panel2-4">
          <p>Fourth panel content goes here...</p>
        </div>
      </div>
    </div>

    <div class="row">
      <dl class="tabs vertical" data-tab>
        <dd class="active"><a href="#panel1a">Tab 1</a></dd>
        <dd><a href="#panel2a">Tab 2</a></dd>
        <dd><a href="#panel3a">Tab 3</a></dd>
        <dd><a href="#panel4a">Tab 4</a></dd>
      </dl>
      <div class="tabs-content vertical">
        <div class="content active" id="panel1a">
          <p>Panel 1 content goes here.</p>
        </div>
        <div class="content" id="panel2a">
          <p>Panel 2 content goes here.</p>
        </div>
        <div class="content" id="panel3a">
          <p>Panel 3 content goes here.</p>
        </div>
        <div class="content" id="panel4a">
          <p>Panel 4 content goes here.</p>
        </div>
      </div>
    </div>

    <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <script src="bower_components/fastclick/lib/fastclick.js"></script>
    <script src="bower_components/foundation/js/foundation.min.js"></script>
    <script src="js/app.js"></script>
  </body>
</html>

You commented on Apple's post over 5 years

After banging my head against the wall, I figured out that it's because you're not including Modernizr. Make sure you include it in the head of your document.

You commented on allan ramos's post over 5 years

In foundation 5, you would do that with this. Notice the div that's wrapping the entire nav element.

<div class="sticky">  
  <nav class="top-bar" data-topbar>
    <ul class="title-area">
      <li class="name">
        <h1><a href="#">My Site</a></h1>
      </li>
      <li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
    </ul>

    <section class="top-bar-section">
      <!-- Right Nav Section -->
      <ul class="right">
        <li class="active"><a href="#">Right Button Active</a></li>
        <li class="has-dropdown">
          <a href="#">Right Button Dropdown</a>
          <ul class="dropdown">
            <li><a href="#">First link in dropdown</a></li>
          </ul>
        </li>
      </ul>

      <!-- Left Nav Section -->
      <ul class="left">
        <li><a href="#">Left Nav Button</a></li>
      </ul>
    </section>
  </nav>
</div>


Posts Followed



Following

  • No Content

Followers

  • No Content