これまで remodal.js を使ってハンバーガーメニューのモーダルメニューウィンドウが開いていたのを、CSSだけで動くようにした。
header.php 内の3本線のハンバーガーメニューを表示したいところに次のように記述する。
<div class="modal-css nav_btn">
<input id="modal-checkbox" type="checkbox">
<label id="drawer-icon" for="modal-checkbox"><span></span></label>
<label id="modal-close" for="modal-checkbox"></label>
<div id="modal-content">
<div class="kensaku"><?php get_search_form(); ?></div>
<div class="category-list dropdown">
<form id="category-select" class="category-select" action="<?php echo esc_url( home_url( '/' ) ); ?>" method="get">
<?php
$args = array(
'show_option_none' => __( 'カテゴリーを選択' ),
'show_count' => 1,
'orderby' => 'COUNT',
'order' => 'DESC',
'hierarchical' => true,
'echo' => 0,
);
?>
<?php $select = wp_dropdown_categories( $args ); ?>
<?php $replace = "<select$1 onchange='return this.form.submit()'>"; ?>
<?php $select = preg_replace( '#<select([^>]*)>#', $replace, $select ); ?>
<?php echo $select; ?>
<noscript>
<input type="submit" value="View" />
</noscript>
</form>
</div>
<div class="tag-list dropdown">
<?php
$args=array(
'orderby' => 'COUNT',
'order' => 'DESC',
'show_count' => 1,
);
$tags = get_tags($args); if ( $tags ) : ?>
<select onchange="document.location.href=this.options[this.selectedIndex].value;">
<option value="" selected="selected">タグを選択</option>
<?php foreach ( $tags as $tag ): ?>
<option value="<?php echo clean_url( get_tag_link( $tag->term_id ) ); ?>"><?php echo wp_specialchars( $tag->name ); ?> (<?php echo $tag->count; ?>)</option>
<?php endforeach; ?>
</select>
<?php endif; ?>
</div>
<div class="monthly-list dropdown">
<select name="archive-dropdown" onchange="document.location.href=this.options[this.selectedIndex].value;">
<option value=""><?php echo esc_attr( __( 'Select Month' ) ); ?></option>
<?php wp_get_archives( array( 'type' => 'monthly', 'format' => 'option', 'show_post_count' => 1 ) ); ?>
</select>
</div>
<?php dynamic_sidebar( 'mordal' ) ;?>
</div>
</div>
CSSを次のように追加する。
/* メニューアイコン*/
.nav_btn {
text-align: center;
display: inline-block;
padding: 0 6px;
max-height: 38px;
font-size: 1em !important;
color: #adff2f;
}
#drawer-checkbox {
display: none;
}
#drawer-icon {
cursor: pointer;
display: inline-block;
height: 38px;
position: relative;
width: 38px;
transition: all 0.3s ease 0s;
}
#drawer-icon:hover {
opacity: .6;
transition: all 0.3s ease 0s;
}
#drawer-icon span {
background: #adff2f;
border-radius: 4px;
display: block;
height: 16%;
left: 50%;
margin: -8% 0 0 -42%;
position: absolute;
top: 50%;
transition: all 0.3s ease-in-out;
width: 84%;
}
#drawer-icon span::before,
#drawer-icon span::after {
-webkit-transform: rotate(0);
background: #adff2f;
border-radius: 4px;
content: "";
display: block;
height: 100%;
left: 50%;
margin: -8% 0 0 -50%;
position: absolute;
top: 50%;
transform: rotate(0);
transition: all 0.3s ease-in-out;
width: 100%;
}
#drawer-icon span::before {
margin-top: -38%;
}
#drawer-icon span::after {
margin-top: 19%;
}
/* モーダル */
#modal-checkbox {
display: none;
}
#modal-open {
cursor: pointer;
display: inline-block;
position: relative;
}
#modal-content {
display: none;
overflow: hidden;
position: fixed;
top: 50%;
left: 50%;
z-index: 0;
background: linear-gradient(to bottom,#003100 0%,#00b100 100%);
transition: all 0.3s ease-in-out 0s;
transform: translate(-50%, -50%);
opacity: 0;
box-shadow: 0 0 24px rgba(0, 0, 0, 0.16);
padding: 1em;
width: auto;
max-width: 320px;
border-radius: 10px;
}
#modal-checkbox:checked ~ #modal-content {
display: block;
opacity: 1;
z-index: 40;
}
#modal-close {
display: none;
position: fixed;
z-index: 39;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0;
transition: all 0.3s ease-in-out 0s;
}
#modal-checkbox:checked ~ #modal-close {
display: block;
opacity: 0.6;
}
#modal-checkbox:checked ~ #drawer-icon span {
background: rgba(51, 51, 51, 0);
}
#modal-checkbox:checked ~ #drawer-icon span::before,
#modal-checkbox:checked ~ #drawer-icon span::after {
content: "";
display: block;
height: 100%;
left: 50%;
margin: -8% 0 0 -42%;
position: absolute;
top: 50%;
width: 100%;
}
#modal-checkbox:checked ~ #drawer-icon span::before {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#modal-checkbox:checked ~ #drawer-icon span::after {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
h4.mordal {
margin: 0;
}
.dropdown {
margin: 1em auto;
}
div#modal-content button#searchsubmit {
float: left;
border: none;
box-shadow: none;
}
div#modal-content input#s {
max-width: 300px;
}
以上で完成。
結局、ストークテーマ標準で使用されている JSは全て除去することになった。
参考：
