/ / Jak połączyć górny pasek i pasek zakładek w Fundacji 5 - zurb-foundation

Jak połączyć górny pasek i pasek zakładek w Fundacji 5 - zurb-foundation

Czy można łączyć? Górny pasek i pasek kart (off-canvas)?

To: wprowadź opis obrazu tutaj

Staje się tym, gdy zmienia rozmiar na rozmiar urządzenia mobilnego:

wprowadź opis obrazu tutaj

Ale chcę też umieścić tam pasek kart (poza obszarem roboczym), aby stał się taki

wprowadź opis obrazu tutaj

Nie mogłem sobie wyobrazić, jak można to zrobić i jaPróbowałem zrobić moją własną ikonę menu i umieścić ją w górnym pasku, ale miałem problemy z pozycjonowaniem, elementy znikały, margines / padding nie działał, pozycja względnie zawiedli mój styl jeszcze bardziej, więc chciałem zapytać tutaj może masz lepszy pomysł.

Odpowiedzi:

3 dla odpowiedzi № 1

są 2 sposoby na zrobienie tego, najpierw możesz użyć zapytania o media lub w inny sposób używa klasy widoczności. Na przykład w kodzie górnym dodaj class = "show-for-medium-up", co sprawi, że górny pasek będzie widoczny na średnich i wyższych ekranach, ale ukryj go w małym.

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

Następnie dodaj kod offcanvas i dodaj 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>

W ten sposób będziesz mógł implementować różne style w zależności od rozmiaru ekranu. Aby uzyskać więcej informacji, sprawdź klasa widoczności


Powiązane pytania


Komentarze (0)

Dodaj komentarz