Implementing and styling jQuery hamburger navigation menu

I'm struggling with implementing functionality to my hamburger menu. I've spent a day working on the design, but now I need it to actually work as intended. I have tried combining different code snippets I found, but as I am new to jQuery, I'm facing some difficulties. There might be a simple solution that I'm missing, or maybe it's more complex than I thought. Your assistance would be greatly appreciated! (comments describing what I'm trying to achieve in the code)

Additionally, I have included the content of my external jQuery and CSS files here directly, although in my actual project, they are linked externally.

<!DOCTYPE html>

... Insert rest of HTML content here ...

</html>

javascriptjqueryhtmlcsshamburger-menu

Answer №1

Adjust the position of your animated hamburger by removing the fixed property and adding it to the header, then float it to the right side. Initially hide the menu and create a toggle effect for displaying it.

$(document).ready(function() {
  $('.menu-title,#nav-icon4').click(function() {
    $('#nav-icon4').toggleClass('open');
    $(".menu").slideToggle("slow");
  });
});
/* CSS for red hamburger animation in bottom left corner */

#nav-icon4 {
  width: 35px;
  height: 25px;
  float: right;
  margin-top: 15px;
  margin-right: 30px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}

#nav-icon4 span {
  display: block;
  position: absolute;
  height: 5px;
  width: 100%;
  background: #999;
  border-radius: 5px;
  opacity: 2;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

#nav-icon4 span:nth-child(1) {
  top: 0px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

... (remaining code omitted for brevity)

<!DOCTYPE html>

<html lang="en">

<head>
  <meta charset="utf-8">

  <script src="http://www.google.com/jsapi" type="text/javascript"></script>

  <script type="text/javascript">
    google.load("jquery", "1.3.2");
  </script>

  <!-- Include necessary scripts and stylesheets -->

  <title>Your Title Here</title>

</head>

<body>


  <header>
    <span>Your Brand Name</span>
    <div id="nav-icon4">
      <span></span>
      <span></span>
      <span></span>
    </div>
    <h2 class="menu-title">MENU</h2>
  </header>

  <div class="menu">
    <ul>
      <!-- Your menu items here -->
    </ul>
  </div>


</body>

</html>

Answer №2

Give this a shot:

$(document).ready(function(){
$('#nav-icon').click(function(){
$(this).toggleClass('open');
  if($('#menu').css('opacity') == '0'){
    $('#menu').css('opacity','1');
    $('#menu').fadeIn(300).css('display','table');
  }else{
    $('#menu').css('opacity','0');
    $('#menu').fadeOut(300).css('display','none');
  }
});
});
body{
  background-color: #000;
}

#menu{
    z-index: 5;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0, 0.95);
    position: fixed;
    font-size: 1.5em;
    text-align: center;
    right: 0px;
    top: 0px;
    opacity: 0;
    display: table;
}

.hidden{
    display: none;
    visibility: none;
}

#menu ul{
    margin: 0;
    padding: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    display: table-cell;
    vertical-align: middle;
}

#menu ul li{
    cursor: pointer;
    text-decoration: none;
}

#menu ul li:hover{
    background-color: #006973;
    -webkit-transition: .15s ease-in-out;
    -moz-transition: .15s ease-in-out;
    -o-transition: .15s ease-in-out;
    transition: .15s ease-in-out;
}

#menu ul a{
    letter-spacing: 5px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    color: #fff;
    list-style: none;
    text-transform: uppercase;
    padding: 0px;
    line-height: 75px;
    padding: 10px 700px;
    text-decoration: none;
}

#menu ul a:hover{
    text-decoration: none;
    color: #fff ;
}

#nav-icon {
    z-index: 20;
  width: 50px;
  height: 35px;
  position: relative;
  margin: 35px 30px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}

#nav-icon span {
  display: block;
  position: absolute;
  height: 5px;
  width: 40px;
  background: #bada33;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

/* Icon 3 */

#nav-icon span:nth-child(1) {
  top: 0px;
}

#nav-icon span:nth-child(2),#nav-icon span:nth-child(3) {
  top: 12px;
}

#nav-icon span:nth-child(4) {
  top: 24px;
}

#nav-icon.open span:nth-child(1) {
  top: 8px;
  width: 0%;
  left: 50%;
}

