/ / Come combinare top-bar e tab-bar in Foundation 5 - zurb-foundation

Come combinare top-bar e tab-bar in Foundation 5 - zurb-foundation

È possibile combinare top-bar e tab-bar (Off-tela)?

Questo: inserisci la descrizione dell'immagine qui

Diventa questo quando ridimensioni alle dimensioni del cellulare:

inserisci la descrizione dell'immagine qui

Ma voglio anche includere la tab-bar (fuori dalla tela) in modo che diventi così

inserisci la descrizione dell'immagine qui

Non potevo immaginare come si potesse fare e ioStavo cercando di creare la mia icona del menu personalizzata e inserirla nella barra superiore, ma ho avuto problemi con il posizionamento, gli elementi stavano scomparendo, il margine / padding non funzionava, la posizione relativa incasinava il mio stile ancora di più quindi per chiedere forse hai un'idea migliore.

risposte:

3 per risposta № 1

ci sono 2 modi in cui puoi farlo, in primo luogo puoi usare il media query o l'altro modo sta usando la classe di visibilità. Ad esempio nel codice della topbar aggiungi class = "show-for-medium-up" che renderà la barra superiore visibile negli schermi medi e in alto ma la nasconde in piccolo.

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

Quindi aggiungi il codice per offcanvas e aggiungi 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>

In questo modo, sarai in grado di implementare stili differenti a seconda delle dimensioni dello schermo. Per maggiori informazioni consulta il classe di visibilità


domande correlate


Commenti (0)

Aggiungi un commento