/ / Sådan kombineres topplinjen og fanebladet i Foundation 5 - zurb-foundation

Sådan kombineres topplinjen og fanebladet i Foundation 5 - zurb-foundation

Er det muligt at kombinere top-bar og Fanen-bar (Off-lærredet)?

Dette: Indtast billedbeskrivelse her

Bliver dette, når du ændrer størrelsen til mobilstørrelse:

Indtast billedbeskrivelse her

Men jeg vil også inkludere der faneblad (uden lærred), så det bliver sådan

Indtast billedbeskrivelse her

Jeg kunne ikke forestille mig, hvordan det kunne gøres, og jegforsøgte at lave min brugerdefinerede menu-ikon og sætte den inde i topplinjen, men jeg havde problemer med positionering, elementer forsvandt, margen / polstring virkede ikke, stillingen relativ rodet min stil endnu mere, så jeg kunne spørge her måske du har en bedre ide.

svar:

3 for svar № 1

Der er 2 måder, du kan gøre det, først kan du bruge medier forespørgsler eller den anden vej bruger synlighedsklassen. For eksempel i topbar-koden tilføj klasse = "show-for-medium-up", som vil gøre topbar synlig på mellemskærme og op, men gem 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">........................

Tilføj derefter koden for offcanvas og tilføj 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>

Ved at gøre dette vil du kunne implementere forskellige stilarter afhængigt af skærmstørrelsen. For mere information, tjek den synlighedsklasse


Beslægtede spørgsmål


Kommentarer (0)

Tilføj en kommentar