#nav-icon.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#nav-icon.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#nav-icon.open span:nth-child(4) {
  top: 8px;
  width: 0%;
  left: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>

    <div id="topbar"> <!-- top bar -->

            <div id="nav-icon">
              <span></span>
              <span></span>
              <span></span>
              <span></span>
            </div>

        <div id="menu">
            <ul>
                <li><a href="#">Link1</a></li>
                <li><a href="#">Link2</a></li>
                <li><a href="#">Link3</a></li>
                <li><a href="#">Link4</a></li>
                <li><a href="#">Link5</a></li>
            </ul>
        </div>

    </div>

</header>

Source: https://jsfiddle.net/f19kz640/

Answer №3

After removing the jQuery for the grey icon, as it wasn't functioning correctly, there's no need to enclose the jQuery for the red hamburger menu within a document ready function.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>

<html lang="en">

<head>
  <meta charset="utf-8">

  <script src="http://www.google.com/jsapi" type="text/javascript"></script>

  <script type="text/javascript">
    google.load("jquery", "1.3.2");
  </script>

  <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

  <link rel="stylesheet" href="hamburgers.css">

  <script type="text/javascript" src="ham.js"></script>

  <style>
    /* The CSS below pertains to the red hamburger animation in the bottom left corner */
    
    #nav-icon4 {
      width: 60px;
      height: 45px;
      position: fixed;
      bottom: 25px;
      right: 25px;
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
      -webkit-transition: .5s ease-in-out;
      -moz-transition: .5s ease-in-out;
      -o-transition: .5s ease-in-out;
      transition: .5s ease-in-out;
      cursor: pointer;
    }
    
    #nav-icon4 span {
      display: block;
      position: absolute;
      height: 9px;
      width: 100%;
      background: darkred;
      border-radius: 9px;
      opacity: 2;
      left: 0;
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
      -webkit-transition: .25s ease-in-out;
      -moz-transition: .25s ease-in-out;
      -o-transition: .25s ease-in-out;
      transition: .25s ease-in-out;
    }

    ...
  
  </style>

  <title>hamburgers</title>

</head>

<body>

  <!-- This is how I want my hamburger icon/animation to look (the red one on the bottom right). However I need to put the text "menu" next to the icon when in desktop, but responsive and disappearing in mobile -->

  <div id="nav-icon4">
    <span></span>
    <span></span>
    <span></span>
  </div>

  <!--I want the rest of the nav bar to resemble this (but with the red hamburger on the top right) and the drop down menu appearing when said icon is clicked-->

  <!-- The menu isn't working at all now. I assume there's some conflict with the jQuery codes for each menu but I may be totally off on that assumption. -->

  <header>
    <span>Shine Design</span>
    <button class="hamburger">☰</button>
    <button class="cross">˟</button>
  </header>

  <div class="menu">
    <ul>
      <a href="#">
        <li>LINK ONE</li>
      </a>
      <a href="#">
        <li>LINK TWO</li>
      </a>
      <a href="#">
        <li>LINK THREE</li>
      </a>
      <a href="#">
        <li>LINK FOUR</li>
      </a>
      <a href="#">
        <li>LINK FIVE</li>
      </a>
    </ul>
  </div>

  <!-- Script (normally linked externally) for red hamburger -->

<script>

  $('#nav-icon4').click(function(){ 
    $(this).toggleClass('open'); 
  }); 

</script>

</body>

</html>

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

I am encountering an issue with selectpicker where the data from the database is automatically being displayed as selected options. I am seeking to make edits to the

I only want to see the information coming from the database, not all categories that are selected. Sorry for my English. <div class="col-xs-4"> <label>Categories</label> <!-- SEARCH JS find (selectpicker) --> <s ...

javascriptphpbootstrap-selectpicker

The Perfect Scrollbar feature is not functioning properly in conjunction with the accordion menu

I am having some trouble with implementing the Perfect Scrollbar alongside an accordion slider menu. The scrollbar is not working as expected, and you can view the fiddle here. On initial page load, the scrollbar only appears for the first sub-menu aft ...

javascriptjqueryhtmlcssaccordion

Can you explain the distinction between using `new ObjectId()`, `new ObjectId`, and `ObjectId()` in

Consider this initial definition in a file: const ObjectId = mongoose.Types.ObjectId; Which method should you choose and why? // 1 new ObjectId; // 2 new ObjectId(); // 3 ObjectId(); The official documentation recommends using new ObjectId. Person ...

javascriptnode.jsmongodbmongoose

Is it possible to retrieve correctly formatted JSON data from this API?

I need help retrieving data from the API located at . When I access the API directly, it returns an array wrapped in <pre></pre> tags, rather than in JSON format. I would like to use an AJAX call to retrieve this data instead of using PHP. Is t ...

javascriptphpjqueryajax

Exploring the world of asynchronous operations with React Hooks

