0

I'm looking to implement something like the Accordion Menu module, but unfortunately that module has issues with Menu Block and other modules... so what's the best way to implement the jQuery Accordion menu with primary and secondary links, from a theming perspective? Should be a simple question for a themer, but I haven't found any specific tutorials that can take me step by step.

Using Drupal 7, Adaptive Theme.

update: thanks for all the responses. I'll look at all of the suggestions and provide another update :-)


Madam Adam's solution: not working correctly yet

Only got it to work with this modification; added to js file

(function ($) {
//add drupal 7 code
Drupal.behaviors.myfunction = {
    attach: function(context, settings) {
//end drupal calls

//some jquery goodness here...
$( "#accordion" ).accordion( {
  header: "li",
  collapsible: true
} );

}}})
(jQuery);
  • Whats the issue you are facing with accordion? – Ashish T Sep 16 '14 at 3:33
1

You have to include the accordion library by adding this line to your theme's template.php:

drupal_add_library('system', 'ui.accordion');

Then you trigger the accordion by adding this to yout template.php or an external js-file:

$( "#menu-container" ).accordion( {
  header: "li",
  collapsible: true
} );
| improve this answer | |
  • ok so I finally got some type of accordion from jQuery using the following code: – droopie Sep 16 '14 at 19:32
  • added code and more info in post. Right now there is only one header and all other parent links are within the first parent link. Lets say I have 3 sibling links 1, 2, 3. Links 2 and 3 get nested within Link 1. Maybe something wrong with my ID? – droopie Sep 16 '14 at 19:41
1

You can write a simple jQuery script to create accordion like menus

<script>
    jQuery(document).ready(function(){

    jQuery('li.expanded').mouseover(function(){

     jQuery(this).find('ul').show(200); 
    });
     jQuery('li.expanded').mouseout(function(){

     jQuery(this).find('ul').hide(); 
    })

    })
    </script>
<style>


 #nav > li{position:relative}
   #nav  li  ul.sf-menu{
    position:absolute;
    height:200px;
    width:150px
    }
    </style>

enter image description here with little adjustment in css. Check classes in the image and how it is used in jQuery

| improve this answer | |
  • wasn't able to get this to work at all. – droopie Sep 16 '14 at 20:23
  • I have updated it – Ashish T Sep 18 '14 at 18:54
0

I found flexnav to be extremely useful. There is a module in development that makes most of the installation very easy, can't recommend it enough.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.