The JavaScript Top Slide Down effect is malfunctioning

Every time I press the "More" button, I expect some forms to pop out but nothing happens. Can someone please assist me with this issue?

<body>
    <!--Hero Image-->
    <div class="hero-image">
        <div class="hero-text">
            <h1 id="demo">Hi! I'm Jake</h1>
            <p>Webby web</p>

        <!-- The overlay -->
        <div id="myNav" class="overlay">

          <!-- Button to close the overlay navigation -->
          <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>

          <!-- Overlay content -->
          <div class="overlay-content">
            <a href="#">About</a>
            <a href="#">Services</a>
            <a href="#">Clients</a>
            <a href="#">Contact</a>
          </div>

        </div>
        <!--Use any element to open/show the overlay navigation menu-->
        <button class="button" onclick="myFunction()">More</button>
        </div>
    </div>
javascripthtmlcssbootstrap-4

Answer №1

You need to correct the CSS property in your JavaScript code. It should be display, not height. Here is an example of how it should be:

document.getElementById("myNav").style.display = "none";

function displayNav() {
  document.getElementById("myNav").style.display = "block";
}

function closeNav() {
  document.getElementById("myNav").style.display = "none";
}
<!--Hero Image-->
<div class="hero-image">
  <div class="hero-text">
    <h1 id="demo">Hi! I'm Jake</h1>
    <p>Webby web</p>

    <!-- The overlay -->
    <div id="myNav" class="overlay">

      <!-- Button to close the overlay navigation -->
      <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>

      <!-- Overlay content -->
      <div class="overlay-content">
        <a href="#">About</a>
        <a href="#">Services</a>
        <a href="#">Clients</a>
        <a href="#">Contact</a>
      </div>

    </div>
    <!--Use any element to open/show the overlay navigation menu-->
    <button class="button" onclick="displayNav()">More</button>
  </div>
</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

In MUI React, the opacity of the placeholder is customizable and can be easily adjusted. This allows for the placeholder to be hidden

Currently, I am facing an issue with a filled variant TextField from Mui React. I have tried to modify it using theme components, but the placeholder text becomes hidden when the field is not focused. See here for Before Focus And here for On Focus I hav ...

cssreactjstypescriptmaterial-uiplaceholder

Is it feasible to preserve the HTML form content data even after refreshing the page?

Can someone offer a suggestion that doesn't involve using Ajax? I'm wondering if there is a way to achieve this using JavaScript/jQuery or some other method. Here's my issue: When submitting a page, the action class redirects back to the sa ...

javascriptjqueryhtmlcss

Eliminate repeated elements within a JSON dataset to create a consolidated array

