sidebar that appears upon the initial page load

I'm currently working on implementing a sidebar navigation panel for my website using JavaScript, HTML, and CSS. However, I am facing an issue where the sidebar automatically opens when the page is first loaded, even before clicking on the icon to open it. How can I prevent this automatic opening of the sidebar when the page loads initially? Any assistance would be greatly appreciated! Below are the relevant code snippets...

$(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>

javascripthtmlcssnavigationsidebar

Answer №1

To make your Logo div visible, simply assign the class opacity_one to it, and for the sidebar div use the class hide_menu. Take a look at the revised code 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Activation of states in response to item clicks

Recently, I started using the US-Map plugin created by newsignature (). I have put together a chart that highlights various state laws for comparison on a per-state basis. Currently, the setup allows me to compare 3 states at a time. Users can easily clos ...

javascriptjqueryonclick

Is it possible to retrieve text from various iframes using the rangy library?

Here's a question that follows up on a problem I've been having with grabbing selected text from iframes using rangy. The code works well for the first iframe, but when I try to grab elements from multiple iframes using the same button, it doesn& ...

javascriptjqueryiframerangy

Why won't console.log function execute in this particular situation?

(function( $ ){ $.fn.openlayers = function( mapElementId, options ) { alert(console.log); console.log(options); ... } }); While attempting to enhance the capabilities of a JavaScript library, I encountered an unexpected issue. ...

javascriptjquery

Fading text that gradually vanishes depending on the viewport width... with ellipses!

I currently have a two-item unordered list positioned absolutely to the top right of the viewport. <header id="top-bar"> <ul> <li> <a href="#">David Bowie</a> </li> <li> ...

javascripthtmlcss

Unable to create a clickable image

My approach involves using asp:Hyperlink controls to create an image that acts as a link. Here is the sample code in both aspx and C#: <asp:HyperLink ID="mainInteractiveFileLink" runat="server"> </asp:HyperLink> C# mainInteractiveFileLink ...

c#htmlasp.nethyperlink

Steps to record and upload a video directly to the server using getusermedia

For my application, I need the user to record a video and have it saved on the server disk instead of downloading it to the client browser. I am currently using getusermedia for this purpose, with the following code: (function(exports) { exports.URL = exp ...

c#jqueryhtmlhtml5-canvasgetusermedia

The asynchronous AJAX request is finished after the function call has been made. This can be achieved without using

I am in search of a solution that will allow an AJAX API call to finish before the containing function does without relying on jQuery as a dependency for just one REST call... After going through multiple solutions, all of which involve using jQuery, I ca ...

javascriptajax

Error encountered: A syntax error occurred due to an unexpected token ":" found in the file path D:practise odejs odejs-demoviewsindex.html

Attempting to switch the engine view from .ejs to .html resulted in an error. After searching online, I was unable to find a solution for the following problems: Express 500 SyntaxError: Unexpected token : in D:\practise\nodejs\nodejs-demo& ...

javascriptnode.jsexpress

Ways to enhance the efficiency of this javascript duplicates

I recently wrote this JavaScript code but, as I am still in the early stages of learning, I am struggling to optimize it efficiently. I ended up duplicating the code for each if statement. $(function() { var lang = $(".lang input[type='checkbox&a ...

javascriptjqueryoptimization

Mongoose fails to carry out internal query using Promise mechanism

Just diving into the asynchronous and await world, I decided to play around with Mongoose + MongoDB + Node.JS. Here is a snippet of my code: exports.updateBrandPreferences = async (req,res) => { var userID = req.body.playerID; var newBrands = r ...

javascriptnode.jsmongodb

Tips on allowing the backend file (app.js) to handle any URL sent from the frontend

In my Express app, I have two files located in the root directory: index.js and index.html. Additionally, there is a folder named "server" which contains a file named app.js that listens on port 3000. When running index.html using Live Server on port 5500 ...

javascriptnode.jsexpress

JavaScript Array join() method returns an empty string

As a beginner in the world of javascript, I am just starting to dip my toes into it. In the past, I have used join() without any issues, but now I am facing a problem where this join is returning an empty string. Upon inspecting myArray, the data seems t ...

javascript

There was an issue with the origin null not being permitted by Access-Control-Allow-Origin

Possible Duplicate: XmlHttpRequest error: Origin null is not allowed by Access-Control-Allow-Origin I am currently working on a weather application that runs smoothly in browsers. However, when I try to deploy it on my Android phone, it encounters iss ...

javascriptandroidjquerycordova

Tips for integrating SASS from the Bulma package into an Angular application

I'm currently working on implementing Bulma into my project. The documentation suggests using NPM to obtain it. yarn add bulma Further in the documentation, there is an example provided with code snippets like the ones below. <link rel="styles ...

cssangularnpmsass

Unresolved Issue: Jquery Modal Fails to Activate on Subsequent Click for Ajax-

When I make an Ajax call, I load HTML into a div. This HTML content contains a jQuery modal that opens when clicked. However, on the first click, the modal opens correctly. On subsequent clicks, I receive the following error in the console: Uncaught Type ...

javascriptjqueryhtmlcssajax

Ways to prevent other users from clicking or modifying a particular row

I have a data table in my project that will be accessed by multiple users simultaneously. My requirement is that once a row is selected and edited by one user, it should become unclickable for other users who are also viewing the same page or data table. ...

javascriptjqueryajaxdatatable

Creating diverse content for various tabs using JavaScript

I have developed a code that uses a for loop to generate tabs based on user input. var tabs = ""; var y = 1; for (var x = 0; x < tabNum; x++) { tabs += "<li class = 'tabbers'>" + "<a href='#tab'>Tab</a>" + "& ...

javascriptjquerytabs

I am working on an HTML form that is designed vertically, but I am unsure of how to arrange two text fields side by side on the same line

I'm struggling with formatting my HTML form to have two text fields on the same line instead of stacked vertically. In the example below, I want the Size, Width, and Height fields to be aligned horizontally rather than one below the other. <form c ...

htmlcsswordpresscss-floatcustomization

Tips for transmitting variable values through a series of objects in a collection: [{data: }]

How to pass variable values in series: [{data: }] In the code snippet below, I have the value 2,10,2,2 stored in the variable ftes. I need to pass this variable into series:[{data: }], but it doesn't seem to affect the chart. Can anyone guide me on ...

javascriptjqueryhighchartsseries

The input field is failing to capture the final character entered

Is there a way to store all input files in a single object and use the information in a graph? Currently, when I enter the first character, it creates an empty object, so the last character I enter is not captured in the object. Any suggestions on how to ...

javascriptreactjsjsx