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

Μάθετε πώς να δημιουργήσετε εικονίδια μενού χρησιμοποιώντας CSS.

Αν δεν χρησιμοποιείτε βιβλιοθήκη εικονιδίων, μπορείτε να δημιουργήσετε ένα βασικό εικονίδιο μενού χρησιμοποιώντας CSS:

Εικονίδια μενού:

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

Ανιμασμένα εικονίδια μενού (κάντε κλικ σε αυτά):

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

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

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

<div></div>
<div></div>
<div></div>

Δεύτερο βήμα - Προσθήκη CSS:

div {
  width: 35px;
  height: 5px;
  background-color: black;
  margin: 6px 0;
}

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

Απόδειξη παραδείγματος:

width και height Ορισμός ιδιοτήτων καθορίζει το πλάτος και το ύψος κάθε γραμμής.

Προσθέτουμε χρώμα φόντου μαύρο και εξωτερικές περιθώρια για να δημιουργήσουμε διαστήματα μεταξύ κάθε γραμμής.

Σύμβολο αναπαραγωγής

Χρησιμοποιώντας CSS και JavaScript, αλλάζει το εικονίδιο μενού σε εικονίδιο "Ακύρωση/Διαγραφή":

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

<div class="container" onclick="myFunction(this)">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
</div>

Δεύτερο βήμα - Προσθήκη CSS:

.container {
  display: inline-block;
  cursor: pointer;
}
.bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
  background-color: #333;
  margin: 6px 0;
  transition: 0.4s;
}
/* Ροπή της πρώτης στήλης */
.change .bar1 {
  transform: translate(0, 11px) rotate(-45deg);
}
/* Ξαφνική εξασθένηση της δεύτερης στήλης */
.change .bar2 {opacity: 0;}
/* Ροπή της τελευταίας στήλης */
.change .bar3 {
  transform: translate(0, -11px) rotate(45deg);
}

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

function myFunction(x) {
  x.classList.toggle("change");
}

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

Απόδειξη παραδείγματος:

HTML και CSS: Χρησιμοποιήσαμε τον ίδιο στυλ όπως και πριν, αλλά αυτή τη φορά περιλάμβαναν έναν στοιχείο κουτί γύρω από κάθε <div> στοιχείο και καθορίσαμε μια κλάση για κάθε στοιχείο.

Ο στοιχείο κουτί χρησιμοποιείται για να εμφανίζει ένα εικονίδιο ποντικιού όταν ο χρήστης τοποθετεί τον δείκτη του ποντικιού πάνω στα divs (γραμμές). Όταν πατηθεί, εκτελείται μια συνάρτηση JavaScript που προσθέτει μια νέα κλάση, η οποία αλλάζει τον στυλ κάθε οριζόντιας γραμμής: η πρώτη και η τελευταία γραμμή θα μεταμορφωθούν και θα γυρίσουν σε γράμμα "x". Οι μεσαίες γραμμές θα εξασθενήσουν και θα γίνουν αόρατες.