Πώς να δημιουργήσετε: Μενού ανακάλυψης πλοήγησης

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

Δημιουργία μενού ανακάλυψης πλοήγησης

Όταν ο χρήστης κινεί το ποντίκι του πάνω στα στοιχεία του μενού πλοήγησης, εμφανίζεται ένα μενού ανακάλυψης.

Βήμα 1 - Προσθήκη 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="#">Σύνδεσμος 1</a>
      <a href="#">Σύνδεσμος 2</a>
      <a href="#">Σύνδεσμος 3</a>
    </div>
  </div>
</div>

Παράδειγμα εξήγησης:

Χρησιμοποιήστε οποιοδήποτε στοιχείο για να ανοίξετε το μενού ανακάλυψης, όπως το στοιχείο <button>, <a> ή το στοιχείο <p>.

Δημιουργήστε ένα μενού ανακάλυψης χρησιμοποιώντας στοιχεία κουτιού (όπως <div>) και προσθέστε σύνδεσμους στο μενού ανακάλυψης.

Χρησιμοποιήστε ένα στοιχείο <div> για να περιβάλλετε το κουμπί και ένα άλλο στοιχείο <div> για να χρησιμοποιήσετε σωστά το CSS για το μενού ανακάλυψης.

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

/* Κουτί μενού πλοήγησης */
.navbar {
  overflow: hidden;
  background-color: #333;
  font-family: Arial;
}
/* Σύνδεσμοι στο μενού πλοήγησης */
.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* Κουτί ανακάλυψης */
.dropdown {
  float: left;
  overflow: hidden;
}
/* Κουμπί ανακάλυψης */
.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit; /* Είναι πολύ σημαντικό για τη οριζόντια κατεύθυνση στο κινητό */
  margin: 0; /* Σημαντικό για τη οριζόντια προσαρμογή στα κινητά */
}
/* Προσθέτει κόκκινο χρώμα φόντου στους σύνδεσμους της導ναυτικής όταν είναι στο hover */
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}
/* Περιεχόμενο του αναδυόμενου μενού (από προεπιλογή κρυμμένο) */
.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;
}
/* Προσθέτει γκρίζο χρώμα φόντου στο σύνδεσμο του αναδυόμενου μενού όταν είναι στο hover */
.dropdown-content a:hover {
  background-color: #ddd;
}
/* Το αναδυόμενο μενού εμφανίζεται όταν ο ποντίκος είναι στο hover */
.dropdown:hover .dropdown-content {
  display: block;
}

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

Παράδειγμα εξήγησης:

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

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

.dropdown Η κλάση είναι .dropdown-content Ο κουτίς. Επειδή είναι ένα στοιχείο <div>, όχι <a>, πρέπει να το κάνουμε να κολυμπάει για να παραμείνει δίπλα στο σύνδεσμο.

.dropdown-content Η κλάση περιέχει το πραγματικό αναδυόμενο μενού. Είναι κρυμμένο από προεπιλογή και εμφανίζεται όταν ο χρήστης σηκώνει το ποντίκι (βλέπε παρακάτω). Λάβετε υπόψη ότι το ελάχιστο πλάτος είναι ρυθμισμένο σε 160px. Μπορείτε να αλλάξετε αυτή τη ρύθμιση ελεύθερα.

Δεν χρησιμοποιούμε το περιθώριο, αλλά χρησιμοποιούμε box-shadow Η ιδιότητα, ώστε το αναδυόμενο μενού να φαίνεται σαν ένα '卡片'. Εμείς χρησιμοποιούμε επίσης z-index Το αναδυόμενο μενού τοποθετείται μπροστά από άλλους στοιχεία.

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

Κλικέψιμη αναδυόμενη μενού στο μενού導航

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

Συσχετιζόμενες σελίδες

Εκμάθηση:CSS dropdown menu

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

Εκμάθηση:CSS navigation bar

Εκμάθηση:Πώς να δημιουργήσετε μια ανταποκρινόμενη κορυφαία導航