The contents of the multi-level navigation are automatically shown as the page loads

I've implemented a multilevel dropdown menu on my website using a plugin, and it works as expected. However, there's an issue where the contents of the dropdown menu display for a brief moment while the page is loading. I tried adjusting the position of JavaScript and CSS files, as well as different versions of jQuery, but so far no luck in resolving the problem. The same issue occurs in the plugin's example, which I only noticed after integrating it into our CMS. At this point, it's too late to completely change it, so I'm looking for a way to fix it somehow. Unfortunately, I'm unable to share my working copy here. You can find my actual website here.

For reference, I've attached a JSFiddle.

<div class="page">
    <div class="header">
        <div class="header-menu">
            ...
                       $(function() {
                            $(window).resize();
                        });
                        $('#menu').dmenu({
                            menu    : {
                                border          : false,
                                logo            : false,
                                align           : 'center'
                            },
                            item    : {
                                bg              : false,
                                border          : true,

                                fit         : [
                                    {
                                        items       : null,
                                        fitter      : 'icon-hide',
...
                                             </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                             ...


                            subitem : {
                                bg              : true,
                                border          : true
                            }

                        });

Answer №1

To hide the navigation menu with CSS, you can use the following code:

#navigation{display:none;}

Additionally, you can add the JavaScript code below to show the menu when the window is resized:

$(function() {
     $(window).resize();
    $('#navigation').show();
});

Answer №2

The reason for this behavior is that the JavaScript code handles the hiding of the menu after it has been executed. If you want to manually hide the menu, you can do so by adding the following CSS where you style the #menu:

#menu {
  display: none;
}

Then, in your JavaScript code, include the following:

$(document).ready(function() {
  $("#menu").css("display", "block"); // or any other value you prefer
});

If the above method does not work, you can try a more drastic approach:

$(window).load(function() {
  $("#menu").css("display", "block");
});

This will ensure that the menu is hidden while the page is loading, as long as the CSS styles are placed above the menu markup.

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

What is the best method for sending data from an HTML page to a Django view in order to utilize it

I'm encountering an issue with Django urls. I need to pass the value entered in the Name input field after clicking the submit button. Let's assume I have the following HTML form- <form method='POST' action="{% url 'submittedf ...

Is there a way to display the contents of a zipped file using an HTML IFrame?

Can I display the contents of a zipped file in an HTML iframe? For example: My_File.pdf.zip contains My_File.pdf. I currently have something like this <iframe src="/path of the folder/My_File.pdf.zip" /> The src attribute points to the zipped file ...

What causes the image to vanish once the CSS animation is activated?

Is there a reason why the image disappears after the animation completes? :/ .coin { width: 200px; height: 200px; background-size: cover; animation: CoinflipRoll 6s steps(199); animation-delay: .5s; animation-fill-mode: forwards; ...

React Native - Invariant Violation: Objects cannot be used as a React Child (Utilizing Node.js for the backend)

Trying to calculate the total sum of orders and their quantity using Node JS on the backend. However, encountering issues with the fetch functions not working properly or missing something unknown. The API works as expected when tested in Postman, but err ...

problem encountered when attempting to fetch a value through ajax

Here is an updated version of the code for my preview problem. The goal is to send and retrieve a value using ajax, but I'm encountering issues with sending the value and getting ajax to work properly. This revised code is easier to test on different ...

The ng-click functionality seems to be malfunctioning when used within the controller in conjunction with ng-bind

After coding, I noticed that my ng-click function is not working. When I inspected the element, I couldn't find ng-click displayed anywhere. Can someone please help me figure out what I'm doing wrong? var app = angular.module('myApp' ...

Performing a JavaScript/jQuery callback to server without the need for an accompanying executable backend

Today, a colleague in the tech world posed an interesting question to me: Can jQuery (or JavaScript in general) retrieve information about the filesystem from its source without the need for executable code? Initially, I instinctively responded by saying t ...

Struggling with serving static content on NodeJS using Express.js

I set up a basic NodeJS and Express server on my development machine running Windows 10. var express = require('express'); var app = express(); app.use(express.static('app')); app.use('/bower_components', express.static(&apo ...

Using codedeploy to deploy a Next.js application onto an AWS EC2 instance

After creating a fresh NextJS app with only basic boilerplate files and folders, I uploaded it to a CodeCommit repository. I already had a functional CodePipeline and simply switched the Source stages. However, I am encountering deployment failures during ...

Currently, there is a requirement to include past build outcomes in the HTML test report within the playwright

Is there a way to display the previous build status of each test case for every test case? I have been attempting to use test.info() in playwright, but it seems inaccessible from onTestEnd. One option could be to retrieve the previous build data from Jenki ...

Acquiring data from a website using Python post user engagement

Hey everyone! One of my friends has a lot of typing to do for her IT classes in school. She needs to learn how to type quickly on the keyboard. Being quite lazy, she asked me if I knew of any way she could type her texts on without actually doing any wor ...

Tips for handling an incorrect date entry when a field loses focus in AngularJS

If I have an <input> field with the type='date' attribute in its untouched state, it displays mm/dd/yyyy as the date format. I am looking to see if there is a way to utilize AngularJS ng-blur directive to reset the field to this original fo ...

The project runs smoothly on my local host, but encounters an issue during the build process

I am currently working on a Preact-CLI project that utilizes Preact-Router. Everything functions as expected when testing on localhost, but once the project is built and deployed to production, issues arise. One particular page within the project pulls co ...

What is the best way to retrieve a PHP response using jQuery's .load method

Here are some sample codes for better understanding. This code is from my file named some3.php: <head> <script src="jquery-1.7.2.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ ...

Rendering Highcharts React Pie Chart Multiple Times

Here is the code snippet: import React, { useEffect, useRef, useState } from "react"; import * as Highcharts from "highcharts"; import HighchartsReact from "highcharts-react-official"; export const PieChart = (props: any) =&g ...

Images fail to display on iOS devices using the Ionic Framework

I'm a beginner when it comes to the Ionic Framework, and I've encountered an issue with loading images. After receiving a list of image URLs from the server through a GET request, I can see the images' layout in Chrome's "Inspect eleme ...

Input the selected checkbox options into the designated text field

My form consists of 3 arrays of checkboxes - hummus[], mayo[], jam[]. Currently, the jQuery functions disable the remaining checkboxes once the required number is checked. Query: I am attempting to transfer the values of the checked checkboxes into text f ...

Display directional arrow on Ext.grid when the page is initially loaded

Displaying a grid with the product ID is our current setup. While the data is sorted according to the product ID, the sort arrow does not display upon page load. I have observed that clicking on the column reveals the arrow. How can we ensure that the so ...

Identical HTML elements appearing across multiple DOM pages

My question might seem silly, but I'm facing an issue. I have several HTML pages such as index.html and rooms.html, along with a main.js file containing scripts for all of these pages. The problem arises because I have variables like const HTMLelemen ...

What could be causing this Form to redirect to the incorrect file path?

I recently updated the login menu for my Admin panel. Initially, the login page was named login.php, but I decided to change it to index.php. Even though I made sure to update the action from login.php to index.php, when I click on the login button it st ...