6.1 Η δημιουργία μιας γραμμής πλοήγησης (navigation bar) στην CSS

Η δημιουργία μιας γραμμής πλοήγησης (navigation bar) στην CSS απαιτεί μια σειρά κανόνων CSS για να οριστούν το στυλ και η διάταξη των στοιχείων πλοήγησης. Ακολουθεί ένα παράδειγμα CSS για μια απλή γραμμή πλοήγησης οριζόντια:

HTML:

<nav>
  <ul>
    <li><a href="#">Αρχική</a></li>
    <li><a href="#">Πληροφορίες</a></li>
    <li><a href="#">Υπηρεσίες</a></li>
    <li><a href="#">Επικοινωνία</a></li>
  </ul>
</nav>

CSS:

nav {
  background-color: #f2f2f2;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

nav ul li {
  display: inline-block;
}

nav ul li a {
  display: block;
  padding: 10px 20px;
  text-decoration: none;
  color: #333;
}

nav ul li a:hover {
  background-color: #ddd;
}

Σε αυτό το παράδειγμα, ο στυλ της γραμμής πλοήγησης ορίζεται με τους παραπάνω κανόνες CSS. Η γραμμή πλοήγησης περικλείεται σε ένα στοιχείο <nav>, ενώ η λίστα με τα στοιχεία πλοήγησης ορίζεται με ένα στοιχείο <ul> και τα αντίστοιχα στοιχεία λίστας με ένα στοιχείο <li>. Οι συνδέσμοι πλοήγησης ορίζονται με τα στοιχεία <a>.

Οι κανόνες CSS που ακολουθούν ορίζουν το φόντο, τις διαστάσεις και το χρώμα των στοιχείων πλοήγησης. Ο κανόνας display: inline-block; καθορίζει ότι τα στοιχεία πλοήγησης θα εμφανίζονται οριζόντια. Κατά την ανασκόπηση του ποντικιού πάνω από έναν σύνδεσμο πλοήγησης, ο κανόνας :hover αλλάζει το χρώμα του φόντου για να δημιουργήσει μια εφέ κατάδειξης.

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

Για να δημιουργήσετε έναν κατακόρυφο πίνακα πλοήγησης (Vertical Navigation Bar) με χρήση CSS, μπορείτε να ακολουθήσετε το παρακάτω παράδειγμα:

HTML:

<nav>
  <ul>
    <li><a href="#">Αρχική</a></li>
    <li><a href="#">Πληροφορίες</a></li>
    <li><a href="#">Υπηρεσίες</a></li>
    <li><a href="#">Επικοινωνία</a></li>
  </ul>
</nav>

CSS:

nav {
  width: 200px;
  background-color: #f2f2f2;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

nav ul li {
  margin: 0;
}

nav ul li a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #333;
}

nav ul li a:hover {
  background-color: #ddd;
}

Σε αυτό το παράδειγμα, ο κατακόρυφος πίνακας πλοήγησης περικλείεται σε ένα στοιχείο <nav>. Η λίστα με τα στοιχεία πλοήγησης ορίζεται με ένα στοιχείο <ul> και τα αντίστοιχα στοιχεία λίστας με ένα στοιχείο <li>. Οι συνδέσμοι πλοήγησης ορίζονται με τα στοιχεία <a>.

Οι κανόνες CSS που ακολουθούν ορίζουν το φόντο, τις διαστάσεις και το χρώμα των στοιχείων πλοήγησης. Ο κανόνας display: block; καθορίζει ότι οι συνδέσμοι πλοήγησης θα εμφανίζονται ως block elements, προκειμένου να καταλαμβάνουν ολόκληρο το πλάτος του πίνακα πλοήγησης. Κατά την ανασκόπηση του ποντικιού πάνω από έναν σύνδεσμο πλοήγησης, ο κανόνας :hover αλλάζει το χρώμα του φόντου για να δημιουργήσει μια εφέ κατάδειξης.

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

[adinserter block=”2″]

Παρακάτω παραθέτω ένα παράδειγμα ενός βασικού κατακόρυφου πίνακα πλοήγησης με γκρι χρώμα φόντου και αλλαγή χρώματος φόντου των συνδέσμων όταν ο χρήστης περνάει το ποντίκι πάνω τους:

HTML:

<nav>
  <ul>
    <li><a href="#">Αρχική</a></li>
    <li><a href="#">Πληροφορίες</a></li>
    <li><a href="#">Υπηρεσίες</a></li>
    <li><a href="#">Επικοινωνία</a></li>
  </ul>
</nav>

CSS:

nav {
  width: 200px;
  background-color: #f2f2f2;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

nav ul li {
  margin: 0;
}

nav ul li a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #333;
}

nav ul li a:hover {
  background-color: #ddd;
}

Σε αυτό το παράδειγμα, ο πίνακας πλοήγησης περικλείεται σε ένα στοιχείο <nav>. Η λίστα με τους συνδέσμους πλοήγησης ορίζεται με ένα στοιχείο <ul> και τα αντίστοιχα στοιχεία λίστας με ένα στοιχείο <li>. Οι συνδέσμοι πλοήγησης ορίζονται με τα στοιχεία <a>.

Οι κανόνες CSS που ακολουθούν ορίζουν το φόντο, τις διαστάσεις και το χρώμα των στοιχείων πλοήγησης. Ο κανόνας display: block; καθορίζει ότι οι συνδέσμοι πλοήγησης θα εμφανίζονται ως block elements, προκειμένου να καταλαμβάνουν ολόκληρο το πλάτος του πίνακα πλοήγησης. Ο κανόνας :hover εφαρμόζει το χρώμα φόντου #ddd στους συνδέσμους όταν ο χρήστης περνάει το ποντίκι πάνω τους.

Για να προσθέσετε μια κλάση “active” στον τρέχοντα σύνδεσμο πλοήγησης ώστε να ενημερώνετε τον χρήστη σε ποια σελίδα βρίσκεται, μπορείτε να εφαρμόσετε τις ακόλουθες αλλαγές στον κώδικα HTML και CSS:

HTML:

<nav>
  <ul>
    <li><a href="#" class="active">Αρχική</a></li>
    <li><a href="#">Πληροφορίες</a></li>
    <li><a href="#">Υπηρεσίες</a></li>
    <li><a href="#">Επικοινωνία</a></li>
  </ul>
</nav>

CSS:

nav ul li a.active {
  background-color: #ddd;
}

Στον κώδικα HTML, προσθέσαμε την κλάση “active” στον πρώτο σύνδεσμο (στην αρχική σελίδα) με τη χρήση της attribute class="active". Αυτό θα δηλώσει ότι αυτός ο σύνδεσμος είναι ο τρέχοντας.

Στον κανόνα CSS, ο κανόνας nav ul li a.active ορίζει το χρώμα φόντου #ddd για τον σύνδεσμο που έχει την κλάση “active”.

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

Για να κεντράρετε τους συνδέσμους στον πίνακα πλοήγησης, μπορείτε να προσθέσετε τον κανόνα text-align: center; είτε στο στοιχείο <li> είτε στο στοιχείο <a>. Επίσης, μπορείτε να προσθέσετε την ιδιότητα border στο στοιχείο <ul> για να προσθέσετε ένα περίγραμμα γύρω από τον πίνακα πλοήγησης. Εάν επιθυμείτε επίσης περιγράμματα εντός του πίνακα πλοήγησης, μπορείτε να προσθέσετε ένα περίγραμμα στο κάτω μέρος των στοιχείων <li>, εκτός από το τελευταίο. Ακολουθεί ο ανανεωμένος κώδικας HTML και CSS:

HTML:

<nav>
  <ul>
    <li><a href="#" class="active">Αρχική</a></li>
    <li><a href="#">Πληροφορίες</a></li>
    <li><a href="#">Υπηρεσίες</a></li>
    <li><a href="#">Επικοινωνία</a></li>
  </ul>
</nav>

CSS:

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  border: 1px solid #ccc;
}