Looking to extract unique data from the JSON object below in order to create a result json with a list of questions and their corresponding choices. Any assistance would be greatly appreciated. Thanks in advance..!! var data = [ { "category": "s ...

javascriptjson

The JavaScript syntax dollar sign

I am currently studying a JavaScript source code and it's my first time writing JavaScript. I find some of the syntax confusing. <script id="source" language="javascript" type="text/javascript"> $(function () { window.onload=function() ...

javascript

What is the best way to choose an item from a list nested inside a div?

Currently, I am facing the challenge of selecting an item from a list that is structured using a div For this task, I am utilizing WebDriver IO () <div class="selectize-dropdown demo-default select-class single" style="display: none; width: 196px; top ...

javascriptselenium-webdriverwebdriver-io

Failure of Highchart's resizing mechanism when hidden

Check out this AngularJS demo app featuring Highcharts: http://jsfiddle.net/dennismadsen/dpw8b8vv/1/ <div ng-app="myapp"> <div ng-controller="myctrl"> <button ng-click="hideView()">1. Hide</button> <button ng ...

cssangularjshighcharts

The Chrome Extension XHR always gets a 403 response except when it is triggered from the file:/// protocol

My current project involves the development of a Chrome Extension that relies on the fixer.io API for accessing currency exchange rates. To test this extension, I typically use a simple HTML page where I embed my JavaScript using <script> tags. When ...

javascriptajaxgoogle-chromegoogle-chrome-extensionhttp-status-code-403

Unraveling the Mysteries of Node.js Application Logging

We've been having smooth sailing with our Kube cluster on AWS, but there seems to be a recurring issue with our Node app crashing and generating repetitive logs from our instances... I've scoured the internet for solutions but haven't had m ...

javascriptnode.js

Why isn't the content of the initial tab in a <section> shown when clicking a link in the side-drawer?

View the JSFiddle here. Within this MCVC, a side drawer is implemented (opened by clicking the top left button) that contains three labeled links: Link One, Link Two, and Link Three. Each link has an href attribute value that starts with "#" concatenated ...

jquerycsshtmlmaterial-design-lite

Retrieve distinct values for the keys from an object array in JavaScript

Here is the structure of my array: const arr1 = [ { "Param1": "20", "Param2": ""8", "Param3": "11", "Param4": "4", "Param5": "18", ...

javascripttypescript

Is npm create-react-app giving you trouble?

When attempting to create a React app using the command npm create-react-app appname, the tool would just return me to the same line to input more code. I also gave npx a try, but encountered some errors in the process. See this screenshot for reference: ...

javascriptreactjsnpm

retrieve today's date with parsed time using moment

I am attempting to retrieve the current date and time, with the specified time using moment js. Here's what I have tried. const time = '18:00' const timeAndDate = moment(time) However, when I display timeAndDate, it indicates an invalid da ...

javascriptvue.jsmomentjs

Using JSON within HTML: A guide to sanitizing stringified objects

Is there a way to improve the readability of a string that looks like an object but is actually just a string? It currently does not look very nice and easy to read. Using JSON.parse doesn't work because not every element in the string meets the requi ...

htmljson

What is the best way to import the three.js OBJLoader library into a Nuxt.js project without encountering the error message "Cannot use import statement outside a module

Beginner here, seeking assistance. Operating System: Windows 10. Browser: Chrome. Framework: Nuxt with default configurations I have successfully installed three.js using npm (via gitbash) by running npm install three --save. It is included in the packag ...

javascriptvue.jsthree.jsnuxt.jsobjloader

Steps for starting up an ExpressJS application

Despite trying everything else, the only thing that seems to produce an error in my code is the "throw new Error" line. I have double-checked that all necessary packages are installed and there are no errors appearing elsewhere in my code. The issue seems ...

javascriptnode.jsexpressmongoosemongodb-atlas

Oops! You're trying to perform actions that must be plain objects. If you need to handle async actions

I have been struggling to implement Redux and pass an object into the store. Although I am able to fetch the correct object when I call the action, the store remains unchanged when I use store.dispatch(). It still only reflects the initial state. I've ...

javascriptreactjsreact-reduxredux-thunk

Using Phonegap alongside ons-scroller and ons-button

Recently, I have been using Phonegap with the Onsen UI system on iOS devices. I encountered an issue where buttons included within an ons-scroller were not clickable when running on an iPad or iPhone. Here is the code snippet that caused the problem: < ...

javascriptioscsscordovaonsen-ui

Experiencing excessive delay in loading data into the DOM following a successful response from a service in AngularJS

I am facing a challenge in loading a large set of data into an HTML table. To begin, you need to click on a button: <a ng-click="get_product()">load data</a> This button triggers a function called get_product: $scope.get_product = func ...

javascriptangularjs

What methods can be used to continuously send data to another web page within my website using XMLHttpRequest()?

As I delve into working with node.js and express.js, my primary goal is to efficiently tackle a specific issue. One of the pages on my website is tasked with receiving location data in latitude var lat and longitude var long. The challenge at hand is to c ...

javascriptnode.jsexpress

What is the process by which a web browser executes a ".jsx" file while in development?

As a beginner in the world of react, I have successfully been able to execute the dev and build tests. One question that has been boggling my mind is how browsers handle ".js" files. I know that when a project is build, the browser runs the &quo ...

javascriptreactjsnpmjsxvite