MENU1 - メニューのトランジション 1 (text-overflow) トランジションを利用して面白い個性的なメニューを作ってみましょう web ページもぐっと引き立つでしょうここ

M E N U 1 M E N U 1 M E N U 1

大メニューのli要素

h1要素を transform-origin: 0 100%; を起点として、時計回りに90度回転させます。

h1要素の座標系は90度回転し、上下方向がＸ軸になっているので、Ｘ軸方向へ-50px移動すると、上方向へ移動し、li要素に収めることができます。

h1要素

次に小メニューの ul 要素のスタイルを指定します。大メニュー項目を hover した時に横に伸びる小メニュー項目の３つの枠になります。margin: -50px 0px 0px 50px;と指定しているのは、小メニューの枠を大メニュー項目の右横に並べておくためです。

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.6 ) 50%, rgba( 255, 255, 255, 0.6 ) 50%, 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: "ＭＳＰゴシック",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);

}

li 要素に表示する a 要素のテキストのスタイルを指定します。padding: 0px 0px 0px 10px;

と指定しているのは、テキストの先頭に 10px 分の空白を開けたいためです。

li 要素が hover された時の a 要素の変化を指定します。背景色を赤灰色 #FF9999 に、テキストの色を白 #FFFFFF に変化させます。

/* 小メニュー ********************************************************************/

#menu-box ul ul { /* 小メニューの ul */

margin: -50px 0px 0px 50px; padding: 0px;

width: 300px; height: 200px;

background-color: #EEEEEE;

list-style-type: none;

}

#menu-box ul li ul li { /* 小メニュー */

width: 300px; height: 30px;

}

#menu-box ul li ul li:hover a { /* 小メニューの hover 時に背景色とテキストの色を変える */

background-color: #FF9999;

color: #FFFFFF;

}

#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: "ＭＳＰゴシック",Osaka,"ヒラギノ角ゴ Pro",Verdana;

color: #000000;

text-shadow: 2px 2px 2px #666666;

line-height: 30px;

display: block;

/* Firefox の時の枠線を消す */

overflow: hidden; outline: none;

}

〔横に広がるアコーディオンメニュー２〕

大メニューのメニュー項目名を縦書きにしてあります。大メニューをマウスカーソルで hover すると、アコーディオンのように大メニューの間が広がり、小メニューが現れます。

小メニューを hover すると、メニューの背景色とテキストの色が変わります。

【NaviMenu03B の説明】

〔HTML の記述（NaviMenu03B.html）〕

サンプルＣＳＳ１１の NaviMenu03.html の<title>のテキストが「NaviMenu03B」に、<link>

の href の css ファイル名が「NaviMenu03B.css」に変更された内容です。大メニューの項目名 MENU1、MENU2、MENU3 は１文字ずつ縦向きに回転させるので、１文字ずつ span 要素で指定しています。

サンプルＣＳＳ１２

<!DOCTYPE html>

<html>

<head>

<title>NaviMenu03B</title>

</head>

<body>

<h1>■アコーディオンメニューを作る。</h1>

<ul>

<li>

</h1>

<ul>

<li><a href="linkPages/page1_1.html">PAGE1_1aaaaaaaa</a></li>

<li><a href="linkPages/page1_3.html">PAGE1_3cccccccccc</a></li>

</ul>

</li>

<li>

</h1>

〔CSS の記述（NaviMenu03B.css）〕

サンプルＣＳＳ１１の NaviMenu03 と違う部分だけ説明します。

li 要素に表示する h1 要素のスタイルを指定します。背景色を background-color: #99CCFF;

（淡いブルー）で指定し、その上に background-image を利用して白色のグラデーション

（linear-gradient）をかけて、メニューバーの輝きを表現しています。

<ul>

<li><a href="linkPages/page2_2.html">PAGE2_2eeeeeeeeee</a></li>

<li><a href="linkPages/page2_4.html">PAGE2_4gggggggg</a></li>

</ul>

</li>

<li>

</h1>

<ul>

<li><a href="linkPages/page3_1.html">PAGE3_1hhhhh</a></li>

<li><a href="linkPages/page3_3.html">PAGE3_3jjjjjjjjjjjjjjjjj</a></li>

<li><a href="linkPages/page3_5.html">PAGE3_5llllllll</a></li>

</ul>

</li>

</ul>

</div>

</body>

</html>

#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.6 ) 50%, rgba( 255, 255, 255, 0.6 ) 50%, 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.6 ) 50%, rgba( 255, 255, 255, 0.6 ) 50%,

rgba( 255, 255, 255, 0.0 ) 100% );

background-clip: border-box;

background-repeat: no-repeat;

}

hi 要素の中のテキストを１文字ずつ縦向きに並べるために、各文字の span 要素を width:

30px; height: 32px;で指定し、float: left;を指定して、１文字ずつ縦に並べています。

テキストの色を color: #3333FF;（ブルー）に、テキストの影を text-shadow: 2px 2px 2px

#666666;で指定しています。

上記以外の指定は、NaviMenu03.css と同じです。

