今日の人気記事

まだデータがありません。

なめらかなアニメ効果付きのグライドナビゲーション「Dynamic glide navigation」

当ページのリンクには広告が含まれています。

スポンサーリンク

なめらかなアニメ効果付きのグライドナビゲーション(メニュー)を実装するプラグイン「Dynamic glide navigation」を紹介します。

jQueryプラグイン「Dynamic glide navigation」

このプラグインを使えば、ナビゲーション・アイテムにマウスオーバーすると色が変化、となりのアイテムにマウスを動かすと変化した色がふわーっとなめらかについてくるグライドナビゲーションを実装することができます。

  • メニューの幅・高さ
  • メニューのマージン
  • テキストのサイズ
  • カラー
スポンサーリンク

それではデモページのグライドナビゲーションをご覧ください。

「Heat Map」のデモ

ソース( HTML + jQuery )


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Dynamic glide navigation のデモでーす。">
<title>Dynamic glide navigation - jQueryプラグイン</title>
<link href="css/webwidget_menu_glide.css" rel="stylesheet" type="text/css"></link>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/webwidget_menu_glide.js"></script>
</head>
<body>
<h1>Dynamic glide navigation のデモでーす。</h1>

<div id="webwidget_menu_glide" class="webwidget_menu_glide">
<div class="webwidget_menu_glide_sprite"></div>
<ul>
  <li><a href="#">ホーム</a></li>
  <li><a href="#">なめらかな</a></li>
  <li class="current"><a href="#">スライド</a></li>
  <li><a href="#">メニュー</a></li>
  <li><a href="#">アイテム</a></li>
  <li><a href="#">アイテム</a></li>
</ul>
<div style="clear: both"></div>
</div>

<script>
$(function() {
  $("#webwidget_menu_glide").webwidget_menu_glide({
    menu_width:"100",
    menu_height:"30",
    menu_text_size:"15",
    menu_text_color:"#FF0000",
    menu_sprite_color:"#00FF00",
    menu_background_color:"#0000FF",
    menu_margin:"5",
    sprite_speed:"normal",
    container:"webwidget_menu_glide"
  });
});
</script>

</body>
</html>
スポンサーリンク

関連記事(一部広告含む)