DEVHIDE
Login Or Sign up

Superfish sf-js-enabled seems to be not working

1.5k Views Asked by At

I tried to do a dropdown menu using Superfish. However, the drop down doesn't seems to be working. All scrips and link are directed to the js/css file. I have also done the script that needed to ready the function. But it doesn't seems to work. note I'm doing this on static html.

I have tried to change the source file name to check whether is it source issue, but doesn't seems to be, as I still can take in my main.css but not the superfish.css or .js file. I have also did comparison with some other website that uses superfish, seems to be the same.

    <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>

I'm hoping the dropdown menu to work. It doesn't even have the dropdown.

javascript html css superfish
Original Q&A
2

There are 2 best solutions below

8
saravana On BEST ANSWER

Here is an working sample example Your code need some css changes too so i referred some basic example from here Also make sure all the scripts are loading properly and you are not having any errors in browser console too regarding 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>
                <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>

1
Rio A.P On

you need to make sure the document ready is placed after your html body.

if u place in top of body, it wont work because the dom element is not created yet.

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in CSS

Related Questions in SUPERFISH

Trending Questions

Popular # Hahtags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json

Popular Questions

.

Copyright © 2021 Jogjafile Inc.