スタイルシートマニア

ホームページカスタマイズ Tips

jQueryで作るナビゲーション

すごく久方ぶりの更新です。
最近、企画だけやたらと盛り上がって自分のやるべきことをしないまま、最終的に無駄なものを作らされて、おもいっきり振り回されたあげく、ちゃんとお金を払わない人間にだまされてる今日この頃です。
こういう人間を見分けるにはどうしたらいいんでしょう!

そんなことはさておき!最近ナビゲーションのデザインやらレスポンシブルやらで悩んでいるときに見つけた便利なjQueryです。

Slidebars

slidebars1

横からにょきっと出てくるサイドバーです。
スマホサイトによさそうですね!

Demo | Source

Pushy

こちらも横からにょきっと出るタイプ。
注目すべきはコンテンツ部分にブラックのオーバレイをかけてナビゲーションを目立たせる優れ物!

Demo | Source

Slinky.js


THE なぞ!(笑)
スクロールすると見出し部分が付いてきます。
だ・け・ど!肝心のリンクがないのはなぜだ!
っというか、こんな感じでスクロールするごとにこんだけ積み重なったら見える部分がなくなって余計使いにくいし!(笑)
まあ、リンクは入れればいいと思うけど、もっとも使えないブラウザIEで使えないという(笑)
いよいよダメです!
まあ、たまにはこんなのもね!

Demo

jQuery pop menu

これは素晴らしい!
こういうポップアップナビをやりたかったんですよ!
Demo | Source

jQuery Square Menu


すごい!けど!何か足りない!
そんな感じの一品。

Demo | Source

Perspective page view navigation

どこかWindows8を彷彿とさせるように感じるのは僕だけでしょうか?
だけど、なかなかかっこいいです。
使いようによってはいい仕事しそう!
元に戻りたい時に表示されているスクリーンをクリックすると戻れるというのが分かりにくいかなぁっというのはありますが、こういうの好きです!

Deomo | Source

Naver


一見なんの変哲もないただのナビゲーションですが、実はレスポンシブ対応で縮小すると自動的にナビゲーションがスマホサイズ仕様になります。
これはコーディングが楽ですね!

Demo | Source

SlickNav

スマホ用のナビゲーションです。
びよんびよんっとなるギミックが楽しいスクリプトですね。

Demo | Source

SlimMenu

階層メニューが横に広がるタイプのナビゲーション。
確かに縦に長くなると少々うっとうしい感じになるので、スリムに見えますね。
しかし、階層が深くなりすぎて横にはいりきらなくなったらどうなるのでしょう!

Demo | Source

Horizontal Nav

横幅いっぱいに伸びて適度に各横幅を調整してくれるスクリプト
レスポンシブまで対応してたらよかったのかも・・・。

Demo | Source

Mmenu

こちらもスマホで使えそうな横からにょきっと出てくるナビゲーションスクリプト。
スワイプ対応でスマホサイトにはなかなかよさそう。
カスタマイズも簡単と書いているが、どうでしょう?

Source

Sidr

これは過去に使ったことがあるスクリプトですね。
なかなか良いんだけど、古いアンドロイドは未対応でした。

Menu Aim

こちらは、カーソルを合わせるとサムネイルが出てくるスクリプト。
すごいけど、多分使えない!
スマホにも対応みたいになっているけど、タップした時の挙動を確認していないので不明。
っというか、スマホはタップした時点でページ飛んじゃうからね。

Demo | Source

まとめ

スマホサイトで使うならjQuery pop menuやSlidebarsがよさげですね。
個人的にはPerspective page view navigationも使いようによってはいい感じがしそうな気がします。

スマホサイズのナビゲーションを最適化

またまた、最近話題のブラウズサイズに合せてCSSを最適化する「Fluid Grid Layout」に便利なお話。
タブレットやPCサイズなら問題ないんですが、スマホのナビゲーションで困った事はないでしょうか?
特に一つのソースでマルチにみせるFluid Grid Layoutだと「スマホだけにjQuery Mobileを使うわけにもいかず、ナビゲーションが・・・。」みたいなことを経験している人は少なからず存在していると思います。(僕もその一人です。)
そんなスマホサイズのナビゲーションにお困りの方にはこれ!

