レスポンシブに対応したナビゲーションメニューjQuery「MeanMenu」の導入手順

必要ファイルのダウンロード

MeanMenu」こちらページの「MEANMENU ZIP DOWNLOAD」のボタンをクリックすると実際に動作するデモサイトの圧縮したものをダウンロードできます。

設置場所の確認

デフォルトでは「nav」が「header」の中に配置されていて

<header>
 <nav>
  <ul>
   <li><a href="#">Top Level Link</a>

のようになっています。

今回新しく設置する移植先は

<header>
 <h1>Site Title</h1>
</header>
<nav>
 <ul>
  <li><a href="#">Top Level Link</a>

上記のようのheaderタグの中ではなく、headerタグと並列にnavタグを並べて設置することとします。

htmlのコピペ

デフォルトの「demo.html」の「nav」の中身をそっくり移植先のhtmlにコピペします。

<nav>
 <ul>
  <li><a href="#">Top Level Link</a>
   <ul>
    <li><a href="#">Second Level Link</a>
     <ul>
      <li><a href="#">Third Level Link</a></li>
      <li><a href="#">Third Level Link</a></li>
      <li><a href="#">Third Level Link</a>
       <ul>
        <li><a href="#">Fourth Level Link</a></li>
        <li><a href="#">Fourth Level Link</a></li>
        <li><a href="#">Fourth Level Link with extra long name so it wraps</a>
         <ul>
          <li><a href="#">Fifth Level Link</a></li>
          <li><a href="#">Fifth Level Link</a></li>
          <li><a href="#">Fifth Level Link</a></li>
         </ul>
        </li>
       </ul>
      </li>
     </ul>
    </li>
    <li><a href="#">Second Level Link</a></li>
    <li><a href="#">Second Level Link</a></li>
   </ul>
  </li>
  <li><a href="#">Top Level Link</a></li>
  <li><a href="#">Top Level Link</a></li>
  <li><a href="#">Top Level Link</a></li>
 </ul>
</nav>

 

インラインCSSのコピペ

デフォルトの「demo.html」のtitleタグの下にあるCSSを全て移植先のtitleタグの下にコピペします。注意点はセレクタが「header nav」となっているところを移植先に合わせて「nav」に全て修正します。

デフォルトで

前略

header nav {
text-align: center;
background: #efefef;
}
header nav ul {
margin: 0;
padding: 1em;
list-style-type: none;
}
header nav ul li {
display: inline;
margin-left: 1em;
}
header nav ul li:first-child {
margin-left: 0;
}
header nav ul li ul {
display: none;
}

以下略

となっているところを

前略

nav {
text-align: center;
background: #efefef;
}
nav ul {
margin: 0;
padding: 1em;
list-style-type: none;
}
nav ul li {
display: inline;
margin-left: 1em;
}
nav ul li:first-child {
margin-left: 0;
}
nav ul li ul {
display: none;
}

以下略

のように修正します。

javascriptのコピペ

デフォルトの「demo.html」の「body」タグの直前のjavascriptを移植先の「body」タグの直前へコピペします。

<script>
	jQuery(document).ready(function () {
	    jQuery('nav').meanmenu();
	});
</script>

 

注意点は先程と同様にjavascriptの5行目あたりの

jQuery('header nav').meanmenu();

の部分を

jQuery('nav').meanmenu();

jQuery(‘nav’).meanmenu();
と修正します。

「meanmenu.css」ファイルのリンク

移植先のhtmlに「meanmenu.css」をリンクさせます。同じ階層に設置する場合は

<link href="meanmenu.css" rel="stylesheet" type="text/css" />

「css」フォルダに設置する場合は

<link href="css/meanmenu.css" rel="stylesheet" type="text/css" />

等自分の環境に合わせてリンク設定する。

「jquery.meanmenu.js」、「jquery-1.11.1.min.js」ファイルのリンク

CSSと同様に、移植先のhtmlに「jquery.meanmenu.js」をリンクさせます。記述場所は先程記述した「body」タグの直前に記述したjavascriptの直前。「jquery-1.11.1.min.js」は「http」から始まっているのでそのままそっくりコピペします。

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/jquery.meanmenu.js"></script>

とりあえずここまでで問題がなければ、ブラウザの幅を狭くしていくと、ナビゲーションメニューがスマホ用のものに切り替わります。

移植後のソース全文

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>meanmenu</title>
<style>
/* Basic CSS */

