Drop-down menu is not working-Collection of common programming errors
I have zurb’s foundation implemented in Joomla.
I’ve done everything as required by this page as demonstrated by first example: http://foundation.zurb.com/docs/components/dropdown.html
And I’ve also added this just before body tag
$(document).foundation();
It’s still NOT working.
Wondering why …
EDIT
Let me know what other information I could provide in order to troubleshoot this. I’m honestly at loss at why it’s not working.
/EDIT
Here are the files that shows in in source code, wondering if it’s caused by any form of conflict?
window.addEvent('load', function() {
new JCaption('img.caption');
});
$(document).ready(function(){
$( ".button-group li a" ).addClass( "button" );
$( ".readmore").addClass("small button");
$( ".menubottom-menu li").addClass("inline-list left");
$( ".programs" ).attr( 'data-dropdown','drop1' );
$( ".small").addClass("f-dropdown");
$( ".small").attr('id', 'drop1');
$( ".f-dropdown").attr('data-dropdown-content', '');
});
EDIT 2
Am posting results of javascript’s console …
Uncaught TypeError: Cannot call method ‘append’ of null foundation.min.js:13
Uncaught ReferenceError: Foundation is not defined foundation.dropdown.js:183
Uncaught TypeError: Object [object Object] has no method ‘foundation’ (index):253
Also, just in case there’s any misunderstanding of converting from $() to jQuery():
jQuery(document).ready(function(){
jQuery( ".button-group li a" ).addClass( "button" );
jQuery( ".readmore").addClass("small button");
jQuery( ".menubottom-menu li").addClass("inline-list left");
jQuery( ".programs" ).attr( 'data-dropdown','drop1' );
jQuery( ".small").addClass("f-dropdown");
jQuery( ".small").attr('id', 'drop1');
jQuery( ".f-dropdown").attr('data-dropdown-content', '');
jQuery( "li .item-107 a").removeClass("button");
});