nav ul li {
  text-align: center;
  border-bottom: 1px solid #ccc;
}

nav ul li:last-child {
  border-bottom: none;
}

nav ul li a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #333;
}

nav ul li a.active {
  background-color: #ddd;
}

Με αυτές τις αλλαγές, οι συνδέσμοι θα είναι κεντραρισμένοι εντός των στοιχείων <li>, ενώ ο πίνακας πλοήγησης θα έχει ένα περίγραμμα γύρω του. Επίσης, θα υπάρχει ένα περίγραμμα στο κάτω μέρος των στοιχείων <li>, εκτός από το τελευταίο. Ο τρέχοντας σύνδεσμος θα έχει ένα διαφορετικό χρώμα φόντου για να επισημαίνεται ως ενεργός.

Για να δημιουργήσετε έναν πλήρους ύψους, “κολλητό” πλαϊνό πίνακα πλοήγησης, μπορείτε να εφαρμόσετε τις παρακάτω αλλαγές στον κώδικα HTML και CSS:

HTML:

<nav class="side-nav">
  <ul>
    <li><a href="#" class="active">Αρχική</a></li>
    <li><a href="#">Πληροφορίες</a></li>
    <li><a href="#">Υπηρεσίες</a></li>
    <li><a href="#">Επικοινωνία</a></li>
  </ul>
