/ / Как да комбинираме горния бар и лентата с таба в Foundation 5 - zurb-foundation

Как да комбинираме горния бар и лентата с таба в Фондация 5 - zurb-foundation

Възможно ли е да се съчетаят най-бар и таб-бар (Извън платно)?

Това: въведете описанието на изображението тук

Става това при преоразмеряване на мобилния размер:

въведете описанието на изображението тук

Но аз също искам да включа таб-бар (от платното), така че да стане така

въведете описанието на изображението тук

Не можех да си представя как може да се направи това и азсе опитваше да направи моето потребителско меню и да го постави в горната част на бара, но имах проблеми с позиционирането, елементите изчезнаха, маркерът / подложката не работеше, позицията на роднина обърка стилът ми още повече, имате по-добра идея.

Отговори:

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

има 2 начина, по които можете да го направите, първо можете да го използвате медийни заявки или по друг начин използва класа на видимост. Например в кода на topbar добавете class = "show-for-medium-up", което ще направи горната лента видима на средни екрани и нагоре, но ще я скрие в малки.

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

След това добавете кода за offcanvas и добавете 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>

По този начин ще можете да внедрите различни стилове в зависимост от размера на екрана. За повече информация вижте клас на видимост


Свързани въпроси


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

Добави коментар