html {
	-webkit-text-size-adjust: none;
	-webkit-font-smoothing: aliased;
}
body {
	margin: 0;
	padding: 0;
	font: 16px/1.5 "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}
h1 {
	font-size: 28px;
	font-weight: 100;
	text-align: center;
}
h2 {
	font-size: 18px;
	font-weight: 100;
	text-align: center;
	margin-top: 40px;
}
nav {
	text-align: center;
	background: #efefef;
}
nav ul {
	margin: 0;
	padding: 1em;
	list-style-type: none;
}
nav ul li {
	display: inline;
	margin-left: 1em;
}
nav ul li:first-child {
	margin-left: 0;
}
nav ul li ul {
	display: none;
}
a {
	color: #f77564;
}
a:hover {
	color: #333;
}
a, a:hover {
	-o-transition: color 0.25s ease-in;
	-webkit-transition: color 0.25s ease-in;
	-moz-transition: color 0.25s ease-in;
	transition: color 0.25s ease-in;
}
section, article, header {
	display: block;
	float: left;
	width: 100%;
}
article {
	width: 96%;
	padding: 3em 2%;
}
</style>
<link href="css/meanmenu.css" rel="stylesheet" type="text/css" />
</head>

<body>
<header>
	<h1>Site Title</h1>
</header>
<nav>
	<ul>
		<li><a href="#">Top Level Link</a>
			<ul>
				<li><a href="#">Second Level Link</a>
					<ul>
						<li><a href="#">Third Level Link</a></li>
						<li><a href="#">Third Level Link</a></li>
						<li><a href="#">Third Level Link</a>
							<ul>
								<li><a href="#">Fourth Level Link</a></li>
								<li><a href="#">Fourth Level Link</a></li>
								<li><a href="#">Fourth Level Link with extra long name so it wraps</a>
									<ul>
										<li><a href="#">Fifth Level Link</a></li>
										<li><a href="#">Fifth Level Link</a></li>
										<li><a href="#">Fifth Level Link</a></li>
									</ul>
								</li>
							</ul>
						</li>
					</ul>
				</li>
				<li><a href="#">Second Level Link</a></li>
				<li><a href="#">Second Level Link</a></li>
			</ul>
		</li>
		<li><a href="#">Top Level Link</a></li>
		<li><a href="#">Top Level Link</a></li>
		<li><a href="#">Top Level Link</a></li>
	</ul>
</nav>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/jquery.meanmenu.js"></script>
<script>
	jQuery(document).ready(function () {
	    jQuery('nav').meanmenu();
	});
</script>
</body>
</html>

Dreamweaver デザインビューで超簡単ul、liコーディングの小技

リストにしたいものをキーボートから入力でもコピペでもかまわないので、デザインビューへ配置します。

01

ここで気を付けなければいけないことはコードビューではなく、あくまでデザインビューでの操作になりますので、デザインビューをクリックしてカーソルがあることを確認しながら進めていきます。

02

デザインビューに配置したものを選択して、プロパティパネルのリストボタンをクリック

02_1

コードビューを見るとリストにしたいものが丸ごとul、liに囲まれています。リストの区切りにカーソルを入れて「Enter」キーを入力。

02_2

すると上記の画像のようになるので、以下も同じようにリストの区切りにカーソルを入れて「Enter」キーを入力。

03

ちょっとコードビューがおかしなことになってますが気にせずに、ここから更にリストの最終行の最後にカーソルを置いて「Enter」キーを入力。

05

新たなリストの行が加えられそのまま入力可能な状態になります。

06

リストをコーディングするときにはこれが一番簡単で早いですね。デザインビューも使い方次第で効率がとてもあがるので、是非おためしあれ。

Firefox Ver22.0で2ページ目以降が印刷されないときのprint.cssでの対処法

Firefoxの前にIE9でクライアントから印刷用ページの2ページ目以降のテーブルの罫線が消えて、表が見にくいのできちんと表示させるようにと要請があり、そのページは2ページにまたがるテーブルで月の予定を掲載しているページで確認してみると確かに2ページ目以降の罫線が表示されていない・・・。

まーたIEかよ・・・と、愛しのFirefoxで確認してみると、なんとFirefox(Ver22.0 2013年7月17日現在)では罫線どころか2ページ目以降なにも表示されていない、おまえもかっっ!!

ググってみるといろいろと情報が錯綜していて、いろいろな対処法があちこちに散在していたけど、以下がIE9もFirefox(Ver22.0)もバッチリだったの備忘録として残しておきます。

原因
「float」させてあるものの中身が縦長で2ページにまたがる場合に起きるようです。今回では右にフロートさせてあったdivの中のテーブル(テーブルは全くfloatをかけていない)が2ページ目以降表示されない状態だった。

対処法
今回の場合左にfloatさせてあるメニューは印刷用ページにはprint.cssで表示させないようにさせているので無視。
floatのレイアウトが設定されているstyle.cssで下記のように設定されていて

#contents {
 float: right;
 width: 560px;
 font-size: 100%;
 line-height: 1.6em;
}

