Magic Box does Menus, too

When we built Magic Box, we wanted to create a tool that was both powerful and versatile. And we did! In this age of mobile-friendly design, screen real estate is more important than ever. One way of maximizing space is to have your site's menu be available on demand, via the popular hamburger icon:, the 3 horizontal bar symbol pioneered by Xerox, in the 1970s and resurrected, with a vengeance, by Apple , as part of the iPhone 3 interface. The rest, as they say, is history. More and more Web sites are eschewing traditional menus, for a stay-out-of-the-way-until-needed design. The hamburger icon has made it a very popular and efficient method for deploying a menu.

Magic Box makes it easy

With Magic Box, it becomes easy and automated to deploy an on-demand menu. For this example, we used Drop Menu Magic (which comes free with our Affinity, Synergy, Allegro, and Vanilla page building tools) to make an on-demand menu of exceptional beauty... and functionality.

How'd we do it?

Oh, it was so easy. Let's review it by the numbers...

1. Create a Magic Box with a single content slide.

It's easier to establish an insertion point in Code View, so switch to Code View and locate the closing </body> tag. It will be the next to last line in your code. Create a new line above the tag and place your cursor inside.

Open the Magic Box interface and create a single content slide Magic Box, configured as follows:

Click OK to create the MBX instance on your page.

Switch to Design View and you will see a placeholder for your content slide:

<< MBX Content Slide 2 - Add Your Content Here>>

2. Insert a DMM menu inside the MBX content slide

Backspace over the placeholder content in your content slide, making sure to remove each character (including the greater than and less than symbols).

After backspacing over the last character, leave your cursor in place and open the DMM menu interface. Configure your menu items, and make sure to select Vertical Accordion style. Here are the settings we used:

We used the Synergy style theme. If you do not have access to that theme, choose any of the ones available to you.

Click OK to create the menu.

3. Add your hamburger icon

The DMM menu system comes with a hamburger, making this task easy. Switch back to Code View and locate your closing </body> tag again.

Create a new line, just above the tag and insert a new DIV, assigning it the ID hamburger:

<div id="hamburger"> </div>

Place your cursor between the opening and closing DIV tags and insert the hamburger icon:

Choose Insert > Image and browse to the p7dmm/img folder. Your code will now look like this:

<div id="hamburger"><a href="#" class="p7mbx-trigger mbx-external" data-mbx="1" data-mbx-slide="1"><img src="p7dmm/img/toggle-icon.png" width="20" height="16" alt=""/></a></div>

4. Make the hamburger a trigger for your Magic Box

Switch to Design View and click the hamburger icon to select it.

On your Insert Bar or Panel, click the PVII Magic Box Trigger icon . Your settings should match the screen capture below:

5. Tweak the MBX CSS

The final step involves a bit of CSS fine-tuning to make your menu look perfect. Add the following style rules to either your MBX or DMM style sheet. Place the rules at the bottom of the style sheet, just before the beginning of the media queries.

#hamburger {
position: fixed;
top: 40px;
right: 10px;
z-index: 100;
background-color: #333;
padding: 0px 6px 6px 6px;
border-radius: 4px;
}

This rule defines the hamburger icon's position. We want it to be fixed, so users always have access to it.

.p7MBX-01 .mbx-slide {
background-color: transparent !important;
border: none !important;
}

We need to make sure the slide container is transparent and that it has no border.

.p7MBX-01 .mbx-slide .p7mbx-content-slide {
padding: 10px 20px !important;
background-color: #000 !important;
border-radius: 8px !important;
}

We fine-tune padding inside the slide, lock in a black bacground (which you may want to edit if you use another theme), and set a border-radius to round the outer edges.

.p7MBX-01 .p7mbx-ex {
top: -10px !important;
right: -10px !important;
}

We reposotion the close icon inside the content slide to move it out of the way of the menu.

.p7DMM08.dmm-vertical .p7DMM-toolbar {
display: none !important;
}

Since there is no need to convert this menu for phones, we make sure the toolbar (which carries the menu's hamburger) is always hidden.

That's it!