</nav>

CSS:

.side-nav {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 200px;
  background-color: #f2f2f2;
  overflow-y: auto;
}

.side-nav ul {
  list-style-type: none;
  padding: 0;
}

.side-nav li {
  border-bottom: 1px solid #ddd;
}

.side-nav li:last-child {
  border-bottom: none;
}

.side-nav li a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #333;
}

.side-nav li a.active {
  background-color: #ddd;
}

Με αυτές τις αλλαγές, ο πλαϊνός πίνακας πλοήγησης θα έχει πλήρες ύψος (height: 100vh) και θα είναι “κολλητός” στο πάνω μέρος της σελίδας (position: fixed; top: 0; left: 0;). Ο πίνακας πλοήγησης θα έχει μια γκρι απόχρωση φόντου (background-color: #f2f2f2) και θα έχει κύλιση (overflow-y: auto) εάν υπερβαίνει το ύψος της οθόνης. Οι συνδέσμοι θα εμφανίζονται ως λίστα με χωρίς μαρκαδορίσματα (list-style-type: none) και θα έχουν ένα περίγραμμα στο κάτω μέρος (border-bottom: 1px solid #ddd). Ο τρέχοντας σύνδεσμος θα έχει ένα διαφορετικό χρώμα φόντου για να επισημαίνεται ως ενεργός.

Για να δημιουργήσετε ένα οριζόντιο πάνω πλαίσιο πλοήγησης, μπορείτε να εφαρμόσετε τις παρακάτω αλλαγές στον κώδικα HTML και CSS:

HTML:

<nav class="top-nav">
  <ul>
    <li><a href="#" class="active">Αρχική</a></li>
    <li><a href="#">Πληροφορίες</a></li>
    <li><a href="#">Υπηρεσίες</a></li>
    <li><a href="#">Επικοινωνία</a></li>
  </ul>
</nav>

CSS:

.top-nav {
  background-color: #f2f2f2;
}

.top-nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.top-nav li {
  display: inline-block;
  margin-right: 10px;
}

.top-nav li:last-child {
  margin-right: 0;
}

.top-nav li a {
  display: inline-block;
  padding: 10px;
  text-decoration: none;
  color: #333;
}

.top-nav li a.active {
  background-color: #ddd;
}

Με αυτές τις αλλαγές, το πάνω πλαίσιο πλοήγησης θα έχει μια γκρι απόχρωση φόντου (background-color: #f2f2f2). Οι συνδέσμοι θα εμφανίζονται οριζόντια ως λίστα χωρίς μαρκαδορίσματα (list-style-type: none). Οι συνδέσμοι θα εμφανίζονται ως inline-block στοιχεία για να είναι οριζόντιοι και θα έχουν κάποιο περιθώριο μεταξύ τους (margin-right: 10px) για να δημιουργήσετε κενό μεταξύ τους. Το τελευταίο στοιχείο <li> δεν θα έχει κενό δεξιά του (margin-right: 0). Οι συνδέσμοι θα εμφανίζονται ως inline-block στοιχεία με περιοχή ενός πλαισίου (padding: 10px) και θα έχουν χρώμα κειμένου μαύρο (color: #333). Ο τρέχοντας σύνδεσμος θα έχει ένα διαφορετικό χρώμα φόντου για να επισημαίνεται ως ενεργός.

Ένας άλλος τρόπος να δημιουργήσετε ένα οριζόντιο πάνω πλαίσιο πλοήγησης είναι να χρησιμοποιήσετε το float για τα στοιχεία <li> και να καθορίσετε ένα διάταξη για τους συνδέσμους της πλοήγησης:

HTML:

<nav class="top-nav">
  <ul>
    <li><a href="#" class="active">Αρχική</a></li>
    <li><a href="#">Πληροφορίες</a></li>
    <li><a href="#">Υπηρεσίες</a></li>
    <li><a href="#">Επικοινωνία</a></li>
  </ul>
</nav>

CSS:

.top-nav {
  background-color: #f2f2f2;
}

.top-nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.top-nav li {
  float: left;
}

.top-nav li a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #333;
}

.top-nav li a.active {
  background-color: #ddd;
}

Με αυτές τις αλλαγές, τα στοιχεία <li> θα έχουν το float: left ώστε να ευθυγραμμίζονται οριζόντια. Οι συνδέσμοι θα είναι block στοιχεία (display: block) με περιοχή ενός πλαισίου (padding: 10px) και θα έχουν χρώμα κειμένου μαύρο (color: #333). Ο τρέχοντας σύνδεσμος θα έχει ένα διαφορετικό χρώμα φόντου για να επισημαίνεται ως ενεργός.

[adinserter block=”3″]

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

HTML:

<nav class="top-nav">
  <ul>
    <li><a href="#" class="active">Αρχική</a></li>
    <li><a href="#">Πληροφορίες</a></li>
    <li><a href="#">Υπηρεσίες</a></li>
    <li><a href="#">Επικοινωνία</a></li>
  </ul>
</nav>

CSS:

.top-nav {
  background-color: #333;
}

.top-nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.top-nav li {
  display: inline-block;
}

.top-nav li a {
  display: inline-block;
  padding: 10px 20px;
  text-decoration: none;
  color: #fff;
}

.top-nav li a:hover {
  background-color: #555;
}

.top-nav li a.active {
  background-color: #ddd;
  color: #333;
}

Με αυτές τις αλλαγές, το οριζόντιο πάνω πλαίσιο πλοήγησης θα έχει ένα σκούρο χρώμα φόντου (background-color: #333). Οι συνδέσμοι θα εμφανίζονται οριζόντια ως λίστα χωρίς μαρκαδορίσματα (list-style-type: none). Οι συνδέσμοι και τα στοιχεία <li> θα εμφανίζονται ως inline-block στοιχεία. Οι συνδέσμοι θα έχουν περιοχή ενός πλαισίου με αναλογικό περιθώριο (padding: 10px 20px). Το χρώμα κειμένου των συνδέσμων θα είναι λευκό (color: #fff). Όταν ο χρήστης περνά τον κέρσορα πάνω από ένα σ

Με αυτές τις αλλαγές, το οριζόντιο πάνω πλαίσιο πλοήγησης θα έχει ένα σκούρο χρώμα φόντου (background-color: #333). Οι συνδέσμοι θα εμφανίζονται οριζόντια ως λίστα χωρίς μαρκαδορίσματα (list-style-type: none). Οι συνδέσμοι θα εμφανίζονται ως inline-block στοιχεία. Οι συνδέσμοι θα έχουν περιοχή ενός πλαισίου με αναλογικό περιθώριο (padding: 10px 20px). Το χρώμα κειμένου των συνδέσμων θα είναι λευκό (color: #fff). Όταν ο χρήστης περνά τον κέρσορα πάνω από ένα συνδεσμο, το χρώμα του φόντου θα αλλάζει σε ένα πιο σκούρο χρώμα (background-color: #555). Το τρέχον και ενεργό στοιχείο θα έχει ένα διαφορετικό χρώμα φόντου για να επισημαίνεται (background-color: #ddd) και το χρώμα του κειμένου θα αλλάξει σε μαύρο (color: #333).

Προσθέστε μια “active” κλάση στον τρέχοντα σύνδεσμο για να ενημερώσετε τον χρήστη σε ποια σελίδα βρίσκεται:

HTML:

<nav class="top-nav">
  <ul>
    <li><a href="#" class="active">Αρχική</a></li>
    <li><a href="#">Πληροφορίες</a></li>
    <li><a href="#">Υπηρεσίες</a></li>
    <li><a href="#">Επικοινωνία</a></li>
  </ul>
</nav>

CSS:

.top-nav {
  background-color: #333;
}

.top-nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.top-nav li {
  display: inline-block;
}

.top-nav li a {
  display: inline-block;
  padding: 10px 20px;
  text-decoration: none;
  color: #fff;
}

.top-nav li a:hover {
  background-color: #555;
}

.top-nav li a.active {
  background-color: #ddd;
  color: #333;
}

Στο παραπάνω παράδειγμα, ο τρέχων σύνδεσμος “Αρχική” έχει προστεθεί η κλάση “active” (class="active") για να επισημανθεί ως ενεργός. Στον κανόνα CSS .top-nav li a.active, έχουμε ορίσει ένα διαφορετικό χρώμα φόντου (background-color: #ddd) και χρώμα κειμένου (color: #333) για τον ενεργό σύνδεσμο “Αρχική”. Με αυτόν τον τρόπο, ο χρήστης μπορεί να διακρίνει σε ποια σελίδα βρίσκεται.

Για να διατάξετε τους συνδέσμους στη δεξιά πλευρά, μπορείτε να χρησιμοποιήσετε τον χαρακτήρα float και την ιδιότητα float: right. Αυτό θα τοποθετήσει τα στοιχεία της λίστας στη δεξιά πλευρά:

HTML:

<nav class="top-nav">
  <ul>
    <li><a href="#" class="active">Αρχική</a></li>
    <li><a href="#">Πληροφορίες</a></li>
    <li><a href="#">Υπηρεσίες</a></li>
    <li><a href="#">Επικοινωνία</a></li>
  </ul>
</nav>

CSS:

.top-nav {
  background-color: #333;
}

.top-nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: right; /* Προσθήκη χαρακτηριστικού text-align */
}

.top-nav li {
  display: inline-block;
  float: right; /* Προσθήκη χαρακτηριστικού float */
}

.top-nav li a {
  display: inline-block;
  padding: 10px 20px;
  text-decoration: none;
  color: #fff;
}

.top-nav li a:hover {
  background-color: #555;
}

.top-nav li a.active {
  background-color: #ddd;
  color: #333;
}

Με αυτές τις αλλαγές, τα στοιχεία της λίστας θα ευθυγραμμιστούν στη δεξιά πλευρά χρησιμοποιώντας το float: right;. Επιπλέον, το χαρακτηριστικό text-align: right; έχει προστεθεί στην <ul> για να ευθυγραμμίσει το περιεχόμενο κειμένου της λίστας στη δεξιά πλευρά.

Για να διατάξετε τους συνδέσμους στη δεξιά πλευρά, μπορείτε να χρησιμοποιήσετε τον χαρακτήρα float και την ιδιότητα float: right. Αυτό θα τοποθετήσει τα στοιχεία της λίστας στη δεξιά πλευρά:

HTML:

<nav class="top-nav">
  <ul>
    <li><a href="#" class="active">Αρχική</a></li>
    <li><a href="#">Πληροφορίες</a></li>
    <li><a href="#">Υπηρεσίες</a></li>
    <li><a href="#">Επικοινωνία</a></li>
  </ul>
</nav>

CSS:

.top-nav {
  background-color: #333;
}

.top-nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: right; /* Προσθήκη χαρακτηριστικού text-align */
}

.top-nav li {
  display: inline-block;
  float: right; /* Προσθήκη χαρακτηριστικού float */
}

.top-nav li a {
  display: inline-block;
  padding: 10px 20px;
  text-decoration: none;
  color: #fff;
}

.top-nav li a:hover {
  background-color: #555;
}

.top-nav li a.active {
  background-color: #ddd;
  color: #333;
}

Με αυτές τις αλλαγές, τα στοιχεία της λίστας θα ευθυγραμμιστούν στη δεξιά πλευρά χρησιμοποιώντας το float: right;. Επιπλέον, το χαρακτηριστικό text-align: right; έχει προστεθεί στην <ul> για να ευθυγραμμίσει το περιεχόμενο κειμένου της λίστας στη δεξιά πλευρά.

[adinserter block=”4″]

Για να προσθέσετε διαχωριστικά μεταξύ των συνδέσμων, μπορείτε να προσθέσετε την ιδιότητα border-right στον κανόνα CSS των στοιχείων <li>:

HTML:

<nav class="top-nav">
  <ul>
    <li><a href="#" class="active">Αρχική</a></li>
    <li><a href="#">Πληροφορίες</a></li>
    <li><a href="#">Υπηρεσίες</a></li>
    <li><a href="#">Επικοινωνία</a></li>
  </ul>
</nav>

CSS:

.top-nav {
  background-color: #333;
}

.top-nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: right;
}

.top-nav li {
  display: inline-block;
  float: right;
  border-right: 1px solid #fff; /* Προσθήκη χαρακτηριστικού border-right */
  padding-right: 10px; /* Προσθήκη padding δεξιά για να δημιουργήσει απόσταση */
}

.top-nav li:last-child {
  border-right: none; /* Αφαίρεση του border-right από το τελευταίο στοιχείο */
}

.top-nav li a {
  display: inline-block;
  padding: 10px 20px;
  text-decoration: none;
  color: #fff;
}

.top-nav li a:hover {
  background-color: #555;
}

.top-nav li a.active {
  background-color: #ddd;
  color: #333;
}

Με την παραπάνω αλλαγή, έχει προστεθεί η ιδιότητα border-right: 1px solid #fff; στον κανόνα CSS των στοιχείων <li>. Αυτό θα προσθέσει ένα διαχωριστικό περιγράμματος στα αριστερά των συνδέσμων. Επιπλέον, το padding-right: 10px; έχει προστεθεί για να δημιουργήσει μια απόσταση ανάμεσα στα διαχωριστικά και το κείμενο των συνδέσμων. Τ

έλος, με τον κανόνα top-nav li:last-child, αφαιρείται το διαχωριστικό από το τελευταίο στοιχείο για να μην υπάρχει διαχωριστικό στο τέλος της γραμμής πλοήγησης.

Για να κάνετε τη γραμμή πλοήγησης να παραμένει στην επάνω ή στην κάτω μέρα της σελίδας καθώς ο χρήστης κάνει κύλιση στη σελίδα, μπορείτε να χρησιμοποιήσετε τον συνδυασμό των ιδιοτήτων position: fixed και top ή bottom.

Για να τοποθετήσετε τη γραμμή πλοήγησης στην επάνω μέρα της σελίδας:

.top-nav {
  position: fixed;
  top: 0;
  background-color: #333;
  width: 100%;
  z-index: 999; /* Προαιρετικά, για να εξασφαλίσετε ότι η γραμμή πλοήγησης είναι επάνω από άλλα στοιχεία στη σελίδα */
}

/* Οι υπόλοιποι κανόνες CSS για την γραμμή πλοήγησης */

Για να τοποθετήσετε τη γραμμή πλοήγησης στην κάτω μέρα της σελίδας:

.top-nav {
  position: fixed;
  bottom: 0;
  background-color: #333;
  width: 100%;
  z-index: 999; /* Προαιρετικά, για να εξασφαλίσετε ότι η γραμμή πλοήγησης είναι επάνω από άλλα στοιχεία στη σελίδα */
}

/* Οι υπόλοιποι κανόνες CSS για την γραμμή πλοήγησης */

Με αυτούς τους κανόνες CSS, η γραμμή πλοήγησης θα παραμείνει στην επάνω ή στην κάτω μέρα της σελίδας, ανεξάρτητα από την κύλιση της σελίδας. Η ιδιότητα z-index χρησιμοποιείται για να εξασφαλίσει ότι η γραμμή πλοήγησης είναι επάνω από άλλα στοιχεία στη σελίδα, αν χρειαστεί.

Παρακάτω παρουσιάζεται ένα παράδειγμα ενός γκρι οριζόντιου μπάρας πλοήγησης με μια λεπτή γκρι περίγραμμα:

HTML:

<nav class="top-nav">
  <ul>
    <li><a href="#" class="active">Αρχική</a></li>
    <li><a href="#">Πληροφορίες</a></li>
    <li><a href="#">Υπηρεσίες</a></li>
    <li><a href="#">Επικοινωνία</a></li>
  </ul>
</nav>

CSS:

.top-nav {
  background-color: #333;
  border: 1px solid #ccc; /* Περίγραμμα του μπάρας πλοήγησης */
}

.top-nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.top-nav li {
  display: inline-block;
  border-right: 1px solid #ccc; /* Διαχωριστική γραμμή μεταξύ των στοιχείων */
  margin-right: 5px; /* Απόσταση ανάμεσα στα στοιχεία */
  padding: 5px 10px;
}

.top-nav li:last-child {
  border-right: none; /* Αφαίρεση του διαχωριστικού από το τελευταίο στοιχείο */
}

.top-nav li a {
  text-decoration: none;
  color: #fff;
}

.top-nav li a:hover {
  background-color: #555;
}

.top-nav li a.active {
  background-color: #ddd;
  color: #333;
}

Με αυτούς τους κανόνες CSS, θα έχετε έναν γκρι οριζόντιο μπάρα πλοήγησης με μια λεπτή γκρι περίγραμμα. Τα στοιχεία του μπάρας θα είναι οριζόντια διάταξη, με διαχωριστικές γραμμές ανάμεσα τους και μια απομόνωση στο τελευταίο στοιχείο. Επιπλέον, οι συνδέσμοι θα έχουν αντίστοιχες αλλαγές χρώματος κατά την αλλαγή του ποντικιού πάνω από αυτούς και για το τρέχον στοιχείο.

Για να δημιουργήσετε ένα sticky navbar, προσθέστε τον κανόνα position: sticky; στον κανόνα CSS του στοιχείου <ul>.

Εδώ είναι ένα παράδειγμα:

.top-nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: sticky;
  top: 0;
  background-color: #333;
  z-index: 999;
}

Με αυτόν τον κανόνα CSS, το navbar θα γίνει sticky και θα παραμείνει στην επάνω μέρα της σελίδας καθώς ο χρήστης κάνει κύλιση. Το top: 0; καθορίζει ότι το navbar θα “κολλάει” στην επάνω μέρα της σελίδας. Επίσης, μπορείτε να ρυθμίσετε το z-index ανάλογα με τις ανάγκες σας, για να εξασφαλίσετε ότι το navbar είναι επάνω από άλλα στοιχεία στη σελίδα.

Για να δημιουργήσετε ένα αποκρίσιμο (responsive) top navigation με χρήση των media queries στο CSS, μπορείτε να αλλάξετε την εμφάνιση του navigation όταν η οθόνη είναι σε μια συγκεκριμένη διάσταση.

[adinserter block=”5″]

Παρακάτω παρουσιάζεται ένα παράδειγμα:

HTML:

<nav class="top-nav">
  <ul class="nav-list">
    <li><a href="#" class="active">Αρχική</a></li>
    <li><a href="#">Πληροφορίες</a></li>
    <li><a href="#">Υπηρεσίες</a></li>
    <li><a href="#">Επικοινωνία</a></li>
    <li class="icon"><a href="javascript:void(0);" onclick="toggleMenu()">&#9776;</a></li>
  </ul>
</nav>

CSS:

.top-nav {
  background-color: #333;
}

.nav-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.nav-list li {
  float: left;
}

.nav-list li a {
  display: block;
  color: #fff;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.nav-list li a:hover {
  background-color: #555;
}

.nav-list li.icon {
  display: none;
}

@media screen and (max-width: 768px) {
  .nav-list li:not(:last-child) {
    display: none;
  }

  .nav-list li.icon {
    float: right;
    display: block;
  }

  .nav-list li.icon a {
    padding: 10px;
  }

  .nav-list.responsive {
    position: relative;
  }

  .nav-list.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }

  .nav-list.responsive li {
    float: none;
    display: block;
    text-align: left;
  }
}

