[shaun2k]

Hi,

The “Venus Clinic“, a Publii website, has a Mega-menu for the menu item “TREATMENTS”.
I find that very useful to show a wide range of products/services at once.

How does one go about implementing this?

Thanks

[publii-slpa]

This is not something that is done natively, however, if you know HTML and Handlebars (extremely simple), you can code this into your template. It would take some experimentation, but could be done.

BTW- I like these type of menus, it would be nice if in the menu option, it could be defined. A possible feature request.

FYI- Publii is a blogging software, though lately, it is become quite popular for creating websites. The reason is simple – Publii is awesome! Publii is moving in that direction. Keep in mind that this is a small bit of a quantum shift in the application design and purpose. Publii is moving rapidly toward additional functionality geared toward creating a website as opposed to a blog whose requirements are simpler.

Cudos to the Publii team for all their hard work! No one is in their class.

Cheers!!

[candidexmedia]

Hey Shaun!

There’s no way of doing this out-of-the-box at the moment, but it’s possible. I’d recommend a few things:

1) If you don’t already: learn more about HTML, CSS flexbox, CSS grids, and browser Inspector tools.

I’d recommend checking out FreeCodeCamp, Mimo, and SuperHi’s Plan Design Code courses. Give yourself a month, pratice every day, and you’ll get the hang of things eventually. You can even learn by inspecting the webpage you sent. From what I can see, their menu makes use of CSS grid and special class names.

 

2) Once you get the hang of things, play around with Publii’s submenu functionality

(See image) Adding menus and submenus will allow you to access new class names. Each publii theme has a different way of displaying submenus.

 

3) Finally: Use CSS classes to create the columns and change the appearance.

This is where knowledge of HTML and CSS comes in handy. Publii allows you to add custom class names for each menu item. Using these class names, you can push customizations further via Custom CSS or by modifying main.css.

This is what I did to have two different looks for the main menu items of my site diasporamemory.com

[Author]

Posts