Home/ Questions/Q 9152399
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T12:01:59+00:00

I am testing this fiddle written by @Ilan Biala It adds a submenu in

  • 0

I am testing this fiddle written by @Ilan Biala

It adds a submenu in a menu using jquery 1.9.0, onDomReady and Normalized css as you can see on the jsfiddle.
For instance the html is:

<nav>
    <ul>
        <li><a href="#" >Sec1</a></li>
        <li><a href="#" >Sec2</a></li>
        <li><a href="#" class="current">Sec3</a></li>
        <li><a href="contacto.html" >Sec4</a></li>
        <ul class="menu">
            <li><a href="#" class="documents" data-icon="&#xe000">Documents</a></li>
            <br>
            <li><a href="#" class="messages" data-icon="&#xe001">Messages</a></li>
            <br>
            <li><a href="#" class="signout" data-icon="&#xe002">Sign Out</a></li>
        </ul>
    </ul>
</nav>

the result is:

enter image description here

But there is an issue, I am adding the code to a server I have access, and Added the lines: 

<link rel="stylesheet" type="text/css" href="css/menu.css"  />
<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="js/menu.js"></script>

to emulate those in jsfiddle. The html is: 

 <!doctype html>
<head>
<title>Example</title>
<link rel="stylesheet" type="text/css" href="css/menu.css"  />
<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="js/menu.js"></script>
</head>
<body>
<nav>
    <ul>
        <li><a href="#" >Sec1</a></li>
        <li><a href="#" >Sec2</a></li>
        <li><a href="#" class="current">Sec3</a></li>
        <li><a href="contacto.html" >Sec4</a></li>
        <ul class="menu">
            <li><a href="#" class="documents" data-icon="&#xe000">Documents</a></li>
            <br>
            <li><a href="#" class="messages" data-icon="&#xe001">Messages</a></li>
            <br>
            <li><a href="#" class="signout" data-icon="&#xe002">Sign Out</a></li>
        </ul>
    </ul>
</nav>
</body>
</html>

So, as you can see the submenu is not working, what could be causing the glitch?

I am suspecting different issues:

  1. Maybe the onDomReady property that wraps the code so it will run in onDomReady window event, if so How do I indicate that on code :

    $(document).ready(function() {
    //ADD ALL THE JS CODE IN menu.js
    });

  2. The Normalized css, but that is suposed to make a reset….

  3. Theres is an issue in the jquery 1.9.0, maybe the order the using js are placed…

What do you think?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    See the same fiddle here modified to work with what you want: JS Fiddle Link

    Its the exact same fiddle that you posted, just onDomReady set to “no wrap (head)” and JavaScript code wrapped in ready function. This makes it work with the HTML you have posted. 

    // jQuery(document).ready(function($) {
jQuery(function($) {
 ....
 // your code
});

    So, as an answer, when you have jQuery loaded in head tag of your html document, you need to use .ready() API of jQuery and wrap all your code for any DOM manipulation in the ready function

    • 0