ミギムキ

[WordPress] コピペで使えるページヘッダーのテンプレート

やりたいこと

サンプルコード

html

<header> <div class="header_pc"> <div class="site_title"> <a href="<?php echo esc_url(home_url('/')); ?>"><img src="" alt=""></a> </div> <?php $args = array( 'menu' => 'gnavi', 'container' => false ); wp_nav_menu( $args ); ?> </div> <div class="header_mb"> <div class="site_title"> <a href="<?php echo esc_url(home_url('/')); ?>"><img src="" alt=""></a> </div> <div class="btn_nav"><span></span></div> <div class="toggle_area"> <?php $args = array( 'menu' => 'gnavi', 'container' => false ); wp_nav_menu( $args ); ?> </div> </div> </header>
スポンサー広告

CSS

.header_pc { display: flex; flex-wrap: wrap; align-items: center; } @media screen and (max-width: 767px) { .header_pc { display: none; } } .header_pc > .site_title { width: 30%; } .header_pc > .menu { display: flex; justify-content: center; align-items: center; padding: 0px; margin: 0px; width: 70%; } .header_pc > .menu li { position: relative; list-style-type: none; } .header_pc > .menu li a { display: block; padding: 1em; font-size: 15px; text-align: center; text-decoration: none; } .header_pc > .menu li a:hover { background-color: #3388dd; color: #fff; } .header_pc > .menu > li > .sub-menu { position: absolute; top: 4em; left: 0px; z-index: 1; padding: 0px; margin: 0px; opacity: 0; transition: opacity 0.5s; pointer-events: none; } .header_pc > .menu > li > .sub-menu.js_active { opacity: 1; pointer-events: auto; } .header_mb { position: fixed; top: 0px; left: 0px; z-index: 9999; width: 100%; height: 90px; background-color: #fff; } @media screen and (max-width: 767px) { body { margin-top: 90px; } } @media print, (min-width: 768px) { .header_mb { display: none; } } .header_mb > .btn_nav { position: absolute; top: 20px; right: 20px; width: 50px; height: 50px; background-color: #3388dd; } .header_mb > .btn_nav > span { display: block; position: absolute; top: 50%; left: 50%; width: 30px; height: 3px; transform: translateX(-50%) translateY(-50%); background-color: #fff; transition: 0.2s; } .header_mb > .btn_nav > span:before, .header_mb > .btn_nav > span:after { display: block; position: absolute; left: 0px; width: 30px; height: 3px; background-color: #fff; transition: 0.3s; content: ""; } .header_mb > .btn_nav > span:before { top: 12px; } .header_mb > .btn_nav > span:after { top: -12px; } .header_mb > .btn_nav.js_active:after { content: ""; } .header_mb > .btn_nav.js_active > span { background: transparent; } .header_mb > .btn_nav.js_active > span:before, .header_mb > .btn_nav.js_active > span:after { top: 0px; } .header_mb > .btn_nav.js_active > span:before { transform: rotate(-45deg); } .header_mb > .btn_nav.js_active > span:after { transform: rotate(-135deg); } .header_mb > .site_title { position: absolute; top: 50%; left: 20px; transform: translateY(-50%); width: 50%; } .header_mb > .toggle_area { display: none; position: fixed; top: 90px; left: 0px; right: 0px; bottom: 0px; z-index: 9999; background-color: #fff; overflow-y: auto; } .header_mb > .toggle_area > .menu { padding: 0px; margin: 0px; border-bottom: 1px solid #3388dd; } .header_mb > .toggle_area > .menu li { border-top: 1px solid #3388dd; list-style-type: none; } .header_mb > .toggle_area > .menu li a { display: block; position: relative; padding: 1em 3em 1em 2em; font-size: 5vw; color: #000; text-decoration: none; } .header_mb > .toggle_area > .menu li a:before, .header_mb > .toggle_area > .menu li a:after { position: absolute; top: 50%; right: 2em; content: ""; } .header_mb > .toggle_area > .menu li a:before { width: 0.5em; height: 0.5em; border-top: 2px solid #3388dd; border-right: 2px solid #3388dd; transform: translateY(-50%) rotate(45deg); } .header_mb > .toggle_area > .menu li.menu-item-has-children > a:before { width: 0.75em; height: 2px; transform: translateX(50%) translateY(-50%); border: none; background-color: #3388dd; } .header_mb > .toggle_area > .menu li.menu-item-has-children > a:after { width: 2px; height: 0.75em; transform: translateX(50%) translateY(-50%); background-color: #3388dd; } .header_mb > .toggle_area > .menu li.menu-item-has-children.js_active > a:after { background-color: transparent; } .header_mb > .toggle_area > .menu > li > .sub-menu { display: none; padding: 0px; margin: 0px; } .header_mb > .toggle_area > .menu > li > .sub-menu > li > a { padding: 1em 3em 1em 3em; }

jQuery

jQuery(function($) { $('.header_pc .menu-item-has-children').hover( function() { $('.sub-menu:not(:animated)', this).addClass('js_active'); }, function() { $('.sub-menu:not(:animated)', this).removeClass('js_active'); }); $('.header_mb .btn_nav').click( function() { $(this).toggleClass('js_active'); $('.header_mb .toggle_area').slideToggle(); }); $('.header_mb .menu-item-has-children > a').click( function() { $(this).parent().toggleClass('js_active'); $(this).parent().find('.sub-menu:not(:animated)').slideToggle(); return false; }); });

仕組み、解説、補足など

スポンサー広告