Σε αυτό το παράδειγμα, όταν η οθόνη έχει μικρότερο ή ίσο πλάτος από 768 pixels, τα στοιχεία του navigation που δεν χωράνε στη γραμμή τοποθετούνται στο εικονίδιο με τρία οριζόντια γραμματοσειρά (☰). Όταν το εικονίδιο πατηθεί, τα κρυφά στοιχεία εμφανίζονται σε ένα dropdown μενού.

Με τη χρήση των media queries, μπορείτε να προσαρμόσετε τον σχεδιασμό του navigation ανάλογα με την οθόνη της συσκευής που χρησιμοποιείται, προσφέροντας ένα αποκρίσιμο και φιλικό προς το χρήστη περιβάλλον.

Για να δημιουργήσετε ένα αποκρίσιμο (responsive) side navigation με χρήση των media queries στο CSS, μπορείτε να αλλάξετε την εμφάνιση του navigation όταν η οθόνη είναι σε μια συγκεκριμένη διάσταση.

Παρακάτω παρουσιάζεται ένα παράδειγμα:

HTML:

<div class="sidenav">
  <a href="#" class="active">Αρχική</a>
  <a href="#">Πληροφορίες</a>
  <a href="#">Υπηρεσίες</a>
  <a href="#">Επικοινωνία</a>
