Ersetzen des Hover-Menüeffekts in Mobilgeräten
Wenn Sie diesen Artikel gefunden haben, versuchen Sie wahrscheinlich, den einfachsten Weg zu finden, um eine Art Hover-Menü-Ersatz oder ähnliches für IOS oder andere mobile Geräte zu implementieren.
In diesem Beispiel werden wir die Erkennung und das Einfügen des Codes so einfach wie möglich durchführen.
ASP.NET hat eine eingebaute Funktion zur Erkennung mobiler Geräte, und obwohl es vielleicht nicht 100 % ist, wird es uns sicherlich dabei helfen, eine Website schnell zum Laufen zu bringen. Um dies zu verwenden, haben wir zwei MasterPages (eine mobile, eine Desktop) und werden sie etwas anders gestalten und codieren. Testen Sie das Beispiel unten (von unserer eigenen mobilen Website), indem Sie darauf klicken.
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 IfGestalten Sie die Desktop-Version wie gewohnt, während wir uns auf die Codierung der mobilen Website konzentrieren können.
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>Dieser Code ist für mehrere Menüs wiederverwendbar, wir können jetzt den Code wie im obigen Beispiel verwenden.
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>Sie müssen nur die Position des Elements auf absolut setzen, damit es so aussieht, als ob es schwebt.
Website-Design von Claytabase
Dies ist ein Codeabschnitt, der aus dem Code des Ousia Content Management System modifiziert wurde, einem der schnellsten und am besten optimierten Systeme auf dem Markt, Teil unserer Website-Design-Services.
Diese sind mit Websites ab etwa 500 £ erhältlich.
