CSSだけでモーダルメニューポップアップウィンドウ

これまで 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は全て除去することになった。

参考：