Modal Menu

Modal Menu

This modal can contain whatever you want. Menu items, images, pictures, text, anything.

This demo has a grid with three columns but the options are endless.

Menu 1

Layout 1
Layout 2
Layout 3

Menu 2

Reduce Browser Width Below 960px To See Modal Menu

Reduce Browser Width Below 640px To See mobile Menu

Modal Menu

Modal Menu is an elegant and unique responsive menu built for UIkit3 for Rapidweaver, using only UIkit3 stacks and some custom CSS.

It's completely customisable and 100% scalable.

Tablet AND smartphone menu options

Modal Menu comes with a selection of "mobile" menu options. You have can the model option on smartphone and tablet, or the modal on tablet and an Off Canvas menu on smartphone. Or, the modal on all screen sizes!

The sample layouts use mix and match the various options, so just copy your preferred design.

Key Features

  • "Pop-up" modal menu triggered at any UIkit3 Breakpoint.
  • Customisable modal open & close buttons that blend seamlessly into each other.
  • Background overlay that can be set to any colour and any opacity.
  • Open modal area that can contain any content or stack. `demo'd with the Grid & Nav stacks.
  • Custom CSS to fine-tune site titles and headings alignment.
  • Custom CSS to ensure scrolling modals on small screens.

About This Demo

We have purposely kept this Demo of Modal Menu simple, so you can see how everything works. Once your comfortable with Modal Menu you can customise to your heart's content!

Inside the demo, we have added easy to follow instructions to help you turn Modal Menu into a Partial, External or Template.

Heading

Alternative Layouts

In this demo we've included three layout options spread over three pages, but don't be heemed in by our creativity: Use one as your basis and let your imagination take over!

Thanks to the modular nature of UIkit3 stacks the options are limitless.