Πώς να δημιουργήσετε: Σταθερό μενού

Πώς να δημιουργήσετε ένα σταθερό επάνω μενού

Πρώτη βήμα - Προσθήκη HTML:

<div class="navbar">
  <a href="#home">Αρχική</a>
  <a href="#news">Ειδήσεις</a>
  <a href="#contact">Επικοινωνία</a>
</div>
<div class="main">
  <p>Nέα γραφή néa gráfi néa gráfi néa gráfi néa gráfi..</p>
</div>

Δεύτερη βήμα - Προσθήκη CSS:

Για να δημιουργήσετε ένα σταθερό επάνω μενού, χρησιμοποιήστε position:fixed και top:0Λάβετε υπόψη ότι το σταθερό μενού θα καλύπτει το άλλο περιεχόμενό σας. Για να λύσετε αυτό το πρόβλημα, προσθέστε μια εξωτερική επάνω περιθωρία (margin-top) ίση ή μεγαλύτερη από το ύψος του μενού.

/* Ναυτίλο πλοήγησης */
.navbar {
  overflow: hidden;
  background-color: #333;
  position: fixed; /* τοποθετώντας το ναυτίλο σε σταθερή θέση */
  top: 0; /* τοποθετώντας το ναυτίλο στο επάνω μέρος της σελίδας */
  width: 100%; /* πλήρης πλάτος */
}
/* Σύνδεσμοι στο ναυτίλο */
.navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* Αλλαγή φόντου όταν η ένδειξη του ποντικιού βρίσκεται πάνω από το σύνδεσμο */
.navbar a:hover {
  background: #ddd;
  color: black;
}
/* Κύριο περιεχόμενο */
.main {
  margin-top: 30px; /* προσθέτοντας την εξωτερική επάνω περιθωρία για να αποφύγουμε την επικάλυψη περιεχομένου */
}

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

Πώς να δημιουργήσετε ένα σταθερό κάτω μενού

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

/* Ναυτίλο πλοήγησης */
.navbar {
  position: fixed; /* τοποθετώντας το ναυτίλο σε σταθερή θέση */
  bottom: 0; /* τοποθετώντας το ναυτίλο στο κάτω μέρος της σελίδας */
  width: 100%; /* πλήρης πλάτος */
}
/* Κύριο περιεχόμενο */
.main {
  margin-bottom: 30px; /* προσθέτοντας την εξωτερική κατώτερη περιθωρία για να αποφύγουμε την επικάλυψη περιεχομένου */
}

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

Σχετικές σελίδες

Εκμάθηση:CSS νάβιγκασιόν