メニューのトランジション 1 (text-overflow) トランジションを利用して面白い個性的なメニューを作ってみましょう web ページもぐっと引き立つでしょうここで紹介するメニューも Illustrator や Photoshop でメニューの画像を作る必要はありません J

Size: px

Start display at page:

Download "メニューのトランジション 1 (text-overflow) トランジションを利用して面白い個性的なメニューを作ってみましょう web ページもぐっと引き立つでしょうここで紹介するメニューも Illustrator や Photoshop でメニューの画像を作る必要はありません J"

いとはいのら
5 years ago
Views:

ページもぐっと引き立つでしょうここで紹介するメニューも Illustrator や

でスクリプトを書く必要もありませんすべて CSS3 の機能だけで作成されていますプロパティ

clip テキストを切り取って要素に収める ( 初期値 ) ellipsis 文字列

テキストを切り取ったことを示すために指定された文字列を表示する (2013 年 6

1 メニューのトランジション 1 (text-overflow) トランジションを利用して面白い個性的なメニューを作ってみましょう web ページもぐっと引き立つでしょうここで紹介するメニューも Illustrator や Photoshop でメニューの画像を作る必要はありません JavaScript でスクリプトを書く必要もありませんすべて CSS3 の機能だけで作成されていますプロパティ text-overflow テキストが要素に納まり切れない時の処理方法を指定します値説明 clip テキストを切り取って要素に収める ( 初期値 ) ellipsis 文字列テキストを切り取り後ろにを付加して切り取ったことを表現するテキストを切り取ったことを示すために指定された文字列を表示する (2013 年 6 月現在では未対応 ) overflow: hidden; とセットで使用します overflow: visible; または overflow の指定がない場合は text-overflow プロパティは適用されません 1

)text-overflow: ellipsis; をメニューの表示で指定した場合メニュー項目のテキストがオーバーフローするとテキストが切り取られて後ろにが付加されるのでこのメニュー項目を選択するとさらにメニューがあるように誤解される恐れがありますメニューの場合には text-overflow: clip; で指定するようにしましょうもっともメニュー項目の場合は

2 使用例 ( サンプルソース :TextOverflow.html/TextOverflow.css) 次の4つの場合を示しています overflow: hidden; text-overflow: clip; overflow: hidden; text-overflow: ellipsis; overflow の指定なし text-overflow: clip; overflow の指定なし text-overflow: ellipsis; ( 注意 )text-overflow: ellipsis; をメニューの表示で指定した場合メニュー項目のテキストがオーバーフローするとテキストが切り取られて後ろにが付加されるのでこのメニュー項目を選択するとさらにメニューがあるように誤解される恐れがありますメニューの場合には text-overflow: clip; で指定するようにしましょうもっともメニュー項目の場合はテキストがオーバーフローしないようにすることが大事ですサンプル CSS1 伸びてくるプルダウンメニュー 1 大メニューをマウスカーソルで hover すると小メニューが上から伸びてきます小メニューを hover するとメニューの背景色とテキストの色が変わります NaviMenu01 の説明 HTML の記述 (NaviMenu01.html) id 属性 menu-box の div 要素を作りその中に ul 要素と li 要素でリストを記述します <a href="#">menu1</a> の href="#" は a 要素には必ず href 属性を指定しなければならないので大メニューをクリックしても他へジャンプしないでページの先頭へ跳ぶように "#" と指 2

3 定していますもちろんここへ # ではなく URL を記述すればその URL へジャンプすることができます <!DOCTYPE html> <html> <head> <title>navimenu01</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="navimenu01.css"> </head> <body> <h1> メニューバーを作る (hover で小メニューを開く )</h1> <div id="menu-box"> <li><a href="#">menu1</a> <li><a href="linkpages/page1_1.html">page1_1</a></li> <li><a href="linkpages/page1_2.html">page1_2</a></li> <li><a href="linkpages/page1_3.html">page1_3</a></li> </li> <li><a href="#">menu2</a> <li><a href="linkpages/page2_1.html">page2_1</a></li> <li><a href="linkpages/page2_2.html">page2_2</a></li> <li><a href="linkpages/page2_3.html">page2_3</a></li> <li><a href="linkpages/page2_4.html">page2_4</a></li> </li> <li><a href="#">menu3</a> <li><a href="linkpages/page3_1.html">page3_1</a></li> <li><a href="linkpages/page3_2.html">page3_2</a></li> <li><a href="linkpages/page3_3.html">page3_3</a></li> <li><a href="linkpages/page3_4.html">page3_4</a></li> <li><a href="linkpages/page3_5.html">page3_5</a></li> </li> <li><a href="#">menu4</a> <li><a href="linkpages/page4_1.html">page4_1</a></li> <li><a href="linkpages/page4_2.html">page4_2</a></li> <li><a href="linkpages/page4_3.html">page4_3</a></li> <li><a href="linkpages/page4_4.html">page4_4</a></li> </li> </div> </body> </html> 3

4 CSS の記述 (NaviMenu01.css) 先ず id 名が #menu-box の div 要素のスタイルを指定しますこの本で紹介しているほかのトランジションで使用している id 名が #stage の div 要素と同じものですがボタンやメニューで使用していることを分かり易くするために #menu-box という id 名を付けていますなお右側にコメントが付いているところがありますが実際にスタイルシートにコードを記述する際にはコメントは記述しなくてもかまいません #menu-box { margin: 10px 0px 10px 15px; width: 765px; height: 52px; position: relative; 次に大メニューの ul 要素のスタイルを指定します大メニュー項目 3つを入れる枠になります #menu-box>ul としているのは ul 要素は HTML 文書の中ではほかの場所でも記述されるので #menu-box の中の ul 要素に限定ししかも > を付けることにより #menu-box の子供の ul 要素 ( 大メニューの ul 要素 ) に限定してスタイルを指定するためです #menu-box の孫の ul 要素 ( 小メニューの ul 要素 ) には影響しません ul 要素は li 要素を入れる領域として使用するので次の指定をします 1 margin: 0px; padding: 0px; ul 要素はこの指定をしないと margin と padding の余白が自動的にとられてしまいます 2 list-style-type: none; ul 要素の下に配置される各 li 要素のテキストの先頭になどのマークが付くのを防ぐために指定します 3border-right: 1px solid #999999; と指定しているのは li 要素 ( 大メニュー項目 ) 同士の間のボーダー幅を 1px にしたいため li 要素に border-right: none; の指定をしているのでバーのいちばん右側のボーダー幅が 0px にならないように ul 要素の右側のボーダー幅を 1px で指定しています 4 小メニューが伸びた時に #menu-box の div 要素以降に記述されている HTML のコンテンツ ( テキストや画像等 ) が動くのを防ぐために #menu-box>ul( 大メニューの ul) を position: absolute; と指定し #menu-box に対する絶対位置としてあります /* 大メニュー ********************************************************************/ #menu-box>ul { /* 大メニューの ul */ margin: 0px; padding: 0px; /* この指定がないと margin と padding の余白が自動的に採られてしまう */ width: 764px; height: 52px; border-right: solid 1px #999999; list-style-type: none; position: absolute; /* 小メニューが伸びたときに以降の HTML のコンテンツが動くのを防止するために必要 */ 4

5 大メニューの li 要素のスタイルを指定します #menu-box>ul>li としているのは #menu-box の子供の ul 要素 ( 大メニューの ul 要素 ) の子供の li 要素 ( 大メニュー項目 ) に限定してスタイルを指定するためです #menu-box の孫の ul 要素 ( 小メニューの ul 要素 ) の子供の li 要素 ( 小メニュー項目 ) には影響しません大メニュー項目を横に並べたいので float: left; の指定をしています #menu-box>ul>li { width: 191px; /* 大メニューの幅 */ float: left; /* 大メニューを横に並べる */ li 要素に表示する a 要素のテキストのスタイルを指定しますテキストにデコレーション ( 飾り ) が付かないように text-decoration: none; の指定をします text-decoration: none; がないとテキストにアンダーラインが付いたりリンク済みのテキストカラーに変わったりします大メニューの背景色を background-color: #99CCFF; で指定していますボーダーを border: 1px solid #999999; で指定していますが li 要素 ( 大メニュー項目 ) 同士の間のボーダー幅を 1px にしたいため li 要素に border-right: none; の指定をしています #menu-box>ul>li>a { /* 大メニューのテキスト */ text-decoration: none; background-color: #99CCFF; border: 1px solid #999999; border-right: none; /* 大メニューの左右のボーダーを重ねる */ text-align: center; font-size: 36px; font-weight: bold; font-family: "MS P ゴシック ",Osaka," ヒラギノ角ゴ Pro",Verdana; color: #3333FF; text-shadow: 2px 2px 2px #666666; line-height: 50px; display: block; 次に小メニューの ul 要素のスタイルを指定します大メニュー項目を hover した時に下に伸びる小メニュー項目の3つの枠になります margin-top: -52px; と指定しているのは小メニューの枠を大メニュー項目に重ねておくためです重ねておかないと大メニューの下側のはずれた部分を hover しても小メニューが伸びてしまいます opacity: 0.0; と指定して見えないようにしておきます 5

