/ / Cum se combină top-bar și tab-bar în Fundația 5 - fundație zurb

Cum se combină top-bar și tab-bar în Foundation 5 - zurb-foundation

Este posibil să se combine in capul barului și tab-bar (Off-pânză)?

Acest: introduceți descrierea imaginii aici

Se întâmplă atunci când redimensionați la dimensiunea mobilă:

introduceți descrierea imaginii aici

Dar vreau să includ și acolo tab-bar (de pe pânză), așa că devine așa

introduceți descrierea imaginii aici

Nu mi-am imaginat cum s-ar putea face asta și eua încercat să-mi facă meniul personalizat și să-l pun în interiorul barului de sus, dar am avut probleme cu poziționarea, elementele au dispărut, marginea / padding-ul nu a funcționat, poziția relativă mi-a derutat stilul chiar mai mult, ai o idee mai bună.

Răspunsuri:

3 pentru răspunsul nr. 1

există 2 moduri în care puteți să o faceți, mai întâi puteți folosi solicitări media sau pe cealaltă cale folosiți clasa de vizibilitate. De exemplu, în codul topbar adăugați class = "show-for-medium-up", ceea ce va face ca bara de sus să fie vizibilă pe ecrane medii și în sus, dar să o ascundă în mici.

<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">........................

Apoi adăugați codul pentru offcanvas și adăugați class = "hide-for-medium-up"

<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>

Procedând astfel, veți putea implementa diferite stiluri în funcție de dimensiunea ecranului. Pentru mai multe informații, verificați clasa de vizibilitate


Întrebări corelate


Comentarii (0)

Adauga un comentariu