Switching Over to Burger Menu

I created a burger menu using HTML, CSS, and jQuery that switches from a full-width menu to a burger menu. However, I'm facing an issue with toggling the dropdown when the menu collapses. Here's my code:

<!DOCTYPE html>
<html>
  <head>
    <title>Hamburger Menu</title>
  </head>
  <body>
    <nav class="menu">
      <ul class="active">
        <li class="current-item"><a href="#">Home</a></li>
        <li><a href="#">My Work</a></li>
        <li><a href="#">About Me</a></li>
        <li><a href="#">Get in Touch</a></li>
        <li><a href="#">Blog</a></li>
      </ul>

      <a class="toggle-nav" href="#">&#9776;</a>
    </nav>
    <style type="text/css">
      /*----- Toggle Button -----*/
      .toggle-nav {
        display:none;
      }

      /*----- Menu -----*/
      @media screen and (min-width: 860px) {
        .menu {
          width:100%;
          padding:10px 18px;
          box-shadow:0px 1px 1px rgba(0,0,0,0.15);
          border-radius:3px;
          background:#303030;
        }
      }

      .menu ul {
        display:inline-block;
      }

      .menu li {
        margin:0px 50px 0px 0px;
        float:left;
        list-style:none;
        font-size:17px;
      }

      .menu li:last-child {
        margin-right:0px;
      }

      .menu a {
        text-shadow:0px 1px 0px rgba(0,0,0,0.5);
        color:#777;
        transition:color linear 0.15s;
      }

      .menu a:hover, .menu .current-item a {
        text-decoration:none;
        color:#66a992;
      }
      /*----- Responsive -----*/
      @media screen and (max-width: 1150px) {
        .wrap {
          width:90%;
        }
      }

      @media screen and (max-width: 970px) {
        .search-form input {
          width:120px;
        }
      }

      @media screen and (max-width: 860px) {
        .menu {
          position:relative;
          display:inline-block;
        }

        .menu ul.active {
          display:none;
        }

        .menu ul {
          width:100%;
          position:absolute;
          top:120%;
          left:0px;
          padding:10px 18px;
          box-shadow:0px 1px 1px rgba(0,0,0,0.15);
          border-radius:3px;
          background:#303030;
        }

        .menu ul:after {
          width:0px;
          height:0px;
          position:absolute;
          top:0%;
          left:22px;
          content:'';
          transform:translate(0%, -100%);
          border-left:7px solid transparent;
          border-right:7px solid transparent;
          border-bottom:7px solid #303030;
        }

        .menu li {
          margin:5px 0px 5px 0px;
          float:none;
          display:block;
        }

        .menu a {
          display:block;
        }

        .toggle-nav {
          padding:20px;
          float:left;
          display:inline-block;
          box-shadow:0px 1px 1px rgba(0,0,0,0.15);
          border-radius:3px;
          background:#303030;
          text-shadow:0px 1px 0px rgba(0,0,0,0.5);
          color:#777;
          font-size:20px;
          transition:color linear 0.15s;
        }

        .toggle-nav:hover, .toggle-nav.active {
          text-decoration:none;
          color:#66a992;
        }

        .search-form {
          margin:12px 0px 0px 20px;
          float:left;
        }

        .search-form input {
          box-shadow:-1px 1px 2px rgba(0,0,0,0.1);
        }
      }</style>
    <script type="text/javascript">
      jQuery(document).ready(function() {
        jQuery('.toggle-nav').click(function(e) {
          jQuery(this).toggleClass('active');
          jQuery('.menu ul').toggleClass('active');

          e.preventDefault();
        });
      });
    </script>
  </body>
</html>

Despite reviewing my code multiple times, I can't seem to figure out why the dropdown menu does not toggle when the menu transforms into a burger menu on smaller screens. Any help in identifying the issue would be greatly appreciated.

javascriptjqueryhtmlcssmenu

Answer №1

Don't forget to add the JQuery reference for it to work properly. Once you include it, everything will run smoothly. Check out the sample code in this fiddle:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

https://jsfiddle.net/abc123xyz/

Answer №2

I pasted your code into a fiddle and it appears to be functioning correctly.

Did you double-check to ensure that jQuery is not missing?

jQuery(document).ready(function() {
        jQuery('.toggle-nav').click(function(e) {
          jQuery(this).toggleClass('active');
          jQuery('.menu ul').toggleClass('active');

          e.preventDefault();
        });
      });
/*----- Toggle Button -----*/
      .toggle-nav {
        display:none;
      }

      /*----- Menu -----*/
      @media screen and (min-width: 860px) {
        .menu {
          width:100%;
          padding:10px 18px;
          box-shadow:0px 1px 1px rgba(0,0,0,0.15);
          border-radius:3px;
          background:#303030;
        }
      }

      .menu ul {
        display:inline-block;
      }

      .menu li {
        margin:0px 50px 0px 0px;
        float:left;
        list-style:none;
        font-size:17px;
      }

      .menu li:last-child {
        margin-right:0px;
      }

      .menu a {
        text-shadow:0px 1px 0px rgba(0,0,0,0.5);
        color:#777;
        transition:color linear 0.15s;
      }

      .menu a:hover, .menu .current-item a {
        text-decoration:none;
        color:#66a992;
      }
      /*----- Responsive -----*/
      @media screen and (max-width: 1150px) {
        .wrap {
          width:90%;
        }
      }

      @media screen and (max-width: 970px) {
        .search-form input {
          width:120px;
        }
      }

      @media screen and (max-width: 860px) {
        .menu {
          position:relative;
          display:inline-block;
        }

        .menu ul.active {
          display:none;
        }

        .menu ul {
          width:100%;
          position:absolute;
          top:120%;
          left:0px;
          padding:10px 18px;
          box-shadow:0px 1px 1px rgba(0,0,0,0.15);
          border-radius:3px;
          background:#303030;
        }

        .menu ul:after {
          width:0px;
          height:0px;
          position:absolute;
          top:0%;
          left:22px;
          content:'';
          transform:translate(0%, -100%);
          border-left:7px solid transparent;
          border-right:7px solid transparent;
          border-bottom:7px solid #303030;
        }

        .menu li {
          margin:5px 0px 5px 0px;
          float:none;
          display:block;
        }

        .menu a {
          display:block;
        }

        .toggle-nav {
          padding:20px;
          float:left;
          display:inline-block;
          box-shadow:0px 1px 1px rgba(0,0,0,0.15);
          border-radius:3px;
          background:#303030;
          text-shadow:0px 1px 0px rgba(0,0,0,0.5);
          color:#777;
          font-size:20px;
          transition:color linear 0.15s;
        }

        .toggle-nav:hover, .toggle-nav.active {
          text-decoration:none;
          color:#66a992;
        }

        .search-form {
          margin:12px 0px 0px 20px;
          float:left;
        }

        .search-form input {
          box-shadow:-1px 1px 2px rgba(0,0,0,0.1);
        }
      }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="menu">
      <ul class="active">
        <li class="current-item"><a href="#">Home</a></li>
        <li><a href="#">My Work</a></li>
        <li><a href="#">About Me</a></li>
        <li><a href="#">Get in Touch</a></li>
        <li><a href="#">Blog</a></li>
      </ul>

      <a class="toggle-nav" href="#">&#9776;</a>
    </nav>

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

Include new material in the upper-right corner of each row

Struggling with various styling techniques like pull-right, float, and row-fluid, I have come here to seek help: My goal is simple - I want a Map to be displayed on the right side of a set of rows. Currently, it looks like this: Although close to what I ...

htmlcsstwitter-bootstrap-3

Issues regarding the CSS navigation bar

I'm currently working on creating a navigation bar using HTML and CSS. However, I'm facing an issue where the nav-bar doesn't extend to the full width of the page as intended. I've attempted adjusting the padding-left: 0px and padding-r ...

htmlcss

Utilizing AJAX to transmit information to the database through a query

I have a form on my HTML page that I want to send to a PHP page using AJAX. It looks like the AJAX part is working, as I can see that it reacts when the button is clicked. However, the PHP page is not receiving the form content because nothing seems to be ...

phphtmlajax

Alignment issue with procedural plane vertices in threeJS

In my project, I am utilizing threeJS along with a Simplex noise algorithm to create a tile system consisting of 50x50 planes. Currently, I am iterating through x+y and adding each plane. The Simplex noise algorithm is then used to calculate the z position ...

javascriptthree.jsverticesprocedural-generationsimplex-noise

The Express Electron framework does not support importing local JavaScript files

