プルダウンメニュー

2021.04.07

全てのカテゴリーをプルダウンで表示、リンクする

プルダウンメニューのCSS
CSS入門：select要素(プルダウン)の矢印を消す方法 | サービス | プロエンジニア (internous.co.jp)

課題：　スマホで　プルダウンメニューをクリックするだけで移動しない。さらに「カテゴリーから探す」をクリックする必要がある。

　
Kawanalabの場合、headerのプルダウンメニューは<nav>にある。cssは nav{ }で指定する。

nav {
      background-color:rgb(255, 255, 255);
      width:70%;
      align-items: center;
      line-height: 50px;　//上下位置調整　  
      padding-left: 100px;
      padding-right:100px;
      margin:0px;
     }

select{　　　　　　　　　//ボタン内の指定
  background:none; 
  border: none;
  font-size: 1.5rem;
}


プルダウンメニューの矢印等の表示をなくす

select{
  background:none;
  border: none;
  font-size: 1.5rem;
  padding-left: 30px;
  /*矢印等のﾌﾟﾙﾀﾞｳﾝﾒﾆｭｰの装飾を取り除く*/

　/* ベンダープレフィックス(Google Chrome、Safari用) */
  -webkit-appearance: none;
 　/* ベンダープレフィックス(Firefox用) */　
  -moz-appearance: none;
　　appearance: none; /* 標準のスタイルを無効にする */
}

header.php の記述

  <?php
$categories = get_categories(array('taxonomy' => 'category'));
if ( $categories ) {
	$cat_selct = '<select name="cat-dropdown" onchange="document.location.href=this.options[this.selectedIndex].value;" class="post-catselect">';
	$cat_selct .= '<option value="" selected="selected">カテゴリーから探す</option>';
	$cat_selct .= '<option value="'.home_url().'/information">すべてのカテゴリー</option>';
	foreach ( $categories as $category ) {
		$cat_selct .= '<option value="'.esc_html( get_category_link( $category->term_id ) ).'">'.esc_html( $category->name ).'</option>';
	}
	$cat_selct .= '</select>';
	echo $cat_selct;
}
?>

プルダウン式カテゴリー一覧の表示方法 | スターウェブスタジオ (star-webstudio.com)

html タグ　　<section>, <option>section>, <option>

・<select>タグ
ドロップダウンメニューをつくります。
・<option>タグ
ドロップダウンメニューに表示される項目をつくります。
・value属性
選択項目をデータとして送信する際に、データの受けとり手に値を知らせます。
・<optgroup>タグ
複数の<option>タグをグループ分けし、メニューをわかりやすく表示させます。

プルダウンメニューの選択した項目を取得・変更する | GRAYCODE JavaScript (gray-code.com)

コメント