これをprint.cssで下記のように設定する。

#contents {
 display:table-cell;
 float:none;
 vertical-align:top;
}

要約すると印刷時(print.cssを読み込んだときは)floatを解除してテーブルレイアウトで表示するということです。

いろいろ試してみましたが、これが一番簡単確実でIE9もFirefoxもOKというスグレモノでした。同じような状況の方は是非お試しください。

追記

上記の方法で2ページ目以降が表示されないのは回避できたが、自分の環境のIE9で、テーブルのセルを結合していて2ページにまたがるような縦長のページだとボーダーが表示されないという現象が改善されなかった。いろいろ調べてみると他のブラウザMozilla Firefox、Google Chrome、Safariでは問題なく表示された。

ちなみにと「縮小して全体を印刷する」から50%、60%、70%、80%、90%と変更して表示してみるとボーダーが表示されたり、されなかったり、表示されない位置も一定ではなくプレビュー画面での改ページ部分であったり、なかったりと、こらぁ明らかに君だよ!君!インターネットエクスプローラー君!!いい加減にしたまえ!!と言わずにはいられない。こんなことにどれだけの時間を費やしたことか・・・。バグですか・・・そうですか・・・インターネットエクスプローラーなんてこの世からなくなればいいのに・・・。

俺の時間を返せ>マイクロソフト

———————————————————————————-

参考サイト

Webクリエイターネット」様の

印刷対応サイト

Firefoxでaタグに text-indent -9999pxを設定したときに出る線を消す方法

グローバルメニューやサブメニューのaタグにリンクを設定してテキストを表示させないようにするために CSSで text-indent を -9999pxに設定するオーソドックスな手法がありますが、これを設定するとFirefoxでは下の画像のように余計な線が表示されてしまいます。

outline01

その線を消す方法の覚書。今更これ?みたいな感はありますが、2、3度手書きの覚書ノートを見る機会があったので、こちらにも転載しておこうということなので、ネタが古くてごめんなさい。

CSSのaタグの-9999px が設定されている場所に


a{

background: url("../img/navi04.jpg") no-repeat scroll 0 0 transparent;
 display: block;
 height: 30px;
 text-indent: -9999px;
 width: 141px;

outline: 0;  (←これを追記する)

}

いじょっっ

WordPress 自作の画像やJavaScriptの設置方法と設置したファイルへのディレクトリパス取得タグの設定方法

WordPressでサイトのURLを出力する「bloginfo(‘url’)」とか、サイトのタイトルを出力する「bloginfo(‘name’)」はすぐ、ピン!と来るんだけど、自作テンプレートを作成する際に、自分で作った画像やJavaScriptへのパスを出力するタグを毎度毎度調べなおすので覚書。

通常のHTML/CSSで、画像のような一般的な配置の場合パスの指定方法は

html

<img src="img/logo.jpg" width="50" height="50" />

となる。

WordPressの場合は動的にパスを生成するので、上記のように直書きしてもリンクエラーとなってしまう。

自作テンプレート等を作成した場合の例で下記のような配置の画像を表示させる場合。

wordpress

「twentyeleven」はテンプレートフォルダ(例)で
「/wordpress/wp-content/themes/twentyeleven/」に設置してあるものとしてこの「img」フォルダにある「logo.jpg」を表示させるには

<img src="<?php bloginfo('template_url'); ?>/img/logo.jpg" width="50" height="50" />

子テーマを作成していてそれを指定する場合は

<img src="<?php bloginfo('template_directory'); ?>/img/logo.jpg" width="50" height="50" />

実は自分も「template_url」と「template_directory」の違いが判らなくて、今回の記事を書くにあたってググる先生に聞きました^^;

JavaScriptの場合も同じで例として


<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/hogehoge.js"></script>

といったような感じになります。

半月も経つとまた忘れるんだよなぁ・・・。