P44:STEP ul.menu li{ ul.main li{ /* メニューボタンロールオーバー / ul.menu li a:hover{ background:url("btn_on.png"); ul.menu li a{ ul.main li a{ / メニューボタンロー

Size: px

Start display at page:

Download "P44:STEP ul.menu li{ ul.main li{ /* メニューボタンロールオーバー */ ul.menu li a:hover{ background:url("btn_on.png"); ul.menu li a{ ul.main li a{ /* メニューボタンロー"

かずひろすえがら
5 years ago
Views:

1 jquery デザインブック仕事で絶対に使うプロのテクニックお詫びと訂のお知らせ jquery デザインブック仕事で絶対に使うプロのテクニックをご購入いただきまして誠にありがとうございます本書の P42 49 に掲載している CHAPTER01 02 サブメニューを表示する階層型メニューの解説内容にりがございました本記事の作例は Internet Explorer 6 ではしく動作いたしませんまた解説文中で main と記載すべき箇所を menu と記載している箇所がございましたこのたびはご迷惑をおかけ致しまして誠に申し訳ございません訂してお詫び申し上げます訂内容 P42: 対応ブラウザの欄 IE6 以上 IE7 以上本作例は IE6 ではしく動作いたしません P44:STEP ul.menu li{ ul.main li{ スクリプト内で main を menu と記載しておりました

2 P44:STEP ul.menu li{ ul.main li{ /* メニューボタンロールオーバー */ ul.menu li a:hover{ background:url("btn_on.png"); ul.menu li a{ ul.main li a{ /* メニューボタンロールオーバー */ ul.main li a:hover{ background:url("btn_on.png"); スクリプト内で main を menu と記載しておりましたまた ul.menu li a と ul.menu li a:hover の記載順が紙面とダウンロードサンプルで異なっておりました P45:STEP07 解説文メインメニューの li 要素には position :relative を指定してサブメニューの起点としサブメニューの ul 要素 (ul. sub) に position:absolute を指定します 07-1 これでサブメニューが常に動作するようになりますメインメニューの li 要素には position:relative を指定してサブメニューの起点とします 07-1 これでサブメニューが常に動作するようになります jquery1.3.2 以降のバージョンを利用する場合はサブメニューの ul 要素に position:absolute を指定する必要はありません

3 P45:STEP ul.menu li{ ul.main li{ /* メニューボタン ( サブメニュー用 )*/ ul.main li ul.sub{ position:absolute; スクリプト内で main を menu と記載しておりましたまた jquery1.3.2 以外のバージョンを利用する場合はサブメニューの ul 要素に position:absolute を指定する必要はありません P45:STEP /* clearfix */ ul.menu:after { content:"."; clear:both; height:0; visibility:hidden; /* clearfix */ ul.main:after { content:"."; clear:both; height:0; visibility:hidden; /* IE6 IE7 用 */ ul.menu{ /* IE7 用 */ ul.main{ スクリプト内で main を menu と記載しておりましたまた本作例は記載の方法では IE6 でしく動作いたしません

4 P46:STEP $("ul.main li").hover( ) $("ul.main li").hover(, ) スクリプトの 3 行目にカンマ (,) が抜けておりました P46:STEP $("ul.main li").hover( $("ul:not(:animated)",this).slidedown("fast"); $("ul",this).slideup("fast"); ) $("ul.main li").hover( $("ul:not(:animated)",this).slidedown("fast");, $("ul",this).slideup("fast"); ) スクリプトの 4 行目にカンマ (,) が抜けておりました

5 P47:STEP  <ul class="main"> <li><a href="#"> メイン A </a>  <li><a href="#"> サブメニュー A1-1</a></li>  <li><a href="#"> サブメニュー A2-1</a></li>  <ul class="main"> <li><a href="#"> メイン A </a>  <li><a href="#"> サブ A1-1</a></li>  <li><a href="#"> サブ A2-1</a></li> サブメニューのメニューが不要な記述です P47:STEP <ul class="menu"> <li><a href="#"> メイン A</a> <li><a href="#"> サブ A1-1</a> <ul class="main"> <li><a href="#"> メイン A</a> <li><a href="#"> サブ A1-1</a> スクリプト内で main を menu と記載しておりました

6 P48:STEP ul.menu li a{ ul.main li a{ /* メニューボタン ( サブメニュー用 )*/ ul.main li ul.sub{ position:absolute; top:0px; left:150px; /* メニューボタン ( サブメニュー用 )*/ ul.sub li ul.sub{ position:absolute; left:150px; top:0px; スクリプト内で main とするべき箇所を menu sub とするべき箇所を main と記載しておりましたまた紙面とダウンロードサンプルで top:0px と left:150px の記載順が異なっておりました P48:STEP15 ATTENTION この状態では IE6 IE7 のレイアウトバグによって作動してしまいますそのこの状態では IE7 のレイアウトバグによって作動してしまいますそのためため 01 のように IE6 では先頭に *html 01 のように IE7 対策用の CSS を先頭 IE7 では先頭に *+html を付けて対策用 CSS を記述しますこの手法をハックと言います IE6 / IE7 では li 要素に display:inline と zoom:1 サブメニューの ul 要素に対して position: relative と zoom:1 を設定しますに *+html を付けて記述しますこの手法をハックと言います IE7 では li 要素に display:inline と zoom:1 サブメニューの ul 要素に対して position: relative と zoom:1 を設定します本作例は記載の方法では IE6 でしく動作いたしません

7 P48:STEP15 ATTENTION 内 01 /* IE6 / IE7 対策 */ * html ul.menu li{ display:inline; *+html ul.menu li{ display:inline; * html ul.sub{ *+html ul.sub{ /* IE7 対策 */ *+html ul.main li{ display:inline; *+html ul.sub{ 本作例は記載の方法では IE6 でしく動作いたしません P49:STEP $( $("ul.menu li").hover( $(">ul:not(:animated)",this).slidedown("fast"), $( $("ul.main li").hover( $(">ul:not(:animated)",this).slidedown("fast"), スクリプト内で main を menu と記載しておりました以上