Menu System
Drop Down Navbar
The drop down navbar on this mini site is from our free navbar collection. It's actually the same menu sytem we use on our main website.
The navbar kits which we provide demos for can be downloaded in zip packages and then added by plugging the style sheet into the head section and copying the HTML from the demo page which is included.
The kits also include the lmenu replacement page and the html and css for using it. We used the lmenu system on our main website until just recently when we began experimenting with the Toggle Menu we use in this template kit.
Examples
The replacement menu that kicks in for smaller devices uses a very simple javascript snippet that toggles an iframe in and out of display mode.
<div class="iframemenu">
<p><button id="toggleButton">Open - Close Menu</button></p>
</div>
<div id="menu-display" style="display:none">
<iframe id="myiframe" src="lmenu.html" width="320" height="600">
</iframe>
</div>
<script>
document.getElementById ('toggleButton') .addEventListener('click', function() {
const element = document.getElementById ('menu-display');
element.style.display = (element.style.display === 'none' || element.style.display === '') ? 'block' : 'none';
});
</script>
Do Not Use this code! Use the javascript from the source code. Breaks were added here for clarity.