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

Γιατί στην Πλοήγηση -Website Navigation;

Γιατί στην Πλοήγηση -Website Navigation;

• Οι ιστότοποι είναι σπάνια απλές σελίδες
• Χρειάζεται να παρέχετε στους επισκέπτες ένα εποπτικό μέσο για να πλοηγηθούνστον ιστότοπό σας
• Υπάρχουν αρκετά κοινά χρησιμοποιούμενα πρότυπα πλοήγησης που χρησιμοποιούνται σε ιστότοπους

Γραμμές πλοήγησης - Navigation Bars

• Οι χρήστες συχνά την αναμένουν στο επάνω μέρος του ιστότοπου
• Περιέχει συνδέσμους προς διάφορες σελίδες στον ιστότοπό σας

Breadcrumbs

• Secondary navigation
  • Usually placed below the primary navigation and above the content
• Indicator of the current page’s location within a navigational hierarchy
  • Path based: set of steps
  • Location based: hierarchy

Δημιουργία μιας βασικής γραμμής πλοήγησης - navigation bar

Θα προσθέσουμε τώρα μια απλή γραμμή πλοήγησης στην ιστοσελίδα ώστε να παρέχει συνδέσμους προς τις άλλες σελίδες του ιστότοπου.

Αρχίστε προσθέτοντας τον ακόλουθο κώδικα στο σώμα ακριβώς πάνω από το  header jumbotron.

Code:

IΣτον παραπάνω κώδικα μπορούμε να δούμε τη χρήση του στοιχείου  nav για να καθορίσουμε τις πληροφορίες πλοήγησης για τον ιστότοπο. Αυτό το στοιχείο nav έχει μορφοποιηθεί από τη navbar που το δηλώνει ως γραμμή πλοήγησης και από την κλάσηnavbar-light για να καθορίσει ότι η σελίδα πρέπει να χρησιμοποιεί τη light navigation bar.

Θα παρατηρήσετε τώρα την προσθήκη ενός συνδέσμου με το όνομα του Le Chocolat. Αυτό είναι το εμπορικό σήμα για τον ιστότοπο. Μπορείτε να το αντικαταστήσετε με το λογότυπο της ιστοσελίδας. Αυτό δημιουργείται από την ετικέτα <a class="navbar-brand"> tag.

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

Χρησιμοποιούμε επίσης την κλάση container μέσα στη γραμμή πλοήγησης.

Δημιουργία μιας responsive navigation bar

Θα θέλαμε να αναδιπλώνονται- 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

Modifications to the CSS styles

Όταν χρησιμοποιούμε τη σταθερή -fixed γραμμή πλοήγησης, θα πρέπει να δώσουμε στο σώμα της σελίδας ένα ανώτερο περιθώριο - margin των 50px, έτσι ώστε τα κορυφαία 50px της σελίδας να μην αποκρύπτονται κάτω από τη γραμμή πλοήγησης. Προσθέτουμε επίσης z-δείκτη: 0 για να βεβαιωθείτε ότι η γραμμή πλοήγησης θα είναι πάντα μπροστά από το body.

Ας υποθέσουμε ότι θέλουμε να αλλάξουμε το χρώμα φόντου της γραμμής πλοήγησης. Αυτή είναι η κλάση bg-light. Ανοίγουμε το node_modules \ bootstrap \ dist \ css \ bootstrap.css και αναζητούμε την κλάση.

Αντιγράφουμε αυτόν τον κώδικα και τον επικολλάμε στο αρχείο css \ styles.css. Έτσι μπορούμε να αλλάξουμε το χρώμα.

CSS code:

Προσθήκη Breadcrumbs

Για να προσθέσουμε breadcrumbs λαμβάνουμε τη βοήθεια των κλάσεων breadcrumb και breadcrumb-item για να προσθέσoυμε τα παρακάτω στη σειρά που περιέχει τον τίτλο About Us και πάνω από αυτόν τον τίτλο στο aboutus.html.

View source:

Commit

Commit στο αποθετήριο Git σας με μήνυμα "Navbar και Breadcrumbs".

Icon Fonts

• Σύνολα συμβόλων και glyphs
• Μπορούν να χρησιμοποιηθούν όπως ακριβώς και οι κανονικές γραμματοσειρές
• Μπορούν να μορφοποιηθούν με CSS όπως ακριβώς και οι κανονικές γραμματοσειρές
• Δημοφιλή, ελαφρείς αντικαταστάτες απλών γραφικών στην ιστοσελίδα
• Υπάρχουν πολλά πακέτα εικονιδίων-χαρακτήρων διαθέσιμα

Ένα από τα πιο δημοφιλή toolkit εικονιδίων-χαρακτήρων είναι το Font Awesome. Μεταβείτε στον ιστότοπό του  http://fontawesome.io/ για να δείτε περισσότερες λεπτομέρειες.

Προσθήκη Font Awsome

Μπορείτε να πάρετε τα Font Awesome χρησιμοποιώντας το npm πληκτρολογώντας τα ακόλουθα στη γραμμή εντολών:

npm install font-awesome --save

Τώρα πρέπει να συμπεριλάβουμε τα αρχεία CSS για τα font awesome και bootstrap-social στο αρχείο index.html. Προσθέστε τον ακόλουθο κώδικα στο head του αρχείου μετά τους συνδέσμους για εισαγωγή κλάσεων CSS Bootstrap:

<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css">

Ας χρησιμοποιήσουμε τώρα κάποια εικονίδια στην ιστοσελίδα μας και να τα μορφοποιήσουμε. Ενημερώστε τα στοιχεία της λίστας λίστας navbar ως εξής στο index.html

View source for index.html:

Παρομοίως, ενημερώστε τα στοιχεία της λίστας λίστας navbar ως εξής, στο aboutus.html:

View source for aboutus.html:

Next, in both index.html and aboutus.html, go down to the address in the footer of the page and replace the "Tel.", "Fax" and "Email" with the corresponding font awesome based icons as follows:

View source for address:

Στη συνέχεια, και στις δύο index.html και aboutus.html, κατεβείτε στη address στο footer της σελίδας και αντικαταστήστε τα "Tel.", "Fax" και "Email"  με τα αντίστοιχα εικονίδια στα εξής:

View source for social media:

Αποθηκεύστε όλες τις αλλαγές και  commit στο αποθετήριο Git με το μήνυμα "Icon Fonts".

Περαιτέρω μελέτη

Official Resources

• • Navbar
  • Breadcrumbs
  • Get started with FontAwesome (good official help)

Other resources

• • Designing A Winning Navigation Menu: Ideas and Inspirations (Good suggestions on how to design navigation for a website)
  • Breadcrumb Navigation: A Guide On Types, Benefits And Best Practices (Great resource on types and usage of breadcrumbs)
  • Bootstrap social: Social Sign-In Buttons made in pure CSS based on Bootstrap and Font Awesome!