Dropdown menu where first level dont link to page ?

[charled]

Hello,
I have this structure :

• Page A
  
  • Page A1
  • Page A2
  • ...
  
  
• Page B
  
  • Page B1
  • Page B2
  • ...
  
  

My problem : A and B shouldn't redirect to pages. They must only be "buttons" to drop down A1, A2... or B1, B2...

How can i do it with Contao ?

Thanks for help.

[Andreas]

1. By customizing your nav_ template.

2. By handling (removing) the click events on first level <a>s with JavaScript. If you use JS for your menu anyway, you simply can remove the default click event with JS and thus don't need a custom template which you have to review in future updates.

edit: Maybe this way

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

    var firstLevelLinks = $('.mainnav > ul > li > a');

    // do this on first level click
    firstLevelLinks.on('click', function(ev) {
      ev.preventDefault();
      // do other stuff
    });

  });
})(jQuery);
</script> 

[charled]

1. By customizing your nav_ template.

Thnaks Andreas. I would like a css only solution. Which way do I customize my nav_template ?

[Andreas]

1. In BE create a copy of template nav_default.
2. Rename it to nav_no-first-level-links. (nav_ is mandatory, the rest is free)
3. In your FE module type navigation choose this template.
4. Edit this template.

Change this line

    // old
    <?php if ($item['isActive']): ?>
    // new
    <?php if ($item['isActive'] || $this->level == 'level_1'): ?>

[charled]

ok. But it déactivates all level_1 menu. in fact, I need to deactivate only those who have submenus (subitems).

[charled]

The solution is to use contao-folder-page extension (and apply nav_folder template to the menu module).

[Andreas]

It is better not to depend on extensions.

New template solution:

    // old
    <?php if ($item['isActive']): ?>
    // new
    <?php if ($item['isActive'] || ($this->level == 'level_1' && $item['subitems'])): ?>