By satvision83 on

I've seen many websites with dropping menu by clicking on toggle button. On this site: (...)
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?

⋅ Categories: Drupal 7.x

Comments

satvision83’s picture

satvision83 commented

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?

satvision83’s picture

satvision83 commented

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. :)

jtibbles’s picture

jtibbles commented

I'm fairly new to Drupal and I noticed there weren't a lot of options for a menu toggle, particularly one that detected and enabled on mobile sizes, so I made my own using jQuery.
Basically what it does is take the code from your menu, and once a certain screen size is detected it hides the menu and recreates it within a new div in a specified content area. Once the screen is resized back to a larger area it reverses the process. Nice and simple and not too weighty. Works perfectly...

The javascript...

var ismobile = false; //only perform action if not already performed

var menucontent = $('#block-system-main-menu').find('.menu').html(); //take the html from the menu you wish to recreate

var desired_area = $('#region-content'); //div where I want the menu to be recreated

var mobile_size = 480 //The size I want the screen to be to call this action


function mobmenu(){

    if(!ismobile && $(window).width()<=mobile_size){

      ismobile = true;

      desired_area.html("<div id='mobile-menu'><div id='mobile-menu-toggle'>MENU</div><ul id='mobile-menu-ul'>"+menucontent+"</ul></div>"+$('#region-content').html()); //prepend menu content to top of desired area, encapsulating in specified div name

      menucontent.find('.menu').hide(); //hide original menu

      $('#mobile-menu-ul').hide(); //hide new menu immediately

      $('#mobile-menu-toggle').bind('click', function() {
            toggle();  //on clicking the menu button this will toggle the new menu view on/off
      });
    
   }else if(ismobile && $(window).width()>mobile_size){
      
      ismobile = false;

      $('#mobile-menu-toggle').unbind('click'); //remove bind

      $('#mobile-menu').remove();  //remove new menu div

      menucontent.find('.menu').show(); //show original menu again

   }

   function toggle(){
      
        $('#mobile-menu-ul').slideToggle("fast");

   }
  
}

mobmenu();

$(window).resize(function() {
     mobmenu();
});

...and the css



/*Items for mobile menu*/

#mobile-menu{ margin:5px 10px 10px 10px; }

#mobile-menu-toggle{
  display:block;
  background: #d6dadd;
  padding:10px;
  color:#fff;
  text-align:left;
}

ul {
  list-style-type: none;
  padding:0;
  margin:0;
}

#mobile-menu li{
  padding:0 !important;
  margin: 3px 0 0 0 !important;
  display:block;
  background: #e4e8ea;
}

#mobile-menu li a{
  width:100%;
  display:block;
  padding:5px 10px 5px 10px; 
  margin:0 !important;
  text-align:left;
  
}
rick_p’s picture

rick_p commented

@ satvision83... More than two years after you posted this, I found it, and find it extremely useful. I haven't yet tried it with my menu but I did get some text to show/hide in the content area. Awesome. Many thanks, many moons later.