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

Δημιουργία κουρτινής μενού

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

<!-- Πλαίσιο -->
<div id="myNav" class="overlay">
  <!-- Κλείσιμο του πλαισίου πλοήγησης -->
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
  <!-- Overlay content -->
  <div class="overlay-content">
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Clients</a>
    <a href="#">Contact</a>
  </div>
</div>
/* Χρησιμοποιήστε οποιοδήποτε στοιχείο για να ανοίξετε/εμφανίσετε το μενού πλοήγησης κάλυψης */
<span onclick="openNav()">open</span>

Δεύτερη στάση - Προσθήκη CSS:

/* Κάλυψη (βάθος πίσω) */
.overlay {
  /* Το ύψος και το πλάτος εξαρτώνται από το πώς θέλετε να εμφανίσετε την κάλυψη (βλέπε παρακάτω JS) */   
  height: 100%;
  width: 0;
  position: fixed; /* Παραμένει στο ίδιο σημείο */
  z-index: 1; /* Τοποθετείται στην κορυφή */
  left: 0;
  top: 0;
  background-color: rgb(0,0,0); /* Εναλλακτικό μαύρο χρώμα (εναλλακτική λύση χρώματος) */
  background-color: rgba(0,0,0, 0.9); /* Με διαφάνεια μαύρο χρώμα */
  overflow-x: hidden; /* Απενεργοποίηση κύριου άξονα ροής (horizontal scroll) */
  transition: 0.5s; /* Μεταβατική επίδραση 0.5 δευτερολέπτων για την εισαγωγή ή την έξοδο της κάλυψης (υψος ή πλάτος, ανάλογα με την εμφάνιση) */
}
/* Τοποθετεί το περιεχόμενο εντός της κάλυψης */
.overlay-content {
  position: relative;
  top: 25%; /* Τοποθεσία 25% από το κορυφείο */
  width: 100%; /* 100% πλάτος */
  text-align: center; /* Κεντρικοποιημένο κείμενο/σύνδεσμοι */
  margin-top: 30px; /* Εξωτερικό περιθώριο之上 30px για να αποφύγουμε σύγκρουση με το κουμπί κλείσιμο στο μικρότερο οθόνη */
}
/* Καλύπτει ο σύνδεσμος πλοήγησης εντός της κάλυψης */
.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #818181;
  display: block; /* Εμφάνιση ως block αντί για inline */
  transition: 0.3s; /* Μεταβατική επίδραση 0.3 δευτερολέπτων κατά την επάνω βλέψη (χρώμα) */
}
/* Όταν το ποντίκι είναι επάνω στο σύνδεσμο πλοήγησης, αλλάζει το χρώμα του */
.overlay a:hover, .overlay a:focus {
  χρώμα: #f1f1f1;
}
/* Τοποθέτηση του κουμπιού κλείσματος (δεξιός επάνω γωνία) */
.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}
/* Αλλαγή μεγέθους γραμματοσειράς των συνδέσμων και επανατοποθέτηση του κουμπιού κλείσματος για να αποφευχθεί η σύγκρουση όταν η ύψος του οθόνη είναι κάτω από 450 pixel */
@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}

Τρίτο βήμα - Προσθήκη JavaScript:

Το παρακάτω παράδειγμα θα κινήσει το μείδους πλοήγησης από το αριστερό προς το δεξί όταν εκτυπωθεί (από 0 έως 100% πλάτος):

Σύρσιμο από το πλάι

/* Ανοίξιμο όταν ο χρήστης κάνει κλικ στο στοιχείο <span> */
function openNav() {
  document.getElementById("myNav").style.width = "100%";
}
/* Κλείσιμο όταν ο χρήστης κάνει κλικ στο σύμβολο "x" μέσα στην κάλυψη */
function closeNav() {
  document.getElementById("myNav").style.width = "0%";
}

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

Το παρακάτω παράδειγμα θα καλύψει το μείδους πλοήγησης και θα το κινήσει από την κορυφή προς τα κάτω (από 0 έως 100% ύψος).

Σημείωση:Σε αυτό το παράδειγμα, παρακαλώ σημειώστε ότι το CSS είναι λίγο διαφορετικό από το παραπάνω παράδειγμα (η προεπιλεγμένη ύψος είναι 0, το πλάτος είναι 100% και περικύκλωση-y Για απόκρυψη（Απενεργοποίηση της οριζόντιας κύλισης εκτός από τα μικρά οθόνες）：

Κάθετη κίνηση από την κορυφή προς τα κάτω

/* Ανοίξιμο */
function openNav() {
  document.getElementById("myNav").style.height = "100%";
}
/* Κλείσιμο */
function closeNav() {
  document.getElementById("myNav").style.height = "0%";
}

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

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

Άνοιγμα μείδους χωρίς κίνηση

/* Ανοίξιμο */
function openNav() {
  document.getElementById("myNav").style.display = "block";
}
/* Κλείσιμο */
function closeNav() {
  document.getElementById("myNav").style.display = "none";
}

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

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

Εκμάθηση:CSS Ναυτιλία