Horizontal Subnav


Description: バー全体が降りてくるタイプのドロップダウンメニューです。横並びに羅列されるので、下部コンテンツを邪魔することもありません。クロスブラウザで動作します。
Sample: demo
Tutorial: Horizontal Subnav with CSS
License: -

Sample

Note

$(document).ready(function() {

$("ul#topnav li").hover(function() { //Hover over event on list item
	$(this).css({ 'background' : '#1376c9 url(topnav_active.gif) repeat-x'}); //Add background color + image on hovered list item
	$(this).find("span").show(); //Show the subnav
} , function() { //on hover out...
	$(this).css({ 'background' : 'none'}); //Ditch the background
	$(this).find("span").hide(); //Hide the subnav
});

});

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

Related snippet :

  • Description: クリックでドロップダウンするメニューコンテンツを実装します。スムーズにダウンし、戻りもスムーズです。IE6でもIE7でも全く同様の動きをしてくれます ...
  • Description: シンプルにアニメーションするメニュー。簡単なコードで実装することが出来ます。クロスブラウザにも対応しており、ちょっとしたインパクトも与えることができ ...
  • Description: シンプルなツールチップです。少しのコードで実装可能で、画像を含めることも出来ます。クロスブラウザにも対応。 Sample: demo ...
  • Description: Macライクなドックメニューを実装するプラグインです。爽快なアニメーションがかわいいですね。アイコンにはキャプションも表示してくれます。クロスブラウ ...
  • Description: クロスブラウザで画像不使用の角丸コンテンツを実装するプラグインです。非常に軽量で使いやすいかと思います。 Sample: demo ...
  • Description: Read moreコンテンツを実装。といってもAjaxで呼び出す等ではなく、spanタグで囲ったテキストを最初は非表示させておく、というものです。 ...
  • Description: タブメニューにマウスを乗せるだけでコンテンツを切り替えます。IE6だけ表示が崩れるので対策が必要です。使い勝手はとても良いのでうまく使っていきたいで ...