Looks like Superfish's sf-js-enabled feature is experiencing some issues

I attempted to create a dropdown menu using Superfish, but unfortunately, it doesn't seem to be functioning as expected. I have ensured that all scripts and links are correctly directed to the appropriate js/css files. Additionally, I have implemented the necessary script for the function to work properly, but it still isn't functioning. Note This is being done on static html.

In an effort to troubleshoot, I attempted to change the source file names to see if it was an issue with the source itself. However, after changing the file name, I am still able to access my main.css file but not the superfish.css or .js files. After comparing my implementation to other websites that use Superfish, everything seems to be in order.

<link href="http://localhost:8383/1004Project/public_html/css/superfish.css" rel="stylesheet" media="screen">
<script src="http://localhost:8383/1004Project/public_html/js/jquery.js"></script>
<script src="http://localhost:8383/1004Project/public_html/js/superfish.js"></script>
<script src="http://localhost:8383/1004Project/public_html/js/hoverIntent.js"></script>
<script>
    jQuery(document).ready(function() {
        jQuery('ul.sf-menu').superfish();
    });
</script>
<nav id="primary-menu">
    <ul class="sf-js-enabled">
        <li><a href="ProjectStories.html"><div>Project's Stories</div></a></li>
        <li><a href="Menus.html"><div>Menus</div></a></li>
        <li><a href="Promotions.html"><div>Promotions</div></a></li>
        <li><a href="CelebrationTips.html"><div>Celebration Tips</div></a></li>
        <li class="sub-menu">
            <a href="#" class="sf-with-ul">
                <div>Help</div>
            </a>
            <ul style="display: none;">
                <li>
                    <a href="FAQ.html"><div>FAQ</div></a>
                </li>
                <li>
                    <a href="Feedback.html"><div>Feedback</div></a>
                </li>
                <li>
                    <a href="ContactUs.html"><div>Contact Us</div></a>
                </li>
            </ul>
        </li>
    </ul>
</nav>

The objective of getting the dropdown menu to work has not been achieved, as there is no sign of the dropdown appearing.

Answer №1

Below is a functioning example for you to reference. Remember to update your code with the necessary CSS changes, and feel free to check out some basic examples here. Ensure all scripts are loading correctly without any errors in the browser console related to the scripts.

<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/superfish/1.7.10/css/superfish.min.css" media="screen">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/superfish/1.7.10/js/superfish.min.js">
    </script>
</head>
<div id="sample1" class="clearfix">
    <ul id="sample-menu-1" class="sf-menu sf-js-enabled sf-arrows" style="touch-action: pan-y;">
        <li class="current"><a href="#a" class="sf-with-ul">menu item</a>
            <ul style="display: none;">
                <li><a href="#aa">menu item</a></li>
                <li class="current"><a href="#ab" class="sf-with-ul">menu item</a>
                    <ul style="display: none;">
                        <li class="current"><a href="#">menu item</a></li>
                        <li><a href="#aba">menu item</a></li>
                        <li><a href="#abb">menu item</a></li>
                        <li><a href="#abc">menu item</a></li>
                        <li><a href="#abd">menu item</a></li>
                    </ul>
                </li>
                <li><a href="#" class="sf-with-ul">menu item</a>
                    <ul style="display: none;">
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                    </ul>
                </li>
                <li><a href="#" class="sf-with-ul">menu item</a>
                    <ul style="display: none;">
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">menu item</a></li>
        <li><a href="#" class="sf-with-ul">menu item</a>
            <ul style="display: none;">
                <li><a href="#" class="sf-with-ul">menu item</a>
                    <ul style="display: none;">
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                    </ul>
                </li>
                <li><a href="#" class="sf-with-ul">menu item</a>
                    <ul style="display: none;">
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                    </ul>
                </li>
                <li><a href="#" class="sf-with-ul">menu item</a>
                    <ul style="display: none;">
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                    </ul>
                </li>
                <li><a href="#" class="sf-with-ul">menu item</a>
                    <ul style="display: none;">
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">menu item</a></li>
    </ul>
</div>
<script>
    jQuery(document).ready(function () {
        $('ul.sf-menu').superfish();
    });
</script>

Answer №2

Ensure that your document ready function is placed after the closing body tag of your HTML structure.

If you place it at the top of the body, it may not work correctly as the DOM elements have not been fully created yet.

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

Why isn't my JavaScript AJAX PHP if statement functioning properly?