Big Menus  Small Screens  Responsive  Multi Level Navigation   Webdesigntuts
Big Menus, Small Screens: Responsive, Multi-Level Navigation

サンプル:http://source-marine.net/css-mania/sample/tessa-lt-dropdowns/

試すときは、以前の記事でご紹介したResizerを使うと便利です。

仕組みとしては、jQueryでブラウズサイズを取得して768以下だったら、toggleMenuのdisplayをinline-blockで表示させているようです。
時間があれば記事にしようと思います。

ダウンロード:http://webdesigntutsplus.s3.amazonaws.com/tuts/378_tessa/tessa-lt-dropdowns-21c7868.zip

ナビゲーションメニュー(実用編Ⅳ)

前回のナビゲーションは各項目の横幅が統一されていたので、計算で簡単に算出できましたが毎回毎回各項目の横幅を固定するわけにもいかないです。
ということで今回は、当サイトのナビゲーションを元に各項目の横幅が全てばらばらの物を作ってみます。

この手のもので一番厄介な部分はちょうどいいbackgroundの位置を見つけ出すとことろにありますが、これをみつけだすには・・・!勘!です!ひたすら数字を入力しまくってベストなポイントを探し出す!
っというのは冗談でこれもPhotoshopなどの画像編集ツールを駆使すると簡単にできます。

demo090913

まず、一枚にしたナビゲーションの画像をPhotoshopで開きます。
そして、物指しツールでそれぞれの項目の端から端を図るとナビゲーション画像の左端を基準とした位置とそれぞれの項目の幅と高さが表示されます。
これをそのまま入力していけば簡単に背景画像の位置を調整できます。
後は、ちょっとした微調整をすると完成です。

#global-navi01 ul{
 width: 739px;
 position: absolute;
 top: 72px;
 left: 0;
}
#global-navi01 li{
 display: inline;
}
#global-navi01 li a {
 height: 28px;
 float:left;
 display:block;
 font-size:0em;
 text-decoration:none;
 text-indent: -9999px;
 outline: none;
}
/*off*/
#home a {
 background: url(../img/global-navi01.jpg) 0px 0px no-repeat;
 width: 43px;
 margin-right: 6px;
}
#cms a {
 background: url(../img/global-navi01.jpg) -50px 0px no-repeat;
 width: 202px;
 margin-right: 14px;
}
#source-branch a {
 background: url(../img/global-navi01.jpg) -266px 0px no-repeat;
 width: 107px;
 margin-right: 18px;
}
#homepage-recommendation a {
 background: url(../img/global-navi01.jpg) -392px 0px no-repeat;
 width: 147px;
 margin-right: 7px;
}
#source-marine a {
 background: url(../img/global-navi01.jpg) -545px 0px no-repeat;
 width: 107px;
 margin-right: 17px;
}
#production-rate a {
 background: url(../img/global-navi01.jpg) -670px 0px no-repeat;
 width: 64px;
}
/*hover*/
#home a:hover {
 background-position: 0px -28px;
}
#cms a:hover {
 background-position: -50px -28px;
}
#source-branch a:hover {
 background-position: -266px -28px;
}
#homepage-recommendation a:hover {
 background-position: -392px -28px;
}
#source-marine a:hover {
 background-position: -545px -28px;
}
#production-rate a:hover {
 background-position: -670px -28px;
}

僕は普段Pthotoshopを使っていますが、フリーソフトでも優秀なソフトがたくさんありますのでそれぞれ使いやすいものを見つけてください。

ナビゲーションメニュー(実用編Ⅲ)

ナビゲーション画像を一枚にしてナビゲーションを作るのって難しくてできない!っという人のために、簡単に作るコツをお教えしましょう。
今回は今まで作っていきた以下の画像を使って簡単なものからやってみます。

この画像のポイントは同じ間隔の箱(長方形)で全項目を作っているところにあります。こうするとどうして簡単なのか?というと、一つ一つの項目に横幅を設定しなくても#menu08 li a に横幅を設定するだけで一括設定されることと、各項目の背景画像が簡単な足し算で設定できるのです。

