Automatically displaying the navigation bar upon initial loading of the HTML page

Is there a way to adjust this code so that the side nav bar remains open when the page loads for the first time? I would like the side nav to be open by default.

function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
  document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
  document.body.style.backgroundColor = "white";
}
<div id="wrapper">
  <header>
    <div></div>
  </header>
  <nav>
    <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; Learn Here</span>

    <div id="mySidenav" class="sidenav">
      <img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/68dd54ca-60cf-4ef7-898b-26d7cbe48ec7/10-dithering-opt.jpg" height="20%" width="70%" style="padding-left: 36px; padding-right: 36px">
      <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
      <a class="nav_padding" href="#">About me</a>
      <a class="nav_padding" href="#">Resume</a>
      <a class="nav_padding" href="#">Projects</a>
      <a class="nav_padding" href="#">Contact Me</a>
      <script>
      </script>
    </div>
  </nav>
</div>
htmlcss

Answer №1

Implementing a script within $(document).ready(function(){ }); allows for the execution of JavaScript upon page load.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
$(document).ready(function(){
document.getElementById("mySidenav").style.width = "250px";
            document.getElementById("main").style.marginLeft = "250px";
            document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
});
</script>

Answer №2

Don't forget to include CSS in your code.

function showMenu() {
  document.getElementById('menu').style.width = '250px';
  document.body.style.backgroundColor = 'rgba(0,0,0,0.4)';
}

function hideMenu() {
  document.getElementById('menu').style.width = '0';
  document.body.style.backgroundColor = 'white';
}
#menu {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

#menu a {
  padding: 8px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

#menu a:hover {
  color: #f1f1f1;
}

#menu .close-btn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}
<div class="wrapper">
  <nav>
    <span style="font-size:30px;cursor:pointer" onclick="showMenu()">&#9776; Menu</span>

    <div id="menu" class="menu">
      <img src="menu-icon.jpg" alt="Menu Icon" style="width: 70%; height: 20%;">
      <a href="#" class="close-btn" onclick="hideMenu()">&times;</a>
      <a href="#" class="nav-link">Home</a>
      <a href="#" class="nav-link">Services</a>
      <a href="#" class="nav-link">About Us</a>
      <a href="#" class="nav-link">Contact Us</a>
    </div>
  </nav>
</div>

Answer №3

To ensure consistency, consider setting the width dynamically through JavaScript code so that it is initially applied inline. This way, any changes made when the menu close button is activated will override the default width.

<div id="mySidenav" class="sidenav" style="width: 250px;">

Answer №4

After making some adjustments to the code structure, I managed to successfully implement it by utilizing the onload Event Attribute:

<div id="wrapper">
    <header>
         <script>
             function openNav() {
                 document.getElementById("mySidenav").style.width = "250px";
                 document.getElementById("main").style.marginLeft = "250px";
                 document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
             }

             function closeNav() {
                 document.getElementById("mySidenav").style.width = "0";
                 document.getElementById("main").style.marginLeft= "0";
                 document.body.style.backgroundColor = "white";
             }
             </script>
     </header>

     <body onload="openNav()">
         <nav>
             <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; Learn Here</span>
             <div id="mySidenav" class="sidenav">
                 <img src="images/tab.png" height="20%" width="70%" style="padding-left: 36px; padding-right: 36px">
                 <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
                 <a class="nav_padding" href="#">About me</a>
                 <a class="nav_padding" href="#">Resume</a>
                 <a class="nav_padding" href="#">Projects</a>
                 <a class="nav_padding" href="#">Contact Me</a>
             </div>
         </nav>
     </body>
 </div>

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

Place your cursor over the following element to take control

