wordpress

WordPressのメニューをおもしろくしてみた

投稿日:

トグルメニュー

 

 

トグルメニュー(アコーディオンメニュー)の準備

 

WordPressのテーマに子テーマを作って、

そこで変更や追加をした方が安心安全なので以下の作業は子テーマを使って行いたいと思います。

 

functions.phpでオリジナルのメニューを作れるようにする

 

以下を子テーマの『functions.php』に書き込む

『functions.php』はあらかじめ作成しておきます。

//オリジナルメニュー
register_nav_menus( array(
'sub_menu' => 'カスタムサブメニュー',
'slide_menu' => 'カスタムスライドメニュー'
) );

一応、二つ作ってみました。

 

カスタムスライドメニュー用のファイルを作成

 

別途ファイルを作成しなくてもできますが、今回はわかりやすくファイルを作ってみました。

 

子テーマに『slide-menu.php』というファイルを作ってアップロードします。

アップロード方法は、『Adobe Dreamweaver』や『サーバーのFTP』を利用することで簡単にできます。

それでは、以下を記述して保存します。(全く同じじゃなくてもOKです)

 

<!-- スライドメニュー -->

<div class="suma">

<div class="nav-toggle">
<span class="nav-toggle-icon"></span>
<span class="nav-toggle-icon"></span>
<span class="nav-toggle-icon"></span>
</div>

<div class="slide-container">
<?php

$custom_slide_menu = array(
'container' => 'nav',
'container_class' => 'slidemenu',
'theme_location' => 'slide_menu',
'link_before' => '<span>',
'link_after' => '</span>'
);

if ( has_nav_menu( 'slide_menu' ) ) : ?>
<div id="menubox">
<?php wp_nav_menu( $custom_slide_menu ); ?>
</div>

<?php endif; ?>
</div>
</div>

 

カスタムスライドメニューファイルの呼び出し

 

上記で作った『slide-menu.php』を『header.php』で読み込みたいと思います。

 

以下を読み込みたい場所に記述してください。

 

<?php get_template_part( 'slide-menu' ); //スライドメニュー ?>

 

メニューを作成

 

WordPress管理メニューの『外観』→『メニュー』を開くと以下のような画面になると思います。

『メニュー項目を追加』から自分が作った固定ページなどを選択してメニューに追加します。

メニュー名は、slide_menu

メニュー設定は、カスタムスライドメニュー

最後に保存してください。

カスタムスライドメニュー

 

 

以上で、オリジナルのメニューが設置されました。

あとは、『css』と『js』で見え方や動き方を設定していきます。

 
格安ドメイン名取得サービス『エックスドメイン』

スタイルシート (style.css)

 

以下を子テーマのcssファイルに記述します。

こちらは、好みで色を変えたり、配置を変えたりしてください。

参考までに、作ってみました。

 

 