この画像の項目ひとつにつき横幅100px立幅30pxで作ってあります。
つまり#menu08 li aの設定をwidth: 100px;height: 30px;に設定すれば、各項目の横幅と立幅の設定が完了します。
そして、とっても面倒な背景画像の設定ですが、横幅が100pxで固定されているので項目ひとつが増えるたびに、-100pxプラスしていけば簡単に設定ができるのです。
そしてそして、ロールオーバー時の設定ですが、off時の背景画像の設定が完了していればその設定のまま下に並んでいる画像位置を設定するだけで簡単にできます。この場合で言えば、立幅が30pxなので、縦位置を-30pxに設定すれば完了です。

#menu08 ul {
 width: 600px;
 margin-top: 2em;
}
#menu08 li {
 display: inline;
}
#menu08 li a {
 width: 100px;
 height: 30px;
 float: left;
 display:block;
 text-decoration: none;
 font-size: 0;
 text-indent: -9999px;
 outline: none;
}
#menu08 #home01 a {
 background: url(../img/navi08.gif) 0 0 no-repeat;
}
#menu08 #cms01 a {
 background: url(../img/navi08.gif) -100px 0 no-repeat;
}
#menu08 #source-branch01 a {
 background: url(../img/navi08.gif) -200px 0 no-repeat;
}
#menu08 #homepage-recommendation01 a {
 background: url(../img/navi08.gif) -300px 0 no-repeat;
}
#menu08 #source-marine01 a {
 background: url(../img/navi08.gif) -400px 0 no-repeat;
}
#menu08 #production-rate01 a {
 background: url(../img/navi08.gif) -500px 0 no-repeat;
}
#menu08 #home01 a:hover {
 background-position: 0 -30px;
}
#menu08 #cms01 a:hover {
 background-position: -100px -30px;
}
#menu08 #source-branch01 a:hover {
 background-position: -200px -30px;
}
#menu08 #homepage-recommendation01 a:hover {
 background-position: -300px -30px;
}
#menu08 #source-marine01 a:hover {
 background-position: -400px -30px;
}
#menu08 #production-rate01 a:hover {
 background-position: -500px -30px;
}

サンプル

ナビゲーションの画像

今回は前回の記事を題材にして、なぜ「画像を一枚にするのか?」っというところにスポットを当ててみます。

ナビゲーションを簡単に作ろうと思えば「id(#homeなど)ひとつに対して画像を作った方が早い」っというのは当然のことです。idに対してそのid用の画像を設定するだけで細かな設定が必要ありませんから。
もし、これがロールオーバーのアクションも何も設定しないのであればそれでも構わないのですが、たいていのホームページはロールオーバーのアクションをつけるのが至極当然な話です。
では、なぜロールオーバーするといけないのか?それはCSSだとロールオーバーする時に画像を読み込むための遅延が発生するからです。これはサーバやPC性能が悪いとかいうレベルの話ではなくどんな環境下でも起こるものです。まあ、なんだかんだ言うよりやってみましょう。

サンプル

どうでしょう?まあ、画像も小さいですし、そこそこのPC環境と接続環境であればそこまで気になるものでもないかもしれません。しかし、、ブラウザによっては、ロード中のアイコンがフェイバリットアイコンを表示している部分にちらちら表示されてあまり見栄えがよくありません。ものによっては、読み込みに時間がかかって画像自体がチラチラすることもあります。

これがロールオーバー時の画像も含めて一枚の画像になっていれば、最初にページを読み込んだ時点で読み込みが完了するのでこういった減少を回避することができます。

画像を一枚にするとファイルサイズが大きくなって結果ページの読み込みが遅くなるんじゃないの?っという議論が間々あるようですが、どちらにせよ最終的に読み込まなければいけないファイルサイズは違わないですし、ナビゲーションの画像を一枚の画像にしたぐらいで読み込に時間がかかるというようなことはないです。もし、ページの読み込みがあまりにも遅いという場合は、他の原因を考えるべきでしょう。

ナビゲーションメニュー(応用編Ⅱ)

今回は、li aの横幅を固定したタイプのナビゲーションを作ってみようと思います。

このタイプは、1つのli aに入りきる文字数を見計らいながら設定しなければいけません。今まで使ってきた文字列は入りきれなかったので、文字列を若干変えてfont-size: 0.8em;で文字サイズを変更、元々の設定でletter-spacing: の幅を変更していたのでletter-spacing: 0;でリセットしてli aに収まるように設定しました。

<div id="menu05">
<ul>
<li><a href="http://source-marine.net/css-mania">Home</a></li>
<li><a href="http://source-marine.net/cms/">CMS</a></li>
<li><a href="http://source-marine.net/source-branch/">ソースブランチ</a></li>
<li><a href="http://source-marine.net/homepage-recommendation/">HPのすすめ</a></li>
<li><a href="http://source-marine.net/">ソースマリン</a></li>
<li><a href="http://source-marine.net/production-rate/index.html">制作料金</a></li>
</ul>
</div>
#menu05 ul {

 width: 600px;
 margin-top: 2em;
 border-left: 1px solid #ccc;
}
#menu05 li {
 display: inline;
}
#menu05 li a {
 background: #ddd;
 width: 75px;
 height: auto;
 padding: 2px 10px;
 float: left;
 border-top: 1px solid #ccc;
 border-right: 1px solid #ccc;
 border-bottom: 1px solid #ccc;
 display:block;
 text-decoration: none;
 font-size: 0.8em;
 letter-spacing: 0;
 color: #333;
}
#menu05 li a:hover {
 background: #fff;
 border-right: 1px solid #ccc;
}
<a title="ナビゲーションメニュー(応用編2サンプル)" href="http://source-marine.net/css-mania/sample080921 " target="_blank">サンプル</a>

