/ / Wie kombiniere ich Top-Bar und Tab-Bar in Foundation 5 - zurb-foundation

Wie man Top-Bar und Tab-Bar in Foundation 5 - zub-foundation kombiniert

Ist es möglich zu kombinieren? Top-Bar und Tab-Leiste (außerhalb der Leinwand)?

Diese: Bildbeschreibung hier eingeben

Wird bei der Größenanpassung auf mobile Größe wie folgt angezeigt:

Bildbeschreibung hier eingeben

Aber ich möchte auch Tab-Bar (außerhalb der Leinwand) hinzufügen, so wird es so

Bildbeschreibung hier eingeben

Ich konnte mir nicht vorstellen, wie das gemacht werden könnte und ichIch versuchte, mein benutzerdefiniertes Menü-Icon zu machen und es in die obere Leiste zu setzen, aber ich hatte Probleme mit der Positionierung, Elemente verschwanden, Rand / Padding funktionierte nicht, relative Position verwirrte meinen Stil noch mehr, also wollte ich vielleicht hier fragen Du hast eine bessere Idee.

Antworten:

3 für die Antwort № 1

Es gibt 2 Möglichkeiten, wie Sie es tun können, zuerst können Sie das verwenden Medien-Anfragen oder die andere Art verwendet die Sichtbarkeitsklasse. Zum Beispiel im topbar code class = "show-for-medium-up" hinzufügen, was die obere Leiste in den mittleren Bildschirmen sichtbar macht, aber sie in kleinen Fenstern versteckt.

<nav class="top-bar show-for-medium-up" 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">........................

Dann füge den Code für die Offcanvas hinzu und füge class = "hide-for-medium-up" hinzu

<div class="off-canvas-wrap hide-for-medium-up">
<div class="inner-wrap">
<nav class="tab-bar">
<section class="left-small">
<a class="left-off-canvas-toggle menu-icon" ><span></span></a>
</section>

<section class="middle tab-bar-section">
<h1 class="title">Foundation</h1>

Auf diese Weise können Sie je nach Bildschirmgröße verschiedene Stile implementieren. Weitere Informationen finden Sie in der Sichtbarkeitsklasse


Verwandte Fragen


Kommentare (0)

Einen Kommentar hinzufügen