Pressing the icon will trigger a top-sliding dropdown mobile menu to appear

How can I ensure my mobile dropdown menu slides in from the top when the user clicks the "header-downbar-menu" icon and slides out to the top when clicked again? Currently, the button only shows the menu but I am struggling with writing the JavaScript for this functionality...

var DropdownMenuDown = false;

function OpenDropdownMenu() {
  if (DropdownMenuDown == false) {
    document.getElementById("header-dropdown-menu").style.top = "0px";
  }
}
.header-dropdown {
  width: 100%;
  position: relative;
}

.header-dropdown-menu {
  width: 100%;
  height: 80vh;
  background-color: white;
  position: absolute;
  top: -80vh;
}
<div class="header-downbar-menu" onclick="OpenDropdownMenu()">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
</div>

<div class="header-dropdown">
  <div id="header-dropdown-menu" class="header-dropdown-menu">

  </div>
</div>

I'm struggling to get the variable "DropdownMenuDown" to work properly.

javascripthtmlcssdropdown

Answer №1

If you're looking for a solution, I suggest using the toggle method.

Take a look at this example:

function showMenu() {
  var topmenu = document.querySelector('.topmenu');
    topmenu.classList.toggle('show-me');
}
body {
  margin: 0;
}

#bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #AEAEAE;
}

.topmenu {
  position: absolute;
  height: 60px;
  top: -60px;
  width: 100%;
  background-color: red;
  z-index: 99;
}

.show-me {
  top: 0 !important;
}


button {
  position: absolute;
  top: 60px;
  left: 0;
}
<div id="bg">
  <div class="topmenu">
  </div>
  <button onclick="showMenu()">Click for Menu</button>
</div>

Answer №2

After reviewing your query, it seems like you may be unfamiliar with the document selector. In this scenario, the correct code should look something like this:

var DropdownMenuDown = false;

function OpenDropdownMenu() {
  if (DropdownMenuDown == false) {
    document.getElementByClassName("header-dropdown-menu").style.top = "0px";
  }
}

The correct syntax is to use "header-dropdown-menu" as a classname, not an id!

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

JavaScript is unresponsive and fails to display

I attempted to incorporate my initial Javascript snippet into a browser to observe its functionality. However, upon adding these lines directly into the body of my HTML code (even though I am aware that there are more efficient methods), no visible changes ...

javascripthtml

Tips for effectively incorporating customized validation into an array using vuelidate

My array of objects has a specific structure that looks like this varientSections: [ { type: "", values: [ { varientId: 0, individualValue: "" } ] } ] To ensure uniqueness, I implemented a c ...

javascriptvue.jsvuelidate

Are you experiencing issues with your Ajax request?

I've been struggling to retrieve json data from an API. Despite my efforts, the GET request seems to be executing successfully and returning the correct data when I check the Net tab in Firebug. Can anyone offer advice on what could be going wrong or ...

javascriptjqueryajax

Dynamically transferring data from PHP to JavaScript in dynamically generated HTML elements

I have a collection of entities retrieved from a database, each entity containing its own unique GUID. I am showcasing them on a webpage (HTML) by cycling through the entities array and placing each one within a new dynamically generated div element. < ...

javascriptphphtmlajaxrequirejs

Making If Statements Easier

Currently, I'm tackling an assignment that involves utilizing if statements and switch statements. Here is a snippet of code that I am working on: if (validateField(document.forms[0].name) == false) { isValid = false; } if (validateField(docume ...

javascriptif-statementswitch-statement

Looking to convert a jQuery function to plain JavaScript code?

Struggling with my homework, I must apologize for any mistakes in my English. My task involves creating a chat using node.js and I found some code snippets on a website "" which I used successfully. The issue now is that the chat relies on old jQuery libr ...

javascriptjquerynode.jsexpresssocket.io

HTML5 failing to load button

<!DOCTYPE html> <html> <head> <title>Greetings Earthlings</title> <script src="HelloWorld.js" /> </head> <body> <button onclick ="pressButton()" >Press Me!</button> ...

