Show and hide the responsive menu with a single click

Question

Show and hide the responsive menu with a single click

I am currently working on creating a responsive menu. It is functioning properly, however, I am having trouble implementing an onclick effect in CSS. At the moment, I am using a hover effect. How can I make it so that when the screen width is less than 750px, clicking on the menu in picture number 2 (ul) will display the menu from picture number 3 (li)? This is a one-page site, so when I click on an element from the drop-down menu, it should hide the menu again (li).

HTML:

<header>
    <nav id="menu">
        <ul>
            <li class="li"><a href="#">WITAJ</a></li>
            <li class="li"><a href="#">O MNIE</a></li>
            <li class="li"><a href="#">DOŚWIADCZENIE</a></li>
            <li class="li"><a href="#">CO ROBIĘ?</a></li>
            <li class="li"><a href="#">KONTAKT</a></li>
            <li><a href="#">MOJE PRACE</a></li
        ></ul>
    </nav>
</header>

CSS:

@media screen and (max-width: 750px) {      
    header nav#menu ul:hover > li{
        display:block !important;
    }

    header nav#menu ul li{
        display:none !important;
    }
}

javascript jquery html css

Answer 1

Answer №1

Creating a click effect in CSS can be challenging, which is why many developers turn to JavaScript for assistance. One simple solution using jQuery is as follows:

$(function() {
  var menuVisible = false;
  $('#menuBtn').click(function() {
    if (menuVisible) {
      $('#myMenu').css({'display':'none'});
      menuVisible = false;
      return;
    }
    $('#myMenu').css({'display':'block'});
    menuVisible = true;
  });
  $('#myMenu').click(function() {
    $(this).css({'display':'none'});
    menuVisible = false;
  });
});

This code snippet not only displays the menu when the button is clicked but also hides it when a menu item is selected.

In CSS, manipulating visibility based on screen size requires media queries. Take a look at this example.

Here is the HTML structure for this demonstration:

<div id="menuBtn">click me</div>
<nav id="myMenu">
  <ul>
    <li>entry 1</li>
    <li>entry 2</li>
    <li>entry 3</li>
    <li>entry 4</li>
  </ul>
</nav>

Check out the live example on jsFiddle.

Answer 2

Creating a click effect in CSS can be challenging, which is why many developers turn to JavaScript for assistance. One simple solution using jQuery is as follows:

$(function() {
  var menuVisible = false;
  $('#menuBtn').click(function() {
    if (menuVisible) {
      $('#myMenu').css({'display':'none'});
      menuVisible = false;
      return;
    }
    $('#myMenu').css({'display':'block'});
    menuVisible = true;
  });
  $('#myMenu').click(function() {
    $(this).css({'display':'none'});
    menuVisible = false;
  });
});

This code snippet not only displays the menu when the button is clicked but also hides it when a menu item is selected.

In CSS, manipulating visibility based on screen size requires media queries. Take a look at this example.

Here is the HTML structure for this demonstration:

<div id="menuBtn">click me</div>
<nav id="myMenu">
  <ul>
    <li>entry 1</li>
    <li>entry 2</li>
    <li>entry 3</li>
    <li>entry 4</li>
  </ul>
</nav>

Check out the live example on jsFiddle.

Answer 3

Answer №2

Here's an alternative approach for achieving the same effect:

$(document).ready(function(){
    $('#menu').click(function(){
        $('#menu ul').toggle();
    });
});

Answer 4

Here's an alternative approach for achieving the same effect:

$(document).ready(function(){
    $('#menu').click(function(){
        $('#menu ul').toggle();
    });
});

Answer 5

Answer №3

Have you considered using JavaScript in this way:

$(document).ready(function(){
  $("#button").click(function(){
$("#panel").slideToggle("slow");
  })
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="button">BUTTON ▾ </div>
<div id="panel">
<form name="form" action="{{ url_for('submit_form', form='Panel') }}" method="post">
{{ panel.content }}
<div id="submit"><input type="submit" value="Submit"></div>
</form>
</div>
</div>

This code will show the button panel and when clicked, the panel will slide out.

Answer 6

Have you considered using JavaScript in this way:

$(document).ready(function(){
  $("#button").click(function(){
$("#panel").slideToggle("slow");
  })
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="button">BUTTON ▾ </div>
<div id="panel">
<form name="form" action="{{ url_for('submit_form', form='Panel') }}" method="post">
{{ panel.content }}
<div id="submit"><input type="submit" value="Submit"></div>
</form>
</div>
</div>

This code will show the button panel and when clicked, the panel will slide out.

Show and hide the responsive menu with a single click

Answer №1

Answer №2

Answer №3

Similar questions

The spread operator in Vuex is causing compilation errors with babel, as it continuously results in a module build failure

Utilizing Express.js for reverse proxying a variety of web applications and their associated assets

What could be causing the ExcelJs plugin to malfunction in Internet Explorer 11?

Continuous loop of images displayed in a slideshow (HTML/JavaScript)

Issue with page scrolling while utilizing the Wow.js jQuery plugin

Tips for creating a nodeCategoryProperty function for a TypeScript Model:

Mocking functions using Sinon and Asynchronous calls

Insufficient module names remaining in NPM

Transfer me to Mobile, please

Guide on accessing a node within the firebase database

Exploring the world of AngularJS and Packery

Is there a way to programmatically open the menu Options on Synology-NAS DSM using JavaScript, jQuery, or EXTJS code?

What is the best way to retrieve a list of unchecked checkboxes in a Razor Page model?

Issue with Brave browser: CSS animations not functioning properly, although they work perfectly in Firefox

Alignment of input fields and labels in Bootstrap by utilizing the Grid System

Tips for successfully passing the selected dropdown value into contextscope within AngularJS

The child element nudges the parent div, causing a noticeable gap within the parent container

Just getting started with jQuery and looking for assistance with adding elements during events

Tips and Tricks for Uploading Images with React, fetch, and Django REST

Demonstrate the Current Cursor Location on a Web Element with the Help of jQuery and PHP