javascript アニメーションメニューコーディングの時有意店

フラッシュでなったナビゲーションメニューをジャバスクリプトで変えてくれと言う依頼が入って来た.

理由は簡単だ. フラッシュは政府で指定した標準コーディング検事をパスするのできないだからだ.(フラッシュを維持しようと割場合障害者をための代替リンク, noscriptイン場合のページを必ず見えるとするのようだ. 正確な内容はウェブ接近盛宴旧ソ文書を参考することところする.)

jquery dropdown menu路検索をすればおびただしく多いメニュー方法が出る. ところが http://shc.or.kr/ 形態のメニューは寝る出るのなかった.

そのためそのまま分かって具現を日見ることにした. どっちみち絵もおびただしく多くていちいち土方で作るとしたりした.(メニューは text路する蟹仮装(家長) ましだ. alt 入れたイメージは次善策だ.)

核心は visibility:hidden

下を見よう. マウスを何回来て行ったすればおもしろい仕事が起る. メニューが地勝手に引き続き動く.(動画参照)

メニューが地勝手に引き続き動く場合

メニュー1
- メニュー1-1
- メニュー1-2
メニュー2
- メニュー2-1
- メニュー2-2

<ul class="menutest1">
  <li>メニュー1
    <ul>
      <li>メニュー1-1</li>
      <li>メニュー1-2</li>
    </ul>
  </li>
  <li>メニュー2
    <ul>
      <li>メニュー2-1</li>
      <li>メニュー2-2</li>
    </ul>
  </li>
</ul>

jQuery(function(){
  var $ = jQuery;
  $('.menutest1 li ul').hide();
  $('.menutest1 li').hover(function(){
    $(this).children().show('slow');
  }, function(){
    $(this).children().hide('slow');
  })
});

メニューが中閉まって残っている場合

もう一つの場合は下位メニューが中閉まって重なって出るようになる場合(動画)だ.

メニュー1
- メニュー1-1
- メニュー1-2
メニュー2
- メニュー2-1
- メニュー2-2

.menutest2{position:relative;width: 600px; height:60px;}
.menutest2 li{float:left; margin-left:20px;}
.menutest2 li ul{width:500px;position:absolute;top:20px;}
.menutest2 li ul li{float:left; margin-left:20px;}

jQuery(function(){
  var $ = jQuery;
  $('.menutest2 li ul').hide();
  $('.menutest2 li').hover(function(){
    $(this).children().show('slow');
  }, function(){
    $(this).children().hide();
  })
});

上場合はマウスがメニュー1おこるがメニュー2義外で抜けて出る場合 hide() 関数を使って下位メニューを閉める時アニメーション效果を使うのなかった. ところが, 今度は下位メニューが消えるのないバグが生じた.

アニメーションで下位メニューがだ開かれること前にマウスが上位メニューですり抜けて来る場合にこういう場合が生ずる.

理由は簡単だ. hide() 関数は display:none で cssを作る関数だ. ところがアニメーションが持続してある時 display:noneをさせればちょっと間中見えた次アニメーションは引き続き作動しながら再び見えるようになるのだ.

そのため使うとする蟹 css義 visibility:hidden 速成だ.

まともになったアニメーションメニュー

メニュー1
- メニュー1-1
- メニュー1-2
メニュー2
- メニュー2-1
- メニュー2-2

jQuery(function(){
  var $ = jQuery;
  $('.menutest3 li ul').hide();
  $('.menutest3 li').hover(function(){
    $(this).children().css({visibility: 'visible',display: 'none'}).show('slow');
  }, function(){
    $(this).children().css('visibility','hidden');
  })
});

上コードがまともになったアニメーションメニューを作るコードだ.

核心は簡単だ. マウスが範囲を去った焚く visibility万 hiddenで作る. それでは displayに構わずに一応メニューは閉まるようになる.

マウスがメニュー1,2に上がった時 visibilityを visible路作って displayを noneで作った次アニメーションを始める. これ過程が連続的に成り立つことだからもう実行されてあったアニメーションは作動を止めるようになるのようだ.

上コードと cssを土台でまともになったアニメーションメニューを万たち数あること望む.

これ例題をファイルで添付する.

cfile25.uf.177112514D4BC88325016C.zip

- コメント機能はありません。コメントの代わりに[email protected]にメールを送ってください。

核心は visibility:hidden

メニューが 地 勝手に 引き続き 動く 場合

メニューが 中 閉まって 残っている 場合

まともに なった アニメーション メニュー

メニューが地勝手に引き続き動く場合

メニューが中閉まって残っている場合

まともになったアニメーションメニュー