Υποενότητα 3.1: Πλοήγηση - Εικονίδια

Θα θέλαμε να αναδιπλώνονται- collapse τα στοιχεία της γραμμής πλοήγησης για μικρότερες οθόνες, να αντικαταθίστανται από ένα κουμπί εναλλαγής - toggle button ώστε τα στοιχεία να μπορούν να ενεργοποιούνται ή να απενεργοποιούνται όταν απαιτείται σε μικρές και πολύ μικρές οθόνες.

Αυτό μπορεί να επιτευχθεί προσθέτοντας τον ακόλουθο κώδικα στη γραμμή πλοήγησης, κάτω από το container div πάνω από το ul.

Code:

Αυτό δημιουργεί ένα κουμπί με τρεις οριζόντιες γραμμές. Για μεσαίες έως πολύ μεγάλες οθόνες, αυτό το κουμπί είναι κρυφό. Για μικρές και πολύ μικρές οθόνες, αυτό το κουμπί γίνεται ορατό. Αυτό το κουμπί θα λειτουργεί ως εναλλαγή για τα στοιχεία του navbar.

Για να αποκρύψουμε τα στοιχεία από τη γραμμή πλοήγησης για τις μικρές οθόνες, πρέπει να περικλείσουμε την ul μέσα σε ένα άλλο div ως εξής:

Code:

Κατ 'αυτόν τον τρόπο, διευκρινίζουμε ότι αυτό το div με την αναδίπλωση και τις κλάσεις navbar-collapse και με το id Navbar θα αναδιπλωθεί σε μικρές οθόνες και xs οθόνες, αλλά μπορεί να ενεργοποιηθεί ή να απενεργοποιηθεί όταν πατηθεί το κουμπί εναλλαγής.

Σημειώστε τη χρήση του

data-toggle="collapse" data-target="#Navbar"

μέσα στο παραπάνω κουμπί. Αυτό καθορίζει ότι τα στοιχεία του μενού αναδιπλώνονται σε οθόνες μικρού και πολύ μικρού μεγέθους όταν το κουμπί εναλλαγής είναι ορατό. Μπορούν να εμφανίζονται ή να αποκρύπτονται κάνοντας κλικ στο κουμπί εναλλαγής

Μπορείτε να δείτε όλο τον απαραίτητο κώδικα για αυτό το μάθημα:

Total code:

Αντιγράψτε και επικολλήστε ολόκληρο τον κώδικα του Navbar επίσης στο aboutus.html για να προσθέσετε την πλοήγηση και σε αυτήν τη σελίδα.

• Βεβαιωθείτε ότι έχετε αλλάξει το <li> που αντιστοιχεί στο "About" σε active και αφαιρέστε την active class από τον σύνδεσμο Αρχική σελίδα.
• Επίσης, ενημερώστε τον αρχικό σύνδεσμο για να επιστρέψετε στο index.html.
• Ενημερώστε την ετικέτα navbar-brand για να σας μεταφέρει ξανά στο index.html.

Δείτε περισσότερα για τις navigation Bars στο Bootstrap