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

Δημιουργία πλευρικού μενού με εφέ

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

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>
<!-- Χρήση οποιουδήποτε στοιχείου για να ανοίξει τον πλοηγό πλευράς -->
<span onclick="openNav()">open</span>
<!-- Αν θέλετε ο πλοηγός πλευράς να μετακινήσει το περιεχόμενο της σελίδας προς τα δεξιά, τοποθετήστε όλα τα περιεχόμενα μέσα σε αυτό το div (αν θέλετε ο πλοηγός πλευράς να παραμείνει στην κορυφή της σελίδας, δεν χρησιμοποιείται αυτή η ρύθμιση) -->
<div id="main">
  ...
</div>

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

/* Μενού πλοήγησης πλευράς */
.sidenav {
  υψος: 100%; /* 100% πλήρης ύψος */
  πλάτος: 0; /* 0 πλάτος - Αλλάξει από JavaScript */
  θέση: σταθερή; /* Μείνει στην θέση */
  z-index: 1; /* Μείνει στην κορυφή */
  υψος: 0; /* Μείνει στην κορυφή */
  left: 0;
  χρώμα-υποβάθρου: #111; /* Μαύρο */
  παράπλευρη αναρρόφηση: κρυφή; /* Δια��ώνεται η παράπλευρη αναρρόφηση */
  πλάτος-υψος: 60px; /* Τοποθέτηση περιεχομένου σε απόσταση 60px από το άνω μέρος */
  μετάβαση: 0.5s; /* Εφέ μετάβασης 0.5 δευτερολέπτων, για την κίνηση του πλοηγού πλευράς */
}
/* Σύνδεσμοι πλοήγησης του μενούThe links of the navigation menu */
.sidenav a {
  πλάτος: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}
/* Αλλαγή χρώματος όταν ο χρήστης τοποθετεί το ποντίκι πάνω από το σύνδεσμο της導ναυς */
.sidenav a:hover {
  color: #f1f1f1;
}
/* Τοποθεσία και στυλ του κουμπιού κλεισίματος (δεξιά επάνω γωνία) */
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}
/* Ορισμός στυλ περιεχομένου της σελίδας - Αν θέλετε να προωθήσετε το περιεχόμενο της σελίδας προς τα δεξιά όταν ανοίξετε την πλευρική導ναυς, χρησιμοποιήστε αυτή τη ρύθμιση. */
#main {
  transition: margin-left .5s;
  padding: 20px;
}
/* Σε μικρά οθόνες με ύψος κάτω από 450px, τροποποιήστε τη στυλ της πλευρικής導ναυς (μειώστε το εσωτερικό περιθώριο και το μέγεθος του γραμματοσειράς) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

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

Στο παρακάτω παράδειγμα, η πλευρική導ναυς θα γυρίσει προς τα δεξιά και η πλάθος της θα οριστεί σε 250px:

Παράδειγμα κάλυψης πλευρικής導ναυς

/* Ορίζεται το πλάτος της πλευρικής導ναυς σε 250px */
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
}
/* Ορίζεται το πλάτος της πλευρικής導ναυς σε 0 */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}

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

Στο παρακάτω παράδειγμα, η πλευρική導ναυς θα γυρίσει προς τα δεξιά και θα προωθήσει το περιεχόμενο της σελίδας προς τα δεξιά (οι τιμές του πλάτους της πλευρικής導ναυς χρησιμοποιούνται επίσης για το αριστερό εξωτερικό περιθώριο του περιεχομένου της σελίδας):

Πλευρική導ναυς προωθεί το περιεχόμενο

/* Εύρος του πλάτους της πλευρικής導ναυς είναι 250px, το αριστερό εξωτερικό περιθώριο του περιεχομένου της σελίδας είναι 250px */
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
}
/* Εύρος του πλάτους της πλευρικής導ναυς είναι 0, το αριστερό εξωτερικό περιθώριο του περιεχομένου της σελίδας είναι 0 */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
}

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

Το παρακάτω παράδειγμα θα κάνει την πλευρική導ναυς να γυρίσει προς τα δεξιά και να προωθήσει το περιεχόμενο της σελίδας προς τα δεξιά. Ωστόσο, αυτή τη φορά, προσθέσαμε ένα μαύρο φόντο με 40% αδιαφανές στο στοιχείο body για να "επισημάνουμε" την πλευρική導ναυς.

Πλευρική導ναυς με αδιαφανήτητα προωθεί το περιεχόμενο

/* Εύρος του πλάτους της πλευρικής導航 είναι 250px, το αριστερό εξωτερικό περιθώριο του περιεχομένου της σελίδας είναι 250px και προστίθεται μαύρη χρώση φόντου στο body */
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
  document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}
/* Set the width of the side navigation to 0, the left outer margin of the page content to 0, and the body background color to white */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
  document.body.style.backgroundColor = "white";
}

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

In the following example, the side navigation will slide in from the left and cover the entire page (width 100%):

Full-width side navigation:

/* Open side navigation */
function openNav() {
  document.getElementById("mySidenav").style.width = "100%";
}
/* Close/Hide side navigation */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}

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

The following example does not include animation effects when opening and closing the side navigation menu.

Sidenav without animation

/* Open side navigation */
function openNav() {
  document.getElementById("mySidenav").style.display = "block";
}
/* Close/Hide side navigation */
function closeNav() {
  document.getElementById("mySidenav").style.display = "none";
}

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

The following example shows how to create a right navigation menu:

Right navigation:

.sidenav {
  right: 0;
}

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

The following example shows how to create a side navigation menu that is always displayed (fixed position):

Always displayed side navigation:

/* Side navigation */
.sidenav {
  height: 100%;
  width: 200px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  padding-top: 20px;
}
/* Page content */
.main {
  margin-left: 200px; /* With the same width as the side navigation */
}

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

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

Εκμάθηση:Κατάλογος CSS