ナビゲーションメニュー(応用編Ⅰ)

前回までは、縦に項目が伸びていく縦軸のナビゲーションでしたが、今回はちょっとればるアップして横に項目を並べていく横軸のナビゲーションを作成します。

今回のポイントは、#menu04 li のdisplay: をinline;にして#menu04 li aのfloat: left;にすることで項目を横に並べることにあります。
更に横幅には限界があるので1つの項目に対して「どれだけの横幅を取るか?」を考慮しなければいけません。これには、「各項目の横幅を同じサイズに設定するパターン」、「各項目の文字列に合わせて大きさをautoで一つ一つ設定するパターン」、「項目1つ1つに横幅を設定するパターン」などなどがあります。
今回は、「各項目の文字列に合わせて大きさをautoで一つ一つ設定するパターン」を作ってみます。横幅の関係でメニュー項目の文字列を若干変更しています。

#menu04 ul {
 width: 600px;
 border-left: 1px solid #ccc;
}
#menu04 li {
 display: inline;
}
#menu04 li a {
 background: #ddd;
 width: auto;
 height: auto;
 padding: 2px 10px;
 float: left;
 border-top: 1px solid #ccc;
 border-right: 1px solid #ccc;
 border-bottom: 1px solid #ccc;
 display:block;
 text-decoration: none;
 color: #333;
}
#menu04 li a:hover {
 background: #fff;
 border-right: 1px solid #ccc;
}

サンプル

以上で完成です。

ナビゲーションメニュー(基本Ⅲ)

今回はナビゲーションにボタンのような効果を付けてみます。

今回のポイントはborderプロパティでoff時にoutset、hover時にinsetを使う事でボタンのエンボス(出っ張り)のような表現を演出する事にあります。

<div id="menu03">
<ul>
<li><a href="http://source-marine.net/css-mania">ホーム</a></li>
<li><<a href="http://source-marine.net/cms/">コンテンツマネージメントシステム</a></li>
<li><a href="http://source-marine.net/source-branch/">>ソースブランチ</a></li>
<li><a href="http://source-marine.net/homepage-recommendation/">ホームページのすすめ</a></li>
<li><a href="http://source-marine.net/">ソースマリン</a></li>
<li><a href="http://source-marine.net/production-rate.html">制作料金</a></li>
</ul>
</div>
#menu03 ul {

 width: 210px;
}
#menu03 li a {
 background: #ddd;
 width: 200px;
 height: 25px;
 padding-top: 5px;
 padding-left: 10px;
 border: 2px outset #ccc;
 display:block;
 text-decoration: none;
 color: #333;
}
#menu03 li a:hover {
 background: #fff;
 border: 2px inset #ccc;
}

どうでしょう?ちょっと押してみたくなりませんか?(笑)

ナビゲーションメニュー(基本Ⅱ)

今回は先日作ったナビゲーションをちょっとアレンジしてみます。

基本的には先日作成したものと同じ仕様ですが、今回は見た目をシンプルにして、ロールオーバーした時のアクションに一工夫加えてみます。

