Contao: Teasers in dropdown navigation

Question

I need to make a dropdown navigation, where for every parent navigation item, in the dropdown area I show the child pages + 3 images with a title linked to other pages.

I would need something like the 'Custom Navigation' module with an option to select images (or add a custom class, and get the image from the page).

Is there an extension which I could use for this? If not, would be easier/faster to change/extend a core module, or should I create a new one?

Thanks!

EXAMPLE ('Kollektion' menu-item hovered. The gray area is the submenu container)

Answer 1

I don't know of an extension that would allow including an image to a specific link in a navigation menu. But if you are willing to do it with CSS styles, here's how I would do it:

Any page can have multiple custom CSS classes and they do apply to the navigation (unless the navigation template has been changed in such a way that they don't anymore). The place where you enter these CSS classes is at the bottom of the Edit page view, under expert settings. Add any CSS classes you want and then edit the style sheet to make them look right.

If the three pages are not supposed to be subpages for the current page, but lead somewhere else, you can use the "Internal redirect" page type for them.

The CSS could be something like this in addition to your regular styling:

.level_2 li {
    float: left;
    clear: left; /* this is to stack them on top of one another*/
}

.level_2 li.special_class {
    display: inline-block;
    vertical-align: top;
}

.level_2 li.special_class:before {
    display: block;
    content: '';
    width: /* the intended image width */
    height: /* the intended image height */
}

.level_2 li.special_class.foo {
    background-image: url('foo');
}

.level_2 li.special_class.bar {
    background-image: url('bar');
}

...

Please remember that this isn't supposed to be a complete solution, but rather a principle upon which you can build your own. You may want to add backwards compatibility to older browsers (or not), etc.

Answer 2

I think there is an extension to allow you do that. check this link Navigation with images

and may be this one also Navigations-Bild

Either of this should give you what you want but with a little styling