/ / / Πώς να συνδυάσετε το επάνω ράβδος και την μπάρα καρτέλας στο Foundation 5 - zurb-foundation

Πώς να συνδυάσετε το top-bar και το tab-bar στο Foundation 5 - zurb-foundation

Είναι δυνατόν να συνδυαστεί top-bar και tab-bar (εκτός καμβά);

Αυτό: εισάγετε την περιγραφή εικόνας εδώ

Αυτό γίνεται όταν αλλάξετε το μέγεθος σε μέγεθος κινητού:

εισάγετε την περιγραφή εικόνας εδώ

Αλλά θέλω επίσης να συμπεριλάβω το tab-bar (off καμβά) έτσι γίνεται έτσι

εισάγετε την περιγραφή εικόνας εδώ

Δεν μπορούσα να φανταστώ πώς θα μπορούσε να γίνει αυτό και εγώπροσπαθούσε να κάνει έθιμο μου μενού εικονίδιο και να το βάλετε μέσα στο top-bar, αλλά είχα προβλήματα με την τοποθέτηση, τα στοιχεία αυτά εξαφανίζονται, το περιθώριο / padding didn "t εργασία, θέση σε σχέση μπέρδεμα το στυλ μου, ακόμη περισσότερο, εγώ όμως να ρωτήσω εδώ ίσως έχετε καλύτερη ιδέα.

Απαντήσεις:

3 για την απάντηση αριθ. 1

υπάρχουν 2 τρόποι που μπορείτε να το κάνετε, πρώτα μπορείτε να χρησιμοποιήσετε το ερωτήματα μέσων ή ο άλλος τρόπος χρησιμοποιεί την κλάση ορατότητας. Για παράδειγμα, στον κώδικα topbar προσθέστε class = "show-for-medium-up" που θα κάνει την topbar ορατή σε μεσαίες οθόνες και πάνω, αλλά θα την κρύψει σε μικρές.

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

Πρόσθεσε ένα σχόλιο