/ / Kā apvienot top-bar un tab-bar in Foundation 5 - zurb-foundation

Kā apvienot augšējo stieni un cilnē fondā 5 - zurb-foundation

Vai ir iespējams apvienot augšējais bārs un cilnes josla (audekls)?

Šis: šeit ievadiet attēla aprakstu

Kad tas mainās uz mobilā izmēra, tas kļūst šāds:

šeit ievadiet attēla aprakstu

Bet es gribu arī iekļaut tab tab (off canv), lai tas kļūst par šo

šeit ievadiet attēla aprakstu

Es nevarēju iedomāties, kā to izdarīt, un esmēģināja izveidot savu pielāgoto izvēlnes ikonu un ievietot to augšējā joslā, bet man bija problēmas ar pozicionēšanu, elementi bija pazuduši, atstarpe / polsterējums nebija darbs, pozīcija relatīvi izjauca manu stilu vēl vairāk, lai gan es varētu jautāt šeit varbūt jums ir labāka ideja.

Atbildes:

3 atbildei Nr. 1

ir divi veidi, kā to izdarīt, vispirms varat izmantot mediju vaicājumi vai arī otrādi izmanto redzamības klasi. Piemēram, augšējā joslā pievienojiet klasi = "show-for-medium-up", kas padarīs augšējo joslu redzamu vidējos un augšupējos, bet paslēpiet mazos.

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

Pēc tam pievienojiet code for offcanvas un pievienojiet 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ādā veidā jūs varēsiet ieviest dažādus stilus atkarībā no ekrāna lieluma. Lai iegūtu papildinformāciju, skatiet sadaļu redzamības klase


Saistītie jautājumi


Komentāri (0)

Pievieno komentāru