मोबाइल उपकरणों में होवर मेनू प्रभाव को बदलना

जावास्क्रिप्ट का उपयोग करके मोबाइल उपकरणों में होवर मेनू प्रभाव को बदलना

यदि आपको यह लेख मिल गया है तो आप शायद आईओएस या अन्य मोबाइल उपकरणों के लिए किसी प्रकार के होवर मेनू प्रतिस्थापन या समान को लागू करने का सबसे आसान तरीका निकालने का प्रयास कर रहे हैं।

इस उदाहरण में हम सबसे सरल कोड में डिटेक्शन और प्लगिंग के माध्यम से जाने वाले हैं।

ASP.NET में मोबाइल उपकरणों का पता लगाने के लिए एक अंतर्निहित कार्य है, और हालांकि यह 100% नहीं हो सकता है, यह निश्चित रूप से हमें एक साइट को जल्दी से चलाने और चलाने में मदद करेगा। इसका उपयोग करने के लिए हमारे पास दो मास्टरपेज (एक मोबाइल, एक डेस्कटॉप) होंगे, और उन्हें थोड़ा अलग तरीके से स्टाइल और कोड करेंगे, नीचे दिए गए उदाहरण का परीक्षण करें (हमारी अपनी मोबाइल साइट से) उस पर क्लिक करके।

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 If

डेस्कटॉप संस्करण को सामान्य रूप से स्टाइल करें, जबकि हम मोबाइल साइट कोडिंग पर ध्यान केंद्रित कर सकते हैं।

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>

यह कोड एकाधिक मेनू के लिए पुन: उपयोग योग्य है, अब हम उपरोक्त उदाहरण के अनुसार कोड कर सकते हैं।

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>

आपको केवल आइटम की स्थिति को पूर्ण पर सेट करने की आवश्यकता है ताकि यह प्रकट हो सके कि यह मँडरा रहा है।

क्लेटाबेस द्वारा वेबसाइट डिजाइन

यह कोड का एक भाग है जिसे Ousia सामग्री प्रबंधन प्रणाली कोड से संशोधित किया गया है, जो बाजार पर सबसे तेज और सबसे अनुकूलित प्रणालियों में से एक है, जो हमारी वेबसाइट डिजाइन सेवाओं का हिस्सा है।

ये लगभग £500 से शुरू होने वाली साइटों के साथ उपलब्ध हैं।

अधिक: उत्तरदायी और तेज। सामग्री प्रबंधन प्रणाली के साथ वेब विकास, डिजाइन और होस्टिंग