web-dev-qa-db-ja.com

変換する WP モバイルブラウザ用のドロップダウンメニュー

レスポンシブテーマのwpプロジェクトに取り組んでいます。

私はサイトの上部に単一レベルのナビゲーションメニューを持っています、それは私がモバイルサイトで選択するのがはるかに簡単であるナビゲーションアイテムのためのオプションでモバイルブラウザ（小さいスクリーン）のための選択オプションタグに変えたいです。そのため、UL LIメニューはモバイル用のSelection-Optionタグに置き換えられます。

しかし、私はどのようにWPメニューを選択オプションドロップダウンに変更するかを理解することができません。

menusmobileresponsive
1
Krunal

これが私がさまざまな記事/テーマからまとめたものです。

変更するファイル：

functions.php

header.php

style.css

js（テーマルートディレクトリにフォルダ "js"を作成）

Javascript： 

jQuery(function() {
      jQuery("<select />").appendTo("nav");
      jQuery("<option />", {
         "selected": "selected",
         "value"   : "",
         "text"    : "Go to..."
      }).appendTo("nav select");
      jQuery("nav a").each(function() {
       var el = jQuery(this);
       jQuery("<option />", {
           "value"   : el.attr("href"),
           "text"    : el.text()
       }).appendTo("nav select");
      });
      jQuery("nav select").change(function() {
        window.location = jQuery(this).find("option:selected").val();
      });    
     });

custom.jsとして保存し、テーマディレクトリのjsフォルダに配置します。

functions.phpファイル：

テーマのfunctions.phpファイルを開き、既存のスタイルやスクリプトをエンキューするコードを見つけてinitに追加します。

wp_enqueue_script( 'my_customnav_script', get_template_directory_uri() . '/js/custom.js', array( 'jquery' ) )

。あなたのテーマがエンキューされていない場合は、この行をfunctions.phpファイルに追加してください。

function add_themescript(){
  if(!is_admin()){
    wp_enqueue_script( 'my_customnav_script', get_template_directory_uri() . '/js/custom.js', array( 'jquery' ) );
    }
  }
  add_action('init','add_themescript');

header.phpファイル：

次のように現在のwp-nav css IDまたはクラスを置き換えるか追加します。

<nav>...Your themes navigation code here - </nav>

CSS： 

@media only screen and (min-width: 480px) {
/* == INTERMEDIATE: Menu == */
#navigation-wrapper, nav ul a, nav ul {
width:75%;
font-size:82%;
}
nav ul {
width:90%;
}
nav a, .next-post a{
float:left;
margin:0 1%;
padding:5px 1%;
margin-bottom:0;
}
nav li:first-child a{
margin-left:0;
}
nav li:last-child  a{
margin-right:0;
}
/* == INTERMEDIATE: IE Fixes == */
nav ul li{
display:inline;
}
}
nav{
width:100%;
float:left;
background:#e44d26;
margin-bottom:9px;
padding:5px 0px 5px 0px;
}
nav select {
display: none;
}
@media (max-width: 960px) {
nav ul     {
display: none;
}
nav select {
display: inline-block;
}
}

あなたの好みに合わせてCSSスタイルを調整してください。

1
Jeremy Jared

メニューに子供が含まれている場合は、次のコードが適切に機能します（上記のJavaScriptの代わりに）。

jQuery(document).ready(function(){
   jQuery('ul:first').attr("id", "MENUID");
   jQuery("ul#MENUID > li:has(ul)").addClass("hasChildren");
   jQuery("ul#MENUID > li:has(ul) > ul > li > a").addClass("isChild"); 
});

jQuery(function() {
    jQuery("<select />").appendTo("nav");
    jQuery("<option />", {
       "selected": "selected",
       "value"   : "",
       "text"    : "Go to...",
    }).appendTo("nav select");

    jQuery("nav a").each(function() {
       var el = jQuery(this);
       jQuery("<option />", {
           "value"   : el.attr("href"),
           "text"    : el.text(),
           "class"   : el.attr("class")
       }).appendTo("nav select");
    });

    jQuery("nav select").change(function() {
      window.location = jQuery(this).find("option:selected").val();
    });    
 });

 jQuery(document).ready(function() {
   jQuery("nav select option").each(function() {
     var el = jQuery(this);
     if(el.hasClass("isChild")){
       jQuery(el.prepend("- "))
     }
 });
});
1
Nathanial Hesse

単にこのプラグインを使ってください。単なるドロップダウンメニューよりも優れています

https://wordpress.org/plugins/wp-responsive-menu/ /

0
Nirmal Ram