Apprenez à créer un menu de navigation latérale animée, refermable.
Créer une navigation latérale d'animation
Étape 1) Ajouter HTML:
Exemple
<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>
<!-- Use any element to open the sidenav -->
<span onclick="openNav()">open</span>
<!-- Add all page content inside this div if you want the side nav to
push page content to the right (not used if you only want the sidenav to
sit on top of the page -->
<div id="main">
...
</div>Étape 2) Ajouter CSS:
Exemple
/* The side navigation menu */
.sidenav {
height: 100%; /*
100% Full-height */
width: 0; /* 0 width - change this
with JavaScript */
position: fixed; /* Stay in place
*/
z-index: 1; /* Stay on top */
top: 0;
left: 0;
background-color: #111; /* Black*/
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}
/* The navigation menu links */
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s
}
/* When you mouse over the navigation links,
change their color */
.sidenav a:hover, .offcanvas a:focus{
color: #f1f1f1;
}
/* Position and style the close button (top
right corner) */
.closebtn {
position:
absolute;
top: 0;
right: 25px;
font-size: 36px !important;
margin-left: 50px;
}
/* Style page content - use this if you want to push the page content to
the right when you open the side navigation */
#main {
transition: margin-left .5s;
padding: 20px;
}
/* On smaller screens, where height is less than
450px, change the style of the sidenav (less padding and a smaller font
size) */
@media screen and (max-height: 450px) {
.sidenav
{padding-top: 15px;}
.sidenav a {font-size: 18px;}
}Étape 3) Ajouter JavaScript:
L'exemple ci-dessous les diapositives de la navigation latérale, et le rend 250px large:
Sidenav Exemple de recouvrement
/* Set
the width of the side navigation to 250px */
function
openNav() {
document.getElementById("mySidenav").style.width
= "250px";
}
/*
Set the width of the side navigation to 0 */
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
} Essayez vous - même » L'exemple ci-dessous les diapositives de la navigation latérale, et pousse le contenu de la page à droite (la valeur utilisée pour définir la largeur de la sidenav est également utilisé pour définir la marge gauche du « contenu de la page »):
Sidenav Push de contenu
/* Set the width of the side navigation to 250px and the left margin of the
page content to 250px */
function
openNav() {
document.getElementById("mySidenav").style.width
= "250px";
document.getElementById("main").style.marginLeft
= "250px";
}
/* Set the width of the side navigation to 0 and the
left margin of the page content to 0 */
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
} Essayez vous - même » L'exemple ci - dessous glisse aussi dans la navigation latérale, et pousse le contenu de la page à droite, cette fois, nous ajoutons une couleur de fond noir avec une opacité de 40% à l'élément de corps, "highlight" la navigation latérale:
Sidenav Push de contenu w / opacité
/* Set the width of the side navigation to 250px and the left margin of the
page content to 250px and add a black background color to 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 and the
left margin of the page content to 0, and the background color of body to
white */
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
document.body.style.backgroundColor = "white";
} Essayez vous - même » L'exemple ci - dessous les diapositives de la navigation de côté depuis le côté gauche et couvre la page entière (100% width) de (100% width) :
Sidenav pleine largeur:
/* Open the sidenav */
function
openNav() {
document.getElementById("mySidenav").style.width
= "100%";
}
/* Close/hide the sidenav */
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
} Essayez vous - même » L'exemple ci-dessous ouvre et fermer le menu de navigation latérale sans animations:
Sidenav sans animation
/* Open the sidenav */
function
openNav() {
document.getElementById("mySidenav").style.display
= "block";
}
/* Close/hide the sidenav */
function closeNav() {
document.getElementById("mySidenav").style.display = "none";
} Essayez vous - même » Astuce: Allez à notre CSS Navbar Tutoriel pour en savoir plus sur les barres de navigation.