/ / Ako kombinovať top-bar a tab-bar v nadácii 5 - zurb-foundation

Ako kombinovať top-bar a tab-bar v nadácii 5 - zurb-foundation

Je možné kombinovať top-bar a Karta-bar (Off-plátno)?

toto: tu zadajte popis obrázku

Stáva sa to pri zmene veľkosti na mobilnú veľkosť:

tu zadajte popis obrázku

Ale chcem tiež zahrnúť tab-bar (mimo plátno), takže sa to stane tak

tu zadajte popis obrázku

Nedokázala som si predstaviť, ako by to bolo možné a jasnažil sa vytvoriť vlastnú ikonu menu a vložiť ju do hornej lišty, ale mám problémy s umiestnením, prvky zmizli, okraj / výplň nefungovala, pozícia relatívne mierila môj štýl ešte viac, takže som sa tu spýtal, možno máte lepší nápad.

odpovede:

3 pre odpoveď č. 1

existujú 2 spôsoby, ako to urobiť, najprv môžete použiť mediálnych dopytov alebo iným spôsobom používa triedu viditeľnosti. Napríklad v kóde topbar pridajte class = "show-for-medium-up", čo spôsobí, že topbar bude viditeľný na stredných obrazovkách a hore, ale skryje sa malý.

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

Potom pridajte kód pre offcanvas a pridajte 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>

Týmto spôsobom budete môcť implementovať rôzne štýly v závislosti od veľkosti obrazovky. Ďalšie informácie nájdete na stránke triedu viditeľnosti


Súvisiace otázky


Komentáre (0)

Pridať komentár