How would I use this in my html structure?

Question

I'm new to jquery and I don't want to end up doing the wrong thing, I've done everything else but, I'm stuck on this part. How do I hook this is up? I've tried using script tags, but I'm not sure if thats right.

$(document).ready(function() {
     $('.menu').dropit()
});

Ok I've done what you guys suggested, but it still does not seem to work. Heres the full code:

    <!doctype html>
<html>
<head>




<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="path/to/your/jquery/script.js"></script>
<script src="dropit.js"></script>
<link rel="stylesheet" href="dropit.css" type="text/css" />



<style> 
body
{
background:url("");
background-size:0px 0px;
background-repeat:no-repeat;
padding-top:40px;
}
</style>




<STYLE>
<!--
 a:hover{color:#c0c0c0;}
-->
</STYLE>


<style>
    .navLink {
    color: #000000;    
    text-decoration: none !important;}

ul
{
list-style-type:none;
font-size: SMALL;
font-family: 'Ubuntu Condensed', sans-serif;
font-weight: lighter;
font-style: regular;}

li
{
display:inline;
}

</style>


</head>
<body>



<img border="0" src="http://az61389.vo.msecnd.net/6/_ui/img/mosaic/big-transparent-block.png" alt="Vealed" width="100" height="70">
<HR COLOR="#C0C0C0" WIDTH="100%">

<ul id="nav" >

<img border="0" src="http://www.miacreative.com/ESW/Images/WHITE-BOX-MID.png" alt="Vealed" width="450" height="1"> <li><a href="#">
     <a href="#">MENS</a>
    <ul>
            <li><a href="#">Shirts</a></li>
            <li><a href="#">Jackets</a></li>
            <li><a href="#">Denim</a></li>
            <li><a href="#">Fleece</a></li>
         </ul>
        </li>



<img border="0" src="http://www.miacreative.com/ESW/Images/WHITE-BOX-MID.png" alt="Vealed" width="30" height="1">  
         <li><a href="#" class="navLink">WOMEN'S</a></li>
<img border="0" src="http://www.miacreative.com/ESW/Images/WHITE-BOX-MID.png" alt="Vealed" width="30" height="1">
    <li><a href="#" class="navLink">NEW ARRIVALS</a>
<img border="0" src="http://www.miacreative.com/ESW/Images/WHITE-BOX-MID.png" alt="Vealed" width="30" height="1">
    <li><a href="#" class="navLink">BLOG</a>
<img border="0" src="http://www.miacreative.com/ESW/Images/WHITE-BOX-MID.png" alt="Vealed" width="30" height="1">
    <li><a href="#" class="navLink">SALE</a>
</ul>

<HR COLOR="#C0C0C0" WIDTH="100%">

<ul id="nav" >
<img border="0" src="http://az61389.vo.msecnd.net/6/_ui/img/mosaic/big-transparent-block.png" alt="Vealed" width="0" height="2">

<p><p align="center"><img border="0" src="http://img593.imageshack.us/img593/6192/5eo7.png" alt="Vealed" width="800" height="500">


<img border="0" src="http://az61389.vo.msecnd.net/6/_ui/img/mosaic/big-transparent-block.png" alt="Vealed" width="70" height="2">

</ul>







<img border="0" src="http://az61389.vo.msecnd.net/6/_ui/img/mosaic/big-transparent-block.png" alt="Vealed" width="100" height="200"



<script type="text/javascript">
$(document).ready(function() {
     $('.menu').dropit();
});
</script>
</body>
</html>

I wanted to make it so that all the links in the menu will have a drop down.

yes you use script tags but you also need to include a link to the jquery library — jmore009, Jan 05 '14 at 21:11
The script src goes in the head. The script itself can go before the body — Ali Gajani, Jan 05 '14 at 21:13

score 3 · Answer 1 · answered Jan 05 '14 at 21:12

Put the script tag in between your head tags like so

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
</head>

put this right before the closing body tag like so

<script type="text/javascript">
$(document).ready(function() {
     $('.menu').dropit();
});
</script>
</body>

Another option, instead of putting your jQuery code at the bottom, is to put all your javascript/jquery in a separate file. And then just link to it.

For example

<script type="text/javascript" src="myjsfilename.js"></script>
</body>  //again, you put this right before the closing body tag

And then in your myjsfilename.js file, you would have

$(document).ready(function() {
     $('.menu').dropit();
});

plus anymore javascript/jquery code you want to add

Doing it that way can help keep things organized

I've done this, but it shows the actual text, $(document).ready ,on the web page — user3161620, Jan 05 '14 at 21:17

score 2 · Answer 2 · edited May 23 '17 at 11:56

Add a script tag like this to the head or body of your html:

<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="path/to/your/jquery/script.js"></script>

as far as best practices go for where to add it, check here for a good discussion:

Where should I put <script> tags in HTML markup?

The first script tag above links to a CDN, and allows you to include jQuery without having to have it locally. This is a great way to do it as long as you dont include many external scripts. Once you have many scripts it would be better to include everything in a local minified file to increase page load performance.

score 1 · Answer 3 · answered Jan 05 '14 at 21:22

I drew a small diagram to help anyone understand the answers visually.

As a rule of thumb, I recommend putting all scripts at the bottom for performance issues.

It is a best practice, I'd say. So put your code before the </body> closes:

<script type="text/javascript">
$(document).ready(function() {
     $('.menu').dropit();
});
</script>

And obviously you need to load your jQuery from a CDN, so put it above all script code.

Yes, that would also need to go before the </body> closes.

The diagram explains it better now. Have a look.

enter image description here

@agconti: Bringing a new wave of using pictures and animation on SO :) — Ali Gajani, Jan 05 '14 at 21:25

How would I use this in my html structure?

3 Answers3

Linked