Hello, I am a beginner when it comes to React and JavaScript. I could really use some assistance with two hooks that I have created: useSaveStorage and useGetStorage. The issue I am facing is that my app is supposed to receive data and save it into AsyncS ...

javascriptreactjsreact-nativeasynchronous

Sending information to a child component causes the parent's data to be modified as well

Transferring information from the parent to the child component has always been easy for me. However, I recently encountered an issue where updating the data in the child component also updates the data in the parent component simultaneously. Now, I am loo ...

javascriptvue.js

Activate the jquery floatlabels plugin when the input is loaded

I'm currently experimenting with the jquery floatlabels plugin to implement inline labels for input fields in a form. The plugin works perfectly for fields without any text, but I need the label to display even if there is default text present. Upon ...

javascriptjqueryjquery-plugins

Guide on adding a circle shape in the intersection table

Is it possible to add a circular shape in the intersection table, or should an image (table) be utilized from the layout? ...

htmlcss

Transferring Information Across Javascript Documents

I am facing a dilemma with using JSON data generated by one script in another script. I am unsure where to begin and have considered saving the JSON string to a text file for the second script to use, but this feels like a workaround rather than a proper s ...

javascriptjson

Looping through data returned from Ajax call and displaying it as HTML in CodeIgniter using JQuery

Just dipping my toes into the world of JQuery AJAX, here's what I've got so far: $(document).ready(function() { $("#city").change(function() { var city_id = $("#city").val(); if (city_id != '') { $.ajax({ type ...

javascriptphpjqueryajaxcodeigniter

The jQuery autocomplete's source is set as the hidden input variable's value

Having issues with jQuery's autocomplete and referencing a hidden input value on the page. Here is the hidden input field: <input type="hidden" id="array_activities" value="[{ label: 'Football', value: '1' }, { label: 'Te ...

javascriptjqueryjquery-autocompletejquery-ui-autocomplete

Allow checkboxes to function similar to radio buttons within individual rows of a table

I am facing an issue with a table that has multiple rows, each containing one column with three checkboxes. The requirement is for the user to select only one out of the three options in each row. I attempted to solve this using JQuery, but ran into the pr ...

jqueryhtml

The .removeAttr('checked') method fails to function as expected

I am currently using CodeIgniter. Check out this example of my code. Please fill the textbox and check the checkbox next to it, then click on the "add" link. You will notice that it does not work as expected..removeAttr('checked') newDiv.find(&a ...

javascriptjqueryjquery-validate

Unable to send a String to the controller via ajax

Exploring web development using play framework and ajax. I'm looking to pass a string from a form to a controller using ajax, but unsure of how to go about it. Can anyone assist me with this? Here's my code snippet: html: <form onsubmit="retu ...

javascriptajaxplayframework

Updating an object with AngularJS

Let's consider the code snippet below: var absenceType = {name: 'hello'}; this.newAbsenceType = angular.copy(absenceType); After making changes to this.newAbsenceType, you want to apply these changes to the original object. I have explore ...

javascriptangularjs

The SVG element seems to have a mind of its own, refusing to obey my CSS commands and stubbornly remaining centered on the screen. I'm at a loss as

I am facing an issue with positioning SVG elements on a web page. Even though I have set the x,y coordinates to 0,0 and used CSS to position it on the left side of the page, the SVG remains in the center. Here is a link to the problem replicated in jsFidd ...

javascripthtmlcsssvg

Navigate to the chosen item in material-ui scroll bar

Currently, I have a list created using material-ui which contains numerous items and displays a scrollbar due to its size. I am looking for a way to automatically scroll to the selected item within the list. Does anyone have any suggestions on how I can a ...

javascriptreactjsmaterial-ui

Preventing the Current Page from Refreshing while in Use

Is there a way to prevent the current class from causing the page to reload using jQuery? For instance, on the About page, I want the current state to prevent users from reloading the page if they click on the link again. This way, any animations or progr ...

jquery

Retrieve user-specific information through a modal when the API is clicked

I am currently facing an issue where I am only able to retrieve the user ID or first name, but not all the details at once in the modal popup. My goal is to display specific user data in the modal. Here is the HTML code: <table class="table table- ...

javascriptangulartypescriptbootstrap-modal

"Seeking to access the call stack in the VSC debugger? Unfortunately, console.trace() turns out to

When I'm stopped in the VSC debugger, I am unable to retrieve the call stack using console.trace(). https://i.stack.imgur.com/f6jke.png ...

javascriptnode.jsvisual-studio-codevscode-debuggercallstack