O'Reilly logo

Getting Started with Zurb Foundation 4 by Andrew D. Patterson

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Top Bar

We've covered several components and plugins that are intended for, or can be adapted to, navigation. Each of these is useful in its own way. Now we'll look at Foundation's most powerful navigation plugin, Top Bar.

It supports multi-level flyout menus, which work best as a fixed bar across the top of your web page. Also, it compresses to a vertical accordion style menu on small devices, and it can contain many different elements.

A Top Bar consists of an overall container with a title area and navigation section within it. Here is the high-level code:

<nav class="top-bar">
  <ul class="title-area"> ... </ul>
  <section class="top-bar-section"> ... </section>
</nav>

The outer container is identified with the top-bar class, the title section with ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required