Full screen overlay menus are a way to liven up navigating the website and create more engagement with the user. They also tend to be more visually pleasing. There are 5 animation options to choose from with this menu: Left, Right, Up, Down and Fade. More information on this below.
Files to have linked in the <head> section of your site (designers):
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link type="text/css" rel="stylesheet" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
Also, download and add these to the <head> section.
Setting It Up
Add the hamburger menu code wherever you would like on your site. You may need to edit the CSS a bit to get it positioned the way you want.
<div id="menu-button" class="closed">
<a href="#" class="menu-link">
<span class="hamburger-icon">
<span class="hamburger-bar hamburger-bar-1"></span>
<span class="hamburger-bar hamburger-bar-2"></span>
<span class="hamburger-bar hamburger-bar-3"></span>
</span>
</a>
</div>
Next you want to add the #menu-overlay div to your HTML. (Developers, it can go in either the theme or template.)
This div is where you specify the menu animation.
- fxLeft - Menu slides in from the left.
- fxRight - Menu slides in from the right
- fxUp - Menu slides up from the bottom
- fxDown - Menu slides down from the top
- fxFade - Menu fades in.
- If you don't put a class on the #menu-overlay div, it defaults to the fade animation.
Developers
<div id="menu-overlay" class="hidden fxDown">
<nav id="primary-navigation"></nav>
<div id="menu-bg-text">Menu</div>
</div>
Change the bolded class above to specify the animation effect you'd like.
The jQuery in overlaymenu.js clones the #primaryNav menu in the theme and appends it to the #primary-navigation div in order to manipulate it without clashing with Presence. Make sure the ID names match what is here or it won't work properly.
The #menu-bg-text div holds the large text "Menu" that is in the background. If you do not want this text simply comment out or remove this div.
*Make sure "mMenu" is set to false in the #primaryNav pageset ON ALL THEMES. If this is set to true then the overlay menu will show on desktop but NOT on phones.
Designers
The only class you should change is the fxDown class. Use whichever animation you'd like (fxDown, fxUp, fxLeft, fxRight, fxFade). And feel free to add and remove LIs to make the menu structure be as you need it.
The #menu-bg-text div holds the large text "Menu" that is in the background. If you do not want this text simply comment out or remove this div.
<div id="menu-overlay" class="hidden fxDown">
<nav id="primary-navigation">
<div class="container clearfix">
<ul>
<li><a href="#" class="rmRootLink"><span>Home</span></a></li>
<li>
<a href="#" class="rmRootLink"><span>Office</span></a>
<div class="rmSlide">
<ul>
<li><a href="#"><span>About Our Doctor</span></a></li>
<li><a href="#"><span>Our Staff</span></a></li>
<li><a href="#"><span>Office Policies</span></a></li>
<li><a href="#"><span>Financial</span></a></li>
<li><a href="#"><span>Map & Directions</span></a></li>
<li><a href="#"><span>Appointment Request</span></a></li>
</ul>
</div>
</li>
<li><a href="#" class="rmRootLink"><span>Patient</span></a>
<div class="rmSlide">
<ul>
<li><a href="#"><span>First Visit</span></a></li>
<li><a href="#"><span>FAQ</span></a></li>
<li><a href="#"><span>Patient Forms</span></a></li>
<li><a href="#"><span>Common Problems</span></a></li>
<li><a href="#"><span>Emergencies</span></a></li>
<li><a href="#"><span>Oral Hygiene</span></a></li>
<li><a href="#"><span>Food to Avoid</span></a></li>
</ul>
</div>
</li>
<li><a href="#" class="rmRootLink"><span>Treatment</span></a>
<div class="rmSlide">
<ul>
<li><a href="#"><span>Early Treatment</span></a></li>
<li><a href="#"><span>Adolescent Treatment</span></a></li>
<li><a href="#"><span>Adult Treatment</span></a></li>
<li>
<a href="#"><span>Types of Braces</span></a></li>
<li><a href="#"><span>Retention</span></a></li>
</ul>
</div>
</li>
<li><a href="#" class="rmRootLink"><span>Miscellaneous</span></a>
<div class="rmSlide">
<ul>
<li><a href="#"><span>Related Links</span></a></li>
<li><a href="#"><span>Glossary</span></a></li>
</ul>
</div>
</li>
<li><a href="#" class="rmRootLink"><span>Contact Us</span></a>
</li>
</ul>
</div>
</nav>
<div id="menu-bg-text">Menu</div>
</div>