Αναπτυσσόμενα CSS

Πίνακας περιεχομένων

    Εμφάνιση πίνακα περιεχομένων

Δημιουργήστε ένα αναπτυσσόμενο μενού με δυνατότητα αιώρησης με CSS.

Επίδειξη: Αναπτυσσόμενα Παραδείγματα

Μετακινήστε το ποντίκι πάνω από τα παρακάτω παραδείγματα:

Dropdown Text

Hello World!

Link 1 Link 2 Link 3
Other: Cinque Terre
Cinque Terre
Beautiful Cinque Terre

Βασικό αναπτυσσόμενο μενού

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

Παράδειγμα

<style>
.dropdown {
  position: relative;
  
display: inline-block;
}
.dropdown-content {
  display: 
none;
  position: absolute;
  
background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 
12px 16px;
  z-index: 1;
}
.dropdown:hover 
.dropdown-content {
  display: block;
}
</style>

<div class="dropdown">
  <span>Mouse over me</span>
  
<div class="dropdown-content">
    <p>Hello World!</p>
  </div>
</div>

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: block;
}
</style>
</head>
<body>

<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the text below to open the dropdown content.</p>

<div class="dropdown">
  <span>Mouse over me</span>
  <div class="dropdown-content">
  <p>Hello World!</p>
  </div>
</div>

</body>
</html>

Παράδειγμα Επεξήγηση

HTML) Χρησιμοποιήστε οποιοδήποτε στοιχείο για να ανοίξετε το αναπτυσσόμενο περιεχόμενο, π.χ. ένα <span> ή ένα στοιχείο <button>.

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

Τυλίξτε ένα στοιχείο <div> γύρω από τα στοιχεία για να τοποθετήσετε το αναπτυσσόμενο περιεχόμενο σωστά με το CSS.

CSS) Η κλάση .dropdown χρησιμοποιεί position:relative, η οποία απαιτείται όταν θέλουμε το αναπτυσσόμενο περιεχόμενο που θα τοποθετηθεί ακριβώς κάτω από το αναπτυσσόμενο κουμπί (χρησιμοποιώντας position:absolute).

Η κλάση .dropdown-content περιέχει το πραγματικό αναπτυσσόμενο περιεχόμενο. Είναι κρυμμένο από προεπιλογή και θα εμφανιστεί κατά την τοποθέτηση του δείκτη (δείτε παρακάτω). Σημειώστε ότι το ελάχιστο πλάτος έχει οριστεί σε 160 pixel. Μη διστάσετε να αλλάξετε Αυτό. Συμβουλή: Εάν θέλετε να είναι το πλάτος του αναπτυσσόμενου περιεχομένου όσο το αναπτυσσόμενο κουμπί, ορίστε το πλάτος σε 100% (και overflow:auto σε ενεργοποιήστε την κύλιση σε μικρές οθόνες).

Αντί να χρησιμοποιήσουμε περίγραμμα, χρησιμοποιήσαμε την ιδιότητα CSS box-shadow για να δημιουργήσουμε το Το αναπτυσσόμενο μενού μοιάζει με "κάρτα".

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

Πτυσώμενο μενού

Δημιουργήστε ένα αναπτυσσόμενο μενού που επιτρέπει στον χρήστη να επιλέξει μια επιλογή από μια λίστα:

Link 1 Link 2 Link 3

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

Παράδειγμα

<style>
/* Style The Dropdown Button */
.dropbtn {
  
background-color: #4CAF50;
  color: white;
  
padding: 16px;
  font-size: 16px;
  
border: none;
  cursor: pointer;
}
/* The 
container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
  display: 
inline-block;
}
/* Dropdown Content (Hidden by Default) */
.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;
}
/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
    
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Show the 
dropdown menu on hover */
.dropdown:hover .dropdown-content {
  
display: block;
}
/* Change the background color of the dropdown 
button when the dropdown content is shown */
.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}
</style>

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  
<div class="dropdown-content">
    <a href="#">Link 
1</a>
    
<a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.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 {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}
</style>
</head>
<body>

<h2>Dropdown Menu</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
  </div>
</div>

<p><strong>Note:</strong> We use href="#" for test links. In a real web site this would be URLs.</p>

</body>
</html>

Αναπτυσσόμενο περιεχόμενο με στοίχιση δεξιά

Link 1 Link 2 Link 3
Link 1 Link 2 Link 3

Εάν θέλετε το αναπτυσσόμενο μενού να πηγαίνει από τα δεξιά προς τα αριστερά, αντί για τα αριστερά προς τα δεξιά, προσθέστε δεξιά: 0;

Παράδειγμα

.dropdown-content {
  right: 0;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  right: 0;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1;}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}
</style>
</head>
<body>

<h2>Aligned Dropdown Content</h2>
<p>Determine whether the dropdown content should go from left to right or right to left with the left and right properties.</p>

<div class="dropdown" style="float:left;">
  <button class="dropbtn">Left</button>
  <div class="dropdown-content" style="left:0;">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
  </div>
</div>

<div class="dropdown" style="float:right;">
  <button class="dropbtn">Right</button>
  <div class="dropdown-content">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
  </div>
</div>

</body>
</html>

Περισσότερα Παραδείγματα

Αναπτυσσόμενη εικόνα

Πώς να προσθέσετε μια εικόνα και άλλο περιεχόμενο μέσα στο αναπτυσσόμενο πλαίσιο.

Τοποθετήστε το δείκτη του ποντικιού πάνω από την εικόνα:

Cinque Terre
Cinque Terre
Beautiful Cinque Terre


Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
.dropdown {
  position: relative;
  display: inline-block;
}

.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:hover .dropdown-content {
  display: block;
}

.desc {
  padding: 15px;
  text-align: center;
}
</style>
</head>
<body>

<h2>Dropdown Image</h2>
<p>Move the mouse over the image below to open the dropdown content.</p>

<div class="dropdown">
  <img src="img_5terre.jpg" alt="Cinque Terre" width="100" height="50">
  <div class="dropdown-content">
  <img src="img_5terre.jpg" alt="Cinque Terre" width="300" height="200">
  <div class="desc">Beautiful Cinque Terre</div>
  </div>
</div>

</body>
</html>

Αναπτυσσόμενη γραμμή πλοήγησης

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


Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a, .dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}

li.dropdown {
  display: inline-block;
}

.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 {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1;}

.dropdown:hover .dropdown-content {
  display: block;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">Dropdown</a>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </li>
</ul>

<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>

</body>
</html>