Unable to toggle navigation menu visibility on responsive design

I have provided the following code for responsive design. However, when I click the logo, it does not hide or show as expected.

.toggle-nav {
  display: none;
}
.menu {
  float: right;
}

// Additional CSS code here


<nav class="menu">
  <ul class="menuLink">
    <li> <a class="link-nav" data-scroll-nav="0"> HOME </a> 
    </li>
  
    // More HTML code here
    
  </ul>
  <a class="toggle-nav" href="#">&#9776;</a>
</nav>

Find the JSFIDDLE link for this code here.

The issue is that the menu does not hide initially and remains visible. The desired behavior is to have the menu hidden by default and then be able to toggle its visibility by clicking the logo. Any suggestions on how to achieve this?

htmlcss

Answer №1

simply implement this jQuery script:

$('.toggle-nav').click(function(){
    $(this).parent().find('.menuLink').toggle();
});

JSFIDDLE LINK

Answer №2

Check out this example featuring expanding and animated menus.

https://jsfiddle.net/9bn5t0kj/8/

$('.menu-header').on('click', function() {
    $(this).next().toggleClass('menu-item-open');
    $('.menu-item').not($(this).next()).removeClass('menu-item-open');
});

$(document).on('click', function(e) {
    var clickedItem = $(e.target);
    
    if (clickedItem.is($('.menu-header')) || clickedItem.is($('.menu-item'))) {
        console.log(clickedItem);
        return;
    }
        
    $('.menu-item').removeClass('menu-item-open');
});
.menu-item-container {
    float: left;
}

.menu-header {
    -webkit-user-select: none;
    cursor: pointer;
}

.menu-item {
    height: 0;
    overflow: hidden;
    -webkit-transition: height .25s;
}

