sidebar showing when the page loads for the first time
Question
I'm trying to add a sidebar navigation panel to my webpage. Doing it using js html and css.When i load the page for the first time it shows the sidebar even before clicking on the icon to open it. How can i prevent opening of the sidebar automatically when the page loads for the first time? thanks in advance!!! codes are as follows...
$(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>
1 answers
solution1
2 ACCPTED 2017-09-25 06:53:40
Just add the class opacity_one to your Logo div, and hide_menu to the sidebar div. Check the updated snippet below!
$(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 opacity_one" id="logo2"> <div class="sidebar_menu hide_menu"> <i class="fa fa-times"></i> </div> </div> </div> </nav>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
javascript setting absolute position for ipad when the page loads the first time
show active color when page loads for the first time - AngularJS
How to execute Javascript alert when page loads the first time only
Click event not firing the first time a page loads
Display Bootstrap Modal First time page loads
Execute jQuery code when page loads for first time and then after time period
Saving files when app loads first time
open the first section when page loads
When html page loads first time ion-slide-box not works
Add class only on first slide the first time the page loads
Related Tags