/ / Како комбиновати топ-бар и таб-бар у Фондацији 5 - зурб-фоундатион

Како комбинирати топ-бар и таб-бар у Фондацији 5 - зурб-фоундатион

Да ли је могуће комбиновати топ-бар и таб-бар (офф-цанвас)?

Ово: унесите опис слике овде

Постаје ово када промените величину на величину мобилног телефона:

унесите опис слике овде

Али желим да укључим и таб-бар (офф платно), тако да постаје овако

унесите опис слике овде

Нисам могао замислити како се ово може учинити и јапокушавао је да направи моје прилагођене иконе менија и ставим га унутар топ-бар-а, али имам проблема са позиционирањем, елементи су нестали, маргина / паддинг није радила, положај релативног залирио је мој стил још више, па сам ипак питао можда можда имаш бољу идеју.

Одговори:

3 за одговор № 1

постоје 2 начина на који можете то учинити, прво можете да користите медијски упити или на други начин користи класу видљивости. На примјер у топбар коду додајте цласс = "схов-фор-медиум-уп" који ће учинити топбар видљивим на средњим екранима и горе, али га сакрити у малом.

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

Затим додајте код за оффцанвас и додајте цласс = "хиде-фор-медиум-уп"

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

Тиме ћете моћи да примените различите стилове у зависности од величине екрана. За више информација погледајте класа видљивости


Сродна питања


Коментари (0)

Додајте коментар