<div id="menu02">
<ul>
<li><a href="http://source-marine.net/css-mania"">ホーム</a></li>
<li><a href="http://source-marine.net/cms/">コンテンツマネージメントシステム</a></li>
<li><a href="http://source-marine.net/source-branch/"">ソースブランチ</a></li>
<li><a href="http://source-marine.net/homepage-recommendation/">ホームページのすすめ</a></li>
<li><a href="http://source-marine.net/">ソースマリン</a></li>
<li><a href="http://source-marine.net/production-rate.html">制作料金</a></li>
</ul>
</div>

背景色を白で統一、boderを各項目の下線だけにします。そして、ロールオーバーのアクションでtext-align: right;を使ってテキストを右寄せにして、border-right: 10px solid #600;で付箋のような演出を加えるとちょっとクール!かも?最後に、padding-right: 5px;で文字位置を調整して完成です。

#menu02 ul {
 width: 210px;
}
#menu02 li a {
 background: #fff;
 width: 210px;
 height: 25px;
 padding-top: 5px;
 border-bottom: 1px solid #666;
 display:block;
 text-decoration: none;
 color: #333;
}
#menu02 li a:hover {
 background: #fff;
 width: 195px;
 padding-right: 5px;
 text-align: right;
 border-right: 10px solid #600;
}

ナビゲーションメニュー(基本Ⅰ)

ナビゲーションメニューはホームページ制作において必要不可欠なパーツと言えます。

※大前提として、マージンその他もろもろの設定はbass.cssでリセットしているものとします。詳しくは、CSS初期設定のリセットをご覧下さい。

まずは、基本的な作り方でホームページの左や右に配置する縦に並べるナビゲーションを作ってみます。
一般的にナビゲーションのマークアップにはul要素とli要素を使ってマークアップします。

<div id="menu01">
<ul>
<li><a href="http://source-marine.net/css-mania">ホーム</a></li>
<li><a href="http://source-marine.net/cms/">コンテンツマネージメントシステム</a></li>
<li><a href="http://source-marine.net/source-branch">ソースブランチ</a></li>
<li><a href="http://source-marine.net/homepage-recommendation/">ホームページのすすめ</a></li>
<li><a href="http://source-marine.net/">ソースマリン</a></li>
<li><a href="http://source-marine.net/production-rate/index.html">制作料金</a></li>
</ul>
</div>

まず、#menu01 ulで<div id=”menu01″>の中のul要素に対して横幅を210pxに設定します。横幅は全メニューの文字列が収まる大きさに揃えます。次に、ボーダーの設定ですが、今回はそれぞれのメニューをぴったりくっつけた形のナビゲーションにしますので、ul要素にもボーダーのスタイルを入れていきます。これがもし、一つ一つのメニュー項目に、ある程度の間隔があるタイプのナビゲーションであれば、li a にborder: 1px solid #ccc;とういうような記述だけでOKなのですが、今回はulに上、右、左にボーダーを入れて、li a で各項目に下のボーダーを入れていきます。

#menu01 ul {
	width: 210px;
	border-width: 1px 1px 0 1px;
	border-style: solid;
	border-color: #ccc;
}

今回のデザインにリストマーカーは邪魔なのでlist-style: none;で消しておきます。

#menu01 li {
	list-style: none;
}

次に、リストのリンク要素に対してスタイルを設定します。

まず、backgroundで背景色を指定、横幅を200pxでpadding-leftを10pxで文字位置を調整して合計210px、縦幅を25pxでpadding-topを5pxにして文字の位置を調整して合計30pxに設定します。次に、display:block;でlistをブロック要素にかえて、先ほど書いた下のボーダーを入れます。後は、お好みでtext-decoration入れたり、文字色を変えたり、背景色を変えたりして調整してください。

#menu01 li a {
	background: #ddd;
	width: 200px;
	height: 25px;
	padding-top: 5px;
	padding-left: 10px;
	border-bottom: 1px solid #ccc;
	display:block;
	text-decoration: none;
	color: #333;
}

これだけでも十分ですが、ロールオーバーしたときのアクションが欲しいので#menu01 li a:hoverで設定します。

#menu01 li a:hover {
	background: #fff;
}

 

以上で完成です。