When clicked, a simple Icon reveals its vertical menu. Useful for showing additional menus anywhere on your site. It can be added to your sidebar, body and even on your navigation area (basically anywhere).
The code is simple. It doesn't uses much style except for the color.
FILES NEEDED
How to use these files? Click Here!
HEADER CODE
Where to place these codes? Click Here!
<style>
.wcustomhtml {
overflow-y: visible !important;
overflow-x: visible !important;
}
</style>
<link rel="stylesheet" href="http://mwtdatabase.weebly.com/files/theme/3dflme.css" type="text/css" />
.wcustomhtml {
overflow-y: visible !important;
overflow-x: visible !important;
}
</style>
<link rel="stylesheet" href="http://mwtdatabase.weebly.com/files/theme/3dflme.css" type="text/css" />
Note:
Red text - Change with your website address.
BODY CODE
Where to place these codes? Click Here!
<div class="nav">
<input type="checkbox" id="togglebox" />
<label for="togglebox" class="mainlabel" id="mainlabel_ie">Site Menu</label>
<div class="menuflip" id="menuflip_ie">
<h4>Site Navigation</h4>
<ul>
<li><a href="http://www.myweeblytricks.com/">Home</a></li>
<li><a href="http://www.myweeblytricks.com/search/label/Site%20Modification?max-results=6">Site Modification</a></li>
<li><a href="http://www.myweeblytricks.com/search/label/Image%20Effects?max-results=6">Image Effects</a></li>
<li><a href="http://www.myweeblytricks.com/search/label/Scrollers?max-results=6">Scrollers</a></li>
<li><a href="http://www.myweeblytricks.com/search/label/Widgets?max-results=6">Widgets</a></li>
<li><a href="http://myweeblytricksdemo2.weebly.com/mwt-forum-support-and-services.html">Forum</a></li>
</ul>
<label for="togglebox" class="close">x</label>
</div>
</div>
<input type="checkbox" id="togglebox" />
<label for="togglebox" class="mainlabel" id="mainlabel_ie">Site Menu</label>
<div class="menuflip" id="menuflip_ie">
<h4>Site Navigation</h4>
<ul>
<li><a href="http://www.myweeblytricks.com/">Home</a></li>
<li><a href="http://www.myweeblytricks.com/search/label/Site%20Modification?max-results=6">Site Modification</a></li>
<li><a href="http://www.myweeblytricks.com/search/label/Image%20Effects?max-results=6">Image Effects</a></li>
<li><a href="http://www.myweeblytricks.com/search/label/Scrollers?max-results=6">Scrollers</a></li>
<li><a href="http://www.myweeblytricks.com/search/label/Widgets?max-results=6">Widgets</a></li>
<li><a href="http://myweeblytricksdemo2.weebly.com/mwt-forum-support-and-services.html">Forum</a></li>
</ul>
<label for="togglebox" class="close">x</label>
</div>
</div>
Notes:
Yellow text - Your menu title.
Green text - Your menu link.
CONCLUSION
This navigation menu is almost similar to Responsive Toggle Menu, you may check it too!. These tricks greatly enhance your site's flow but avoid too much menus.
Subscribe to get free updates, support and services.
0 comments: