Menu Close

New mobile menu solution

Today I changed the menu solution for small screens, which thus mainly deals with smartphones and tablets.

My aim with this change has been to allow easy access for small screen users into every page of this site without scrolling a really long full list of pages. At the same time I’ve kept menu colours and functionality as close to previous solutions as possible.

If you have a small screen (smartphone or tablet) you don’t see any menu while first accessing this site, only a menu button like this on the site header menu-2px. The full menu will slide into view from the left of the screen if you click this button. You can acces any page simply clicking the corresponding menu row. If you don’t want to select another page, you can close the menu with a click into the menu button on top of the menu or button “X” in the header.

If a menu item has submenus you will notice a small triangle pointing up or down at the end of the item row. Click this triangle to open or close the corresponding submenu and select the page you were looking for.

For anyone interested about the technical solution I may tell this works basically using a WordPress plugin called “Responsive Menu”. It has numerous settings which allow e.g. colour settings that correspond my site colours. Additionally my self-made theme overrides certain style settings (e.g. height and paddings of the menu items) using CSS.

I would be pleased to have comments and questions regarding this solution, especially from a user or developer perspective!

Cheers, Vesa

Posted in News, Wordpress topics @en

Related Posts