Showing the Pop-up Lightbox Menu from a Custom/Static Button

Warning!

This is an advanced topic and should be used by a web developer familiar with modifying HTML and CSS.

Introduction

If you're using our "floating button" widget, the default behavior is to show a button in one corner of your site. When the button is clicked, the ordering menu pops up for customers to place orders.

You can view an example of this at our demo site, http://demo.opendining.net/

You may also want to configure other links and buttons to show the menu. For example, if you click the "View Full Menu" link on the demo slider, it will also trigger the popup/lightbox menu.

You must have the floating button installed first.

Configuring a Custom Lightbox Trigger

Step 1: Create your link

Create a normal link or button element that appears the way you want. Example code for a link:

  <a href="#">Order Online!</a>

Step 2: Add show-menu Class

The custom "show-menu" CSS class is used to trigger the lightbox. Once you add this class to your element, it will be automatically detected by our widget and trigger the lightbox. For our example link above, this would look like:

  <a href="#" class="show-menu">Order Online!</a>

Step 3: Optionally, hide the corner button

With the new button in place, you may wish to hide the floating corner button. On the order button configuration page, under Order Now Button Customization, check the Hide Button checkbox and save settings.