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

Μάθετε πώς να δημιουργήσετε ένα ανταποκρινόμενο μπαρ導nav με αναπτυσσόμενο μενού.

Δημιουργία ανταποκρινόμενης κορυφαίας導航 μπαρ με αναπτυσσόμενο μενού

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

<div class="topnav" id="myTopnav">
  <a href="#home" class="active">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <div class="dropdown">
    <button class="dropbtn">Dropdown
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>
  <a href="#about">About</a>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">☰</a>
</div>

Βήμα 2 - Προσθήκη CSS:

/* Προσθέτει μαύρο χρώμα υποβάθρου για την κορυφαία導航栏 */
.topnav {
  χρώμα υποβάθρου: #333;
  περιστροφή: κρυμμένο;
}
/* Ορίζει το στυλ των συνδέσμων της導航栏 */
.topnav a {
  πλεύση: αριστερά;
  display: block;
  χρώμα: #f2f2f2;
  κεντρωμένη γραφή: κεντρική;
  χώρος πλήρωσης: 14px 16px;
  μη επισημευμένη διακόσμηση: none;
  μέγεθος γραμμάτων: 17px;
}
/* Προσθέτει μια κλάση δραστηριότητας για την ένδειξη της τρέχουσας σελίδας */
.active {
  χρώμα υποβάθρου: #04AA6D;
  χρώμα: λευκό;
}
/* Κρύβει τα σύνδεσματα που ανοίγουν και κλείνουν την κορυφαία導航栏 στο μικρό οθόνη */
.topnav .icon {
  display: none;
}
/* Κουτί περιεχομένου του μενού αναδυόμενης λίστας - χρησιμοποιείται για τη τοποθέτηση του περιεχομένου του μενού αναδυόμενης λίστας */
.dropdown {
  πλεύση: αριστερά;
  περιστροφή: κρυμμένο;
}
/* Ορίζει το στυλ του κουμπιού του μενού αναδυόμενης λίστας ώστε να ταιριάζει στην κορυφαία導航栏 */
.dropdown .dropbtn {
  μέγεθος γραμμάτων: 17px;
  περιγράμματα: none;
  στυλ ορίου: none;
  χρώμα: λευκό;
  χώρος πλήρωσης: 14px 16px;
  χρώμα υποβάθρου: κληρονομικό;
  οικογένεια γραμμάτων: κληρονομικό;
  μαργή: 0;
}
/* Ορίζει το στυλ του περιεχομένου του μενού αναδυόμενης λίστας (προεπιλεγμένος κρυμμένος) */
.dropdown-content {
  display: none;
  position: absolute;
  χρώμα υποβάθρου: #f9f9f9;
  ελάχιστη πλάτος: 160px;
  σκιώδης σκιά: 0px 8px 16px 0px rgba(0,0,0,0.2);
  ζ-ίндекс: 1;
}
/* Ορίζει το στυλ των συνδέσμων εντός του μενού αναδυόμενης λίστας */
.dropdown-content a {
  float: none;
  χρώμα: μαύρο;
  χώρος πλήρωσης: 12px 16px;
  μη επισημευμένη διακόσμηση: none;
  display: block;
  text-align: left;
}
/* Στην αναστολή του ποντικιού, προσθέτει σκοτεινή υποβάθρω για τα σύνδεσματα της κορυφαίας導航栏 και τα κουμπιά του μενού αναδυόμενης λίστας */
.topnav a:hover, .dropdown:hover .dropbtn {
  χρώμα υποβάθρου: #555;
  χρώμα: λευκό;
}
/* Στην αναστολή του ποντικιού, προσθέτει σκοτεινή υποβάθρω για τα σύνδεσματα του μενού αναδυόμενης λίστας */
.dropdown-content a:hover {
  χρώμα υποβάθρου: #ddd;
  χρώμα: μαύρο;
}
/* Όταν ο χρήστης περνά το ποντίκι πάνω από το κουμπί μενού αναδυόμενης λίστας, εμφανίζεται το μενού αναδυόμενης λίστας */
.dropdown:hover .dropdown-content {
  display: block;
}
/* Όταν το πλάτος της οθόνης είναι μικρότερο από 600 εικονοστοιχεία, κρύβονται όλες οι σύνδεσμοι εκτός από τον πρώτο ("Home") και εμφανίζεται η σύνδεσμος για ανοίγματα και κλείσματα του πάνω πλοηγητή (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}
/* Όταν ο χρήστης κάνει κλικ στο εικονίδιο, το JavaScript προσθέτει την κλάση "responsive" στο πάνω πλοήγημα. Αυτή η κλάση κάνει το πάνω πλοήγημα να δείχνει καλύτερα στις μικρές οθόνες (προβάλλει τις σύνδεσμοι σε όρθια而不是 οριζόντια) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}

Τρίτο βήμα - Προσθέστε JavaScript:

/* Όταν ο χρήστης κάνει κλικ στο εικονίδιο, προστίθεται ή αφαιρείται η κλάση "responsive" από το πάνω πλοήγημα */
function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  }
    x.className = "topnav";
  }
}

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

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

Εκμάθηση:CSS μενού ανασκόπησης

Εκμάθηση:Πώς να δημιουργήσετε ένα κλικέψιμο μενού αναδυόμενης λίστα;

Εκμάθηση:CSS πλοήγηση

Εκμάθηση:Πώς να δημιουργήσετε μια πλευρική πλοήγηση;