making dropdown menu with jQuery

Question

I'm having a problem getting a dropdown image menu to display properly in my browser. The code is as follows

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery test</title>

<style>
#webmenu{
width:340px;
}

</style>
</head>

<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function() { // makes sure the whole site is loaded
$("body select").msDropDown();
    })
</script>


<select name="webmenu" id="webmenu">
<option value="calendar" title="http://www.abe.co.nz/edit/image_cache/Hamach_300x60c0.JPG"></option>
<option value="shopping_cart" title="http://www.nationaldirectory.com.au/sites/itchnomore/thumbs/screenshot2013-01-23at12.05.50pm_300_60.png"></option>
<option value="cd" title="http://www.mitenterpriseforum.co.uk/wp-content/uploads/2013/01/MIT_EF_logo_300x60.jpg"></option>

</select>

</body>
</html>

I found the original code on github at http://jsfiddle.net/GHzfD/357/ but have not been able to reproduce it - am I making some kind of fundamental mistake?

The page is live at http://www.datatrouble.com/jquery_test.html

try to intialise `msDropDown()` inside `document.ready()` instead of `window.load` — Kartikeya Khosla, Oct 02 '14 at 05:48

score 2 · Accepted Answer · edited May 29 '18 at 14:19

Missing msdropdown plugins

msdropdown and css

Include this code befor you call msdropdown

<link rel="stylesheet" href="http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/css/msdropdown/dd.css">
<script src="http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/js/msdropdown/jquery.dd.min.js"></script>

in jsFiddle these external links are included too on the left panel here is snapshot .

enter image description here

Also read What is the difference between $(window).load and $(document).ready?

Update after OP's comment

You are placing msdropdown plugin before you have included jQuery file .

msdropdown is a jQuery plugin so jQuery file must be added before the plugin script is called.

So it should look like this:

put your scripts at bottom of the page and css at the top to improve page load speed.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/js/msdropdown/jquery.dd.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("body select").msDropDown();
    });
</script>

I hadn't realised there were missing external links! Thanks for that - I've made those changes to the code and have also gone with putting it in the $(document).ready after reading the article. I've double checked the external link urls and they seem to be fine but it's still not working. Could you offer any more help please? — user2840467, Oct 02 '14 at 06:24
Thanks ever so much Tushar! That's done it. I'm new at jQuery and it's these basics that I find frustrating. I'll look back at this and realise how much of a newb I was :) — user2840467, Oct 03 '14 at 08:49
@user2840467 Welcome, everybody is newb at some point of time :) — Tushar Gupta - curioustushar, Oct 03 '14 at 09:08

making dropdown menu with jQuery

1 Answers1