Menu System

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.

Toggle Menu

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.

The replacement menu is activated by a Media Query at the point where the drop down menu list items run out of viewing space or when columns on the page become too narrow.

You have the option of using the original lmenu system if you desire.

Reverse the display options in the bottom of the navbar style sheet.

If you use the old lmenu system remember to turn on the back button in the lmenu.css style sheet.

@media (max-width: 850px) {
/*Hide Drop Down Menu*/
nav.navigate7  {display:none}

/*Show or Hide lmenu*/
div.lmenu {display: none }

/*Show or Hide Toggle Button */

div.main div.iframemenu {display: block;}
}

<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>

div.main div.iframemenu p {
padding : 0 0;
margin: 0 0
}

#myiframe {
float:left;
clear:none;
width: 320px;
height: 700px; 
margin: 0 0;
display:block;
position:absolute;
z-index: 7;
border-radius: 12px;
 box-shadow: 1px 2px 4px #000;
}


#toggleButton {
width:195px;
color: #fff;
text-shadow: 1px 1px 1px #000;
font-weight: bold;
font-size: 18px;
padding: 5px 0;
background: #0066cc;
}

div.main div.iframemenu {display:none} /*Hide Toggle Button*/