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

Is it feasible to alter cookie data within a jQuery ajax call?

I'm currently developing a Chrome extension that enables users to capture all HTTP requests for a specific website, edit components of the request, and then send it again. My plan is to utilize jQuery's ajax function to design and dispatch the a ...

javascriptjqueryhttpcookiesgoogle-chrome-extension

Save data in MySQL and present a flexible number of rows in an HTML table

Let me illustrate the issue at hand with a hypothetical scenario involving numbers, although this may not be based on real data: In my system, up to 2 teachers grade a student on their performance of tasks. Let's say the student has to complete 10 ta ...

phphtmlmysql

Acquire user input using AngularJS

Is it possible to retrieve the value of an input text using AngularJS without utilizing a Controller? If so, what approach would achieve this? I have come across some resources discussing similar queries, but they all involve .controller here is one such ...

javascriptangularjs

Creating dynamic and asynchronous JSON structures with JavaScript

Struggling with async JavaScript here. I've got a function called within a jQuery AJAX function, and it looks like there are more async method calls in that function. Currently stuck in this situation. Here's the code snippet triggered by the jQ ...

javascriptjqueryjsonasynchronous

Utilize AJAX to update the database through a bootstrap modal interface

My current project involves creating a webpage to display database records with edit buttons that trigger bootstrap modals for user input and status changes. The goal is to use AJAX to update the database with any modifications made. However, I'm enco ...

javascriptjqueryajaxtwitter-bootstrapjsp

Using Observables to assign values received from API calls to each element during loop iterations

As I loop through using a foreach loop, I need to call functions that will make async API calls and return values to be rendered in the HTML. The first function getCurrentValue() will return the currentTemperatureRef which should then be assigned to recei ...

javascriptangularobservable

Filtering a table based on user selection: specifying column, condition, and value using JavaScript

I am new to JavaScript and looking to implement real-time filtering on a table based on user input. My project utilizes Django and PostgreSQL for storing the table data. template <form action="" method="get" class="inline" ...

javascriptvue.jsfilter

How can I apply a blue border to highlighted elements in the live preview?

Upon clicking on the div or element within the brackets, the live preview in Chrome briefly flashes blue and then fades away. However, it does not create a thin blue border around the element like I have seen in other people's videos. Can someone plea ...

htmlcssadobe-brackets

Database storing incorrect date values

After successfully displaying the current year and month in a textbox, an issue arises when submitting the data to the database. Instead of the expected value from the textbox, it defaults to 2014. What could be causing this discrepancy? function YearM ...

javascriptphpjqueryhtmlmysql

The font fails to load

I've hit a roadblock with this issue. I'm attempting to add a custom font to my project. The CSS file can be found in the directory project/css/. The font is located at project/fonts/iconfont/. In that folder, I have the following font files (alt ...

htmlcssfonts

What is the best way to access all of the "a" elements contained within this specific div?

Chrome websites are built using the following structure: <div class="divClass"> <a class="aClass"></a> <a class="aClass"></a> <a class="aClass"></a> </div> Utili ...

javascripthtmljquerygoogle-chrome-devtools

Content sliding to the left due to modal prompt

I've searched through various questions and answers but haven't been able to resolve this issue. There's a modal on my page that is causing the content to shift slightly to the left. I've created a sample fiddle, although it doesn&apo ...

javascripthtmlcssbootstrap-4bootstrap-modal

What steps can be taken to ensure Vue application admin page contents are not displayed without proper authentication?

By implementing role-based authentication in Vue app, we can efficiently manage routes and components visibility between regular users and administrators. As the number of roles increases, the application size grows, making it challenging to control CRUD ...

javascriptexpressvue.jsserver-side-rendering

The HTML5 range input is consistently defaulting to the minimum value and is not triggering the onChange event for text input

My goal is to implement a feature where an input type text is used along with an input type range with three specific use cases: 1. Default case: When the page loads, the slider should point to the value specified in the text input field. 2. When a user e ...

javascriptreactjshtmlrangeinput-type-range

Content in tab remains stagnant

I am having trouble creating different tabs on a page with unique content in each tab's body. Whenever I click on a new tab, the body content remains the same. I'm not sure if it's an issue with how the tabs are set up in the HTML or if ther ...

javascripthtmlcsstabs

List generated by BeautifulSoup contains duplicate entries - require a distinct linked list

I am currently attempting to compile a list of unique year links from a specific website (referenced below). Whenever I use the append function, it generates a lengthy list with repeated entries. My goal is to obtain a list that only consists of distinct ...

pythonhtmllistweb-scrapingbeautifulsoup

Having trouble understanding why getStaticProps function is not loading before the main exported function

When I use npm run dev to troubleshoot this issue, it utilizes getStaticProps to process various d3 properties before injecting them into the main output function during runtime. However, it seems that getStaticProps is not running as expected - a consol ...

javascriptreactjsnext.jsgetstaticprops

Why are the items I have inserted inside my <div> tag not appearing on the screen?

What could be simpler than this: {this.state.dash ? <div className='dashWrapper slide'> HELLO </div> : null} I've tried everything, but nothing seems to show up inside the div. ...

cssreactjs

Tips for sending an email to an address from a user input field in React.js/Express.js

I am currently developing an email application that allows users to send emails to any recipient of their choice. The challenge I'm facing is that I need a way to send emails to user-specified email addresses without requiring passwords or user.id det ...

javascriptreactjsexpressemailaxios

How can I modify the # symbol with .htaccess?

When someone accesses the following URL: www.facebook.com/index.php#sk=inbox The .htaccess file will redirect it to the server as: www.facebook.com/index.php?sk=inbox This allows me to retrieve the value of sk using PHP like this: *echo $_GET[&a ...

phpjavascriptjqueryajax.htaccess