「メニュー」タグアーカイブ

WordPress, スマホ・パソコン・Web関連

Twenty Twelveのスマホメニューが開かない場合の対処法

コメントする

WordPressのスマホレイアウトでメニューボタンが動かない！

ある特定の条件下で、Wordpressのテーマ、Twentytwelveのスマホ用メニューが開かない場合がある。
twentytwelve-menu1
この修正方法を紹介。
 

 

条件1 Twentytwelveを使っている。

WordPressのテーマ(テンプレート)にtwentytwelveを使っている時にこれは発生する。TwentyelevenやTwenty thirteen fourteen fifteen…などでは起こらない(今後ずっとおこらないかどうかは不明)

条件2 子テーマを使用していて、header.phpをカスタマイズしている

親テーマのheader.phpがアップデートで変更になった。具体的には端末判定によるスマホ対応ではなく、レスポンシブデザインによるスマホ対応になった。

レスポンシブってなに？って場合はこちらのレスポンシブデザインでtableタグを制御をチェック。

この2つの条件が当てはまる場合に、Twentytwelveのスマホメニューが動かなくなる。
 

 

解決法 子テーマのheader.phpを修正

 
Wordpressの管理画面にログインし「外観」→「テーマ編集」

右上の「編集するテーマを選択:」の箇所がTwentytwelveの子テーマになっている事を確認して、「header.php」を編集する。

メニューの部分が

<nav id=”site-navigation” class=”main-navigation” role=”navigation”>
<h3 class=”menu-toggle”><?php _e( ‘Menu’, ‘twentytwelve’ ); ?></h3>
<a class=”assistive-text” href=”#content” title=”<?php esc_attr_e( ‘Skip to content’, ‘twentytwelve’ ); ?>”><?php _e( ‘Skip to content’, ‘twentytwelve’ ); ?></a>
<?php wp_nav_menu( array( ‘theme_location’ => ‘primary’, ‘menu_class’ => ‘nav-menu’ ) ); ?>
</nav><!– #site-navigation –>

となっている箇所があるはずなので、その中の

<h3 class=”menu-toggle”><?php _e( ‘Menu’, ‘twentytwelve’ ); ?></h3>

を、↓↓↓ に変更するだけ。

<button class=”menu-toggle”><?php _e( ‘Menu’, ‘twentytwelve’ ); ?></button>

これでメニューが動くようになったはずだ。

なお、カスタマイズは自己責任で。心配ならバックアップを取っておこう。

Ajax他, CSS, スマホ・パソコン・Web関連

「三」みたいなスマホ用jQueryメニューをホームページに導入する方法

コメントする

スマホで「三」をタップ(クリック)すると、メニューがニュル～っと出てくるやつ

 

正式名称は、ハンバーガーメニューと言うらしいが、あまりこの呼称は浸透していない。

もちろんスマホもPCも対応。

とにかく、これを導入してみよう。

導入イメージはこんな感じ↓

humbergermenu1

humbergermenu2

 

デモページはこちら(デモページ右上にMENUがある。)

 

 

jQueryなどのメニューに必要なものを揃える

右クリックで「対象を保存」などでダウンロード可能。
・jquery.min.js
・jquery-ui.min.js
・menu3.js
・index.html
・menu3.css
・「三」と「X」の画像

これが最低限必要。
 

ちなみに、上記リンク先は全てテキストにしているので、ダウンロードして使う場合は、拡張子の.txtをそれぞれ、「.js」「.css」「.html」などに変更しておくこと。

 

3menu.zip
↑index.html、menu3.css、menu3.js、jquery.min.js、jquery-ui.min.js、MENUとXの画像2個を全てまとめて圧縮したもの(フォルダ階層あり)はこちら。
 
 

サーバー上に設置

cssフォルダ/menu3.css

imgフォルダ/menu.png、menu2.png

jsフォルダ/jquery.min.js、menu3.js、jquery-ui.min.js

index.html

と言う感じで設置する。
 
パーミッション等は変更必要ないので、そのままアップロードする。

 

 

メニューや色などの変更

・メニューの中身は index.html の中の menu1 menu2 menu3 などと書いている部分を修正。
URLも同様。

なお、同じように menu5 menu6 を追加すれば、メニューは自動的に増える。
 

・色は menu3.css の
.menu3 {
z-index: 1000000;
font-weight: bold;
font-size: 0.8em;
width: 100%;
background: #FFCC00;
position: fixed;
top: 20px;
right: 0;
text-align: center;
}
この辺りを修正。

画像等も適当に入れ替え可能。
 

 
 

ハンバーガーメニューの簡単な解説

HTMLファイル

↓下記コードの2行目の button の img/menu.png の部分を MENU などのテキストにする事も可能。
その場合はCSSでサイズなどを調整する必用がある。

※サンプルの menu.png は iOSのRetinaディスプレイ対応のため、画像サイズが陪になっている。

<div><!– humberger menu–>
<button class=”hamburger”><img src=”img/menu.png” width=”51px” height=”45px” /></button>
<button class=”cross”><img src=”img/menu2.png” /></button>
</div>
<div class=”menu3″>
<ul>
<a href=”index.html”><li>menu1</li></a>
<a href=”2.html”><li>menu2</li></a>
<a href=”3.html”><li>menu3</li></a>
<a href=”4.html”><li>menu4</li></a>
</ul>
</div>
<script src=’https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js’></script>
<script src=”js/menu3.js”></script>
 
 
 
menu3.js