.menu-item-open {
    height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
    <div class="menu-item-container">
        <div class="menu-header">Open 1</div>
        <div class="menu-item">
            Hello there!<br>
            Hello there!<br>
            Hello there!<br>
            Hello there!<br>
            Hello there!<br>
        </div>
    </div>
    <div class="menu-item-container">
        <div class="menu-header">Open 2</div>
        <div class="menu-item">
            Hello there 2!<br>
            Hello there 2!<br>
            Hello there 2!<br>
            Hello there 2!<br>
            Hello there 2!<br>
        </div>
    </div>

Answer №3

One way to initially hide it is using jQuery method .hide(), then reveal it upon clicking on the element with class .toggle-nav. It's a straightforward process.

$(document).ready(function() {
  $('.menuLink').hide();
  $('.toggle-nav').click(function() {
    $('.menuLink').toggle();
  });
});
.toggle-nav {
  display: none;
}
.menu {
  float: right;
}
... (CSS code continues)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="menu">
  <ul class="menuLink">
    <li> <a class="link-nav" data-scroll-nav="0"> HOME </a> 
    </li>
    ... (HTML code continues)

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 possible to customize the background color for particular days in FullCalendar?

How can I set background colors for specific days? While experimenting, I discovered this method: $('.fc-day15').css('backgroundColor','black'); The only issue is that the colors appear on the 16th day in the calendar grid, ...

jquerycssfullcalendar

What is the best way to extend the final column of a table across the entire width?

Here's the code I'm working with: .frm-find-people table td:nth-child(1) { padding: 5px 15px; width: 100px } .frm-find-people table td:nth-child(2) { border: 1px solid red; } <form class="frm-find-people"> <table> ...

htmlcss

What could be causing the issue of nth-child blocking the functionality of a:hover styles?

I have a unique collection of images that are styled to resemble polaroid pictures. Each image is given a slight rotation. a.polaroid { transform: rotate(-2deg); } On hover, a scale transformation is applied. a.polaroid:hover { transform: scale(1 ...

csstransform

How to center align an HTML page on an iPhone device

I am currently testing a HTML5 webpage on my iPhone, utilizing CSS3 as well. The page appears centered in all browsers except for the iPhone, where it is left aligned. I have attempted to use the following viewport meta tag: <meta name="viewport" conte ...

iphonehtmlcss

Modifying the background color using highcharts.js

I am attempting to customize the background colors of a highcharts scatter plot. While I can easily change the color of a specific section using the code provided, my goal is to apply multiple colors to different ranges within the same plot. Specifically, ...

javascriptjqueryhtmlcsshighcharts

Invoking functions with JavaScript objects

Can anyone help me figure out what is wrong with the following JavaScript code? <form> What is 5 + 5?: <input type ="number" id ="num_answer;"/> </form> <script> function basic_math(){ var num_val = document.getElem ...

javascripthtml

Deactivate the button for each package based on a specific PHP value

Are you looking to purchase a package or multiple packages? The available packages are displayed in the table below. I would like to implement a feature where once a user buys a package, the corresponding button for that package is disabled. Here is my cu ...

javascriptphphtmlbootstrap-4

Populate an HTML5 arc with an image - Leveraging the power of HTML5 Canvas

I'm working with an HTML5 Canvas (JSFiddle) that currently displays circles created using the following function: function createball(x,y,r,color){ context.beginPath(); context.arc(x,y,r,0,Math.PI*2,true); context.fillStyle = color; c ...

javascripthtmlcanvashtml5-canvas

Incorporating a scrollbar when a div exceeds the bottom of the viewport

I am encountering an issue on my webpage with a <div> that contains a <table> with rows of varying heights: <html> <head></head> <body> <div> <table> <tr>... <tr>... ... </ ...

cssscrollbarhtml

What is the best way to use jQuery to set the height of one div equal to another div

Edited: I am facing a situation with a 3-column layout - Column A, Column B, Column C. The height of Column A is dynamic and I need to set the same height for both Column B and C. For instance, Column A contains a tabbed panel with varying heights based ...

javascriptjqueryhtml

Exploring the Differences in Table Resizing between IE8, IE7, and Chrome when using table-layout:fixed

For my HTML timeline view, I encountered an issue that I'm hoping to resolve: I have a table row with 12 cells representing the 12 months, each with a colspan based on the number of days in that month. Another row in the same table contains the indiv ...

htmlcsshtml-tableinternet-explorer-8resize

Is there a bug or user error causing CSS float not to be applied in Chrome?

I've encountered an issue with Chrome's rendering in my web application that seems to be intermittent. When I switch the float property between "left" and "none", Chrome doesn't reposition the elements properly. Interestingly, Firefox and I ...

htmlcssgoogle-chromecss-float

"Combining HTML, PHP, and JavaScript for Dynamic Web

Here is the PHP function that retrieves the visitor's profile image thumbnail: <?php echo voip_profile_image($visitorid,'thumb'); ?> The issue lies in the fact that $visitorid is stored in JavaScript under the sRemoteid parameter. Wi ...

javascriptphphtml

Remove HTML formatting from excel cells and fill separate cells

Is there a way to condense HTML code and fill different columns in Excel? For instance, If my HTML code looks like this: <p></p>10-16-2013 22:35<br/>I love pizza! Ordering was a breeze!<p></p>10-16-2013 13:19:46<br />t ...

htmlexcelvba

What is the correct way to apply background-position percentage in this situation?

This problem has got me at my wit's end. Imagine a series of divs lined up horizontally. Each one is sized as a percentage of the total width, but that total width is unknown. For instance: --------------------------------- | | | ...

htmlcss

Create a dynamic feature on a JSP page that allows users to click a button and instantly see changes

How can I create a button on an HTML or JSP page that, when clicked, will dynamically add content to the same page? For example, imagine I have a JSP page called Prescription.jsp with input forms like: ID name select commodity weight tolerance ...

htmljsp

Using Polymer in Chrome Extension content script

Currently, I am experimenting with incorporating Polymer into a chrome extension. My main objective is to take advantage of styling encapsulation in order for my content scripts to operate independently from the CSS on the visited webpage. To begin, I hav ...

javascripthtmlgoogle-chrome-extensionpolymer

What is the best way to use multiple for loops in different columns within a flask template?

In my first column, the last link in my initial for loop leads to the header in the second column where another for loop is present. Oddly enough, the link for Broccoli also creates a hyperlink in the text Previous Ads, which is not intended. https://i.ss ...

htmlcssfor-loopflask

Tips for incorporating Action Links into your CSS workflow

<li class="rtsLI" id="Summary"><a href="javascript:void(0);" onclick="javascript:rtsXXX.OnClientTabSelected(this‌​, 0);" class="rtsLink"><span class="rtsTxt">Test</span></a></li> I have made a change by replacing th ...

asp.net-mvchtmlcssrazorasp.net-mvc-4

Trigger a JQuery popup by toggling a class with a button

Hey there! I have a modal popup that utilizes an active class. When this class is present, the modal appears, and when it is removed, the modal disappears. I am trying to create a button that, when pressed, will show the modal, and a close button inside th ...

javascriptjqueryhtml