1253-1 メニューのトランジション 1 (text-overflow) トランジションを利用して 面白い個性的なメニューを作ってみましょう web ページもぐっと引き立つでしょう ここで紹介するメニューも Illustrator や Photoshop でメニューの画像を作る必要はありません JavaScript でスクリプトを書く必要もありません すべて CSS3 の機能だけで作成されています プロパティ text-overflow テキストが要素に納まり切れない時の処理方法を指定します 値説明 clip テキストを切り取って要素に収める ( 初期値 ) ellipsis 文字列 テキストを切り取り 後ろに を付加して 切り取ったことを表現する テキストを切り取ったことを示すために 指定された文字列を表示する (2013 年 6 月現在では未対応 ) overflow: hidden; とセットで使用します overflow: visible; または overflow の指定 がない場合は text-overflow プロパティは適用されません 1
使用例 ( サンプルソース :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
定しています もちろんここへ # ではなく 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
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
大メニューの 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
/* 小メニュー ********************************************************************/ #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
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
ーをマウスカーソルで 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
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
/* 大メニュー ********************************************************************/ #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
ー項目の 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
/* 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
li 要素に表示する a 要素のテキストのスタイルで次の部分が違います 背景色を background-color: # 999999;( グレー ) で指定し その上に 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
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
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
色を 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
ク済みのデコレーションとして点線の枠取りが表示されるのを防ぐためです #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
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
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
小メニュー項目の 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 大メニューの横から伸びてくるプルダウンメニュー 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
<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
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
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
ューが伸びてきます 右方向を向いていた楔 > が小メニューの方向を向きます 小メニ ューを 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
</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
#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
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
小メニュー項目の 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 すると メニューの背景色とテキストの色が変わります サンプル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
ー項目の 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; /* テキストの 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
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
大メニュー項目の 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.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
</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
大メニューの 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
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
/* 小メニュー ********************************************************************/ #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.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
<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; で指定しています #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
トの色が変わります 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
</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
#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
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
/* 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
メニューをHTML 文書に組み込んだ例サンプルライブラリの Menu Documents にサンプルメニューをHTML 文書に組み込んだ例があります また Menu Documents(HTML5) には HTML5 形式の文書に組み込んだ例があります これらの例を基にしてメニューを組み込んだホームページを作ることができます 48
49
50