6 /* 小メニュー ********************************************************************/ #menu-box ul ul { /* 小メニューの ul */ margin-top: -52px; padding: 0px; /* 小メニューを大メニューの位置に重ねる */ height: 52px; list-style-type: none; opacity: 0.0; /* 小メニューを不可視にする */ 大メニューの li 要素 ( 大メニュー項目 ) が hover された時の小メニューの ul 要素の変化を指定します margin-top: 0px; と指定して大メニュー項目に重ねていた小メニューの枠を大メニュー項目の下に移動し opacity: 0.8; と指定して見えるようにします #menu-box>ul>li:hover ul { /* この変化には transition を指定せず瞬時に変化させる */ margin-top: 0px; /* 小メニューを大メニューの下の位置に移動する */ opacity: 0.8; /* 小メニューを可視にする */ 小メニュー項目の li 要素の指定をします height: 0px; と opacity: 0.0; を指定して見えないようにしておきます li 要素を徐々に高さが増して目に見えるように変化させるため transition の指定をします 0.5 秒 ease-in-out で変化するようにしています #menu-box ul li ul li { /* 小メニューを 0.5 秒で変化するように指定 */ width: 190px; height: 0px; opacity: 0.0; transition: 0.5s ease-in-out; -webkit-transition: 0.5s ease-in-out; 大メニュー項目の li 要素が hover された時の小メニュー項目の li 要素の変化を指定します height: 51px; と opacity: 0.8; を指定して li 要素を徐々に高さが増して目に見えるように変化させます #menu-box>ul>li:hover ul li { height: 51px; opacity: 0.8; /* 大メニューの hover 時に小メニューの高を変え可視にする */ li 要素に表示する a 要素のテキストのスタイルを指定します width: 100%; height: 100%; と指定することにより li の幅と高さと同じになりますしかも height: 100%; の指定により li の高さが徐々に高くなるのに合わせて a 要素の高さも変化しますボーダーを 6

7 border: 1px solid #999999; で指定していますが li 要素 ( 小メニュー項目 ) 同士の間の上下のボーダー幅を 1px にしたいため li 要素に border-top: none; の指定をしています overflow: hidden; と outline: none; を指定しているのは Firefox ブラウザの場合にリンク済みのデコレーションとして点線の枠取りが表示されるのを防ぐためです #menu-box ul ul li a { /* 小メニューのテキスト */ text-decoration: none; width: 100%; height: 100%; background-color: #99FF99; border: 1px solid #999999; border-top: none; /* 小メニューの上下のボーダーを重ねる */ text-align: center; text-overflow: clip; /* テキストの overflow 時はカットする */ font-size: 26px; font-weight: bold; font-family: "MS P ゴシック ",Osaka," ヒラギノ角ゴ Pro",Verdana; color: #000000; text-shadow: 2px 2px 2px #666666; line-height: 50px; display: block; /* Firefox の時の枠線を消す */ overflow: hidden; outline: none; li 要素が hover された時の a 要素の変化を指定します背景色を赤灰色 #FF9999 にテキストの色を白 #FFFFFF に変化させます #menu-box ul ul li a:hover { background-color: #FF9999; color: #FFFFFF; /* 小メニューの hover 時に背景色とテキストの色を変える */ サンプル CSS2 伸びてくるプルダウンメニュー 2 サンプル CSS1 の NaviMenu01 の大メニューをグラデーションにしてみました大メニュ 7

8 ーをマウスカーソルで hover すると小メニューが上から伸びてきます小メニューを hover するとメニューの背景色とテキストの色が変わります NaviMenu01B の説明 HTML の記述 (NaviMenu01B.html) NaviMenu01.html の <title> のテキストが NaviMenu01B に <link> の href の css ファイル名が NaviMenu01B.css に変更された内容です CSS の記述 (NaviMenu01B.css) サンプルCSS1の NaviMenu01 の大メニューをグラデーションにしただけなので NaviMenu01.css と違う部分だけ説明します大メニューの ul 要素のスタイルで border-right: 1px solid #333333; と指定して少し黒くしています /* 大メニュー ********************************************************************/ #menu-box>ul { /* 大メニューの ul */ margin: 0px; padding: 0px; /* この指定がないと margin と padding の余白が自動的に採られてしまう */ width: 764px; height: 52px; border-right: solid 1px #333333; list-style-type: none; position: absolute; /* 小メニューが伸びたときに以降の HTML のコンテンツが動くのを防止するために必要 */ li 要素に表示する a 要素のテキストのスタイルで次の部分が違います背景色を background-color: #228B22;(forestgreen) で指定しその上に background-image を利用して白色のグラデーション (linear-gradient) をかけてメニューバーの輝きを表現していますテキストの色を color: #000000; にテキストの影を text-shadow: 2px 2px 2px #CCCCCC; で指定していますボーダーを border: 1px solid #333333; で指定し li 要素に border-right: none; の指定をしています #menu-box>ul>li>a { /* 大メニューのテキスト */ text-decoration: none; background-color: #228B22; background-image: linear-gradient( to bottom, rgba( 255, 255, 255, 0.0 ) 0%, rgba( 255, 255, 255, 0.0 ) 100% ); 8

9 background-image: -webkit-linear-gradient( top, rgba( 255, 255, 255, 0.0 ) 0%, rgba( 255, 255, 255, 0.0 ) 100% ); background-clip: border-box; background-repeat: no-repeat; border: 1px solid #333333; border-right: none; /* 大メニューの左右のボーダーを重ねる */ text-align: center; font-size: 36px; font-weight: bold; font-family: "MS P ゴシック ",Osaka," ヒラギノ角ゴ Pro",Verdana; color: #000000; text-shadow: 2px 2px 2px #CCCCCC; line-height: 50px; display: block; 以降の指定は NaviMenu01.css と同じですサンプル CSS3 伸びてくるプルダウンメニュー 3 サンプル CSS2 の NaviMenu01 の小メニューの高さを大メニューより低くして小メニュー間のボーダーをなくしました NaviMenu01C の説明 HTML の記述 (NaviMenu01C.html) NaviMenu01.html の <title> のテキストが NaviMenu01C に <link> の href の css ファイル名が NaviMenu01C.css に変更された内容です CSS の記述 (NaviMenu01C.css) サンプル CSS1 の NaviMenu01 と違う部分だけ説明します大メニューをグラデーションにしています NaviMenu01.css 大メニューの ul 要素のスタイルで border-right: 1px solid #333333; と指定して少し黒くしています 9

10 /* 大メニュー ********************************************************************/ #menu-box>ul { /* 大メニューの ul */ margin: 0px; padding: 0px; /* この指定がないと margin と padding の余白が自動的に採られてしまう */ width: 764px; height: 52px; border-right: solid 1px #333333; list-style-type: none; position: absolute; /* 小メニューが伸びたときに以降の HTML のコンテンツが動くのを防止するために必要 */ li 要素に表示する a 要素のテキストのスタイルで次の部分が違います背景色を background-color: # FF6633;( オレンジ色 ) で指定しその上に background-image を利用して白色のグラデーション (linear-gradient) をかけてメニューバーの輝きを表現していますテキストの色を color: #000000; にテキストの影を text-shadow: 2px 2px 2px #CCCCCC; で指定していますボーダーを border: 1px solid #333333; で指定し li 要素に border-right: none; の指定をしています #menu-box>ul>li>a { /* 大メニューのテキスト */ text-decoration: none; background-color: #FF6633; background-image: linear-gradient( to bottom, rgba( 255, 255, 255, 0.0 ) 0%, rgba( 255, 255, 255, 0.0 ) 100% ); background-image: -webkit-linear-gradient( top, rgba( 255, 255, 255, 0.0 ) 0%, rgba( 255, 255, 255, 0.0 ) 100% ); background-clip: border-box; background-repeat: no-repeat; border: 1px solid #333333; border-right: none; /* 大メニューの左右のボーダーを重ねる */ text-align: center; font-size: 36px; font-weight: bold; font-family: "MS P ゴシック ",Osaka," ヒラギノ角ゴ Pro",Verdana; color: #000000; text-shadow: 2px 2px 2px #CCCCCC; line-height: 50px; display: block; 小メニューの ul 要素のスタイルを指定しますこのサンプルでは小メニュー項目の li 要素間のボーダーを表示しないので小メニュー全体の枠取りが必要になります width: 200px; と border: 1px solid #333333; を指定し height を指定しないことにより小メニュ 10

11 ー項目の li の数により height が自動計算され小メニュー全体の枠取りが描かれます border-top: none; は大メニューと小メニュー間のボーダーを太くしないためです /* 小メニュー ********************************************************************/ #menu-box ul ul { /* 小メニューの ul */ margin-top: -52px; padding: 0px; /* 小メニューを大メニューの位置に重ねる */ list-style-type: none; width: 190px; border: 1px solid #333333; border-top: none; /* height を指定しないことにより小メニューの li の数で height が自動計算される */ opacity: 0.0; /* 小メニューを不可視にする */ 大メニュー項目の li 要素が hover された時の小メニュー項目の li 要素の変化を指定します高さは height: 32px; で指定し opacity: 0.8; を指定して li 要素を徐々に高さが増して目に見えるように変化させます #menu-box>ul>li:hover ul li { height: 32px; opacity: 0.8; /* 大メニューの hover 時に小メニューの高を変え可視にする */ li 要素に表示する a 要素のテキストのスタイルを指定しますボーダーは指定しませんテキストの先頭に空白を入れるために padding: 0px 0px 0px 10px; の指定をしますこの場合 width: 100%; を指定すると padding 分だけ右へずれるので height: 100%; の指定だけにします text-align: left; でテキストを左寄せにしてあります overflow: hidden; と outline: none; を指定しているのは Firefox ブラウザの場合にリンク済みのデコレーションとして点線の枠取りが表示されるのを防ぐためです #menu-box ul ul li a { /* 小メニューのテキスト */ margin: 0px; padding: 0px 0px 0px 10px; text-decoration: none; height: 100%; background-color: #FFFFCC; text-align: left; text-overflow: clip; /* テキストの overflow 時はカットする */ font-size: 26px; font-weight: bold; font-family: "MS P ゴシック ",Osaka," ヒラギノ角ゴ Pro",Verdana; color: #000000; text-shadow: 2px 2px 2px #666666; /* line-height: 50px; */ display: block; 11

