Friday, 19 January 2018

UIKit Collapsible and Toggle Dropdown Menu On Mobile

I rebuilt my professional website from scratch (no template) using the latest UIKit. It got a performance grade of "A 98" and load time of 1.17 seconds when tested on pingdom tools. One of the things I needed to do was make my navbar menu collapse to a toggle dropdown menu on smaller screens. UIKit defines smaller screens as less than 640 px. Below is how I went about getting this done.

I looked at the documentation and the "open test" examples and copied the toggle drop down code from there. This gave me a dropdown with a margin and drop shadow and white background. I needed to change this. I looked in the UIKit css for all references of "uk-navbar-dropdown" and found "uk-navbar-dropdown-dropbar" that removes the margin and shadow. To get a background that matched my navbar I used uk-background-muted.

For the menu to collapse on mobile I had to create a flat menu and a toggle menu and specify visibility for both. For the flat menu I used class="uk-navbar-nav uk-visible@s" and for the toggle menu I used class="uk-hidden@s". Then I wanted to align the menu items to the right using uk-text-right. You can view source on my website to get the source code.

Any questions or comments just message me. It is not that complicated but I did not find this documented exactly anywhere and from my Google searches persons have been asking about this functionality (like here).

No comments: