Responsive Web Design

Knowledge Base

Responsive Web Design > ZURB Foundation

Top-Bar

Die Top-Bar im Zurb Foundation Framework 6.2.1 ist eine vordefinierte CSS-Klasse, die in der Regel mit einem (top) Menü verbunden wird - Basis:

<div class="top-bar">
	
</div>

Die Klasse class="top-bar" enthält einen clearfix, padding: 0.5rem und background-color: #e6e6e6.

Bei der Top-Bar geht Zurb Foundation davon aus, dass sich im linken Bereich ein Menü und in der rechten Bereich eine Suche befindet - entsprechend wird dass mit Klassen class="top-bar-left" und class="top-bar-right" unterstützt:

<div class="top-bar">
      <div class="top-bar-left">
        <ul class="dropdown menu" data-dropdown-menu>
          <li class="menu-text">[Seitenname]</li>
          <li>
            <a href="#">Punkt 1</a>
            <ul class="menu vertical">
              <li><a href="#">A</a></li>
              <li><a href="#">B</a></li>
              <li><a href="#">C</a></li>
            </ul>
          </li>
          <li><a href="#">Punkt 2</a></li>
          <li><a href="#">Punkt 3</a></li>
        </ul>
      </div>
      <div class="top-bar-right">
        <ul class="menu">
          <li><input type="search" placeholder="[nach was soll gesucht werden?]"></li>
          <li><button type="button" class="button">Suchen</button></li>
        </ul>
      </div>
    </div>

Top-Bar ermöglicht auch die Angabe des Seitentitels - der "Standard-Aufbau" ist dann:

<div class="top-bar">
    <div class="top-bar-title"></div>
    <div class="top-bar-left"></div>
    <div class="top-bar-right"></div>
</div>