HOME>WEBプログラム覚書>優れたナビゲーションを真似てみる

優れたナビゲーションを真似てみる

勉強のため優れたナビゲーションを再現してみる。もちろん完全再現ではない。 とりあえず今回はNavigation Menus: Trends and Examples | Design Showcase | Smashing Magazine で紹介されていたPlayground Blues。美しいですね。

現在の手持ちの武器は少々のJavascriptの知識と少々のjQueryの知識と少々のCSSの知識。 心許ないが仕方ない。

CSSとHTML

まずはHTMLとCSS。必要最小限で。

CSS

  1. body {
  2.     margin: 0px;
  3.     padding: 0px;
  4. }
  5.  
  6.  

HTML

  1. <div id="SideMenu">
  2. <ul>
  3.     <li><a href="">リスト1</a></li>
  4.     <li><a href="">リスト2</a></li>
  5.     <li><a href="">リスト3</a></li>
  6.     <li><a href="">リスト4</a></li>
  7.     <li><a href="">リスト5</a></li>
  8. </ul>
  9. </div>
  10.  

Javascript

まずはライブラリ利用せずに書く。 実行結果はこちら。

コード

Javascript

  1. onload = function() {
  2.     sideMenu({id:"SideMenu", height:50, width:100, img:"menu.gif"});
  3. }
  4.  
  5. var sideMenu = function(params)
  6. {
  7.     var erea = document.getElementById(params["id"]);
  8.     var ul = erea.getElementsByTagName("ul")[0];
  9.     var lis = erea.getElementsByTagName("li");
  10.     var as = new Array();
  11.  
  12.     var default_height = params["height"] + "px";
  13.     var default_width = params["width"] + "px";
  14.     var default_bp = -params["width"];
  15.  
  16.     // ULの設定
  17.     ul.style.height = params["height"] * lis.length;
  18.     ul.style.width = default_width;
  19.     ul.style.margin = "0px";
  20.     ul.style.padding = "0px";
  21.     ul.style.listStyle = "none";
  22.  
  23.     for (var i=0; i<lis.length; i++) {
  24.  
  25.         // 必要なら各LIにidをセット
  26.         /*
  27.         var li_id = document.createAttribute("id");
  28.         li_id.value = params["id"] + "Li" + i;
  29.         lis[i].setAttributeNode(li_id);
  30.         */
  31.  
  32.         lis[i].style.height = default_height;
  33.         lis[i].style.width = default_width;
  34.         lis[i].style.margin = "0px";
  35.         lis[i].style.padding = "0px";
  36.         lis[i].style.listStyle = "none";
  37.         lis[i].style.textIndent = "-9999em";
  38.  
  39.         // LI a の設定
  40.         as[i] = lis[i].getElementsByTagName("a")[0];
  41.         as[i].style.display = "block";
  42.         as[i].style.height = default_height;
  43.         as[i].style.width = default_width;
  44.  
  45.         var iheight = params["height"] * i;
  46.  
  47.         as[i].style.background = "url(" + params["img"] + ") no-repeat -" + default_width + " -" + iheight + "px";
  48.  
  49.         as[i].myHeight = -iheight + "px";
  50.  
  51.         as[i].myFunc = function()
  52.         {
  53.             var default_bp = -params["width"];
  54.             var self = this;
  55.  
  56.             var over_timer = setInterval(function(){
  57.                 default_bp += 10;
  58.                 if (default_bp <= 0) {
  59.                     self.style.background = "url(" + params["img"] + ") no-repeat " + default_bp + "px " + self.myHeight;
  60.                 } else {
  61.                     clearInterval(over_timer);
  62.                 }
  63.             }, 1);
  64.  
  65.             // マウスはなれたとき
  66.             this.onmouseout = function()
  67.             {
  68.                 clearInterval(over_timer);
  69.                 var out_timer = setInterval(function(){
  70.                     default_bp -= 10;
  71.                     if (default_bp >= -params["width"]) {
  72.                         self.style.background = "url(" + params["img"] + ") no-repeat " + default_bp + "px " + self.myHeight;
  73.                     } else {
  74.                         clearInterval(out_timer);
  75.                     }
  76.                 }, 1);
  77.             }
  78.         }
  79.  
  80.         /* マウスオーバーした時
  81.          * 自分自身の関数実行
  82.          */
  83.         as[i].onmouseover = function() {
  84.             this.myFunc();
  85.         }
  86.     }
  87. }
  88.  

firefox3、ie6、ie7にて動作確認。ie6で動いたのはうれしい誤算ｗ ただ動きが等速直線運動で塩分高め。

paramsはget、set備えたclass作ったほうがよかった気がします。 とはいえメニューの項目が頻繁に変わるようでなければjavascriptではアニメーションだけをやって その他はCSSで静的に設定しておいた方が楽ですね。

jQuery

次はjQueryを利用して再現してみます。実行結果はこちら。

