HTML Toggle Menu Vanishing Act

I've designed a sleek HTML menu with media queries, and integrated a Menu Hook that uses jquery's slideToggle for smaller devices. Everything works perfectly when toggling the menu to show and then maximizing the screen. However, if I hide the menu and then maximize the screen, the menu disappears. To see this in action, try resizing the window and toggling the menu. Here's the jquery code I'm using for the toggle:

$(function(){
    $("#toggle").click(function(){
        $(".t-m").slideToggle("slow");
    });
});

Take a look at the code here.

Thank you in advance.

javascriptjqueryhtmlcss

Answer №1

To achieve this effect, you can utilize JavaScript and the window.innerWidth property along with 

window.onresize = function(event){...}
...

window.onresize = function(){

   if(window.innerWidth > 641){
     $(".t-m").slideDown("fast"); // display .t-m when screen size is greater than 641

   }
   if(window.innerWidth <= 640){
     $(".t-m").slideUp("fast"); // hide .t-m when screen size is less than or equal to 640
   }

}

UPDATE:

Check it out here...

Remember: resize the window inside the page, not your browser.

Answer №2

It appears that the issue may be stemming from the CSS you have in place. It seems to be assuming that the Menu element is always visible on the screen.

I made adjustments to your CSS properties and it seems to have resolved the unexpected behavior for me.

#toggle{
    float: right;
    display: inline;
}

.t-m{
    float: right;
    display: none;
}

I hope this solution works for you as well.

Answer №3

Take a look at this link. According to the information provided, using a dash (-) in a CSS selector signifies that your .t-m represents a sliding m element preceded by the .t class. To adhere to best practices, consider changing the class name to only contain alphabet characters, such as: .tm

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

Obtain a collection of the corresponding keys for a given value from dictionaries

I'm implementing a function that retrieves a list of keys associated with a specific value in the dictionary. Although I am able to print out the first key successfully, I'm facing difficulties in displaying subsequent keys. I understand that I ...

javascript

Tips on creating a responsive absolute div

I'm currently working on creating a profile component with Material UI and React.js. I'm having trouble making the Avatar/profile photo and profile name div responsive. Here are some screenshots to illustrate my issue: The specific div that need ...

javascriptcssreactjstwitter-bootstrapmaterial-ui

Crafting a responsible table design with the help of grid layout techniques

Is there a way to create a table that can adjust its rows and columns based on the container width or when resized? https://i.sstatic.net/xeZjl.png https://i.sstatic.net/kdpJC.png I attempted to use grid-gap in the background, but it resulted in empty red ...

htmlcss

How to set a default checked value in a custom DropDownList in AngularJS?

I have created a bespoke DropDownList in my HTML code. I'm looking for guidance on how to set one of the options as default within the following scenario: <div class="dropdownlistheader" ng-click="toggle('subdiv','item')"> ...

htmlangularjs

The element is not occupying the full width within the div container

I'm working with a div that contains some elements. My goal is to have these elements span the entire width of the container div. .container { height: 100px; width: 100px; display: flex; flex-direction: column; overflow: scroll; borde ...

htmlcss

Preventing multiple users from saving the same value for a field using ajax and C#: Best Practices

On my aspx page, I am collecting email addresses from users and making an ajax call like so: function CheckEmailExistence() { $.ajax({ url: "Handler.ashx", contentType: "application/json; charset=utf ...

javascriptc#asp.netajaxasp.net-4.5

Real-time data and dynamic checkbox functionality in AngularJS

I am working on an onclick function that involves data stored in objects. $scope.messages = [ {"id": "1"}, {"id": "2"}, {"id": "3"}, {"id": "4"}, ]; $scope.selection = { ids: {} }; $scope.sendMe = function(message) { //send the data with `id` and ...

javascriptangularjscheckbox

Ways to reset a JQuery/JavaScript filter

I am currently working on a list of div items that are being filtered and sorted using JavaScript. Each item animates as it enters the screen, scaling up to its final size. However, when I apply filters using buttons, items that are already displayed do n ...

javascriptjquerycss

The React sidebar expanded to cover the entire screen width

As I work on creating a dashboard page that will display a sidebar after the user logs in, I am facing an issue where the sidebar is taking up the full width of the page, causing my Dashboard component to drop to the bottom. You can view the image link of ...

cssreactjsreact-routerreact-router-domsidebar

"Error: Unable to push new Grade to grades array" encountered while attempting to add a Grade to an existing array

Hi there! I'm working on a webapp that allows me to track my grades and calculate the average, but I'm having trouble adding grades to my Array using a button. Whenever I click on the Add Button, an error message pops up: TypeError: this.grades. ...

javascriptarraysvue.jsvue-component

The JSON response from Rails containing multiple lines is not being parsed accurately

I am currently working on a Rails application with a json response using show.js.erb. { "opening": "<%= @frame.opening %>", "closing": "<%= @frame.closing %>"} An issue I encountered is that when @frame.opening contains multiple lines, jQuer ...

javascriptjqueryruby-on-railsjson

Tips for managing ajax responses using jquery

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> <script> $(document).ready(function(){ $("#submit").on('click' ...

phpjqueryajax

Issues with zDepth functionality in Material-UI (React.js) not being functional

Can anyone explain the concept of zDepth to me? I have a component with the following render method: render() { return ( <div> <AppBar zDepth={2} title="Some title" iconElementLeft={<IconButton onClick={this ...

javascriptreactjsmaterial-ui

What is the best way to save the toggleClass value of various selectors along with their corresponding classes in localStorage?

I've been attempting to preserve the toggled class of multiple elements using local storage or cookies in order to maintain the toggled class after a page refresh. Despite trying various solutions such as js cookie and other tutorials, I've had n ...

javascriptjqueryhtmlcookieslocal-storage

Properly appears in Chrome, but experiences issues in Internet Explorer 11

The design of the website looks seamless in Chrome and Firefox, however, when I view it in Internet Explorer, I notice a significant gap on the right side of the first two pages. How can I fix this issue specifically for Internet Explorer? Should I use a m ...

htmlcssgoogle-chromeinternet-explorer

Expanding a Material UI Accordion does not cause the surrounding content to shift or move

I'm currently designing a User Interface for a web application that allows users to have multiple projects open simultaneously. To achieve this, I decided to use an accordion as the logical component in the left navigation bar. The reason behind this ...

javascriptcssreactjsmaterial-ui

Stop the bubbling effect of :hover

How can the hover effect be prevented for the parent element when hovering over its children? Please take a look at the following code snippet: const parent = document.getElementById('parent') parent.onmouseover = function testAlert(e) { /* ...

javascripthtmlcsssass

The structure of the figure tag for HTML5 validation

Could you please confirm if the Figure tag is correctly used in the html structure? Regarding html5 validation, can I use this structure? <a href="#"> <figure> <img src="" class="img-responsive" alt=""> <figcaption> ...

csshtml

What is the significance of the source element in Vue3's audio element?

Playing mp3 files works in Vue 2, but not in Vue3. <template> <audio src="../file_example_MP3_700KB.mp3" controls ></audio> </template> In Vue3, the code needs to be modified as follows: <template> <audi ...

javascripthtmlvue.jsvuejs3

Developing an interactive input tab for user engagement

I'm in the process of developing a web application for my current university workplace. Currently, I am seeking guidance on how to create a dynamic user input form for our website using asp.net and c# in visual studio 2017. I'm struggling a bit w ...

c#htmlasp.net.netvisual-studio