最近、運用サイトの一部で、メニューバーがメニューの追加追加で増えてきた。
当初は4～6個ぐらいのメニューの予定でありましたが、クライアントの要求次第では、今後さらに増えることも予想されています。
当然、ギチギチのメニューバーでは見た目もユーザビリティも低下することも懸念されてきています。
WEBクリエーターでもない私ゆえに、すぐに解決策が出てこない。
簡単な解決策を考えてみる。
・メニューバーのスリム化。
・サイトレイアウト全体の変更。
他に何かあればいいんですが・・・
上記2つについて、サイトレウアウト全体の変更はおそらく作業量、時間的にちょっと困難。
メニューバーの変更はというと、
・階層型にする
・メニュバーの位置変更（現在の横置きから縦置きにする←サイトレイアウトの変更が伴う）
となると、階層型にする？しかないか・・・。
調べてみると、メニューバーの階層型を表現する方法はいろいろありました。
検索結果の中で特にが多かったのが、CSSによる実装、jQueryによる実装の2つでした。
CSSで実装する場合、メニューボタンを画像で表現する方法と非画像で表現する方法というものが多くありました。
メニューボタンでのメニューボタン作成については、メニューが追加されるたびにボタン画像の編集が必要になりますが、ボタン自体が画像なので、なかなか凝った物が作れるようです。
非画像の場合は、一度階層型のメニューをCSSで実現してしまえば、あとはメニューが追加されるたびにliリストを追加するだけでよく、こちらは非常に魅力的。ただ、画像ありのメニューと比較すると、若干見劣りする感があります。
jQueryというjavascriptのライブラリを使って、メニューボタンを表現する方法が結構ネット上に転がっていて、試しに取り入れ見たところ、なかなか良さそうな感じでした。
jQueryは自体、初めてでしたので、インストールや設定が不安でしたが、意外にも簡単でした。
jQuery使用までの簡単な流れとしては、つぎのとおり。
1.jQueryのサイトから最新版のライブラリ（※）をダウンロード。
（※）ファイル内の中身は、/! jQuery v1.9.1 | (c) 2005, 2012 jQuery Foundation, Inc. | jquery.org/license
//@ sourceMappingURL=jquery.min.map・・・・・・みたいな文字列の羅列になっています。
2.続いて、ダウンロードしたファイルをwebサーバーの任意のディレクトリにアップロード。
3.htmlを記述する。
以下例です。head内にcssとjqueryの記述して読み込んでいます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>jQueryの読み込み</title>
<style type="text/css">
{
margin:0;
padding:0;
list-style:none;
}
ul.main li{
float:left;
width:150px;
height:40px;
position:relative;
}
ul.main li a{
display:block;
width:100%;
height:100%;
text-decoration:none;
text-indent:30px;
line-height:40px;
background-color:#336699;
color:#FFFFFF;
}
ul.main li a:hover{
text-decoration:none;
background-color:#003366;
color:#FFFFFF;
}
//ul.sub,
ul.sub ul.sub{
display:none;
}
ul.sub li ul.sub{
position:absolute;
top:0;
left:150px;
}
/clearfix/
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-table;
min-height: 1%;
}
/ Hides from IE-mac */
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/ End hide from IE-mac /
/clearfix*/
</style>
<script type="text/javascript" src="./jquery-1.9.1.min.js"></script>
<script>
$(function(){
$('ul.main li').hover(function(){
$('>ul:not(:animated)',this).slideDown('fast')
},function(){
$('>ul',this).slideUp('fast');
});
});
</script>
</head>
<body>
<h1>メニューをjqueryで表現する</h1>
<ul class="main clearfix">
<li><a href="#">メニュー1</a>
<ul class="sub">
<li><a href="#">サブ1-1</a>
<ul class="sub">
<li><a href="#">サブ1A-1</a></li>
<li><a href="#">サブ1A-2</a></li>
<li><a href="#">サブ1A-3</a></li>
</ul>
</li>
<li><a href="#">サブ1-2</a></li>
<li><a href="#">サブ1-3</a></li>
</ul>
</li>
<li><a href="#">メニュー2</a>
<ul class="sub">
<li><a href="#">サブ2-1</a></li>
<li><a href="#">サブ2-2</a>
<ul class="sub">
<li><a href="#">サブ2A-1</a></li>
<li><a href="#">サブ2A-2</a></li>
<li><a href="#">サブ2A-3</a></li>
</ul>
</li>
<li><a href="#">サブ2-3</a></li>
</ul>
</li>
<li><a href="#">メニュー3</a>
<ul class="sub">
<li><a href="#">サブ3-1</a></li>
<li><a href="#">サブ3-2</a></li>
<li><a href="#">サブ3-3</a>
<ul class="sub">
<li><a href="#">サブ3A-1</a></li>
<li><a href="#">サブ3A-2</a></li>
<li><a href="#">サブ3A-3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
どうでしょうか。ちなみに今回は読み込むファイルをファイル内に記述しましたが、外部ディレクトリに保存しておいて、読み込ませる方法がメンテナンス向上のためによさそうです。
