/ / Kako kombinirati top-bar i tab-bar u Foundation 5 - zurb-foundation

Kako kombinirati top-bar i tab-bar u Foundation 5 - zurb-foundation

Je li moguće kombinirati Top-bar i Kartica bar (Off-platnu)?

Ovaj: ovdje unesite opis slike

To se događa kada promijenite veličinu na mobilnu veličinu:

ovdje unesite opis slike

Ali želim također uključiti tab-bar (off platnu) tako da postane ovako

ovdje unesite opis slike

Nisam mogao zamisliti kako se to može učiniti i japokušavao sam napraviti moju prilagođenu ikonu izbornika i staviti je u gornji šipku, ali imam problema s pozicioniranjem, elementi su nestali, margina / padding nije radila, relativni položaj poremetio moj stil čak i više, pa ipak bih to mogao pitati možda imate bolju ideju.

odgovori:

3 za odgovor № 1

Postoje dva načina na koje možete to učiniti, najprije možete upotrijebiti upiti medija ili na drugi način koristi klasu vidljivosti. Na primjer, kod gornjeg koda dodajte class = "show-for-medium-up" koji će gornju šipku učiniti vidljivim na srednjim zaslonima i gore, ali ih sakriti u malom.

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

Zatim dodajte kôd za offcanvas i dodajte 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>

Na taj ćete način moći provoditi različite stilove, ovisno o veličini zaslona. Za više informacija pogledajte klasa vidljivosti


Povezana pitanja


Komentari (0)

Dodaj komentar