〔縦に広がるアコーディオンメニュー１〕

大メニューをマウスカーソルで hover すると、アコーディオンのように大メニューの間が広がり、小メニューが現れます。小メニューを hover すると、メニューの背景色とテキス

サンプルＣＳＳ１３

#menu-box>ul>li h1 span { /* 大メニューのテキスト１文字ごと縦に並べる */

margin: 0px; padding: 0px;

width: 30px; height: 32px;

text-align: center;

font-size: 28pt;

font-weight: bold;

font-family: "ＭＳＰゴシック",Osaka,"ヒラギノ角ゴ Pro",Verdana;

#menu-box>ul>li h1 span { /* 大メニューのテキスト１文字ごと縦に並べる */

margin: 0px; padding: 0px;

width: 30px; height: 32px;

text-align: center;

font-size: 36px;

font-weight: bold;

font-family: "ＭＳＰゴシック",Osaka,"ヒラギノ角ゴ Pro",Verdana;

color: #3333FF;

text-shadow: 2px 2px 2px #666666;

float: left;

}

【NaviMenu04 の説明】

〔HTML の記述（NaviMenu04.html）〕

NaviMenu03.html の<title>のテキストが「NaviMenu04」に、<link>の href の css ファイル名が「NaviMenu04.css」に変更された内容です。横長のメニューなので、小メニューのテキストを NaviMenu03.html よりも長くしてあります。

<!DOCTYPE html>

<html>

<head>

<title>NaviMenu04</title>

</head>

<body>

<h1>■アコーディオンメニューを作る。</h1>

<ul>

<li>

<ul>

<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>

</ul>

</li>

<li>

<ul>

<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>

</ul>

</li>

<li>

<ul>

<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>

</ul>

〔CSS の記述（NaviMenu04.css）〕

先ず、id 名が#menu-box の div 要素のスタイルを指定します。右側にコメントが付いているところがありますが、実際にスタイルシートにコードを記述する際には、コメントは記述しなくてもかまいません。

次に大メニューの ul 要素のスタイルを指定します。大メニュー項目３つを入れる枠になります。border-top: 1px solid #999999;と指定しているのは、li 要素（大メニュー項目）

同士の間のボーダー幅を 1px にしたいため、li 要素に border-top: none; の指定をしているので、大メニューのいちばん上のボーダー幅が 0px にならないように、ul 要素の上のボーダー幅を 1px で指定しています。

大メニューの li 要素のスタイルを指定します。ボーダーを border: 1px solid #999999;

で指定していますが、li 要素同士の間のボーダー幅を 1px にしたいため、li 要素に border-top: none; の指定をしています。大メニューを hover した時に、アコーディオンのように大メニューの間が広がるように変化させるため、transition の指定をします。１秒で ease-in-out で変化するようにしています。

#menu-box {

margin: 10px 0px 10px 15px;

width: 402px; height: 94px;

position: relative;

}

/* 大メニュー ********************************************************************/

#menu-box>ul {

margin: 0px; padding: 0px; /* この指定がないと、margin と padding の余白が自動的に採られてしまう。 */

width: 402px; height: 93px;

border-top: 1px solid #999999;

list-style-type: none;

}

</li>

</ul>

</div>

</body>

</html>

大メニューの li 要素が hover された時の変化を指定します。height: 200px; を指定して、

li 要素の高さが徐々に伸びるように変化させます。

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:hover { /* 大メニューの hover 時に大メニューの高さを変える */

height: 210px; /* （小メニューの height × 小メニューＭａｘ数＋大メニューの height） */

}

#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;

}

#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.6 ) 50%, rgba( 255, 255, 255, 0.6 ) 50%,

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.6 ) 50%, rgba( 255, 255, 255, 0.6 ) 50%,

rgba( 255, 255, 255, 0.0 ) 100% );

background-clip: border-box;

background-repeat: no-repeat;

text-align: left;

font-size: 22px;

小メニュー項目の li 要素の指定をします。

li 要素に表示する a 要素のテキストのスタイルを指定します。padding: 0px 0px 0px 10px;

と指定しているのは、テキストの先頭に 10px 分の空白を開けたいためです。

/* 小メニュー ********************************************************************/

#menu-box ul ul { /* 小メニューの ul */

margin: 0px; padding: 0px; /* この指定がないと、margin と padding の余白が自動的に採られてしまう。 */

width: 400px; height: 210px;

background-color: #EEEEEE;

list-style-type: none;

}

#menu-box ul li ul li { /* 小メニュー */

width: 400px; height: 30px;

}

#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: "ＭＳＰゴシック",Osaka,"ヒラギノ角ゴ Pro",Verdana;

color: #000000;

text-shadow: 2px 2px 2px #666666;

line-height: 24px;

display: block;

font-weight: bold;

font-family: "ＭＳＰゴシック",Osaka,"ヒラギノ角ゴ Pro",Verdana;

color: #3333FF;

text-shadow: 2px 2px 2px #666666;

line-height: 30px;

display: block;

cursor: pointer;

}

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