Javascript

  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  2. <script language="javascript">
  3. $(function(){
  4.     var params = {id:"SideMenu", height:50, width:20, img:"menu.gif"};
  5.     var ul = $("#SideMenu ul");
  6.     var lis = $("#SideMenu li");
  7.     var as = $("#SideMenu a");
  8.  
  9.     ul.css({
  10.         padding:"0px",
  11.         margin:"0px",
  12.         listStyle:"none"
  13.     });
  14.  
  15.     lis.css({
  16.         height:params["height"],
  17.         width:params["width"],
  18.         textIndent:"-9999em",
  19.         padding:"0px",
  20.         margin:"0px",
  21.         listStyle:"none"
  22.     });
  23.  
  24.     as.each(function(i){
  25.         var h = "-" + params["height"] * i + "px";
  26.         $(this).css({
  27.             background:"url(" + params["img"] + ") no-repeat right " + h,
  28.             display:"block",
  29.             height:params["height"],
  30.             width:params["width"]
  31.         });
  32.  
  33.         $(this).hover(function(){
  34.             $(this).animate({width:"100px"}, "fast", "swing");
  35.             $(this).css({background:"url(" + params["img"] + ") no-repeat left " + h});
  36.         },function(){
  37.             $(this).animate({width:params["width"]}, "nomal", "swing");
  38.             $(this).css({background:"url(" + params["img"] + ") no-repeat right " + h});
  39.         });
  40.     });
  41. });
  42. </script>
  43.  

なんかカクカクしてますね。これは伸縮と同時にbackground-positionを変更してるからっぽい。 本家はmarginをアニメーションさせてるようです。

jQueryではイージングのプラグインjQuery Easing Pluginを 利用することで色々な動きができるようです。

javascriptだけのと違うのは当たり判定。小さくなってるんですがエリアは大きい方がいいですね。

投稿日 2009年4月 4日 06:19
カテゴリ JavaScript
タグ jQuery | サンプルコード | フレームワーク | 練習問題
トラックバック URL http://www.kantenna.com/cgi-bin/mt504/mt-tb.cgi/1173

コメント

コメントする
Name
Email Address
URL

KANTENNA.COM

Solarized

PAGE RANK

384 PV約 68 秒/1PV

[Ubuntu]動画ダウンロードと検索が簡単にできるGMediaFinder | 情報備忘録

814 PV約 68 秒/1PV

[PHP]MySQLを利用した画像の保存と出力 | WEBプログラム覚書

173 PV約 66 秒/1PV

jQuery PageSlide.js | KANTENNA.COM

630 PV約 61 秒/1PV

表示内容の切り替え(JavaScript) | WEBプログラム覚書

166 PV約 52 秒/1PV

[WordPress]投稿タイプ、タクソノミー、タームについて | WEBプログラム覚書

170 PV約 52 秒/1PV

jQuery slider | KANTENNA.COM

207 PV約 45 秒/1PV

[WordPress]XML-RPCを利用して外部から投稿したりする。 | WEBプログラム覚書

1045 PV約 37 秒/1PV

[jQuery]こんな機能があったんだ。jQuery stop() | WEBプログラム覚書

1055 PV約 35 秒/1PV

jQueryによる表示、非表示切り替え | WEBプログラム覚書

161 PV約 35 秒/1PV

[jQuery]closest()とparents() | WEBプログラム覚書

404 PV約 28 秒/1PV

[jQuery]デザイン系の人は、$(function(){})よりwindow.onloadを使ったほうがいいかも。 | WEBプログラム覚書

132 PV約 28 秒/1PV

基本的な光の作り方2 | KANTENNA.COM

584 PV約 25 秒/1PV

Dreamweaverで文字コードを変換する手順 | 情報備忘録

398 PV約 25 秒/1PV

Excel VBA の改行コード | WEBプログラム覚書

248 PV約 25 秒/1PV

javascript 子要素取得のメモ | WEBプログラム覚書

131 PV約 23 秒/1PV

コマンドプロンプト(cmd.exe)が芸術的すぎる件 | 情報備忘録

161 PV約 23 秒/1PV

渦っぽい光が美しいPhotoshop効果 | KANTENNA.COM

144 PV約 11 秒/1PV

ウェブデザイン・ホームページ制作 KANTENA.COM

394 PV約 9 秒/1PV

MySQLエラー「Column 'カラム名' in field list is ambiguous」 | WEBプログラム覚書

TIME LINE

2018 11.15

webpack、babelでreactのビルド環境構築

node.jsはインストール済でとにかくreactをJSXでかいてES5にトランスコンパイルして既存のページにscriptタグをぺちっとしたい人向け。

2018 06.05

[CakePHP3.7]LayoutでCellを使ったら memory size エラー出る場合

layoutファイルの中でcellをrender()するとViewでmemory size エラー出る場合がある。

どうやらViewでsetLayout()とか使ってると無限ループのようになってメモリエラーになるっぽい？？ 下手なlayout設定は命取りになる模様。

Tag