0
J'essaye d'ajouter un panneau de navigation de barre latérale à ma page Web. Le faire en utilisant js html et css.When je charge la page pour la première fois, il montre la barre latérale avant même de cliquer sur l'icône pour l'ouvrir. Comment puis-je empêcher l'ouverture de la barre latérale automatiquement lorsque la page se charge pour la première fois? Merci d'avance!!! codes sont les suivants ...barre latérale indiquant quand la page se charge pour la première fois
$(document).ready(function(){
$(".fa-times").click(function(){
$(".sidebar_menu").addClass("hide_menu");
$(".toggle_menu").addClass("opacity_one");
});
$(".toggle_menu").click(function(){
$(".sidebar_menu").removeClass("hide_menu");
$(".toggle_menu").removeClass("opacity_one");
});
});/*side navigation bar*/
.toggle_menu{
cursor:pointer;
z-index: 1000000;
opacity: 0;
}
.sidebar_menu{
position: fixed;
width: 20em;
margin-left: 0px;
overflow: hidden;
height: 100vh;
max-height: 100vh;
background-color: rgba(17,17,17,0.9);
opacity: 0.9;
transition: all 0.3s ease-in-out;
left:0px;
}
.fa-times{
right: 1em;
top : 1em;
opacity: 0.7;
cursor: pointer;
position: absolute;
color: #8bea8b;
transition: all 0.3s ease-in-out;
}
.fa-times:hover{
opacity: 1;
}
.hide_menu{
margin-left: -20em;
}
.opacity_one{
opacity: 1;
transition: all 0.3s ease-in-out;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html lang="en">
<head>
<title>Forestpin</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="fullpage/jquery.fullPage.css" />
<link rel="stylesheet" type="text/css" href="theme.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- This following line is optional. Only necessary if you use the option css3:false and you want to use other easing effects rather than "linear", "swing" or "easeInOutCubic". -->
<script src="fullpage/vendors/jquery.easings.min.js"></script>
<!-- This following line is only necessary in the case of using the option `scrollOverflow:true` -->
<script type="text/javascript" src="fullpage/vendors/scrolloverflow.min.js"></script>
<script type="text/javascript" src="fullpage/jquery.fullPage.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="sidemenu.js"></script>
</head>
<body>
<!--top navigation bar-->
<nav class="navbar navbar-default header navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="images/logofpin.png" id="logofpin">
</a>
<img alt="Logo" src="images/logo2.png" class="navbar-brand toggle_menu" id="logo2">
<div class="sidebar_menu">
<i class="fa fa-times"></i>
</div>
</div>
</div>
</nav>
où est le bouton pour ouvrir le menu latéral? –