12 /* Firefox の時の枠線を消す */ overflow: hidden; outline: none; 以降の指定は NaviMenu01.css と同じですサンプル CSS4 伸びてくるプルダウンメニュー 4 サンプル CSS2 の NaviMenu01 の小メニューの高さを大メニューより低くして小メニュー間のボーダーをなくし小メニューのテキストを普通のテキスト文字にしました NaviMenu01D の説明 HTML の記述 (NaviMenu01D.html) NaviMenu01.html の <title> のテキストが NaviMenu01C に <link> の href の css ファイル名が NaviMenu01D.css に変更された内容です CSS の記述 (NaviMenu01D.css) サンプルCSS1の NaviMenu01 と違う部分だけ説明します大メニューをグラデーションにしています NaviMenu01.css 大メニューの ul 要素のスタイルで border-right: 1px solid #333333; と指定して少し黒くしています /* 大メニュー ********************************************************************/ #menu-box>ul { /* 大メニューの ul */ margin: 0px; padding: 0px; /* この指定がないと margin と padding の余白が自動的に採られてしまう */ width: 764px; height: 52px; border-right: solid 1px #333333; list-style-type: none; position: absolute; /* 小メニューが伸びたときに以降の HTML のコンテンツが動くのを防止するために必要 */ 12

13 li 要素に表示する a 要素のテキストのスタイルで次の部分が違います背景色を background-color: # ;( グレー ) で指定しその上に background-image を利用して白色のグラデーション (linear-gradient) をかけてメニューバーの輝きを表現していますテキストの色を color: #000000; にテキストの影を text-shadow: 2px 2px 2px #CCCCCC; で指定していますボーダーを border: 1px solid #333333; で指定し li 要素に border-right: none; の指定をしています #menu-box>ul>li>a { /* 大メニューのテキスト */ text-decoration: none; background-color: #999999; background-image: linear-gradient( to bottom, rgba( 255, 255, 255, 0.0 ) 0%, rgba( 255, 255, 255, 0.0 ) 100% ); background-image: -webkit-linear-gradient( top, rgba( 255, 255, 255, 0.0 ) 0%, rgba( 255, 255, 255, 0.0 ) 100% ); background-clip: border-box; background-repeat: no-repeat; border: 1px solid #333333; border-right: none; /* 大メニューの左右のボーダーを重ねる */ text-align: center; font-size: 36px; font-weight: bold; font-family: "MS P ゴシック ",Osaka," ヒラギノ角ゴ Pro",Verdana; color: #000000; text-shadow: 2px 2px 2px #CCCCCC; line-height: 50px; display: block; 小メニューの ul 要素のスタイルを指定しますこのサンプルでは小メニュー項目の li 要素間のボーダーを表示しないので小メニュー全体の枠取りが必要になります width: 200px; と border: 1px solid #333333; を指定し height を指定しないことにより小メニュー項目の li の数により height が自動計算され小メニュー全体の枠取りが描かれます border-top: none; は大メニューと小メニュー間のボーダーを太くしないためです /* 小メニュー ********************************************************************/ #menu-box ul ul { /* 小メニューの ul */ margin-top: -52px; padding: 0px; /* 小メニューを大メニューの位置に重ねる */ list-style-type: none; width: 190px; /* height を指定しないことにより小メニューの li の数で height が自動計算される */ 13

14 border: 1px solid #333333; border-top: none; opacity: 0.0; /* 小メニューを不可視にする */ 大メニューの li 要素 ( 大メニュー項目 ) が hover された時の小メニューの ul 要素の変化を指定します margin-top: 0px; と指定して大メニュー項目に重ねていた小メニューの枠を大メニュー項目の下に移動し opacity: 1.0; と指定して見えるようにします小メニューのテキストを普通の文字にしているので透過度を加えるとメニューの下にある文字 ( ページの内容 ) に重なってメニューのテキストが読めなくなるので opacity: 1.0; で透過度をなくします #menu-box>ul>li:hover ul { /* この変化には transition を指定せず瞬時に変化させる */ margin-top: 0px; /* 小メニューを大メニューの下の位置に移動する */ opacity: 1.0; /* 小メニューを可視にする */ 大メニュー項目の li 要素が hover された時の小メニュー項目の li 要素の変化を指定します高さは height: 20px; で指定し opacity: 1.0; を指定して li 要素を徐々に高さが増して目に見えるように変化させます #menu-box>ul>li:hover ul li { height: 20px; opacity: 1.0; /* 大メニューの hover 時に小メニューの高を変え可視にする */ li 要素に表示する a 要素のテキストのスタイルを指定しますボーダーは指定しませんテキストの先頭に空白を入れるために padding: 0px 0px 0px 10px; の指定をしますこの場合 width: 100%; を指定すると padding 分だけ右へずれるので height: 100%; の指定だけにします text-align: left; でテキストを左寄せにしてあります overflow: hidden; と outline: none; を指定しているのは Firefox ブラウザの場合にリンク済みのデコレーションとして点線の枠取りが表示されるのを防ぐためです #menu-box ul ul li a { /* 小メニューのテキスト */ margin: 0px; padding: 0px 0px 0px 10px; text-decoration: none; height: 100%; background-color: #FFFFFF; 14

15 text-align: left; text-overflow: clip; /* テキストの overflow 時はカットする */ font-size: 16px; font-family: "MS P ゴシック ",Osaka," ヒラギノ角ゴ Pro",Verdana; color: #000000; line-height: 20px; display: block; /* Firefox の時の枠線を消す */ overflow: hidden; outline: none; li 要素が hover された時の a 要素の変化を指定します背景色を赤灰色 #FF9999 に変化させますテキストの色は変えません #menu-box ul ul li a:hover { /* 小メニューの hover 時に背景色を変える */ background-color: #FF9999; サンプル CSS5 伸びてくるプルダウンメニュー 5 サンプル CSS3 の NaviMenu01C の大メニュー背景色を斜めに色が変化する虹色のグラデーションにしました NaviMenu01G の説明 HTML の記述 (NaviMenu01G.html) NaviMenu01.html の <title> のテキストが NaviMenu01C に <link> の href の css ファイル名が NaviMenu01G.css に変更された内容です CSS の記述 (NaviMenu01G.css) サンプル CSS3 の NaviMenu01C と違う部分だけ説明します li 要素に表示する a 要素のテキストのスタイルで次の部分が違います大メニューの背景 15

16 色を background-color: #FF6633; で指定していますグラゲーション用に background-clip プロパティ background-repeat プロパティでグラデーションのみ指定をしています background-image プロパティについては奇数番目の li 要素と偶数番目の li 要素のグラデーションの色の変化の方向を交互に反対方向にしたいのでここでは指定せずに別 nth-child セレクタを使用して指定しますテキストの色を color: #FFFFFF; にテキストの影を text-shadow: 2px 2px 2px #000000; で指定していますボーダーを border: 1px solid #333333; で指定し li 要素に border-right: none; の指定をしています #menu-box>ul>li>a { /* 大メニューのテキスト */ text-decoration: none; background-color: #FF6633; background-clip: border-box; background-repeat: no-repeat; border: 1px solid #333333; border-right: none; /* 大メニューの左右のボーダーを重ねる */ text-align: center; font-size: 36px; font-weight: bold; font-family: "MS P ゴシック ",Osaka," ヒラギノ角ゴ Pro",Verdana; color: #FFFFFF; text-shadow: 2px 2px 2px #000000; line-height: 50px; display: block; background-image プロパティについて nth-child( ) セレクタを使用して奇数番目の li 要素と偶数番目の li 要素のグラデーションの色の変化の方向を交互に反対方向に指定します #menu-box>ul>li:nth-child(2n+1)>a { /* 大メニューの奇数番目のグラデーション */ background-image: linear-gradient( 25deg, #F00, #FF0, #0F0, #0FF, #00F, #F0F ); background-image: -webkit-linear-gradient( 65deg, #F00, #FF0, #0F0, #0FF, #00F, #F0F ); #menu-box>ul>li:nth-child(2n+0)>a { /* 大メニューの偶数番目のグラデーション */ background-image: linear-gradient( -25deg, #F00, #FF0, #0F0, #0FF, #00F, #F0F ); background-image: -webkit-linear-gradient( 115deg, #F00, #FF0, #0F0, #0FF, #00F, #F0F ); 小メニューの li 要素に表示する a 要素のテキストのスタイルを指定しますボーダーは指定しませんテキストの先頭に空白を入れるために padding: 0px 0px 0px 10px; の指定をしますこの場合 width: 100%; を指定すると padding 分だけ右へずれるので height: 100%; の指定だけにします text-align: left; でテキストを左寄せにしてあります overflow: hidden; と outline: none; を指定しているのは Firefox ブラウザの場合にリン 16

",Osaka," ヒラギノ角ゴ Pro",Verdana; color: #000000; text-shadow: 2px 2px 2px #666666; /* line-height: 50px; */ display: block; /* Firefox の時の枠線を消す */ overflow:

17 ク済みのデコレーションとして点線の枠取りが表示されるのを防ぐためです #menu-box ul ul li a { /* 小メニューのテキスト */ margin: 0px; padding: 0px 0px 0px 10px; text-decoration: none; height: 100%; background-color: #FFFFCC; text-align: left; text-overflow: clip; /* テキストの overflow 時はカットする */ font-size: 26px; font-weight: bold; font-family: "MS P ゴシック ",Osaka," ヒラギノ角ゴ Pro",Verdana; color: #000000; text-shadow: 2px 2px 2px #666666; /* line-height: 50px; */ display: block; /* Firefox の時の枠線を消す */ overflow: hidden; outline: none; 以降の指定は NaviMenu01.css と同じですサンプル CSS6 大メニューの横から伸びてくるプルダウンメニュー 1 大メニューをマウスカーソルで hover すると小メニューが横から伸びてきます小メニューを hover するとメニューの背景色とテキストの色が変わります NaviMenu02 の説明 17

