org_3clms_ygosea

ナビのマウスオーバーを効果的にする

  • 使用デザイン：org_3clms_ygosea　（QHM Temps　からダウンロード）
    ナビの上にマウスがきたら、どこからともなく丸い影が現れてマウスに付いていきます。
    マウスがいなくなると影も消えます。
    IE8では影が四角になり、ちょっとかっこ悪いです。
    Firefox, ChromeはOK。たぶんIE9もOK

【作成手順】

  1. jQueryのサイトから　jquery-1.js　と　jquery.js 　をダウンロードする。
  2. QHMのjsフォルダの下に addjs フォルダを作成する。(QHMにインストールされているjQueryと同じ名前のライブラリがあった場合、版数が異なると不具合がおきる可能性があるのでフォルダを分ける。また、QHMのバージョンアップで影響を受けないようにするため）
  3. ダウンロードしたものをQHMの js/addjs フォルダ内にFTPで転送する。
  4. 以下のスクリプトをナビにコピペする。
  5. デザインに合うように、CSSの値を変更する。

【解説】

  • QHMのナビはリスト "-" のおまじないで作成しますが、ページを表示するときにQHMが書き出すコードは "list1"　という名前のclassになります。この list1 に対し、jQueryでちょっとカッコよくします。
  • list1の前に #navigator をつけて、ナビ配下の list1 のみに、この効果が有効になるようにします。これによりナビ以外のリストは通常のまま表示されます。

【コード】

#beforescript{{
<script type="text/javascript" src="js/addjs/jquery-1.js"></script>
<script type="text/javascript" src="js/addjs/jquery.js"></script>
<script type="text/javascript">
jQuery(function(){
  jQuery('#navigator .list1').slidingMenu({ initialOpacity: 0.5 });
});
</script>

<style type="text/css">
/* #navigator ul {list-style:none;background:#5A5AF2;padding:10px;} */ /*リストの背景*/
#navigator ul {list-style:none; padding:10px 10px 10px 10px;}
#navigator li {display:inline;padding:3px 0px 3px 0px;}
#navigator li a {color:#fff;}
#navigator .list1 li.Background {
  background: #006699;   /*ナビの後ろで移動する背景の色*/
  margin :0px 0px 0px 0px;
}
/******************************************************************/
/** 以下は　jquery.css   の内容 **/
ul li.Background {
  background: #555;
  -moz-border-radius: 10px;
  border-radius: 10px;
}
* html ul li.Background {
  z-index: -10;
}
*:first-child+html li.Background {
  z-index: -10;
}
/******************************************************************/
</style>
}}

こちらは通常のリスト

  • リスト１
    • リスト２
      • リスト３