There is a paragraph that needs to be clipped when hovered over. An issue arises where the H1 text shifts its position. Only the phrase "HOVER ABOVE PARAGRAPH" should be concealed. * { margin: 0; box-sizing: border-box; } .wrapper { displ ...

htmlcsshover

What is the proper way to link an image in a nuxt project?

I am working on a modal in the app.html file of my Nuxt project that prompts Internet Explorer users to switch to another browser. The modal includes links to three different browsers for download. Although the modal is displaying correctly, I keep encount ...

javascripthtmlvue.jsnuxt.jsassets

Clicking on the delete option will remove the corresponding row of Firebase data

I am encountering an issue that appears to be easy but causing trouble. My goal is to delete a specific row in an HTML table containing data from Firebase. I have managed to delete the entire parent node of users in Firebase when clicking on "Delete" withi ...

javascripthtmlfirebasefirebase-realtime-database

What is the best way to position an image next to an input element?

How can I position submit.png next to the input element in my code? <div class="input-box" style="height: 40px; width: 500px;"> <img src="img/delete.png" width="25px" height="25px;" style="position: absolute; right: 0;"> ...

htmlcss

Linking a pair of checkboxes

I am dealing with two checkboxes on my website. <input class="checkbox1" type="checkbox" name='1' id="example1" value="example1"/> and <input class="checkbox2" type="checkbox" name='2' id="example2" value="example2"/> I ...

javascriptjqueryhtmlcheckbox

If additional content has been included in the `div`, be sure to scroll all the way down to view it

I have a div that needs to automatically scroll to the bottom when new content is added. This is a common feature in chat applications where the user wants to see the latest messages without having to manually scroll down each time. How can I achieve this ...

javascripthtmlcss

Fashionable selection form

I'm having trouble with styling my select form to have a background-color and border. I've tried applying CSS properties, but it doesn't seem to be working as expected. Here is the code snippet in question: <select class="size"> ...

cssformshtml-select

Associate the ng-model with ng-options value and label

I'm currently using ng-options to create a select tag that displays location options. The labels represent the location names, while the values indicate the corresponding location ID as stored in the database. In addition to binding the value (locati ...

javascripthtmlangularjsangular-ngmodelng-options

Tips for positioning the popup ul in relation to its parent li

How can the pop-up ul be positioned in the center of the parent li using CSS? * { margin: 0; padding: 0; } #track-nav { margin-left: 50px; margin-top: 50px; float: left; width: 100%; list-style: none; font-weight: bold; margin-bottom: ...

htmlcss

The submenu dropdown on the navigation bar appears once you hover over the parent bootstrap element

Hey there! I'm currently facing an issue where the submenu dropdown is displaying when its grandparent is hovered, rather than just its parent. Here's the code snippet: <nav class="navbar navbar-default"> <div class="container"> ...

jqueryhtmlcsstwitter-bootstrapnavbar

Why does my anchor appear with a different style compared to my submit button?

I encountered an issue where I have created a submit button and anchor link with the same class name and style, but they are displaying differently. The anchor link appears to be larger than the submit button. You can see the difference in size here: http ...

htmlcss

Discovering the Nearest Textfield Value Upon Checkbox Selection Using JQuery

How can I retrieve the value of the nearest Textfield after selecting a checkbox? This HTML snippet serves as a simple example. In my actual project, I have dynamically generated lists with multiple checkboxes. I require a way to associate each checkbox wi ...

javascriptjqueryhtmlcheckboxclosest

Tips for preventing the unwanted portrayal of a rectangle on canvas?

As a beginner in javascript, I am currently learning about the canvas. I have a question regarding drawing rectangles from right to left and seeing negative numbers in the inputs. Is there a way to display the real size of the rectangle regardless of the d ...

javascripthtmlcanvasnumbers

Enhancing the appearance of buttons with hover effects in Twitter Bootstrap

I am interested in customizing the hover button styling for Bootstrap v3.2. The default behavior is to darken on hover, but I would like to make it lighter instead. Although I checked the Buttons Less variables, I couldn't find an option specifically ...

csstwitter-bootstraptwitter-bootstrap-3sass

Is there a way to maintain image proportions when resizing the window?

I'm in the process of developing a classroom-themed website with interactive overlaying images. The goal is to have various pictures that users can click on to access different resources from different websites. My main challenge right now is getting ...

htmlcss

What could be the reason my CSS and Javascript animation is not functioning properly?

Currently working on creating a dynamic animation menu using CSS and Javascript, but encountering some issues. The concept involves having a menu with initially hidden opacity (using CSS), which becomes visible when the hamburger menu is clicked, sliding i ...

javascripthtmlcsstailwind-css

What could be the reason for the absence of the CSS destination folder being generated by

My colleague has the exact same code and can run gulp without any issues, but I'm struggling to compile the css files using Gulp. Gulp isn't creating the css destination file or the css files themselves. However, it works perfectly fine for build ...

cssnode.jsnpmgulp

Aligning the column to the right to ensure the text is centered horizontally on the screen

<div className={css.title} > <div className={css.row}> <div className={css.columnLeft}> <div className={css.header}>Images</div> </div> <div className={css.col ...

cssreactjsflexbox

Ways to insert HTML text into an external webpage's div element without using an iframe

Is it possible to generate HTML and SVG code based on the position of a Subscriber on a web page or within a specific div? I would like to provide some JavaScript code that can be inserted inside a particular div on the page. Using an iframe is not ideal ...

javascripthtmlajax

Customize the color of arrows within an ng-bootstrap carousel

I am currently working on a carousel using ng-bootstrap, and I need to change the color or image of the arrows from white to black because my background images are white and not visible. The issue is that I am having trouble accessing span, and I am unsure ...

htmlsassbootstrap-4