.suma{
display:inline-block;
width:100%;
}
.nav-toggle{
z-index:9999;
margin:0;
cursor:pointer;
position:fixed;
top:0;
right:0;
padding:10px;
background-color:#111;
}
.nav-toggle:hover{
opacity:0.7;
}
.nav-toggle-icon {
position: relative;
display: block;
height: 2px;
width: 30px;
background: #fcfcfc;
-webkit-transition: ease .5s;
-moz-transition: ease .5s;
-o-transition: ease .5s;
transition: ease .5s;
}
.nav-toggle-icon:nth-child(1) {
top: 0;
}
.nav-toggle-icon:nth-child(2) {
margin: 8px 0;
}
.nav-toggle-icon:nth-child(3) {
top: 0;
}
/*OPEN時の動き*/
.nav-toggle.open .nav-toggle-icon:nth-child(1) {
top: 10px;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.nav-toggle.open .nav-toggle-icon:nth-child(2) {
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
opacity: 0;
}
.nav-toggle.open .nav-toggle-icon:nth-child(3) {
top: -10px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.slide-container{
-webkit-transform: translate(-100%,-50%);
-moz-transform: translate(-100%,-50%);
-ms-transform: translate(-100%,-50%);
-o-transform: translate(-100%,-50%);
transform: translate(-100%,-50%);
-webkit-transition:ease .7s;
-moz-transition: ease .7s;
-o-transition: ease .7s;
transition:ease .7s;
z-index:1000;
display:-webkit-box;
display:-ms-flexbox;
display:-webkit-flex;
displau:-moz-box;
display:flex;
-webkit-box-align:center;
-ms-flex-align:center;
-webkit-align-items:center;
-moz-box-align:center;
-ms-grid-row-align:center;
align-items:center;
height:150vh;
text-align:left;
width:80%;
background:rgba(0,0,0,0.8);
position:fixed;
top:50%;
border-radius:0 50% 50% 0;
}
/*OPEN時の動き*/
.slide-container.open {
height:150vh;
width:80%;
z-index:8888;
background:rgba(0,0,0,0.8);
display:-webkit-box;
display:-ms-flexbox;
display:-webkit-flex;
displau:-moz-box;
display:flex;
-webkit-box-align:center;
-ms-flex-align:center;
-webkit-align-items:center;
-moz-box-align:center;
-ms-grid-row-align:center;
align-items:center;
text-align:left;
position:fixed;
-moz-transform:translate3d(0,-50%,0);
transform:translate3d(0,-50%,0);
-webkit-transform:translate3d(0,-50%,0);
-ms-transform:translate3d(0,-50%,0);
overflow-y:auto;
top:50%;
border-radius:0 50% 50% 0;
}

#menubox{
width:100%;
}

.slidemenu .menu{
display:block;
padding:0 5% 0 15%;
}

.slidemenu ul li{
list-style:none;
}
.slidemenu ul li a{
color:#fff;
font-size:16px;
display:inline-block;
padding:30px 30px;
width:auto;
text-decoration:none;
}
.slidemenu ul li a:hover{
color: #111;
}

 

jsファイル

 

以下を子テーマのjsファイルに記述します。

 

$(function() {
 $('.nav-toggle').on('click', function () {
  $(this).toggleClass('open');
  $('.slide-container').toggleClass('open');
	  });

 $('#menu-slide_menu a').on('click', function () {
  $('.nav-toggle').removeClass('open');
  $('.slide-container').removeClass('open');
	  });
 });

 

これで完成!!!

 


デモも一応作ってみました。

 

See the Pen
wvMgrqQ
by show-be (@show-be)
on CodePen.


 

-wordpress
-, ,


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

予約システムを編集者

MTS Simple Booking-C編集者ができるようにする

  予約システムをスタッフがする   WordPressの予約システムで有名なプラグイン『MTS Simple Booking-C』ですが、 作成者側ではなく、編集者(スタッフ)が …

seo対策

WordPressのSEO対策は簡単にプラグインで出来る

SEOとは、Search Engine Optimizationの略で、検索エンジン最適化のことです。 検索することによって表示される順位をより高い順位にすることを目的としています。 まず始めに、Go …

画面サイズ取得

ヘッダー以外の画面サイズ取得をやってみた

  ワードプレスを使っていて、最初に表示されるページのデザインで使えそう。 全画面表示にするために、ディスプレイのサイズ(高さ)を自動で取得して表示させる方法は試したことがありましたが、 今 …

リストメニューを順番に表示

メニューリストを横から順番に表示させる cssのみ

  cssだけで簡単にメニューなどのリストに動きを付けます。 今回は、右から現れてくるように作ってみました。 さっそくですが、以下にサンプルがありますので、興味がある方はコピペして使ってくだ …

masonry column

MasonryをやめてCSSのcolumnにした

  不具合連続のMasonry   2日間くらい「Masonry」に悩まされ、できたと思ったら不具合が発生の繰り返し、 主な不具合は、 ・画像と画像が重なる ・ブラウザを縮小したり …