Despite my extensive search before flagging this as a duplicate, I have not been able to find the solution I need. I am encountering issues with using express and electron. Everything runs smoothly when I execute npm start (the start script in package.jso ...

javascriptnode.jsexpresselectronelectron-builder

Tips on customizing autocomplete to display results fetched via ajax

I created a basic text box for users to input information. Using AJAX, I send this information to a PHP script to retrieve results. The results are then displayed in a DIV beneath the input box. However, I am struggling to update the autocomplete suggestio ...

javascriptjqueryajaxjquery-uijquery-ui-autocomplete

Collaboration of Bootstrap components

I am facing an issue with two divs that are supposed to be displayed side by side in a normal browser. However, when the browser window is resized, the first div loses its height and the second div overlaps into it. I attempted to set the body's min h ...

htmlcsstwitter-bootstrap

Struggling with TypeScript declaration files has been a challenge for me

I'm encountering an issue with using the trace function in my TypeScript code. The function has been declared in a .d.ts file as shown below: declare function trace(arg: string | number | boolean); declare function trace(arg: { id: number; name: strin ...

javascripttypescriptdeclarationreferenceerrordeclaration-files

Design a sophisticated background using CSS

I am wondering if there is a way to create a CSS3 background similar to the one shown in the image link above. The gradient should smoothly transition from white to black, spanning across a header div, and remain consistent regardless of screen width (alwa ...

htmlcss

Iterating through the elements to append a new value to a JSON array

I am looking to enhance my JSON array by introducing a new variable (score). The database contains information on the 1st, 2nd, and 3rd points received by each member. My goal is to calculate the total score for each member and showcase the top ten members ...

phpjquerymysqljson

To redirect to a webpage in PHP, incorporate nested if statements and override the meta HTML

I am looking for a way to automatically redirect to another webpage when a certain condition is met. Currently, I have set up a meta redirect in case the condition is not satisfied. <meta http-equiv="refresh" content="4; url=form3.html" /> <?ph ...

phphtmlhttp-redirect

fetch information using ajax and jquery

I'm facing an issue with my ajax request on my website. I'm trying to dynamically fetch pages from a database using jquery and ajax. However, I'm not getting any response, and I'm unsure whether the problem lies in my php code or my j ...

javascriptphpjqueryajax

Make text color shift upon clicking

Striving to craft a streamlined about page using JQuery click for altering text and content of the about body without creating separate pages. The concept behind the 'menu' is simple, yet encountering unexpected issues in its functionality. Trig ...

jquery

Providing UI field attributes within server JSON data

Suppose I have numerous form fields that need to be displayed on the user interface. Additionally, in a standard Modify workflow, let's assume that these fields will have various attributes like value, mandatory, editable, disabled, label, regex (for ...

javascriptjavajsonrest

What is the best way to trigger a refresh callback on Angular datatable pagination after updating the data

I've successfully set up my angular datatable configuration. Here's what it looks like: vm.dtOptions = DTOptionsBuilder.newOptions(). withPaginationType('full_numbers'). //withOption('ajax', { ...

javascriptangularjspaginationangular-datatables

Can you provide tips on how to center the title on the page?

Currently, I am working on codepen.io and have been tasked with creating a paragraph that includes a title. However, my dilemma lies in the fact that I need this title to be center-aligned without directly altering the "x" value. Unfortunately, CSS is not ...

javascript

Tips on invoking a JSP and Servlet from JavaScript by passing in a parameter

Check out the code below for calling JavaScript functions: <td><input type="button" name="edit" value="Edit" onclick="editRecord(<%=rs.getString(1)%>);" ></td> <td><input type="button" name="delete" value="Delete" onclic ...

javascriptjspservlets

Is the popup not opening with just one click?

https://i.stack.imgur.com/09dcf.png Upon clicking the first input cell, the popup opens and closes as expected. However, when closing the initial input and opening another one, an orange mark icon appears but the popup doesn't open until the second c ...

javascriptvue.jsvuejs3vue-component

Dealing with jQuery JSON AJAX Error Handling for Data Response

Looking to generate a dynamic select input (dropdown menu) from JSON data. I've experimented with two methods to obtain a JSON object for the dropdown menu Select input, labeled Attempt 1 and Attempt 2 in the commented out JS code. Although I am abl ...

jquery.netajaxjsonselect

Is it possible that the rows variable is not updating correctly due to an issue with the setState function, resulting in the changes not being displayed in

This code serves a similar purpose to a ToDo List feature. The add button is intended to add an array object to the list of rows, which are displayed in the UI as TextFields through iteration with rows.map. The subtract button should remove the selected ro ...

javascriptreactjsreact-hooksuse-state