Κάθετη Ναυτιλιακή Στήλη CSS

Προτεινόμενα μαθήματα:

Οριζόντια στήλη πλοήγησης

Παράδειγμα

πλάτος: 200px;
  li a {
  Μπορείτε επίσης να ρυθμίσετε το πλάτος του <ul> και να αφαιρέσετε το πλάτος του <a>, επειδή όταν εμφανίζονται ως στοιχεία μπλοκ, καταλαμβάνουν το πλήρες διαθέσιμο πλάτος. Αυτό θα οδηγήσει σε το ίδιο αποτέλεσμα με το προηγούμενο παράδειγμα:
}

Δοκιμάστε το προσωπικά

Για να δημιουργήσετε μια οριζόντια στήλη πλοήγησης, εκτός από τον κώδικα του προηγούμενου κεφαλαίου, μπορείτε επίσης να ρυθμίσετε το στυλ του στοιχείου <a> στη λίστα:

  • li a { Παράδειγμα ερμηνείας:
  • Μπορείτε επίσης να ρυθμίσετε το πλάτος του <ul> και να αφαιρέσετε το πλάτος του <a>, επειδή όταν εμφανίζονται ως στοιχεία μπλοκ, καταλαμβάνουν το πλήρες διαθέσιμο πλάτος. Αυτό θα οδηγήσει σε το ίδιο αποτέλεσμα με το προηγούμενο παράδειγμα: - Η εμφάνιση των συνδέσμων ως στοιχεία μπλοκ επιτρέπει την πλήρη επιλογή της περιοχής του συνδέσμου (και όχι μόνο του κειμένου), και μπορούμε να καθορίσουμε το πλάτος (και αν χρειαστεί, το εσωτερικό και εξωτερικό περιθώριο, το ύψος κ.λπ.).

- Η τιμή προεπιλογής για τα στοιχεία μπλοκ καταλαμβάνει το πλήρες διαθέσιμο πλάτος. Χρειαζόμαστε πλάτος 60 εικονοστοιχείων.

Παράδειγμα

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  Μπορείτε επίσης να ρυθμίσετε το πλάτος του <ul> και να αφαιρέσετε το πλάτος του <a>, επειδή όταν εμφανίζονται ως στοιχεία μπλοκ, καταλαμβάνουν το πλήρες διαθέσιμο πλάτος. Αυτό θα οδηγήσει σε το ίδιο αποτέλεσμα με το προηγούμενο παράδειγμα:
} 
πλάτος: 200px;
  li a {
}

Δοκιμάστε το προσωπικά

πλάτος: 60px;

Παράδειγμα οριζόντιας στήλης πλοήγησης

Παράδειγμα

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  Δημιουργήστε μια βασική οριζόντια στήλη πλοήγησης με σκούρο χρώμα υποβάθρου και αλλάξτε το χρώμα υποβάθρου του συνδέσμου όταν ο χρήστης τοποθετήσει το ποντίκι πάνω του:
  background-color: #f1f1f1;
}
πλάτος: 200px;
  li a {
  display: block;
  χρώμα: #000;
  padding: 8px 16px;
}
text-decoration: none;
/* Αλλαγή χρώματος του συνδέσμου όταν το ποντίκι βρίσκεται πάνω του */
  li a:hover {
  background-color: #4CAF50;
}

Δοκιμάστε το προσωπικά

background-color: #555;

Ενεργός/Τρέχων σύνδεσμος πλοήγησης

Παράδειγμα

Προσθέστε την κλάση "active" στο τρέχον σύνδεσμο, ώστε ο χρήστης να γνωρίζει σε ποια σελίδα βρίσκεται:
  .active {
  background-color: #4CAF50;
}

Δοκιμάστε το προσωπικά

χρώμα: λευκό;

Κεντρικοποιήστε τον σύνδεσμο και προσθέστε το πλαίσιο text-align:center στο <li> ή <a>, ώστε να κεντρικοποιηθεί το σύνδεσμο.

προσθέτοντας border Πρόσθεσε την ιδιότητα border-bottomεκτός από τον τελευταίο στοιχεία:

Παράδειγμα

ul {
  border: 1px solid #555;
}
li {
  text-align: center;
  border-bottom: 1px solid #555;
}
li:last-child {
  border-bottom: none;
}

Δοκιμάστε το προσωπικά

Καταστήστε την πλήρης ύψους σταθερή οριζόντια στήλη πλοήγησης

Δημιουργία πλήρους ύψους "stick" πλευρικής πλοήγησης:

Παράδειγμα

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 25%;
  background-color: #f1f1f1;
  height: 100%; /* Πλήρη ύψος */
  position: fixed; /* Κάντε το stick, ακόμα και όταν κουνιέται */
  overflow: auto; /* Αν το περιεχόμενο του πλευρικού panel είναι πολύ, ενεργοποιήστε τη σκακιέρα */
}

Δοκιμάστε το προσωπικά

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