18 HTML の記述 (NaviMenu02.html) NaviMenu01.html の <title> のテキストが NaviMenu02 に <link> の href の css ファイル名が NaviMenu02.css に変更された内容です CSS の記述 (NaviMenu02.css) 先ず id 名が #menu-box の div 要素のスタイルを指定しますなお実際にスタイルシートにコードを記述する際には右側のコメントは記述しなくてもかまいません #menu-box { margin: 10px 0px 10px 10px; width: 202px; height: 156px; position: relative; 次に大メニューの ul 要素のスタイルを指定します margin: 0px; padding: 0px; width list-style-type: none; を指定します /* 大メニュー ********************************************************************/ #menu-box>ul { /* 大メニューの ul */ margin: 0px; padding: 0px; /* この指定がないと margin と padding の余白が自動的に採られてしまう */ width: 200px; /* 大メニューの幅 */ list-style-type: none; 大メニューの li 要素のスタイルを指定します #menu-box>ul>li { width: 200px; height: 50px; /* 大メニューの幅高さ */ li 要素に表示する a 要素のテキストのスタイルを指定します NaviMenu01.css とほぼ同じですが border-bottom: none; の指定はしません背景色を background-color: #99CCFF; ( 淡いブルー ) で指定しその上に background-image を利用して白色のグラデーション (linear-gradient) をかけてメニューバーの輝きを表現していますテキストの色を color: #3333FF;( ブルー ) にテキストの影を text-shadow: 2px 2px 2px #CCCCCC; で指定していますボーダーを border: 1px solid #999999; で指定しています #menu-box>ul>li>a { /* 大メニューのテキスト */ text-decoration: none; background-color: #99CCFF; /* background-color に background-image で白のグラデーションをかぶせる */ 18

19 background-image: linear-gradient( to bottom, rgba( 255, 255, 255, 0.0 ) 0%, rgba( 255, 255, 255, 0.0 ) 100% ); background-image: -webkit-linear-gradient( top, rgba( 255, 255, 255, 0.0 ) 0%, rgba( 255, 255, 255, 0.0 ) 100% ); background-clip: border-box; background-repeat: no-repeat; border: 1px solid #999999; text-align: center; font-size: 36px; font-weight: bold; font-family: "MS P ゴシック ",Osaka," ヒラギノ角ゴ Pro",Verdana; color: #3333FF; text-shadow: 2px 2px 2px #666666; line-height: 50px; display: block; 次に小メニューの ul 要素のスタイルを指定します大メニュー項目を hover した時に横から下に伸びる小メニュー項目の3つの枠になります margin: -52px 0px 0px 200px; と指定しているのは小メニューの枠を大メニュー項目の右横に並べておくためです opacity: 0.0; と指定して見えないようにしておきます /* 小メニュー ********************************************************************/ #menu-box ul ul { /* 小メニューの ul */ margin: -52px 0px 0px 200px; padding: 0px; /* 小メニューを大メニューの右横の位置に移動する */ width: 200px; list-style-type: none; opacity: 0.0; /* 小メニューを不可視にする ( 小メニューの戻りを見せたい場合にはここを殺す */ 大メニューの li 要素 ( 大メニュー項目 ) が hover された時の小メニューの ul 要素の変化を指定します opacity: 0.8; と指定して見えるようにします #menu-box>ul>li:hover ul { opacity: 0.8; /* この変化には transition を指定せず瞬時に変化させる */ /* 小メニューの ul を可視にする ( 小メニューの戻りを見せたい場合にはここを殺す */ 19

20 小メニュー項目の li 要素の指定をします width: 0px; height: 0px; と opacity: 0.0; を指定して見えないようにしておきます width: 0px; height: 0px; と指定しておかないと大メニューの右側のはずれた部分を hover しても小メニューが伸びてしまいます li 要素を徐々に高さが増して目に見えるように変化させるため transition の指定をします 0.5 秒で ease-in-out で変化するようにしています #menu-box ul li ul li { /* 小メニューを 0.5 秒で変化するように指定 */ width: 0px; height: 0px; opacity: 0.0; transition: 0.5s ease-in-out; -webkit-transition: 0.5s ease-in-out; 大メニュー項目の li 要素が hover された時の小メニュー項目の li 要素の変化を指定します width: 200px; height: 50px; と opacity: 0.8; を指定して li 要素を徐々に高さが増して目に見えるように変化させます #menu-box>ul>li:hover ul li { width: 200px; height: 50px; opacity: 0.8; /* 大メニューの hover 時に小メニューの幅と高を変え可視にする */ li 要素に表示する a 要素のテキストのスタイルを指定しますボーダーを border: 1px solid #999999; で指定していますが border-top: none; の指定はしません #menu-box ul ul li a { /* 小メニューのテキスト */ text-decoration: none; width: 100%; height: 100%; background-color: #99FF99; border: 1px solid #999999; text-align: center; text-overflow: clip; /* テキストの overflow 時はカットする */ font-size: 26px; font-weight: bold; font-family: "MS P ゴシック ",Osaka," ヒラギノ角ゴ Pro",Verdana; color: #000000; text-shadow: 2px 2px 2px #666666; line-height: 50px; display: block; /* Firefox の時の枠線を消す */ overflow: hidden; outline: none; 20

li 要素が hover された時の a 要素の変化を指定します背景色を赤灰色 #FF9999 にテキストの色を白 #FFFFFF に変化させます #menu-box ul ul li a:hover { background-color: #FF9999; color: #FFFFFF; /* 小メニューの hover 時に背景色とテキストの色を変える */ サンプル CSS7

21 li 要素が hover された時の a 要素の変化を指定します背景色を赤灰色 #FF9999 にテキストの色を白 #FFFFFF に変化させます #menu-box ul ul li a:hover { background-color: #FF9999; color: #FFFFFF; /* 小メニューの hover 時に背景色とテキストの色を変える */ サンプル CSS7 大メニューの横から伸びてくるプルダウンメニュー 2 大メニューをマウスカーソルで hover すると小メニューが横から伸びてきます大メニューごとに背景色を緑色黄色水色に変えてあります小メニューを hover するとメニューの背景色とテキストの色が変わります NaviMenu02B の説明 HTML の記述 (NaviMenu02B.html) NaviMenu02.html の <title> のテキストが NaviMenu02B に <link> の href の css ファイル名が NaviMenu02B.css に変更された内容ですが大メニューの li 要素に id 属性で <li id="menu1"> <li id="menu2"> <li id="menu3"> と id 名をつけてあります <!DOCTYPE html> <html> <head> <title>navimenu02b</title> <meta charset="utf-8"> 21

22 <link rel="stylesheet" type="text/css" href="navimenu02b.css"> </head> <body> <h1> メニューバーを作る (hover で小メニューを開く )</h1> <div id="menu-box"> <li id="menu1"><a href="#">menu1</a> <li><a href="linkpages/page1_1.html">page1_1</a></li> (3 行省略 ) <li><a href="linkpages/page1_5.html">page1_5</a></li> </li> <li id="menu2"><a href="#">menu2</a> <li><a href="linkpages/page2_1.html">page2_1</a></li> (2 行省略 ) <li><a href="linkpages/page2_4.html">page2_4</a></li> </li> <li id="menu3"><a href="#">menu3</a> <li><a href="linkpages/page3_1.html">page3_1</a></li> (3 行省略 ) <li><a href="linkpages/page3_5.html">page3_5</a></li> </li> </div> </body> </html> CSS の記述 (NaviMenu02B.css) NaviMenu02.css と違う部分だけ説明します大メニューの li 要素に表示する a 要素のテキストのスタイルで background-color を id 名ごとに違う色で指定しますその上に background-image を利用して白色のグラデーション (linear-gradient) をかけてメニューバーの輝きを表現しています #menu-box>ul>li>a { /* 大メニューのテキスト */ text-decoration: none; border: 1px solid #999999; text-align: center; 22

23 font-size: 36px; font-weight: bold; font-family: "MS P ゴシック ",Osaka," ヒラギノ角ゴ Pro",Verdana; color: #3333FF; text-shadow: 2px 2px 2px #666666; line-height: 50px; display: block; /* background-color に background-image で白のグラデーションをかぶせる */ background-image: linear-gradient( to bottom, rgba( 255, 255, 255, 0.0 ) 0%, rgba( 255, 255, 255, 0.0 ) 100% ); background-image: -webkit-linear-gradient( top, rgba( 255, 255, 255, 0.0 ) 0%, rgba( 255, 255, 255, 0.0 ) 100% ); background-clip: border-box; background-repeat: no-repeat; #menu-box>ul>li#menu1>a { /* 大メニュー 1 の背景色 */ background-color: #33FF33; #menu-box>ul>li#menu2>a { /* 大メニュー 2 の背景色 */ background-color: #FFFF33; #menu-box>ul>li#menu3>a { /* 大メニュー 3 の背景色 */ background-color: #33FFFF; 小メニューの li 要素に表示する a 要素のテキストのスタイルで background-color を指定しませんそれにより大メニューと同じ背景色で小メニューが表示されます #menu-box ul li ul li a { /* 小メニューのテキスト */ text-decoration: none; width: 100%; height: 100%; border: 1px solid #999999; text-align: center; text-overflow: clip; /* テキストの overflow 時はカットする */ font-size: 26px; font-weight: bold; font-family: "MS P ゴシック ",Osaka," ヒラギノ角ゴ Pro",Verdana; color: #000000; text-shadow: 2px 2px 2px #666666; line-height: 50px; 23

background-color: #FF9999; color: #FFFFFF; #menu-box ul li#menu3 ul li a:hover { background-color: #FF9999; color: #FFFFFF; /* 大メニュー 1 の小メニューの hover

