Toggle menu like this?

Posted by satvision83 on January 28, 2013 at 8:12am

I've seen many websites with dropping menu by clicking on toggle button. On this site: (site deleted)
For an example:
On the top of the screen there is a toggle button "Product families" and when a user clicks on that button it comes a very nice dropping menu with features. Please anybody help how can I create such as this kind of menu on Drupal website?

Comments

I've tried this tutorial to

Posted by satvision83 on January 28, 2013 at 2:49pm

I've tried this tutorial to create toggle menu.

"This will work on a theme.info or a subtheme.info
So, if your theme or subtheme folder is:
/var/www/html/drupal/themes/mytheme

make a directory (if not already) called 'js' so we have:
/var/www/html/drupal/themes/myTheme/js

Add the javascript file to that directory:
/var/www/html/drupal/themes/myTheme/js/myscript.js

Then modify the file:
myTheme.info

by adding a new line:
scripts[] = js/myscript.js

Clear the Cache by going to "Configuration" / "Performance" / "Clear All Caches" (version 7)
Now reload your page and it should work."

As for a test I've tried with this code: http://codepen.io/anon/pen/jesag ( on ctrl 3 from
right I've choosed "latest version of Jquery" and it works well, but I've difficulties on Drupal website.

I've put the html code in page.tpl.php on my theme, CSS file in style.css, as for a java script I've created a new folder (js) in my theme. In the folder I've created a file named toggle-menu.js and I've put the javascript code inside.
In .info file on my theme I've put scripts[] = js/toggle-menu.js and then I've cleared all the caches. As a result the html and css code is ok, but its not toggling, so the javascript its not working. Please anyone explain where did I go wrong?

I've found the answer for

Posted by satvision83 on January 30, 2013 at 8:15am

I've found the answer for this. For an example the jquery code is like this:

jQuery(document).ready(function() {
jQuery(".toggle-button").next('hidden-object').hide();
jQuery(".toggle-button").click(function() {
$('.active').not(this).toggleClass('active').next(".hidden-object").slideToggle(300);
$(this).toggleClass('active').next().slideToggle("slow");

});
});

Drupal won't recognized it, so it should be like this:

( function($) {

jQuery(document).ready(function() {
jQuery(".toggle-button").next('.hidden-object').hide();
jQuery(".toggle-button").click(function() {
$('.active').not(this).toggleClass('active').next("hidden-object").slideToggle(300);
$(this).toggleClass('active').next().slideToggle("slow");

});
});

})( jQuery );

The code has to be wrapped with
( function($) {
and
})( jQuery );

I hope this will be useful to someone. :)