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

スクロールしたら途中から出てきて、スクロール戻すと消えるメニューを作る方法

画面をスクロールしたらふわっと出てくるメニューを作る

 

スクロールしたら途中フワッと浮き出るメニューのデモページ
はこちら。

メニューと書いたが、メニューだけでなく、単純に画像を浮かび上がらせたりページの下までスクロールした時に「ページトップへ戻る」のリンクを出したりもできる。

 
 

用意するもの

sudden.js
sudden.css

sudden.js の中身

$(function() {
var navBox = $(“#menu”);
navBox.hide();
var TargetPos = 100;
$(window).scroll( function() {
var ScrollPos = $(window).scrollTop();
if( ScrollPos > TargetPos ) {
navBox.fadeIn();
}
else {
navBox.fadeOut();
}
});
});

 

sudden.css の中身

#menu {
z-index: 1000000;
width: 100%;
position: fixed;
display: none; /*最初は非表示に設定*/
top: 20px;
right: 0;
filter:alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
}

絶対に必要なのが display:none; これで非表示にしておく必要がある。

それ以外は、場所や透過度、重なり順の設定などなので変更可。

 
 

HTMLの<head>と</head>の間で読み込む

<link rel=”stylesheet” type=”text/css” href=”css/sudden.css” /><!– menu途中で出てくる –>
<script type=”text/javascript” src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js”></script><!– menu途中で出てくる –>
<script type=”text/javascript” src=”js/sudden.js”></script><!– menu途中で出てくる –>

先ほどの、sudden.csssudden.jsjqueryを読み込む。

順番に注意。
 
 

フワッと表示させるHTMLのメニューの部分

<div id=”menu”>
<p><img src=”img/menu.png” /></p>
<!– メニューの中身ここの<div>と</div>の間に書く –>
</div>

画像は準備すること。

div=”menu” の間の部分が全て最初見えず、スクロールでふわっと表示される。
<p><img src=”img/menu.png” /></p>
<!– メニューの中身ここの<div>と</div>の間に書く –>

この部分は任意の内容に変更可能。

 
 

CSS、JSファイル、画像などのセットをまとめてダウンロードするのはこちら。

sudden.zip

 
スクロールしたら途中フワッと浮き出るメニューのデモページ
はこちら。

この記事も読まれています

メニュー画像オンマウスで、2段目が横並びになるメニューの作り方

CSS1個とjsファイル2個で作る簡単2段メニュー

 

2段メニューデモページ

 

色々な応用ができるが、今回は、1段目のメニューは画像、1段目にオンマウスで2段目がニョロリと表れて、文字でリンクが入れれるような形。

 
 

必要なもの

まとめてダウンロードしよう → accordionmenu.zip からダウンロード。

中身:

accordion.css ← 背景色や1段目のメニューの横幅を変える時に編集する
accordion.js
jquery.min.js
・index.html ← 必要ソースは後述
・メニュー画像数個

 

上記個別ファイルは、ファイル名を変えて .txt にしているので、こちらから右クリックでダウンロード保存した場合などは、ファイル名や拡張子を .js.css なども含めて上記の状態に戻すこと。

 
 

HTMLソースコード

 
まずは <head> ….. </head> の間で CSS と js ファイルを読み込む。

<link rel=”stylesheet” type=”text/css” href=”css/accordion.css” /><!– accordionmenu –>
<script type=”text/javascript” src=”js/jquery.min.js” ></script><!– accordionmenu –>
<script type=”text/javascript” src=”js/accordion.js”></script><!– accordionmenu –>

 
 

メニューを作りたい場所で、HTMLソースを書く。
2段メニューの文字やリンク先はここに記述。

メニュー画像の横幅や背景色を変えたい時は、 accordion.css を編集。

<div id=”gnav”>
<ul>
<li><a href=”index.html” class=”n01″><span>ホーム</span></a>
<div class=”gnavList”>
<ul>
<li><a href=”リンク先1.html”>2段メニュー1</a></li>
<li><a href=”リンク先2.html”>2段メニュー2</a></li>
</ul>
</div><!– gnavList –>
</li><!– ホーム –>
~~~~~~
以下同じ形でメニューが続いて
~~~~~~
</ul>
</div><!– gnav end –>

 
 

accordion.js、jquery.min.js、accordion.cssの3つと、メニュー画像、HTMLをサーバーにアップロード

FTPソフトを使って、ホームページ上にアップロードする。

 index.html
 jsフォルダ
  accordion.js
  jquery.min.js
 cssフォルダ
  accordion.css
 imgフォルダ
  メニュー画像など

パーミッションなどは関係ないので、644などでOK。

 

2段メニューデモページ

 

この記事も読まれています

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>

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

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

この記事も読まれています

「三」みたいなスマホ用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.pngmenu2.png

jsフォルダ/jquery.min.jsmenu3.jsjquery-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();
});
});

 

この記事も読まれています

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として。

この記事も読まれています