</div>

CSS:

.sidenav {
  height: 100%;
  width: 200px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #333;
  overflow-x: hidden;
  padding-top: 20px;
}

.sidenav a {
  padding: 8px 8px 8px 16px;
  text-decoration: none;
  font-size: 16px;
  color: #fff;
  display: block;
}

.sidenav a:hover {
  background-color: #555;
}

@media screen and (max-width: 768px) {
  .sidenav {
    width: 100%;
    height: auto;
    position: relative;
  }

  .sidenav a {
    padding: 8px 8px 8px 32px;
  }
}

Σε αυτό το παράδειγμα, όταν η οθόνη έχει μικρότερο ή ίσο πλάτος από 768 pixels, το side navigation προσαρμόζεται και καταλαμβάνει το πλήρες πλάτος της οθόνης. Τα στοιχεία του navigation εμφανίζονται με πλήρες πλάτος και αυξημένα αρχικά αναθέτοντας περισσότερο χώρο για το κείμενο.

Χρησιμοποιώντας τα media queries, μπορείτε να προσαρμόσετε τον σχεδιασμό του side navigation ανάλογα με το μέγεθος της οθόνης, παρέχοντας ένα αποκρίσιμο και φιλικό προς το χρήστη περιβάλλον.

Για να προσθέσετε ένα αναδυόμενο (dropdown) μενού μέσα σε έναν πάνω πάνω μπάρα πλοήγησης, μπορείτε να χρησιμοποιήσετε τον συνδυασμό CSS και JavaScript. Παρακάτω παρουσιάζεται ένα απλό παράδειγμα:

