如何创建：大型菜单

学习如何创建大型菜单（导航栏中的全宽下拉菜单）。

创建大型菜单

创建一个下拉菜单，当用户将鼠标移动到导航栏中的元素上时会显示该菜单。

第一步 - 添加 HTML：

<div class="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <div class="dropdown">
    <button class="dropbtn">Dropdown
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <div class="header">
        <h2>Mega Menu</h2>
      </div>
      <div class="row">
        <div class="column">
          <h3>Category 1</h3>
          <a href="#">Σύνδεσμος 1</a>
          <a href="#">Σύνδεσμος 2</a>
          <a href="#">Σύνδεσμος 3</a>
        </div>
        <div class="column">
          <h3>Category 2</h3>
          <a href="#">Σύνδεσμος 1</a>
          <a href="#">Σύνδεσμος 2</a>
          <a href="#">Σύνδεσμος 3</a>
        </div>
        <div class="column">
          <h3>Κατηγορία 3</h3>
          <a href="#">Σύνδεσμος 1</a>
          <a href="#">Σύνδεσμος 2</a>
          <a href="#">Σύνδεσμος 3</a>
        </div>
      </div>
    </div>
  </div>
</div>

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

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

Χρησιμοποιήστε το στοιχείο κουτιού (π.χ. <div class="dropdown-content">) για τη δημιουργία του μενού ανασκόπησης, και προσθέστε δίκτυα (ό oriented columns), στη συνέχεια προσθέστε τους σύνδεσμους ανασκόπησης στο δίκτυο.

Χρησιμοποιήστε το στοιχείο <div class="dropdown"> για να περιλαμβάνετε το κουμπί και τα στοιχεία κουτιού (<div class="dropdown-content">), ώστε να χρησιμοποιηθεί σωστά η 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: inherit; /* Σημαντικό για τη vertical alignment στα κινητά */
  margin: 0; /* Σημαντικό για τη vertical alignment στα κινητά */
}
/* Προσθήκη κόκκινου χρώματος φόντου στους σύνδεσμους της στήλης καθοδήγησης όταν βρίσκεται σε κατάσταση αναμονής του ποντικιού */
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}
/* Περιεχόμενο μενού ανασκόπησης (κατά προεπιλογή κρυμμένο) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  width: 100%;
  left: 0;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
/* Μεγάλος τίτλος μενού (αν χρειάζεται) */
.dropdown-content .header {
  background: red;
  padding: 16px;
  color: white;
}
/* Εμφανίζει το αναδυόμενο μενού όταν ο χρήστης επισημάνει με το ποντίκι */
.dropdown:hover .dropdown-content {
  display: block;
}
/* Δημιουργεί τρεις ίσες κολόνες και τις κάνει παράλληλες */
.column {
  float: left;
  width: 33.33%;
  padding: 10px;
  background-color: #ccc;
  height: 250px;
}
/* Ρυθμίζει μορφές για τους δεσμούς εντός των κολόνων */
.column a {
  float: none;
  color: black;
  padding: 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
/* Προσθέτει χρώμα παρασκηνίου όταν ο χρήστης επισημάνει με το ποντίκι */
.column a:hover {
  background-color: #ddd;
}
/* Καθαρίζει το πλούτο μετά από κολόνες */
.row:after {
  content: "";
  display: table;
  clear: both;
}

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

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

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

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

.dropdown-content Η κλάση περιέχει το πραγματικό αναδυόμενο μενού. Από προεπιλογή είναι κρυμμένο και εμφανίζεται όταν ο χρήστης επισημάνει (βλέπε παρακάτω). Τοποθετείται κάτω από το κουμπί του αναδυόμενου μενού και η πλάτος του είναι ρυθμισμένο σε 100%, για να καλύπτει ολόκληρη την οθόνη.

Δεν χρησιμοποιούμε περιγράμματα, αλλά χρησιμοποιούμε box-shadow Πρότυπο, ώστε το αναδυόμενο μενού να φαίνεται σαν ένα "χαρτί". Χρησιμοποιούμε επίσης z-index Το αναδυόμενο μενού τοποθετείται μπροστά από άλλα στοιχεία.

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

.column Η κλάση χρησιμοποιείται για τη δημιουργία τριών παράλληλων κολόνων εντός του αναδυόμενου μενού (για την εμφάνιση διαφορετικών κατηγοριών).

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

Εκμάθηση:Μενού κουμπιών CSS

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

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

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