/ / Hur man kombinerar toppraden och fliken i Foundation 5 - zurb-foundation

Hur man kombinerar toppraden och fliken i Foundation 5 - zurb-foundation

Är det möjligt att kombinera top-bar och tab-bar (Off-duk)?

Detta: skriv in bildbeskrivningen här

Blir detta när du ändrar storlek till mobilstorlek:

skriv in bildbeskrivningen här

Men jag vill också inkludera det där fältet (av duk) så det blir så här

skriv in bildbeskrivningen här

Jag kunde inte föreställa mig hur det kunde bli gjort och jagförsökte göra min egen meny-ikon och placera den inuti topplinjen men jag hade problem med positionering, element försvann, marginal / vaddering fungerade inte, positionen relativ förstörde min stil ännu mer så jag kanske frågar här kanske du har bättre idé.

svar:

3 för svaret № 1

Det finns 2 sätt att göra det, först kan du använda mediafrågor eller å andra sidan använder synlighetsklassen. Till exempel i topbar-koden lägger du till class = "show-for-medium-up" som kommer att göra toppskenan synlig på mellanskärmar och upp men dölja den i små.

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

Lägg sedan till koden för offcanvas och lägg till 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>

Genom att göra det kommer du att kunna implementera olika stilar beroende på skärmstorleken. För mer information kolla in siktklass


Relaterade frågor


Kommentarer (0)

Lägg till en kommentar