スタイルシートなどに記述するクラス名などを変更したい場合はこちらを編集。

$(“.cross”).hide();
$(“.menu3”).hide();
$(“.hamburger”).click(function() {
$(“.menu3”).slideToggle(“slow”, function() {
$(“.hamburger”).hide();
$(“.cross”).show();
});
});

$(“.cross”).click(function() {
$(“.menu3”).slideToggle(“slow”, function() {
$(“.cross”).hide();
$(“.hamburger”).show();
});
});

 

Ajax他, スマホ・パソコン・Web関連

CSSで、子も孫も横並びのドロップダウンメニュー

コメントする

ドロップダウンメニューというか、プルダウンメニューというか…
下層の表示が縦並びになっているものしかない。
jQueryを使うものだとあるのだが、あえてCSSのみでやりたい時のために作ってみた。
———————————————————
ソース

<div id=”menu”><!– menu start –>
<ul id=”pulldown-menu”>
<li><a href=”index.html”><span>Home</span></a></li>
<li><a href=”#” class=”drop”><span>会社紹介</span></a>
<ul class=”about”>
<li><a href=”ceo.html”>CEO挨拶</a></li>
<li><a href=”partner.html”>パートナーシップ</a></li>
<li><a href=”map.html”>アクセス地図</a></li>
</ul>
</li>
<li><a href=”#” class=”drop”><span>事業紹介</span></a>
<ul class=”business”>
<li><a href=”area.html”>事業領域</a></li>
<li><a href=”smartgrid.html”>スマートグリッド</a></li>
<li><a href=”ess.html”>電力貯蔵装置</a></li>
</ul>
</li>
<li><a href=”#” class=”drop”><span>製品紹介</span></a>
<ul class=”product”>
<li><a href=”#” class=”drop”>新再生エネルギー</a>
<ul class=”nre”>
<li><a href=”sun.html”>太陽電池モジュール</a></li>
</ul></li>
<li><a href=”led.html”>LED</a></li>
</ul>
</li>
<li><a href=”#” class=”drop”><span>プロジェクト</span></a>
<ul class=”project”>
<li><a href=”#” class=”drop”>国内</a>
<ul class=”domestic”>
<li><a href=”island.html”>カパ島</a></li>
</ul>
</li>
<li><a href=”#” class=”drop”>海外</a>
<ul class=”oversea”>
<li><a href=”aus.html”>オーストラリア</a></li>
<li><a href=”thai.html”>タイ</a></li>
</ul>
</li>
</ul>
</li>
<li><a href=”contact.html”><span>お問い合わせ</span></a></li>
</ul>

</div><!– menu end –>

———————————————————————-
CSS
* {
margin: 0;
padding: 0;
list-style: none;
}
ul#pulldown-menu a {
color: #FFFFFF;
text-decoration: none;
}
ul#pulldown-menu a:link,
ul#pulldown-menu a:visited {
background: #3366FF;
}
ul#pulldown-menu a:hover,
ul#pulldown-menu a:active {
background: #3b91ff;
}

ul#pulldown-menu a.drop:link,
ul#pulldown-menu a.drop:visited {
background: #3366FF url(‘http://2since2006.up.seesaa.net/image/down.gif’) no-repeat;
}

ul#pulldown-menu a.drop:hover,
ul#pulldown-menu a.drop:active {
background: #3b91ff url(‘http://2since2006.up.seesaa.net/image/down.gif’) no-repeat;
}

ul#pulldown-menu li {
float: left;
position: relative;
width: 9em;
height: 2em;
line-height: 2em;
font-size: 11px;
}
ul#pulldown-menu li a.drop {
display: block;
width: 9em;
height: 2em;
text-align: center;
}
ul#pulldown-menu li a {
display: block;
width: 9em;
height: 2em;
text-align: center;
}
ul#pulldown-menu li ul li {
float: left;
position: relative;
width: 9em;
height: 2em;
line-height: 2em;
font-size: 11px;
}
ul#pulldown-menu li ul li a {
width: 9em;
height: 2em;
text-align: center;
}

ul#pulldown-menu li ul,
ul#pulldown-menu li ul li ul {
display: none;
}
ul#pulldown-menu li:hover ul {
clear: both;
width: 54em;
display: block;
position: absolute;
top: 2em;
left: 0;
z-index: 100;
}
ul#pulldown-menu li:hover ul li {
float: left;
}
* html ul#pulldown-menu li:hover ul {
vertical-align: bottom;
}

ul#pulldown-menu li:hover ul li ul {
display: none;
}

ul#pulldown-menu li ul li:hover ul {
clear: both;
float:left;
display: block;
position: absolute;
top: 0;
z-index: 200;
}

ul.about {
width: 27em;
margin-left: -9em;
}
ul.business {
width: 27em;
margin-left: -9em;
}
ul.product {
width: 18em;
}
ul.nre {
width: 9em;
margin-top: 2em;
}
ul.project {
width: 18em;
}
ul.domestic {
width: 9em;
margin-top: 2em;
}
ul.oversea {
width: 18em;
margin-top: 2em;
}

————————————————

そもそも、下層が縦にしかならない原因は、親の ul li 部分の横幅の間にしか、子や孫の ul li がこれない事。
したがって、子や孫の横幅を指定してやればこの問題は解決する。
が、下層メニューの数はそれぞれ固有なので、仕方なく個別に指定するしかなかった。したがって、汎用性は全くない。

あくまで参考程度にしかならないが、、結構困っている人がいたみたいなので、一応のTipsとして。