WordPressでドロップダウンメニューを作成する方法-CSSチュートリアル-php.cn

WordPressでドロップダウンメニューを作成しますか？あなたは正しい場所に来ました！このチュートリアルでは、プロのドロップダウンメニューデザインの作成方法をお勧めします。モバイル用のバーガーメニューからメガメニューから店舗用のメガメニューからスティッキーメニューまで、ユーザーエクスペリエンスを強化するために、ワードプレスサイトにナビゲーションメニューを表示する方法には最適です。メガメニューやハンバーガーメニューなどのメニューは、ドロップダウンメニューを作成する方法を学ぶことをお勧めします。これは、想像するよりも多くのサイトで有用になります（すべてのサイトに派手なメニューが必要ではないわけではありません）。そして、より高度なメニューの構築を開始するために必要な基盤を提供します。テーマ。WordPressメニュー関数によって出力されるHTMLをターゲットにするCSSを使用します。これは、自分自身をコーディングしているテーマで使用するように設計されており、すでに独自のメニューがあるサードパーティのテーマではありません。ただし、メニューがドロップダウンせず、これを追加したいサードパーティのテーマを使用している場合は、子テーマを作成してメニューコードを追加する必要があります。 HTMLのメニュー。

ドロップダウンメニューデザインをモバイルフレンドリーにします。

WordPressのHTMLでドロップダウンナビゲーションメニューを作成する必要があるもの

このチュートリアルに従うには、

WordPressの開発インストール

テーマを自分でコーディングしている場合、または子供のテーマをテーマにしている場合は、編集者

最初に理解する必要があるのは、WordPressドロップダウンメニューがどのように機能するかです。静的サイトとは異なり、メニューはサイトにハードコーディングされていません。代わりに、WordPressはPHP関数を使用してデータベースをクエリし、ナビゲーションメニュー項目をフェッチし、正しい構造に表示します。
ナビゲーションメニューの各アイテムは、実際にはデータベースのwp_postsテーブルの投稿です。通常の投稿ではなく、ネイビューメニューに使用される特別な種類の投稿です。
テーマでは、header.phpファイルを開きます。この行を見つけることができるはずです：

wp_nav_menu( array( 'container_class' => 'main-nav', 'theme_location' => 'primary' ) );<br>

ログイン後にコピー

あなたの関数はパラメーターによって少し異なるかもしれませんが、上記の例を分解して、各要素が何をするかを見てみましょう。この場合、それはMain-Navです。それが、後でCSSでターゲットにすることです。プライマリ

。これは1つのメニューにのみ使用できます。ただし、ドロップダウンメニューのCSSを追加する前に、WordPressハンドブックページのWP_NAV_MENU（）

>のWordPressハンドブックページで見つけることができる追加のパラメーターを使用することをお勧めします。WordPressがメニューのために生成するコードに慣れるのに役立ちます。画面：
ここにHTMLのドロップダウンナビゲーションメニューがあります：
HTMLでドロップダウンメニューを作成することは、WordPressのドロップダウンメニューを開始する前に理解する必要があるコードで構成されています：

とクラスのli要素であり、それぞれがli
要素のクラスを備えていることは、内部の別のli要素です。2番目のメニュー項目です。これは、ユーザーがトップレベルのメニュー項目を上げたときにドロップダウンしたいのです。物事：
```
<div class="main-nav"> <ul id="menu-navbar" class="menu"> <li id="menu-item-610" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-609 current_page_item menu-item-610"><a href="https://121interviewcoaching.co.uk/">Home</a></li> <li id="menu-item-613" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-613"><a href="https://121interviewcoaching.co.uk/about/">About Me</a></li> <li id="menu-item-615" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-615"><a href="https://121interviewcoaching.co.uk/services/">Services</a> <ul class="sub-menu"> <li id="menu-item-618" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-618"><a href="https://121interviewcoaching.co.uk/services/services-for-individuals/">Preparing for interviews / individuals</a></li> <li id="menu-item-617" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-617"><a href="https://121interviewcoaching.co.uk/services/services-for-groups/">Preparing for interviews / groups</a></li> <li id="menu-item-619" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-619"><a href="https://121interviewcoaching.co.uk/services/conducting-interviews/">Conducting interviews</a></li> </ul> </li> <li id="menu-item-30780" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-30780"><a href="https://121interviewcoaching.co.uk/succeed-at-your-next-job-interview/">My Book</a></li> <li id="menu-item-614" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-614"><a href="https://121interviewcoaching.co.uk/clients-2/">Clients</a></li> <li id="menu-item-616" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-616"><a href="https://121interviewcoaching.co.uk/interview-tips/">Interview Tips</a></li> <li id="menu-item-612" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-612"><a href="https://121interviewcoaching.co.uk/where-i-work/">Areas covered</a></li> <li id="menu-item-611" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-611"><a href="https://121interviewcoaching.co.uk/contact/">Contact &#038; Links</a></li> </ul> </div> 
```
ログイン後にコピー
ページが開かれたとき、セカンドレベルのメニュー項目が隠されている場合。デフォルトでアイテム。それを修正しましょう。
- ドロップダウンメニューデザイン：ホバーに表示されるセカンドレベルのアイテムを作成しますレイアウトスタイリングの追加セカンドレベルのリストに追加は、リストの上部を内側の要素の上部、つまりトップレベルリスト項目に配置します。これは左：0 リストをその上のアイテムに比べて左に配置します。
 99999は、他のすべての上に表示されることを保証します。トップレベルのアイテムの上にホバリングします：
- 動作します！トップレベルのアイテムの上にホバリングすると、ドロップダウンメニューが表示されます。ドロップダウンメニューをモバイルに優しいものにする
- これを行う方法は次のとおりです。
WordPressのドロップダウンメニューのバナーにメニューアイコンを追加します
最初に、人々がタップして小さな画面のメニューにアクセスする必要があるアイコンを追加します。 GO：

それは、シンボルのHTMLコードを使用してハンバーガーシンボルを出力し、より大きな画面で非表示に使用する要素を使用します。まず、より大きな画面でアイコンを非表示にします：

メディアクエリ内で、メニューのCSSを追加します。

>
テーマで異なるクラスとIDを使用している場合は編集する必要があることに注意してください。テーマ内に
スクリプト
と呼ばれるフォルダーを作成します。その内部では、
burger-menu.js
と呼ばれる新しいファイルを作成し、これに追加します。あなたのテーマのファイルで、スクリプトをenqueueするために関数を追加します：
すべてのファイルを保存すると、小さな画面にハンバーガーメニューがあります。
>
ドロップダウンメニューは、サイトが複数のレベルのメニューが必要であるが、トップレベルのメニューの外側に多くのリンクを必要としない場合、小規模なマルチレベルのメニューに役立ちます

。ドロップダウンメニューはこれを実現する最も簡単な方法です。これを実証するために使用したサイトには、そのメニューには1つのアイテムのみがあり、その下に他のアイテムがあり、そのうち3つしかありません。メガメニューを使用すると過剰になり、シングルレベルのメニューでは、必要なものをすべて表示することはできません。これは、このようなメニューをテーマに追加できるようにすると、メニューをより柔軟にし、ユーザーエクスペリエンスを向上させることができるように、HTMLのドロップダウンメニューを作成する方法です。そして、あなたはほんの数行のCSSでそれを行うことができます。