24 display: block; /* Firefox の時の枠線を消す */ overflow: hidden; outline: none; 小メニューの li 要素が hover された時の a 要素の変化を大メニューの li 要素の id 名ごとに指定します背景色を赤灰色 #FF9999 にテキストの色を白 #FFFFFF に変化させます #menu-box ul li#menu1 ul li a:hover { background-color: #FF9999; color: #FFFFFF; #menu-box ul li#menu2 ul li a:hover { background-color: #FF9999; color: #FFFFFF; #menu-box ul li#menu3 ul li a:hover { background-color: #FF9999; color: #FFFFFF; /* 大メニュー 1 の小メニューの hover 時に背景色とテキストの色を変える */ /* 大メニュー 2 の小メニューの hover 時に背景色とテキストの色を変える */ /* 大メニュー 3 の小メニューの hover 時に背景色とテキストの色を変える */ サンプル CSS8 大メニューの横から伸びてくるプルダウンメニュー 3 大メニューをマウスカーソルで hover すると大メニューが横に伸びてその下に小メニ 24

25 ューが伸びてきます右方向を向いていた楔 > が小メニューの方向を向きます小メニューを hover するとメニューの背景色とテキストの色が変わります NaviMenu02C の説明 HTML の記述 (NaviMenu02C.html) NaviMenu02.html の <title> のテキストが NaviMenu02B に <link> の href の css ファイル名が NaviMenu02B.css に変更された内容ですが大メニューの li 要素の a 要素のテキストを <li><a href="#"> MENU1 </a><span>></span> としていて MENU1 と > ( > が > を表します) を分けてあります > は回転させたいので <span> タグで囲んであります <!DOCTYPE html> <html> <head> <title>navimenu02c</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="navimenu02c.css"> </head> <body> <h1> メニューバーを作る (hover で小メニューを開く )</h1> <div id="menu-box"> <li><a href="#"> MENU1 </a><span>></span> <li><a href="linkpages/page1_1.html">page1_1</a></li> (3 行省略 ) <li><a href="linkpages/page1_5.html">page1_5</a></li> </li> <li><a href="#"> MENU2 </a><span>></span> <li><a href="linkpages/page2_1.html">page2_1</a></li> (2 行省略 ) <li><a href="linkpages/page2-4.html">page2-4</a></li> </li> <li><a href="#"> MENU3 </a><span>></span> <li><a href="linkpages/page3_1.html">page3_1</a></li> (3 行省略 ) <li><a href="linkpages/page3_5.html">page3_5</a></li> </li> 25

26 </div> </body> </html> CSS の記述 (NaviMenu02C.css) 先ず id 名が #menu-box の div 要素のスタイルを指定します NaviMenu02.css と同じです #menu-box { margin: 10px 0px 10px 10px; width: 202px; height: 156px; position: relative; 次に大メニューの ul 要素のスタイルを指定します NaviMenu02.css と同じです /* 大メニュー ********************************************************************/ #menu-box>ul { /* 大メニューの ul */ margin: 0px; padding: 0px; /* この指定がないと margin と padding の余白が自動的に採られてしまう */ width: 200px; /* 大メニューの幅 */ list-style-type: none; 大メニューの li 要素のスタイルを指定します hover した時にメニューの四角形が徐々に横長に伸びるように変化させるため transition の指定をします 0.5 秒で ease-in-out で変化するようにしています float: left; を指定しておくと伸びたメニューが元へ戻る動きがスムーズになります #menu-box>ul>li { width: 200px; height: 50px; /* 大メニューの幅高さ */ float: left; transition: 0.5s ease-in-out; -webkit-transition: 0.5s ease-in-out; 大メニューの li 要素が hover された時の li 要素の変化を指定します幅を 402px に変化させます 26

27 #menu-box>ul>li:hover { /* 大メニューの hover 時に幅を変える */ width: 402px; li 要素に表示する a 要素のテキストのスタイルを指定します NaviMenu02.css と同じです #menu-box>ul>li>a { /* 大メニューのテキスト */ text-decoration: none; background-color: #99CCFF; /* background-color に background-image で白のグラデーションをかぶせる */ background-image: linear-gradient( to bottom, rgba( 255, 255, 255, 0.0 ) 0%, rgba( 255, 255, 255, 0.0 ) 100% ); background-image: -webkit-linear-gradient( top, rgba( 255, 255, 255, 0.0 ) 0%, rgba( 255, 255, 255, 0.0 ) 100% ); background-clip: border-box; background-repeat: no-repeat; border: 1px solid #999999; text-align: center; font-size: 36px; font-weight: bold; font-family: "MS P ゴシック ",Osaka," ヒラギノ角ゴ Pro",Verdana; color: #3333FF; text-shadow: 2px 2px 2px #666666; line-height: 50px; display: block; li 要素に表示する span 要素とテキストのスタイルを指定します li 要素の四角形の中に納まるように margin: -50px 0px 0px 0px; width: 50px; height: 50px; float: right; の指定をしています大メニューの li 要素を hover した時に > が時計回りに 90 度回転するように変化させるため transition の指定をします 0.5 秒で ease-in-out で変化するようにしています #menu-box>ul>li span { /* 大メニューのテキスト ( クサビ文字 ) */ margin: -50px 0px 0px 0px; padding: 0px; width: 50px; height: 50px; text-decoration: none; text-align: center; font-size: 36px; font-weight: bold; 27

28 font-family: "MS P ゴシック ",Osaka," ヒラギノ角ゴ Pro",Verdana; color: #3333FF; text-shadow: 2px 2px 2px #666666; line-height: 50px; float: right; display: block; cursor: pointer; transition: 0.5s ease-in-out; -webkit-transition: 0.5s ease-in-out; 大メニューの li 要素が hover された時の span 要素の変化を指定します margin-right: 75px; で右に移動させ transform: rotatez(90deg); で時計回りに 90 度回転させます #menu-box>ul>li:hover span { /* 大メニューの hover 時にテキスト ( クサビ文字 ) の向きを変える */ margin-right: 75px; transform: rotatez(90deg); -webkit-transform: rotatez(90deg); 次に小メニューの ul 要素のスタイルを指定します NaviMenu02.css と違って width: 0px; で指定します /* 小メニュー ********************************************************************/ #menu-box ul ul { /* 小メニューの ul */ margin: -52px 0px 0px 200px; padding: 0px; /* 小メニューを大メニューの右横の位置に移動する */ width: 0px; list-style-type: none; opacity: 0.0; /* 小メニューを不可視にする */ 大メニューの li 要素 ( 大メニュー項目 ) が hover された時の小メニューの ul 要素の変化を指定します横長に伸びた大メニューの li 要素の下から小メニューが表示されるように margin-top: 0px; width: 200px; opacity: 0.8; と指定して見えるようにします #menu-box>ul>li:hover ul { /* この変化には transition を指定せず瞬時に変化させる */ margin-top: 0px; width: 200px; opacity: 0.8; /* 小メニューの ul を可視にする */ 28

29 小メニュー項目の li 要素の指定をします NaviMenu02.css と同じです #menu-box ul li ul li { /* 小メニューを 0.5 秒で変化するように指定 */ width: 0px; height: 0px; opacity: 0.0; transition: 0.5s ease-in-out; -webkit-transition: 0.5s ease-in-out; 大メニュー項目の li 要素が hover された時の小メニュー項目の li 要素の変化を指定します NaviMenu02.css と同じです #menu-box>ul>li:hover ul li { width: 200px; height: 50px; opacity: 0.8; /* 大メニューの hover 時に小メニューの幅と高を変え可視にする */ li 要素に表示する a 要素のテキストのスタイルを指定します NaviMenu02.css と同じです #menu-box ul li ul li a { /* 小メニューのテキスト */ text-decoration: none; width: 100%; height: 100%; background-color: #99FF99; border: 1px solid #999999; border-top: none; text-align: center; text-overflow: clip; /* テキストの overflow 時はカットする */ font-size: 26px; font-weight: bold; font-family: "MS P ゴシック ",Osaka," ヒラギノ角ゴ Pro",Verdana; color: #000000; text-shadow: 2px 2px 2px #666666; line-height: 50px; display: block; /* Firefox の時の枠線を消す */ overflow: hidden; outline: none; li 要素が hover された時の a 要素の変化を指定します NaviMenu02.css と同じです 29

#menu-box ul ul li a:hover { background-color: #FF9999; color: #FFFFFF; /* 小メニューの hover 時に背景色とテキストの色を変える */ サンプル CSS9 大メニューの横から伸びてくるプルダウンメニュー 4 大メニューをマウスカーソルで hover すると小メニューが横から伸びてきます小メニューを hover

