experiencing problems with the foundation dropdown menu located in the top-bar

When setting up foundation-sites, I typically use yarn or npm for installation. This results in the sources being located in node_modules/foundation-sites. Even when using django, I encounter the same issue.

Below is an excerpt from my index.html:

{% load static %}
{% load sass_tags %}
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>short url</title>
    {% load compress %}
    {% compress css %}
      <link href="{% sass_src 'scss/style.scss' %}" rel="stylesheet" type="text/css" />
    {% endcompress %}
  </head>
  <body>
    <div class="top-bar">
      <div class="top-bar-left">
        <ul class="dropdown menu" data-dropdown-menu>
          <li class="menu-text">shorturl</li>
          <li><a href="/shorturl">Racine</a></li>
          <li><a href="/shorturl/url_list">url list</a></li>
          <li>
            <a href="http://www.perdu.com">perdu</a>
            <ul class="menu vertical">
              <li><a href="#">Lien 1</a></li>
              <li><a href="#">Lien 2</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>

    {% block content %}
    {% endblock %}

      <script src="{% static "js/jquery/dist/jquery.js" %}"></script>
      <script src="{% static "js/what-input/dist/what-input.js" %}"></script>
      <script src="{% static "js/foundation-sites/dist/js/foundation.js" %}"></script>
      <script src="{% static "js/foundation-sites/dist/js/plugins/foundation.core.js" %}"></script>
      <script src="{% static "js/foundation-sites/dist/js/plugins/foundation.dropdown.js" %}"></script>
      <script src="{% static "js/foundation-sites/dist/js/plugins/foundation.dropdownMenu.js" %}"></script>
      <script src="{% static "js/foundation-sites/dist/js/plugins/foundation.util.keyboard.js" %}"></script>
      <script src="{% static "js/foundation-sites/dist/js/plugins/foundation.util.box.js" %}"></script>
      <script src="{% static "js/foundation-sites/dist/js/plugins/foundation.util.nest.js" %}"></script>
      <script src="{% static "js/app.js" %}"></script>
  </body>
</html>

Upon loading the webpage, I am encountering an issue with the dropdown menu.

Does anyone have any suggestions on how to resolve this?

Thank you for your assistance.

Answer №1

There seems to be an error in my js/app.js file.

I accidentally left out the parentheses at the end for initializing foundation. So I added this line of code:

$(document).foundation();

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

Using NodeJS to extract information from Opendata JSON files

I'm currently working on a project that involves fetching JSON data from an Open Dataset using NodeJS and passing it to angular. The challenge I'm facing is that I'm receiving a JSON file instead of a JSON object, which makes it difficult to ...

Tips for eliminating empty trailing values and Carriage Returns from a JavaScript array

I needed a way to eliminate empty elements and Carriage Returns from the end of an array. Here's an example of what my array looks like: Input arr: ['', 'Apple', '', 'Banana', '', 'Guava', & ...

The horizontal scrollbar in PrimeNG's p-tree is cleverly concealed until I reach the bottom of the div and start scrolling

I'm facing an issue where the horizontal scrollbar in my p-tree component is hidden until I scroll all the way down. I've tried various CSS modifications, but nothing seems to work. It's surprising that I couldn't find anyone else with ...

Concealing a Div element without the use of Jquery or JavaScript

I have an Upper and Lower div in my HTML code. I am trying to display the Lower div only if the Upper div is present, otherwise hide it. Is there a way to achieve this using CSS without using Jquery or Javascript? Note: No modifications should be made t ...

Trouble deploying Firebase Cloud Functions

I am attempting to implement the following two functions: exports.increaseWaitinglistCounters = functions.database .ref('waitinglists/$iid/$uid') .onCreate(async () => { await admin .database() .ref(`waitinglistCounters/$ii ...

Is it possible to modify variables in the controller when the route is changed?

My application utilizes a template and several views that are dynamically rendered based on their route: popApp.controller('HomeCtrl', ['$scope', '$routeParams', '$http', function($scope, $routeParams, $http) { ...

How can you define & specify parameters for iframe using CSS?

Is there a way to style the parameters of an <iframe> using CSS? I am trying to embed multi-track audio from archive.org. For example, like this: <iframe src="https://archive.org/embed/art_of_war_librivox​&playlist=1​&list_height=200 ...

Setting up a basic node.js + socket.IO + Express server from scratch

After setting up a basic node.js socket.IO server, I quickly realized it was not sufficient for handling webpages with script tags. This led me to explore express, a straightforward web framework for node.js. While going through the express documentation ...

Unlocking the Power of Global Props in AlpineJS: A Step-by-Step Guide

I'm currently exploring AlpineJS after having some experience with React and basic knowledge of Vue. One thing that has puzzled me about AlpineJS is how to update a state value from within a function, similar to how it's done in React. Let' ...

vue-dropzone fails to create thumbnails when a file is added

I am facing an issue where I want to upload files that are already stored on my server to the Dropzone. Despite searching extensively through both vue-dropzone and regular dropzone documentation, as well as various GitHub issues for solutions, I have not b ...

Trigger the .focus() method on a neighboring VueJS Component

I am facing an issue with two independent components in my Vue instance. I have a select component and an input component, both of which are siblings. I need to trigger a focus event on the input component when the select component is changed. Since both ...

React Typescript Issue: Antd Checkbox value not updating correctly

Hey there, I'm having trouble filling the Checkbox value with my state data as it's not accepting it. Here is the Checkbox Code: <Form.Item label="Active"> <Checkbox value={this.state.selectedRecord.active} /> </Form ...

Trigger a unique event using Vanilla JS and then detect it on Vue instances

I am currently in the process of incorporating multiple Vue instances into my website. I have encountered issues preventing me from making the entire website a Vue instance and using components due to potential conflicts and other complications. For examp ...

Guide to Creating a Pop Up Image Display with Bootstrap

Can someone help me achieve the same functionality as the Fiddle linked below? http://jsfiddle.net/6CR2H/1/ I have tried to replicate it by including both external files, but the image is not displaying as a pop-up when clicked. <link href="http:// ...

Tips for fixing the issue of "The use of getPreventDefault() is outdated. Please use defaultPrevented instead."

When attempting to fetch data for a specific user from an SQL Server database using JSON data, I encountered an error message in the console: "Use of getPreventDefault() is deprecated. Use defaultPrevented instead." Additionally, the values are not bei ...

Unable to adjust image opacity using jQuery

I am attempting to change the opacity of an image based on a boolean flag. The image should have reduced opacity when the var pauseDisabled = true, and return to full opacity when pauseDisabled = false. To demonstrate this, I have created a fiddle below. ...

Tips for submitting an Ajax Form with identical Name attributes?

One part of my form consists of input fields with the same 'Name' values that will be stored as an Array. I am attempting to send these values via AJAX to PHP for updating my database. The challenge I'm facing is figuring out how to send t ...

Remove the footer specifically from the final page by utilizing CSS

I am currently working on generating a PDF. My goal is to remove the last page using CSS methods. I have attempted to use :last-child to achieve this, but unfortunately, it did not yield the desired results. Here is an excerpt of my code: body { font- ...

JQGrid will automatically conceal any row that contains a false value in a given cell

I'm attempting to conceal a row if a specific cell within it contains the value false. To achieve this, I have experimented with using a formatter in the following manner: $("#list").jqGrid({ //datatype: 'clientSide', ...

What measures does Django put in place to prevent multiple threads from sharing the same persistent connection simultaneously?

According to the django database documentation, when a persistent connection is used (by setting CONN_MAX_AGE to a value greater than 0 or None), it will not be closed after each request until it either exceeds the maximum age or becomes ...