javascript

Retrieve the chosen selection from a dropdown menu using AngularJS and Ionic

I've been encountering some issues with the select feature in AngularJS. Despite searching extensively for solutions, none seem to be working for me. The JSON structure I'm dealing with is generated from my service.php: [ { "Name": ...

javascriptphpjsonangularjsionic-framework

Position footer at the bottom of the webpage and adjust the height to be filled with main content using Bootstrap 4

I am currently in the process of designing a bootstrap layout that includes a header navbar along with a footer. My goal is to ensure that the footer is always at the bottom of the page, even if there is limited content. Here's what I have implemente ...

htmlcsstwitter-bootstrapbootstrap-4

Is the detailedDescription missing from the JSON-LD schema crawl?

I am currently utilizing the Google Knowledge Graph Search (kgsearch) API to retrieve Schemas from schema.org. However, I am encountering an issue where some nested elements are not being recognized as JSON or I may be overlooking something... url = "http ...

javascriptjsonnode.jsjson-ldgoogle-knowledge-graph

The issue of not being able to type in the sweetalert 2 input within a material UI modal in a

Within a card displaying an order, there is a sweetalert2 popup that opens when trying to cancel the order, asking for a cancellation reason. This feature works seamlessly on the orders screen. <Grid item md={8} sm={12}> orders.map((order) => ...

cssreactjsmaterial-uisweetalertsweetalert2

What is the best way to create a layout with two images positioned in the center?

Is it possible to align the two pictures to the center of the page horizontally using only HTML and CSS? I've tried using this code but it doesn't seem to work: #product .container { display: flex; justify-content: space-between; flex-w ...

javascripthtmlcssfrontend

What is the best way to calculate the total number of results using ajax?

Encountering an issue with the total count of ajax search results. Getting an error message "Method Illuminate\Database\Eloquent\Collection::total does not exist." when using directives, for example: <div class="searched-item"&g ...

javascriptjqueryajaxlaravelcount

Develop an XML document that includes CSS and DTD seamlessly incorporated

Could someone please provide me with a short code example of an XML file that includes both a DTD and CSS styles all in one file? Just need one element as an example. I'm new to XML and can't seem to find any examples with both XML and CSS comb ...

htmlcssxmlxhtmldtd

Revamping the hyperlinks in my collapsible menu extension

Is there a way to modify the links in this accordion drop menu so that they lead to external HTML pages instead of specific areas on the same page? I've tried various methods but can't seem to achieve it without affecting the styles. Currently, i ...

javascriptjqueryhtmlcss

Tips for maintaining an organized layout of buttons on a compact screen

When the following HTML code is executed on a small screen, one or more buttons will naturally shift to the "lower line" in order to adjust to the screen size. While this may seem like a good thing initially, unfortunately, any button that moves down a row ...

html

The nested directive link function failed to execute and the controller was not recognized

Apologies in advance for adding to the sea of 'mah directive link function isn't called!' posts on Stack Overflow, but none of the solutions seem to work for me. I have a directive named sgMapHeader nested inside another directive called sg ...

javascriptangularjsangularjs-directive

Using dynamic imports in Next.js allows us to efficiently load modules based on variables defining the path

When utilizing dynamic import in Next.js, I am encountering an issue. The component renders successfully when the path is used directly, but fails to render when the path is accessed from a variable. const faq = dynamic(() => import('../faq/faq&apo ...

javascriptreactjsnext.js

Is it Possible to Insert Function from a For... in Loop?

Question: How is a function being attached to a variable's memory space without being explicitly assigned? Situation: I have developed a script to eliminate duplicate objects by comparing the values of object keys. However, after initializing the che ...

javascriptnode.jsfunctionloops

Issue encountered while trying to define a global variable within a JavaScript Class

I'm currently working on setting up a page variable that can be utilized by my Scroller class for implementing infinite scrolling. It's crucial for this variable to have global scope, as it needs to retain its value outside of the ajax function. ...

javascriptjqueryajax