html の <title> のテキストが NaviMenu02D に <link> の href の css ファイル名が NaviMenu02D.css に変更された内容です CSS の記述 (NaviMenu02D.

30 #menu-box ul ul li a:hover { background-color: #FF9999; color: #FFFFFF; /* 小メニューの hover 時に背景色とテキストの色を変える */ サンプル CSS9 大メニューの横から伸びてくるプルダウンメニュー 4 大メニューをマウスカーソルで hover すると小メニューが横から伸びてきます小メニューを hover するとメニューの背景色とテキストの色が変わりますサンプルCSS6 の NaviMenu02 の小メニューの高さを大メニューより低くして小メニュー間のボーダーをなくしました NaviMenu02D の説明 HTML の記述 (NaviMenu02D.html) NaviMenu02.html の <title> のテキストが NaviMenu02D に <link> の href の css ファイル名が NaviMenu02D.css に変更された内容です CSS の記述 (NaviMenu02D.css) サンプル CSS6 の NaviMenu02 と違う部分だけ説明します小メニューの ul 要素のスタイルは次のように指定します大メニュー項目を hover した時に横方向と下方向に伸びる小メニューの枠になります margin: -52px 0px 0px 200px; と指定しているのは小メニューの枠を大メニュー項目の右横に並べておくためです width と height は指定せず自動計算させますここがこのメニューの仕組みのミソです border: 1px solid #999999; background-color: #FFFFCC; で指定します opacity: 0.0; と指定して見えないようにしておきますサンプル CSS6 の NaviMenu02 と違って各小メニュ 30

31 ー項目の border を表示しないで小メニューの大枠となる ul 要素の border を徐々に伸びるように変化させるため transition の指定をします 0.5 秒で ease-in-out で変化するようにしています /* 小メニュー ********************************************************************/ #menu-box ul ul { /* 小メニューの ul */ margin: -52px 0px 0px 200px; padding: 0px; /* 小メニューを大メニューの右横の位置に移動する */ list-style-type: none; /* width: 0px; height: 0px; */ /* width と height は指定せず自動計算させる ( ココがミソ ) */ border: 1px solid #999999; background-color: #FFFFCC; opacity: 0.0; /* 小メニューを不可視にする ( 小メニューの戻りを見せたい場合にはここを殺す */ transition: 0.5s ease-in-out; -webkit-transition: 0.5s ease-in-out; 大メニューの li 要素 ( 大メニュー項目 ) が hover された時の小メニューの ul 要素の変化を指定します width: 200px; と指定し height は指定しないで自動計算させます opacity: 0.8; と指定して見えるようにします #menu-box>ul>li:hover ul { width: 200px; opacity: 0.8; /* 小メニューの ul を可視にする ( 小メニューの戻りを見せたい場合にはここを殺す */ 大メニュー項目の li 要素が hover された時の小メニュー項目の li 要素の変化は次のように指定します width: 200px; height: 32px; と opacity: 0.8; を指定して li 要素を徐々に高さが増して目に見えるように変化させます #menu-box>ul>li:hover ul li { width: 200px; height: 32px; opacity: 0.8; /* 大メニューの hover 時に小メニューの幅と高を変え可視にする */ li 要素に表示する a 要素のテキストのスタイルを指定しますボーダーは指定しませんテキストの先頭に空白を入れるために padding: 0px 0px 0px 10px; の指定をしますこの場合 width: 100%; を指定すると padding 分だけ右へずれるので height: 100%; の指定だけにします text-align: left; でテキストを左寄せにしてあります背景色 31

(background-color) の指定はしません #menu-box ul li ul li a { /* 小メニューのテキスト */ margin: 0px; padding: 0px 0px 0px 10px; text-decoration: none; height: 100%; text-align: left; text-overflow: clip;

50px; */ display: block; /* Firefox の時の枠線を消す */ overflow: hidden; outline: none; 以降の指定は NaviMenu02.

32 (background-color) の指定はしません #menu-box ul li ul li a { /* 小メニューのテキスト */ margin: 0px; padding: 0px 0px 0px 10px; text-decoration: none; height: 100%; text-align: left; text-overflow: clip; /* テキストの overflow 時はカットする */ font-size: 26px; font-weight: bold; font-family: "MS P ゴシック ",Osaka," ヒラギノ角ゴ Pro",Verdana; color: #000000; text-shadow: 2px 2px 2px #666666; /* line-height: 50px; */ display: block; /* Firefox の時の枠線を消す */ overflow: hidden; outline: none; 以降の指定は NaviMenu02.css と同じですサンプル CSS10 大メニューの横から伸びてくるプルダウンメニュー 5 大メニューをマウスカーソルで hover すると大メニューが横に伸びてその下に小メニューが伸びてきます右方向を向いていた楔 > が小メニューの方向を向きます小メニューを hover するとメニューの背景色とテキストの色が変わりますサンプルCSS8 の NaviMenu02C の小メニューの高さを大メニューより低くして小メニュー間のボーダーをなくしました NaviMenu02E の説明 HTML の記述 (NaviMenu02E.html) 32

33 NaviMenu02C.html の <title> のテキストが NaviMenu02E に <link> の href の css ファイル名が NaviMenu02E.css に変更された内容です CSS の記述 (NaviMenu02E.css) サンプルCSS8の NaviMenu02C と違う部分だけ説明します小メニューの ul 要素のスタイルは次のように指定します大メニュー項目を hover した時に横方向と下方向に伸びる小メニューの枠になります margin: -52px 0px 0px 200px; と指定しているのは小メニューの枠を大メニュー項目の右横に並べておくためです width と height は指定せず自動計算させますここがこのメニューの仕組みのミソですボーダーは border: 1px solid #999999; で指定し大メニューと小メニューの接線となる border-top は border-top: none; で指定します background-color: #FFFFCC; で指定します opacity: 0.0; と指定して見えないようにしておきますサンプルCSS8の NaviMenu02C と違って各小メニュー項目の border を表示しないで小メニューの大枠となる ul 要素の border を徐々に伸びるように変化させるため transition の指定をします 0.5 秒で ease-in-out で変化するようにしています /* 小メニュー ********************************************************************/ #menu-box ul ul { /* 小メニューの ul */ margin: -52px 0px 0px 200px; padding: 0px; /* 小メニューを大メニューの右横の位置に移動する */ list-style-type: none; /* width: 0px; height: 0px; */ /* width と height は指定せずに自動計算させる ( ココがミソ ) */ border: 1px solid #999999; border-top: none; background-color: #FFFFCC; opacity: 0.0; /* 小メニューを不可視にする */ 大メニューの li 要素 ( 大メニュー項目 ) が hover された時の小メニューの ul 要素の変化を指定します margin-top: 0px; と指定して小メニューの上端を大メニューの下に移動させます width: 200px; と height は指定しないで自動計算させます opacity: 0.8; と指定して見えるようにします #menu-box>ul>li:hover ul { /* この変化には transition を指定せず瞬時に変化させる */ margin-top: 0px; /* width: 200px; */ /* width は自動計算させる ( ココがミソ ) */ opacity: 0.8; /* 小メニューの ul を可視にする */ 33

34 大メニュー項目の li 要素が hover された時の小メニュー項目の li 要素の変化は次のように指定します width: 200px; height: 32px; と opacity: 0.8; を指定して li 要素を徐々に高さが増して目に見えるように変化させます #menu-box>ul>li:hover ul li { width: 200px; height: 32px; opacity: 0.8; /* 大メニューの hover 時に小メニューの幅と高を変え可視にする */ li 要素に表示する a 要素のテキストのスタイルを指定しますボーダーは指定しませんテキストの先頭に空白を入れるために padding: 0px 0px 0px 10px; の指定をしますこの場合 width: 100%; を指定すると padding 分だけ右へずれるので height: 100%; の指定だけにします text-align: left; でテキストを左寄せにしてあります #menu-box ul li ul li a { /* 小メニューのテキスト */ margin: 0px; padding: 0px 0px 0px 10px; text-decoration: none; height: 100%; text-align: left; text-overflow: clip; /* テキストの overflow 時はカットする */ font-size: 26px; font-weight: bold; font-family: "MS P ゴシック ",Osaka," ヒラギノ角ゴ Pro",Verdana; color: #000000; text-shadow: 2px 2px 2px #666666; /* line-height: 50px; */ display: block; /* Firefox の時の枠線を消す */ overflow: hidden; outline: none; 以降の指定は NaviMenu02C.css と同じです 34

サンプル CSS11 横に広がるアコーディオンメニュー大メニューをマウスカーソルで hover するとアコーディオンのように大メニューの間が広がり小メニューが現れます小メニューを hover するとメニューの背景色とテキストの色が変わります NaviMenu03 の説明 HTML の記述 (NaviMenu03.

DOCTYPE html> <html> <head> <title>navimenu03</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="navimenu03.

35 サンプル CSS11 横に広がるアコーディオンメニュー大メニューをマウスカーソルで hover するとアコーディオンのように大メニューの間が広がり小メニューが現れます小メニューを hover するとメニューの背景色とテキストの色が変わります NaviMenu03 の説明 HTML の記述 (NaviMenu03.html) id 属性 menu-box の div 要素を作りその中に ul 要素と li 要素でリストを記述します大メニューの項目名 MENU1 MENU2 MENU3 は <h1> タグで指定しています <!DOCTYPE html> <html> <head> <title>navimenu03</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="navimenu03.css"> </head> <body> <h1> アコーディオンメニューを作る </h1> <div id="menu-box"> <li> <h1>menu1</h1> <li><a href="linkpages/page1_1.html">page1_1aaaaaaaa</a></li> <li><a href="linkpages/page1_2.html">page1_2bb</a></li> <li><a href="linkpages/page1_3.html">page1_3cccccccccc</a></li> </li> <li> <h1>menu2</h1> <li><a href="linkpages/page2_1.html">page2_1dddd</a></li> <li><a href="linkpages/page2_2.html">page2_2eeeeeeeeee</a></li> <li><a href="linkpages/page2_3.html">page2_3fff</a></li> <li><a href="linkpages/page2_4.html">page2_4gggggggg</a></li> 35

36 </li> <li> <h1>menu3</h1> <li><a href="linkpages/page3_1.html">page3_1hhhhh</a></li> <li><a href="linkpages/page3_2.html">page3_2iii</a></li> <li><a href="linkpages/page3_3.html">page3_3jjjjjjjjjjjjjjjjj</a></li> <li><a href="linkpages/page3_4.html">page3_4kkk</a></li> <li><a href="linkpages/page3_5.html">page3_5llllllll</a></li> </li> </div> </body> </html> CSS の記述 (NaviMenu03.css) 先ず id 名が #menu-box の div 要素のスタイルを指定します右側にコメントが付いているところがありますが実際にスタイルシートにコードを記述する際にはコメントは記述しなくてもかまいません #menu-box { margin: 10px 0px 10px 10px; width: 456px; height: 202px; position: relative; 次に大メニューの ul 要素のスタイルを指定します大メニュー項目 3つを入れる枠になります border-left: 1px solid #999999; と指定しているのは li 要素 ( 大メニュー項目 ) 同士の間のボーダー幅を 1px にしたいため li 要素に border-left: none; の指定をしているので大メニューのいちばん左側のボーダー幅が 0px にならないように ul 要素の左側のボーダー幅を 1px で指定しています /* 大メニュー ********************************************************************/ #menu-box>ul { margin: 0px; padding: 0px; /* この指定がないと margin と padding の余白が自動的に採られてしまう */ height: 202px; /* 大メニューの高さ + ボーダーの幅 */ border-left: 1px solid #999999; list-style-type: none; 36

37 大メニューの li 要素のスタイルを指定しますボーダーを border: 1px solid #999999; で指定していますが li 要素同士の間のボーダー幅を 1px にしたいため li 要素に border-left: none; の指定をしています大メニュー項目を横に並べたいので float: left; の指定をしています大メニューを hover した時にアコーディオンのように大メニューの間が広がるように変化させるため transition の指定をします 1 秒で ease-in-out で変化するようにしています #menu-box>ul>li { width: 50px; height: 200px; /* 大メニューの幅と高さ */ border: 1px solid #999999; border-left: none; float: left; overflow: hidden; transition: 1s ease-in-out; -webkit-transition: 1s ease-in-out; /* この大メニューの overflow: hidden; の指定で以下の全ての要素が overflow しなくなる */ 大メニューの li 要素が hover された時の変化を指定します width: 350px; を指定して li 要素の幅が徐々に広がるように変化させます #menu-box>ul>li:hover { /* 大メニューの hover 時に大メニューの幅を変える */ width: 350px; li 要素に表示する h1 要素のテキストのスタイルを指定します背景色を background-color: #99CCFF;( 淡いブルー ) で指定しその上に background-image を利用して白色のグラデーション (linear-gradient) をかけてメニューバーの輝きを表現していますテキストの色を color: #3333FF;( ブルー ) にテキストの影を text-shadow: 2px 2px 2px #666666; で指定しています width: 200px; height: 50px; の横長の四角形を transform-origin: 0 100%; で左下端を中心として transform: rotatez(90deg) translatex(-50px); で時計方向に 90 度回転させ X 軸方向に-50px 移動しテキストを li 要素の縦長の四角形に収めます #menu-box>ul>li h1 { /* 大メニューのテキスト */ margin: 0px; padding: 0px; width: 200px; height: 50px; background-color: #99CCFF; /* background-color に background-image で白のグラデーションをかぶせる */ background-image: linear-gradient( to bottom, rgba( 255, 255, 255, 0.0 ) 0%, 37

38 rgba( 255, 255, 255, 0.0 ) 100% ); background-image: -webkit-linear-gradient( top, rgba( 255, 255, 255, 0.0 ) 0%, rgba( 255, 255, 255, 0.0 ) 100% ); background-clip: border-box; background-repeat: no-repeat; text-align: center; font-size: 36px; font-weight: bold; font-family: "MS P ゴシック ",Osaka," ヒラギノ角ゴ Pro",Verdana; color: #3333FF; text-shadow: 2px 2px 2px #666666; line-height: 50px; display: block; cursor: pointer; /* 大メニューのテキストを時計回りに 90 度回転させる */ transform-origin: 0 100%; -webkit-transform-origin: 0 100%; transform: rotatez(90deg) translatex(-50px); -webkit-transform: rotatez(90deg) translatex(-50px); 分かり難いところなので図解すると次のようになります h1 要素を transform-origin: 0 100%; を起点として時計回りに 90 度回転させます MENU1 大メニューの li 要素 h1 要素 MENU1 h1 要素の座標系は 90 度回転し上下方向が X 軸になっているので X 軸方向へ -50px 移動すると上方向へ移動し li 要素に収めることができます MENU1 MENU1 次に小メニューの ul 要素のスタイルを指定します大メニュー項目を hover した時に横に伸びる小メニュー項目の 3 つの枠になります margin: -50px 0px 0px 50px; と指定しているのは小メニューの枠を大メニュー項目の右横に並べておくためです 38

39 /* 小メニュー ********************************************************************/ #menu-box ul ul { /* 小メニューの ul */ margin: -50px 0px 0px 50px; padding: 0px; width: 300px; height: 200px; background-color: #EEEEEE; list-style-type: none; 小メニュー項目の li 要素の指定をします #menu-box ul li ul li { /* 小メニュー */ width: 300px; height: 30px; li 要素に表示する a 要素のテキストのスタイルを指定します padding: 0px 0px 0px 10px; と指定しているのはテキストの先頭に 10px 分の空白を開けたいためです #menu-box ul li ul li a { /* 小メニューのテキスト */ margin: 0px; padding: 0px 0px 0px 10px; text-decoration: none; text-align: left; text-overflow: clip; /* テキストの overflow 時はカットする */ font-size: 26px; font-weight: bold; font-family: "MS P ゴシック ",Osaka," ヒラギノ角ゴ Pro",Verdana; color: #000000; text-shadow: 2px 2px 2px #666666; line-height: 30px; display: block; /* Firefox の時の枠線を消す */ overflow: hidden; outline: none; li 要素が hover された時の a 要素の変化を指定します背景色を赤灰色 #FF9999 にテキストの色を白 #FFFFFF に変化させます #menu-box ul li ul li:hover a { background-color: #FF9999; color: #FFFFFF; /* 小メニューの hover 時に背景色とテキストの色を変える */ 39

サンプル CSS12 横に広がるアコーディオンメニュー 2 大メニューのメニュー項目名を縦書きにしてあります大メニューをマウスカーソルで hover するとアコーディオンのように大メニューの間が広がり小メニューが現れます小メニューを hover するとメニューの背景色とテキストの色が変わります NaviMenu03B の説明 HTML の記述 (NaviMenu03B.

40 サンプル CSS12 横に広がるアコーディオンメニュー 2 大メニューのメニュー項目名を縦書きにしてあります大メニューをマウスカーソルで hover するとアコーディオンのように大メニューの間が広がり小メニューが現れます小メニューを hover するとメニューの背景色とテキストの色が変わります NaviMenu03B の説明 HTML の記述 (NaviMenu03B.html) サンプルCSS11の NaviMenu03.html の <title> のテキストが NaviMenu03B に <link> の href の css ファイル名が NaviMenu03B.css に変更された内容です大メニューの項目名 MENU1 MENU2 MENU3 は1 文字ずつ縦向きに回転させるので 1 文字ずつ span 要素で指定しています <!DOCTYPE html> <html> <head> <title>navimenu03b</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="navimenu03b.css"> </head> <body> <h1> アコーディオンメニューを作る </h1> <div id="menu-box"> <li> <h1><span>m</span><span>e</span><span>n</span><span>u</span><span>1</span> </h1> <li><a href="linkpages/page1_1.html">page1_1aaaaaaaa</a></li> <li><a href="linkpages/page1_2.html">page1_2bb</a></li> <li><a href="linkpages/page1_3.html">page1_3cccccccccc</a></li> </li> <li> <h1><span>m</span><span>e</span><span>n</span><span>u</span><span>2</span> </h1> 40

41 <li><a href="linkpages/page2_1.html">page2_1dddd</a></li> <li><a href="linkpages/page2_2.html">page2_2eeeeeeeeee</a></li> <li><a href="linkpages/page2_3.html">page2_3fff</a></li> <li><a href="linkpages/page2_4.html">page2_4gggggggg</a></li> </li> <li> <h1><span>m</span><span>e</span><span>n</span><span>u</span><span>3</span> </h1> <li><a href="linkpages/page3_1.html">page3_1hhhhh</a></li> <li><a href="linkpages/page3_2.html">page3_2iii</a></li> <li><a href="linkpages/page3_3.html">page3_3jjjjjjjjjjjjjjjjj</a></li> <li><a href="linkpages/page3_4.html">page3_4kkk</a></li> <li><a href="linkpages/page3_5.html">page3_5llllllll</a></li> </li> </div> </body> </html> CSS の記述 (NaviMenu03B.css) サンプルCSS11の NaviMenu03 と違う部分だけ説明します li 要素に表示する h1 要素のスタイルを指定します背景色を background-color: #99CCFF; ( 淡いブルー ) で指定しその上に background-image を利用して白色のグラデーション (linear-gradient) をかけてメニューバーの輝きを表現しています #menu-box>ul>li h1 { /* 大メニューのスタイル */ margin: 0px; padding: 16px 0px 0px 10px; width: 50px; height: 200px; cursor: pointer; background-color: #99CCFF; /* background-color に background-image で白のグラデーションをかぶせる */ background-image: linear-gradient( to right, rgba( 255, 255, 255, 0.0 ) 0%, rgba( 255, 255, 255, 0.0 ) 100% ); background-image: -webkit-linear-gradient( left, rgba( 255, 255, 255, 0.0 ) 0%, rgba( 255, 255, 255, 0.0 ) 100% ); background-clip: border-box; background-repeat: no-repeat; 41

hi 要素の中のテキストを1 文字ずつ縦向きに並べるために各文字の span 要素を width: 30px; height: 32px; で指定し float: left; を指定して 1 文字ずつ縦に並べていますテキストの色を color: #3333FF;( ブルー ) にテキストの影を text-shadow: 2px 2px 2px #666666; で指定しています

ヒラギノ角ゴ Pro",Verdana; #menu-box>ul>li h1 span { /* 大メニューのテキスト 1 文字ごと縦に並べる */ margin: 0px; padding: 0px; width: 30px; height: 32px; text-align: center; font-size: 36px; font-weight: bold; font-family:

42 hi 要素の中のテキストを1 文字ずつ縦向きに並べるために各文字の span 要素を width: 30px; height: 32px; で指定し float: left; を指定して 1 文字ずつ縦に並べていますテキストの色を color: #3333FF;( ブルー ) にテキストの影を text-shadow: 2px 2px 2px #666666; で指定しています #menu-box>ul>li h1 span { /* 大メニューのテキスト 1 文字ごと縦に並べる */ margin: 0px; padding: 0px; width: 30px; height: 32px; text-align: center; font-size: 28pt; font-weight: bold; font-family: "MS P ゴシック ",Osaka," ヒラギノ角ゴ Pro",Verdana; #menu-box>ul>li h1 span { /* 大メニューのテキスト 1 文字ごと縦に並べる */ margin: 0px; padding: 0px; width: 30px; height: 32px; text-align: center; font-size: 36px; font-weight: bold; font-family: "MS P ゴシック ",Osaka," ヒラギノ角ゴ Pro",Verdana; color: #3333FF; text-shadow: 2px 2px 2px #666666; float: left; 上記以外の指定は NaviMenu03.css と同じですサンプル CSS13 縦に広がるアコーディオンメニュー 1 大メニューをマウスカーソルで hover するとアコーディオンのように大メニューの間が広がり小メニューが現れます小メニューを hover するとメニューの背景色とテキス 42

43 トの色が変わります NaviMenu04 の説明 HTML の記述 (NaviMenu04.html) NaviMenu03.html の <title> のテキストが NaviMenu04 に <link> の href の css ファイル名が NaviMenu04.css に変更された内容です横長のメニューなので小メニューのテキストを NaviMenu03.html よりも長くしてあります <!DOCTYPE html> <html> <head> <title>navimenu04</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="navimenu04.css"> </head> <body> <h1> アコーディオンメニューを作る </h1> <div id="menu-box"> <li> <h1>menu1</h1> <li><a href="linkpages/page1_1.html">page1_1aaaaaaaaaaaaaaaaaaaaaaaa</a> </li> <li><a href="linkpages/page1_2.html">page1_2bbbbbbbbbbbbbbb</a></li> <li><a href="linkpages/page1_3.html">page1_3ccccccccccc</a></li> </li> <li> <h1>menu2</h1> <li><a href="linkpages/page2_1.html">page2_1qqqqqqqqqqqqqqqqqqqqqq</a> </li> <li><a href="linkpages/page2_2.html">page2_2sssssssssssssssssssssssss</a> </li> <li><a href="linkpages/page2_3.html">page2_3zzzzzzzzzz</a></li> <li><a href="linkpages/page2_4.html">page2_4vvvvvvvvvvvvvvvvvv</a></li> </li> <li> <h1>menu3</h1> <li><a href="linkpages/page3_1.html">page3_1hhhhhhhhhhhhhhhhhhhhhhh</a> </li> <li><a href="linkpages/page3-2.html">page3-2ffffffffffffffffff</a></li> <li><a href="linkpages/page3_2.html">page3_2ffffffffffffffffff</a></li> <li><a href="linkpages/page3_3.html">page3_3gggggggg</a></li> <li><a href="linkpages/page3_4.html">page3_4kkkkkkkkkkkkkkkkkkkkk</a></li> <li><a href="linkpages/page3_5.html">page3_5nnnnnnnnnn</a></li> 43

44 </li> </div> </body> </html> CSS の記述 (NaviMenu04.css) 先ず id 名が #menu-box の div 要素のスタイルを指定します右側にコメントが付いているところがありますが実際にスタイルシートにコードを記述する際にはコメントは記述しなくてもかまいません #menu-box { margin: 10px 0px 10px 15px; width: 402px; height: 94px; position: relative; 次に大メニューの ul 要素のスタイルを指定します大メニュー項目 3つを入れる枠になります border-top: 1px solid #999999; と指定しているのは li 要素 ( 大メニュー項目 ) 同士の間のボーダー幅を 1px にしたいため li 要素に border-top: none; の指定をしているので大メニューのいちばん上のボーダー幅が 0px にならないように ul 要素の上のボーダー幅を 1px で指定しています /* 大メニュー ********************************************************************/ #menu-box>ul { margin: 0px; padding: 0px; /* この指定がないと margin と padding の余白が自動的に採られてしまう */ width: 402px; height: 93px; border-top: 1px solid #999999; list-style-type: none; 大メニューの li 要素のスタイルを指定しますボーダーを border: 1px solid #999999; で指定していますが li 要素同士の間のボーダー幅を 1px にしたいため li 要素に border-top: none; の指定をしています大メニューを hover した時にアコーディオンのように大メニューの間が広がるように変化させるため transition の指定をします 1 秒で ease-in-out で変化するようにしています 44

45 #menu-box>ul>li { width: 400px; height: 30px; border: 1px solid #999999; border-top: none; overflow: hidden; /* この大メニューの overflow: hidden; の指定で以下の全ての要素が overflow しなくなる */ transition: 1s ease-in-out; -webkit-transition: 1s ease-in-out; 大メニューの li 要素が hover された時の変化を指定します height: 200px; を指定して li 要素の高さが徐々に伸びるように変化させます #menu-box>ul>li:hover { /* 大メニューの hover 時に大メニューの高さを変える */ height: 210px; /* ( 小メニューの height 小メニュー Max 数 + 大メニューの height) */ li 要素に表示する h1 要素のテキストのスタイルを指定します padding: 0px 0px 0px 10px; と指定しているのはテキストの先頭に 10px 分の空白を開けたいためです li 要素に表示する h1 要素のテキストのスタイルを指定します背景色を background-color: #99CCFF;( 淡いブルー ) で指定しその上に background-image を利用して白色のグラデーション (linear-gradient) をかけてメニューバーの輝きを表現していますテキストの色を color: #3333FF;( ブルー ) にテキストの影を text-shadow: 2px 2px 2px #666666; で指定しています #menu-box>ul>li h1 { /* 大メニューのテキスト */ margin: 0px; padding: 0px 0px 0px 10px; background-color: #99CCFF; /* background-color に background-image で白のグラデーションをかぶせる */ background-image: linear-gradient( to bottom, rgba( 255, 255, 255, 0.0 ) 0%, rgba( 255, 255, 255, 0.0 ) 100% ); background-image: -webkit-linear-gradient( top, rgba( 255, 255, 255, 0.0 ) 0%, rgba( 255, 255, 255, 0.0 ) 100% ); background-clip: border-box; background-repeat: no-repeat; text-align: left; font-size: 22px; 45

46 font-weight: bold; font-family: "MS P ゴシック ",Osaka," ヒラギノ角ゴ Pro",Verdana; color: #3333FF; text-shadow: 2px 2px 2px #666666; line-height: 30px; display: block; cursor: pointer; 次に小メニューの ul 要素のスタイルを指定します大メニュー項目を hover した時に横に伸びる小メニュー項目の 3 つの枠になります margin: -50px 0px 0px 50px; と指定しているのは小メニューの枠を大メニュー項目の右横に並べておくためです /* 小メニュー ********************************************************************/ #menu-box ul ul { /* 小メニューの ul */ margin: 0px; padding: 0px; /* この指定がないと margin と padding の余白が自動的に採られてしまう */ width: 400px; height: 210px; background-color: #EEEEEE; list-style-type: none; 小メニュー項目の li 要素の指定をします #menu-box ul li ul li { /* 小メニュー */ width: 400px; height: 30px; li 要素に表示する a 要素のテキストのスタイルを指定します padding: 0px 0px 0px 10px; と指定しているのはテキストの先頭に 10px 分の空白を開けたいためです #menu-box ul li ul li a { /* 小メニューのテキスト */ margin: 0px; padding: 0px 0px 0px 10px; text-decoration: none; text-align: left; text-overflow: clip; /* テキストの overflow 時はカットする */ font-size: 16px; font-weight: bold; font-family: "MS P ゴシック ",Osaka," ヒラギノ角ゴ Pro",Verdana; color: #000000; text-shadow: 2px 2px 2px #666666; line-height: 24px; display: block; 46

47 /* Firefox の時の枠線を消す */ overflow: hidden; outline: none; li 要素が hover された時の a 要素の変化を指定します背景色を赤灰色 #FF9999 にテキストの色を白 #FFFFFF に変化させます #menu-box ul li ul li:hover a { background-color: #FF9999; color: #FFFFFF; /* 小メニューの hover 時に背景色とテキストの色を変える */ なお小メニューの高さは固定にしていますが小メニューごとのメニュー項目数によって高さを変えたい場合は NaviMenu04C.html NaviMenu04C.css を参照してください #menu-box>ul>li の指定の後に次の指定を追加しています #menu-box>ul>li:nth-child(1):hover { height: 120px; #menu-box>ul>li:nth-child(2):hover { height: 150px; #menu-box>ul>li:nth-child(3):hover { height: 180px; /* 大メニュー 1の hover 時に大メニュー 1の高さを変える */ /* ( 小メニューの height 小メニュー数 + 大メニューの height) */ /* 大メニュー 2 の hover 時に大メニュー 2 の高さを変える */ /* 大メニュー 3 の hover 時に大メニュー 3 の高さを変える */ 47

48 メニューをHTML 文書に組み込んだ例サンプルライブラリの Menu Documents にサンプルメニューをHTML 文書に組み込んだ例がありますまた Menu Documents(HTML5) には HTML5 形式の文書に組み込んだ例がありますこれらの例を基にしてメニューを組み込んだホームページを作ることができます 48

49 49

50 50

すべて見る

大メニューをマウスカーソルで hover すると半透明の小メニューが上から伸びてきます小メニューを hover するとメニューの背景色とテキストの色が変わります NaviMenuAnime01 の説明 HTML の記述 (NaviMenuAnime01.html) id 属性 menu-box

大メニューをマウスカーソルで hover すると半透明の小メニューが上から伸びてきます小メニューを hover するとメニューの背景色とテキストの色が変わります NaviMenuAnime01 の説明 HTML の記述 (NaviMenuAnime01.html) id 属性 menu-box 1337-1 メニューのアニメーション (1) animation プロパティを利用してメニューの中でアニメーションを動かしてみましょうメニューを工夫することでひときわ光る web ページにすることができますもう Flash でアニメーションを作る必要はありません JavaScript でスクリプトを書く必要もありませんサンプル CSS1 メニューバーの中を動くアニメーションメニューバーの中に太陽系宇宙を入れてみました