Mobil Cihazlarda Hover Menü Efektini Değiştirme
Bu makaleyi bulduysanız, muhtemelen IOS veya diğer mobil cihazlar için bir çeşit Hover Menu değiştirme veya benzerini uygulamanın en kolay yolunu bulmaya çalışıyorsunuzdur.
Bu örnekte, en basit haliyle kodu tespit edip takmayı deneyeceğiz.
ASP.NET, mobil cihazları algılamak için yerleşik bir işleve sahiptir ve %100 olmasa da, bir siteyi hızla kurup çalışır hale getirmemize kesinlikle yardımcı olacaktır. Bunu kullanmak için iki Ana Sayfamız olacak (bir mobil, bir masaüstü) ve bunları biraz farklı biçimlendirip kodlayacağız, aşağıdaki örneği (kendi mobil sitemizden) tıklayarak test edin.
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 IfMasaüstü sürümünü normalde yaptığınız gibi şekillendirin, biz ise Mobil site kodlamasına konsantre olabiliriz.
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>Bu kod birden fazla menü için tekrar kullanılabilir, şimdi yukarıdaki örneğe göre kodu kullanabiliriz.
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>Öğenin havada asılı gibi görünmesi için yalnızca konumunu mutlak olarak ayarlamanız gerekir.
Claytabase tarafından web sitesi tasarımı
Bu, web sitesi tasarım hizmetlerimizin bir parçası olan piyasadaki en hızlı ve en optimize sistemlerden biri olan Ousia İçerik Yönetim Sistemi kodundan değiştirilmiş bir kod bölümüdür.
Bunlar, yaklaşık 500 £ 'dan başlayan sitelerde mevcuttur.
