Fluid Navigation


Description: マウスオーバーで要素が滑らかにプルダウンするメニューです。軽量で動きも流動的でインパクトがあります。
Sample: demo
Tutorial: Fluid Navigation – How to create an informative menu-bar with jQuery & CSS
License: -

Sample

Note

$(document).ready(function()
{
$('#menuBar li').click(function()
{
  var url = $(this).find('a').attr('href');
  document.location.href = url;
});
$('#menuBar li').hover(function()
{
   $(this).find('.menuInfo').slideDown();
},
function()
{
  $(this).find('.menuInfo').slideUp();
});
});

jQueryと上記コードのみで動きます。

Related snippet :

  • Description: マウスを乗せると縦スライドして色が切り替わるメニュー。テキストメニューをスタイリッシュに見せることができるのでSEOも考慮しているサイトにも使えそう ...
  • Description: オンマウスでフェードエフェクトをかけながら画像を切り替えます。cssスプライト使用。シンプルなエフェクトですが、クロスブラウザにも対応しており、目を ...
  • Description: モニターサイズによって、Youtubeの幅を可変するコード。例えばIphoneでアクセスした際に自動でレイアウトを調整します。MedeiaQuery ...
  • Description: シンプルでベーシックなドロップダウンメニューです。簡単なアニメーション付きで、クロスブラウザ対応です。最もよく見るタイプのメニューですね。 ...
  • Description: シンプルにアニメーションするメニュー。簡単なコードで実装することが出来ます。クロスブラウザにも対応しており、ちょっとしたインパクトも与えることができ ...
  • Description: タブをページ推移無しで切り替えるプラグインです。切替時にも、縦にスライドするアニメーションが施されています。サイドバーなどで重宝しそう。 ...
  • Description: ラインごとドロップダウンするグローバルメニューです。簡単なコードで実装できます。クロスブラウザで動いてくれるので使い勝手も良さそうですね。 ...