プルダウンメニュー
全てのカテゴリーをプルダウンで表示、リンクする
プルダウンメニューの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)