I have been struggling with this issue for more than two hours now and cannot seem to find a logical solution. When I remove the If statement highlighted by --> this arrow, the alert() function works perfectly fine. It triggers when I simply use if(true ...

Enhance ngx-bootstrap's tab content with ngx-scrollbar functionality

Currently in my project, I am utilizing bootstrap 4 and ngx-bootstrap. One requirement I have is to develop a component consisting of 2 scrollable divs that can be switched by tabs. I was hoping to demonstrate a sample application on stackblitz, but unfor ...

Using jQuery to set cookies for multiple domains

I am trying to set a cookie for a domain that should also be accessible for a subdomain. For example, www.mydomain.com and sub.mydomain.com However, when I set the cookie for the main domain, it does not seem to work for the subdomain. I am using the jQu ...

Ensuring consistent input width in a table for all columns in reactjs and bootstrap, regardless of their content

I'm currently designing a bootstrap table in reactjs, complete with a filter beneath each column header. Take a look at the code snippet below: <table className="table table-striped"> <thead> <tr> <th>#</th> ...

Encountered an issue with JSON serialization while using getServerSideProps in Next.js and TypeScript to retrieve products from the Stripe Payments API

Encountered Issue on Localhost Error: The error occurred while serializing .products returned from getServerSideProps in "/". Reason: JSON serialization cannot be performed on undefined. Please use null or exclude this value. Code Sample import ...

Steps for properly closing the loop to input data into an array prior to populating the JSON object in Node.js

I have encountered an issue while trying to fill all the data from my loop into an array. It seems that the loop is being executed last, causing the array to remain empty when I try to print the data. var data = new Array(); for (let station of t ...

Select a date from the JQuery calendar, verify it against the database, and display any events scheduled for that date

I am working with a jQuery calendar that stores the selected date in a variable named "X". My goal is to retrieve events stored on that specific date from the Database and display them. Can anyone provide some guidance? <div id="calendar"></div&g ...

The font styles in IE are failing to render properly following the disabling of caching in Node JS

Why are the CSS fonts not working in Internet Explorer after disabling cache in Node JS? After a user navigates to a page and then clicks the back button to return to the previous page, the font styles are not rendered properly in IE 11. The code 'k ...

What is the best way to incorporate tooltips in SVG?

My teacher wants me to display a tooltip on an SVG circle with links and information when we hover over it. They suggested using jQuery UI, but I've done extensive research and nothing has been able to assist me so far. ...

Tips on customizing the appearance of the "time" input type

Are there any resources that explain how to style the input type "time" completely? I have been searching but unable to find a comprehensive guide with all the necessary style attributes! The only example I came across is: input[type="time"]{ /**styl ...

Chosen link fails to update color

I've successfully implemented a navigation bar that changes the content in the body when each link is selected. Utilizing AJAX for dynamic content changing, I can change the color of menu items on hover but am facing issues with changing the color upo ...

The presence of certain characters is leading to problems in the console

Similar Question: Escaping a String for JavaScript Usage in PHP? The characters in my text are causing errors. When I input special characters such as: !\"$%^&()-=\'.,:;/?#~/\\>< An error saying "Syntax error ...

Sending data via Ajax using the multipart/form-data format

I am encountering an issue with a script that is not working correctly. When I submit the form without using the script, everything works as expected. However, when I use the script to submit the form, only the category and description are included in the ...

Improving iframe functionality in AngularJS

I've been experimenting with AngularJS to dynamically update an iframe whenever a query is triggered. It works like this: a query is made, the embed link is fetched from the database, and then it's used in the iframe alongside the title and video ...

How can I prevent a hyperlinked element from being clicked again after it has been clicked using JavaScript or jQuery in PHP

I am struggling with disabling the href after it has been clicked. Can someone please assist me with this? It is crucial for me to complete this PHP program. Style.css .disabled { pointer-events: none; } ...

How can I prevent media controls from appearing in fullscreen mode on Microsoft Edge using CSS?

My video code allows for switching the video into fullscreen mode using custom controls. Here's how it looks: fullScreenButton.addEventListener("click", function() { if (video.requestFullscreen) { video.videoContainer.r ...

The select2 ajax functionality encountered an error: Uncaught TypeError - Unable to access the 'context' property as it is undefined

Trying to make an AJAX request using the Select2 jQuery plugin. The query appears to be functioning properly, but the problem arises when ".context===undefined" is called on the "data" object: Uncaught TypeError: Cannot read property 'context' o ...

Encountering issues with the interaction between Bootstrap and my custom CSS file in a Flask app with

I am encountering an issue with my template where I have included both Bootstrap and CSS files, with Bootstrap loaded before CSS. However, when I try to apply custom CSS using IDs or classes, the changes do not reflect. Strangely, styling for h1 elements i ...

Exploring Angular 5: Unleashing the Potential of Component Tags

I have created a unique custom modal for my Angular 5 application, and now I am looking for a way to customize the content within it. For example, here is a snippet of code I have used: <app-modal> <p>Some Text!</p> </app-modal> ...

Having issues with email verification and the length of phone numbers not functioning properly

I need to validate two text fields before registration: the email must be in correct format and the number must have exactly 11 digits. Any mismatches should trigger an error message. For the email validation, I used a function that checks for the require ...