モバイル デバイスのホバー メニュー効果の置き換え
この記事をご覧になった方は、IOS やその他のモバイル デバイスに何らかのホバー メニューの代替品または類似のものを実装する最も簡単な方法を見つけようとしている可能性があります。
この例では、最も単純なコードの検出とプラグインについて説明します。
ASP.NET には、モバイル デバイスを検出する機能が組み込まれています。100% ではないかもしれませんが、サイトをすばやく立ち上げて実行するのに役立つことは間違いありません。これを使用するために、2 つの MasterPages (1 つのモバイル、1 つのデスクトップ) を用意し、スタイルとコードを少し異なるものにします。以下の例 (当社のモバイル サイトから) をクリックしてテストします。
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>項目の位置を絶対に設定するだけで、項目がホバリングしているように見えます。
Claytabaseによるウェブサイトのデザイン
これは、当社の Web サイト デザイン サービスの一部である、市場で最も高速で最適化されたシステムの 1 つである Ousia コンテンツ管理システム コードから変更されたコードのセクションです。
これらは、約£500から始まるサイトで利用できます.
