レスポンシブ レイアウトのワードプレス テーマ デザインに取り組んでいます。レスポンシブ レイアウトは css3 メディア帖を使用して配置されます。現在、このテーマ ナビゲーションは、大画面サイズの水平スーパーフィッシュ ナビゲーションに依存しています。スーパーフィッシュまたはアコーディオンを使用して、ナビゲーションを垂直に変更したいと考えています。モバイル画面のナビゲーションを変更するにはどうすればよいですか?
1 に答える
これは、メニューの出力コードがレスポンシブになるようにどのように構成されているかに大きく依存します。ただし、役立つ可能性のあるアイデアをいくつか紹介します。モバイルでメニューをすべて非表示にして、別のバージョンを表示できる場合があります。DOM で項目を非表示にするとモバイル ブラウザーに HTML が出力され、読み込み時間が長くなるため、これは注意が必要ですが、使いやすさによっては、これが最善の解決策である場合もあります。
これは、iPhone などのモバイル デバイスでスクロール選択を出力する簡単なスニペットです。
<select class="iphone-menu" ONCHANGE="location = this.options[this.selectedIndex].value;">
<option value="" selected="selected">Main Menu</option>
<option value="/">Home</option>
<option value="/portfolio">Portfolio</option>
<option value="/services">Services</option>
<option value="/knowledge">Knowledge</option>
<option value="/blog">Blog</option>
<option value="/about">About</option>
<option value="/contact">Contact</option>
</select>
私はあなたがこのようなものを探している必要がありますが、あなたが何を望んでいると思います: http://wpmegamenu.com/
私は通常、プラグインをお勧めしませんが、このメニューは非常にうまく崩壊し、どのように望んでいるのか. これは良い参考になるかもしれません。特定の時点でリスト項目の幅を 100% にし、ドロップダウンのスタイルを変更します。
アコーディオンはしませんが、ドロップダウンはします。アコーディオンを実行するには、javascript を使用してウィンドウのサイズ変更時にスクリプトをアクティブにする必要があるため、モバイルではアコーディオンとしてのみ機能し、デスクトップとタブレットではオフになります。私は決して js の専門家ではないので、他の誰かがより適切に指示できるかもしれませんが、基本的なサイズ変更関数は次のようになります。
function checkWidth(init)
{
/*If browser resized, check width again */
if ($(window).width() < 979 ) {
// accordion script here
}
else {
if (init == false) {
// deactivate script here
}
}
}
// this function returns the width of the browser window
$(document).ready(function() {
checkWidth(true);
$(window).resize(function() {
checkWidth(false);
});
});
うまくいけば、これはあなたを正しい方向に向けます。これらのさまざまな方法を使用して、レスポンシブ サイトにさまざまなメニューを実装しましたが、うまく機能しました。