タイトルまま。用意するもの。

• jQuery(テストは1.2.3) →下のzipから一括でDL可。(同梱のjQueryは1.2.6)

まずはHTMLから。

 
moto-mono

 

  
Home
  

Photo
   

    
2008
    
2007
    
2006
    
2005
    
2004
   
  
  

Archive
   

    
2008
    
2007
    
2006
    
2005
   
  
  

考えるのメンドイ
   

    
メンドイ
    
メンドイ
    
メンドイ
   
  
  

考えるのメンドイ
   

    
メンドイ
    
メンドイ
   
  
  
Contact Me
 

いたってシンプル。
この辺は出来る限りクリーンを目指すのでspan要素とか要らないものはいれません。
次はスクリプトを。

li要素にhoverしたときスタイルを指定したいので、本当はli:hoverをCSSで使いたいけど
IEが対応してないのでスクリプトで拡張。

$("#gNav > li > img").parent().hover(function(){
 $(this).addClass("hover");
},function(){
 $(this).removeClass("hover");
});

ちょっと注意するのは、toggleイメージがあるときのみ親要素にclass=”hover”を適用させること。

$("#gNav > li > img").parent().hover(function(){

上記の記述でtoggleイメージがあるli要素にhoverしたとき、class=”hover”が適用される。
全部に適用するとCSSの記述がメンドくなる。メンドいのはダルイ。

次はtoggleをクリックしたときの動作を設定。
の前に

$("#gNav li ul").hide();

でプルダウンを消しておく(隠しておく)。
クリック時の動作設定は、

$("#gNav li img").click(function(){
 var parent = $(this).parent();
 if(parent.hasClass("active")){ // 親のli要素がclass="active"を持っていれば
  parent.removeClass("active"); // class="active"を取り除く
  $("#gNav li ul:visible").hide(); // 表示されているプルダウンを隠す。
 }else{
  $("#gNav li.active").removeClass("active");
  // それ以外の場合は、class="active"を持っているli要素からclass="active"を取り除き
  parent.addClass("active"); // クリックしたtoggleの親要素(li)にclass="active"を適用
  $("#gNav li ul:visible").hide(); // 表示されている他のプルダウンを消した上で(あれば)
  $(this).next().show(); // クリックしたtoggleの次の要素(プルダウン)を表示。
 }
});

ul要素のプルダウンはjQueryのtoggle()で出来るけど、
他にも指定することはあるのでclickで設定。

このままでもいいけど、
toggle以外のエリアをクリックしたときにプルダウンが表示されていればそれを消す、みたいな事をしたい。
Flickrはそうなってるし。

$("body").click(function(){
 $("#gNav li.active").removeClass("active");
 $("#gNav li ul:visible").hide();
});

ただし、上記のままやとさっき書いた効果と干渉してプルダウンが表示されないので
イベントの適用範囲をstopPropagation()で設定する。
書きなおしたのが以下。

$("body").click(function(event){
 $("#gNav li.active").removeClass("active");
 $("#gNav li ul:visible").hide();
});
$("#gNav li img").click(function(event){
 var parent = $(this).parent();
 if(parent.hasClass("active")){
  parent.removeClass("active");
  $("#gNav li ul:visible").hide();
  event.stopPropagation();
 }else{
  $("#gNav li.active").removeClass("active");
  parent.addClass("active");
  $("#gNav li ul:visible").hide();
  $(this).next().show();
  event.stopPropagation();
 }
});

CSSを書くときの注意点は

• li:hover時に(実際はクラスが適用されたとき)toggleイメージの表示をopacity(visibilityでも可)で指定する。
• li.hoverの背景画像にhover,activeのtoggleイメージを含める
• 文字の可変を考えて画像を長めに切り出す

画像の切り出しはこんな感じにする。

ul#gNav li {
 float: left;
 margin-right: .5em;
 border-left: solid #FFF 1px;
 padding: 0 5px;
 height: 24px;
 position: relative;
 background: url(../img/menu_bg_right.gif) no-repeat right 25px;
 line-height: 24px;
}

ul#gNav li.hover,
ul#gNav li.active {
 border-left: solid #F0F0F0 1px;
 background: url(../img/menu_bg_right.gif) no-repeat right top;
}

ul#gNav li.active {
 background: url(../img/menu_bg_right.gif) no-repeat right -25px;
}

 ul#gNav li a {
  margin-right: 5px;
  font-weight: bold;
  text-decoration: none;
 }

 ul#gNav li a:hover {
  text-decoration: underline;
 }

 ul#gNav li img {
  position: relative;
  top: 1px; /* IE7 */
  cursor: pointer;
 }

 * html ul#gNav li img {
  top: 4px; /* IE6 */
 }

 html>/**/body ul#gNav li img {
  top: 4px; /* modern browser */
 }

 ul#gNav li.hover img,
 ul#gNav li.active img {
  opacity: 0;
  filter: alpha(opacity=0);
 }

 ul#gNav ul {
  border: solid #666 1px;
  border-top: none;
  border-left-color: #F0F0F0;
  padding: 0 5px 3px;
  width: 11em;
  position: absolute;
  top: 24px;
  left: -1px;
  background: #FFF;
 }

 ul#gNav li.last-child ul {
  width: 16em;
 }

  ul#gNav ul li {
   float: none;
   padding-right: 0;
   width: auto;
   height: auto;
   font-size: 90%;
   line-height: 2;
  }

  ul#gNav ul li.first-child {
   border: none;
  }

   ul#gNav ul li a {
    border-top: solid #F0F0F0 1px;
    padding-top: 2px;
    display: block;
    width: 100%;
    font-weight: normal;
   }

   ul#gNav ul li.first-child a {
    border: none;
   }

プルダウンのul要素はwidthを与えてあげないといけないので適当な幅を。
完成サンプルは以下。

Demo

追記

08.08.12

ソースを修正。

08.07.21

サンプルのDL用zipを追加。

ダウンロード

creating_flickr_like_menu.zip(23KB)

動作環境

Windows: IE6, IE7, Firefox3, Opera9.5, Safari3で確認