Cany find the bug in my Slimmenu / JQuery code

I am modifying my site to change the Spry menu bar because it does not work with tablets touch screens.

i have made a test page using SlimMenu which I downloaded from

It looks as though the JQuery is not working.  In the instructions at the link above it mentions :
"Add jquery.slimmenu.js after jQuery plugin and before closing body tag."  I dont know what a jQuery plugin is.  Maybe this is the problem.  There is also an error message displayed:
$('#navigation').slimmenu( { resizeWidth: '800', collapserTitle: 'Main Menu', animSpeed: 'medium', easingEffect: null, indentChildren: false, childrenIndenter: ' ' })

Help will be much appreciated.

You can view the page at:
Brian SowterTechnical DirectorAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Duy PhamFreelance IT ConsultantCommented:
jQuery is simply an advanced javascript library. You can download jQuery from here: and add jQuery js file to your project page (like slimmenu.js).
Or you can directly link to jQuery library using Google CDN:
Brian SowterTechnical DirectorAuthor Commented:
Hi  Dui
I downloaded jquery.js and put it in a folder called slimmenu.  I also put in a two script lines;  

<script src="slimmenu/jquery.js"></script>
<script src="slimmenu/jquery.slimmenu.js"></script>

 I still get the problem that the menu is in uncolapsed form though the links do work.  I also get an error message at the very bottom of the page
$('#navigation').slimmenu( { resizeWidth: '800', collapserTitle: 'Main Menu', animSpeed: 'medium', easingEffect: null, indentChildren: false, childrenIndenter: ' ' });

I must be close but I stil cant find the problem.  The link to the offending page is

Please help!
Duy PhamFreelance IT ConsultantCommented:
Your slimMenu has several issues:
1. HTML Markups are not well-formed, missing closing tags for quite number of elements. You'd better check your website in general at:
2. Don't wrap sub menu level inside <div align="center"> tag, if you want your menu texts to be centralized, using css such as .slimmenu li { text-align: center; } instead (like inside my example in jsfiddle below). However I don't recommend centralize the menu item texts, else menu will look silly in mobile browsers.
3. Your initialization code $('#navigation').slimmenu(...); must be wrapped inside a <script> tag. And you'd better put initialization code in DOM ready event handler (e.g.: $(function() { // initialization code });) like in example here:

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Brian SowterTechnical DirectorAuthor Commented:
I am a 75 year old guy and I would never have fixed this problem without this help.  It is really encouraging for me.
Thanks again
Duy PhamFreelance IT ConsultantCommented:
You're welcome :). And actually you (and one of my 70-year-old colleagues) are encouraging me in continuous learning.

Best regards,
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.