Cara Membuat Menu Drop-Down di WordPress

Adakah anda ingin membuat menu drop-down di WordPress? Anda telah datang ke tempat yang betul! Dalam tutorial ini, saya akan mengajar anda bagaimana untuk membuat reka bentuk menu drop-down profesional.

Menu navigasi mempunyai sedikit masa dalam perhatian. Dari menu burger untuk mudah alih melalui menu mega untuk kedai-kedai untuk menu melekit untuk pengalaman pengguna yang dipertingkatkan, ada pilihan yang hebat dalam cara anda dapat membentangkan menu navigasi anda di laman web anda. Menu lanjutan seperti menu mega dan menu burger, adalah idea yang baik untuk belajar bagaimana membuat menu lungsur. Ini akan berguna di lebih banyak laman web daripada yang anda bayangkan (tidak setiap tapak memerlukan menu mewah), dan ia akan memberi anda asas yang anda perlukan untuk mula membina menu yang lebih maju. Tema, menggunakan CSS untuk menyasarkan HTML yang dikeluarkan oleh fungsi menu WordPress. Ini direka untuk digunakan dalam tema yang anda buat sendiri, dan bukan untuk tema pihak ketiga, yang sudah mempunyai menu sendiri. Walau bagaimanapun, jika anda bekerja dengan tema pihak ketiga yang menunya tidak jatuh dan anda ingin menambah ini, maka anda perlu membuat tema kanak-kanak dan menambah kod menu anda. Menu dalam HTML. 

Buat reka bentuk menu drop-down anda mesra mudah alih. 

Apa yang anda perlukan untuk membuat menu navigasi drop-down di html pada wordpress

untuk mengikuti bersama dengan tutorial ini, anda perlu:

Editor

1. Fungsi menu terbina dalam WordPress

Perkara pertama yang perlu anda fahami ialah bagaimana menu drop-down WordPress berfungsi. Tidak seperti tapak statik, menu tidak berkod keras ke laman web anda. Sebaliknya, WordPress menggunakan fungsi PHP untuk menanyakan pangkalan data dan mengambil item menu navigasi, kemudian memaparkannya dalam struktur yang betul.

Dalam tema anda, buka fail header.php . Anda sepatutnya dapat mencari baris ini: fungsi anda mungkin kelihatan sedikit berbeza bergantung kepada parameter, tetapi mari kita memecahkan contoh di atas dan lihat apa yang setiap elemen tidak:

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

container_class

Dalam kes ini, ia adalah main-nav. Itulah yang akan kami targetkan dengan CSS kami di kemudian hari.

• tema_location = & gt; primer . Anda hanya boleh menggunakan ini untuk satu menu. Tetapi anda mungkin mahu menggunakan parameter tambahan, yang boleh anda temukan di halaman Buku Panduan WordPress pada WP_NAV_MENU ()
fungsi
• Skrin:

  Sekarang inilah menu navigasi drop-down di html:

  mencipta menu drop-down di html terdiri daripada beberapa kod yang perlu kita fahami sebelum memulakan dengan menu drop-down kami untuk wordpress: Itu, unsur-unsur menu-navbar

  dan kelas li , masing-masing dengan kelas li

  unsur-unsur adalah unsur-unsur lain di dalam-item menu peringkat kedua. Itulah yang kita mahu turun apabila pengguna melayang di atas item menu peringkat atas. Perkara-perkara:

  <div class="main-nav"><br>    <ul id="menu-navbar" class="menu"><br>        <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><br>        <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><br>        <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><br>            <ul class="sub-menu"><br>                <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><br>                <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><br>                <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><br>            </ul><br>        </li><br>        <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><br>        <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><br>        <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><br>        <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><br>        <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><br>    </ul><br></div><!-- #main-nav --><br>

  Apabila halaman dibuka, item menu peringkat kedua tersembunyi. Item peringkat kedua secara lalai. Mari kita selesaikan itu.

  Menambah gaya susun atur ke senarai peringkat kedua

  Buka stylesheet anda dan cari garis dengan kedudukan: Mutlak memberikan senarai peringkat kedua yang mutlak, mengambilnya dari aliran elemen di halaman. Untuk item peringkat yang lebih tinggi, atas: 3EM meletakkan bahagian atas senarai berbanding bahagian atas elemen yang ada di dalamnya, iaitu item senarai peringkat atas. Kiri ini: 0 meletakkan senarai ke kiri, berbanding dengan item di atasnya. Kami melihat apabila kita melayang ke atas item peringkat atas:

• ia berfungsi! Apabila saya melayang ke atas item peringkat atas, menu drop-down kini dipaparkan.
• 3. Membuat menu drop-down anda yang mesra mudah alih

kod menu drop-down yang mudah di atas sangat bagus untuk versi desktop laman web ini, tetapi realitinya adalah bahawa kebanyakan orang akan melawat laman web anda di telefon bimbit. Menu. Pergi:

yang akan mengeluarkan simbol burger, menggunakan kod HTML untuk simbol, di dalam elemen dengan kelas yang akan kami gunakan untuk menyembunyikannya pada skrin yang lebih besar. Pertama, sembunyikan ikon pada skrin yang lebih besar:

Sekarang di dalam pertanyaan media, tambahkan CSS untuk menu:

ikon. Buat folder dalam tema anda yang dipanggil

skrip

, dan di dalamnya, fail baru yang dipanggil

burger-menu.js

, dan tambahkan ini:

Sekarang pastikan skrip dipanggil oleh tema. Dalam fail

FUNCTIONS.php

tema anda, tambahkan fungsi untuk memupuk skrip:

Sekarang simpan semua fail anda, dan anda akan mempunyai menu burger pada skrin kecil.

Menu drop-down

berguna untuk menu kecil, pelbagai peringkat

Apabila laman web anda memerlukan menu dengan pelbagai peringkat tetapi anda tidak memerlukan banyak pautan di luar menu peringkat atas anda, menu drop-down adalah cara yang paling mudah untuk mencapai ini. Laman yang saya gunakan untuk menunjukkan ini hanya mempunyai satu item dalam menu dengan item lain di bawahnya, dan hanya ada tiga daripadanya. Menggunakan menu mega akan menjadi berlebihan, dan menu satu peringkat tidak akan membenarkan saya memaparkan semua yang saya mahu.

Itu sahaja! Ini adalah cara membuat menu lungsur dalam html

dapat menambah menu seperti ini ke tema anda akan memberi anda lebih banyak fleksibiliti dengan menu anda dan meningkatkan pengalaman pengguna. Dan anda boleh melakukannya dengan hanya beberapa baris CSS.

Atas ialah kandungan terperinci Cara Membuat Menu Drop-Down di WordPress. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!