HTML:

<div class="navbar">
  <a href="#home">Αρχική</a>
  <a href="#news">Νέα</a>
  <div class="dropdown">
    <button class="dropbtn">Προϊόντα
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#product1">Προϊόν 1</a>
      <a href="#product2">Προϊόν 2</a>
      <a href="#product3">Προϊόν 3</a>
    </div>
  </div>
  <a href="#about">Σχετικά</a>
</div>

CSS:

.navbar {
  overflow: hidden;
  background-color: #333;
}

.navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: #f2f2f2;
  padding: 14px 16px;
  background-color: inherit;
  margin: 0;
}

.navbar a:hover,
.dropdown:hover .dropbtn {
  background-color: #555;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

Στο παράδειγμα αυτό, υπάρχει ένας κώδικας CSS και HTML για τη δημιουργία ενός πλήρους navigation bar με ένα dropdown μενού. Ο κώδικας CSS περιλαμβάνει κλάσεις για τον ορισμό του στυλ του μενού και της αναδυόμενης λίστας. Ο κώδικας JavaScript δεν απαιτείται για το παράδειγμα αυτό.

Όταν ο χρήστης κάνει κλικ στο κουμπί “Προϊόντα”, η αναδυόμενη λίστα εμφανίζεται με ένα απλό hover effect. Ο κώδικας CSS προσαρμόζει το περιεχόμενο της λίστας για να εμφανίζεται κατάλληλα.