Replacing The Hover Menu Effect In Mobile Devices
If you have found this article you are probably trying to work out the easiest way to implement some sort of Hover Menu replacement or similar for IOS or other mobile devices.
In this example we are going to go through detection and plugging in the code at it's simplest.
ASP.NET has a built in function to detect mobile devices, and while it may not be 100%, it will certainly help us get a site up and running quickly. To use this we are going to have two MasterPages (one mobile, one desktop), and will style and code them slightly differently, test the example below (from our own mobile site) by clicking on it.
First up, add two MasterPages to your site, for ease of use, lets call them MobileMaster and DesktopMaster. Now lets use the built in code to check for mobile and then set the master sheet appropriately from a web form.
This is done in the Page_PreInit stage.
VB
If Request.Browser.IsMobileDevice = True Then 'Session("Master") = "MobileMaster" Me.MasterPageFile = "/MobileMaster.Master"Else 'Session("Master") = "DesktopMaster" Me .MasterPageFile = "/DesktopMaster.Master"End IfStyle the Desktop version as you would normally, while we can concentrate on the Mobile site coding.
JavaScript
<script type="text/javascript"> function menuClick(menuName) { var clickMenu = document.getElementById(menuName) if (clickMenu.style.display == 'block') { clickMenu.style.display = 'none';} else { clickMenu.style.display = 'block';}}</script>This code is re-useable for multiple menus, we can now the code as per the example above.
HTML
<div id="Menu" style="display: none; text-align: center;"><a href="https://www.facebook.com/Claytabase-Ltd" target="_blank" title="Follow On Facebook" style="height: 32px; width: 32px; margin-left: 4px;"><img src="https://www.claytabase.co.uk/System/Artwork/Social/Facebook.png" alt="Facebook" style="width: 32px; border-radius: 4px;"/></a><a href="https://twitter.com/claytabase" target="_blank" title="Follow On Twitter" style="height: 32px; width: 32px; margin-left: 4px;"><img src="https://www.claytabase.co.uk/System/Artwork/Social/Twitter.png" alt="Twitter" style="height: 32px; border-radius: 4px;"/></a><a href="https://plus.google.com/+ClaytabaseCoUk" target="_blank" title="Follow On Google" style="height: 32px; width: 32px; margin-left: 4px;"><img src="https://www.claytabase.co.uk/System/Artwork/Social/Google.png" alt="Google" style="height: 32px; border-radius: 4px;"/></a><a href="https://www.linkedin.com/company/claytabase-ltd" target="_blank" title="Follow On Linked In" style="height: 32px; width: 32px; margin-left: 4px;"><img src="https://www.claytabase.co.uk/System/Artwork/Social/Linked.png" alt="Linked In" style="height: 32px; border-radius: 4px;"/></a><a href="https://www.claytabase.co.uk/en/RSS" target="_self" title="RSS Feed" style="height: 32px; width: 32px; margin-left: 4px;"><img src="https://www.claytabase.co.uk/System/Artwork/Social/RSSButton.png" alt="RSS" style="height: 32px; border-radius: 4px;"/></a></div><div style="text-align: center; clear: both; width: 120px; margin: auto auto auto auto; clear: both;"><a id="MenuButton" onclick="menuClick('Menu')" style="width: 60px;"><img src="https://www.claytabase.co.uk/System/Artwork/Social/MobileFollow.png" alt="Settings" style="height: 30px; border-radius: 4px;"/><div style="clear: both;">Follow</div></a></div>You only need to set the position of the item to absolute to make it appear as though it is hovering.
Website design by Claytabase
This is a section of code that has been modified from Ousia Content Management System code, one of the quickest and most optimised systems on the market, part of our website design services.
These are available with sites starting at around £500.
