CreateaFreeWebsite With Responsive Web Design

Menu

Menu System

Drop Down Navbar

our roadour roadThe 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.

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.


@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;}
}

HTML Code


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

 

CSS


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: #cc9900;
}

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