人気ブログランキング | 話題のタグを見る
Studio TA Subsite の案内とお知らせ

プルダウンメニュー の基本構造とマイナーアレンジ

2016年 09月 12日
プルダウンメニューのHtmlコードの見本をネットで探すと、だいたい下の様な基本形を用いている場合が多い様です。

<span class="menu">
<a>Menu Title</a>
<ul>
<li><a href="A-LINK">Menu A</a></li>
<li><a href="B-LINK">Menu B</a></li>
<li><a href="C-LINK">Menu C</a></li>
<li><a href="D-LINK">Menu D</a></li>
</ul>
</span>

上は、メニューバー上の表示が最初は「Menu Title」というスイッチで、それにマウスを乗せる(フォバー)すると、「Menu A」~「Menu D」のサブメニューがプルダウンするという形式のメニューです。 このメニューの模式図が下で、実際のブラウザの表示が推測できるでしょう。

プルダウンメニュー の基本構造とマイナーアレンジ_b0174191_18171422.png

これはプルダウンメニューの1単位で、これをメニューバー上に横に幾つか並べるというパターンが多いのですが、どの単位も基本的に同じ動作ですから、CSSは1単位に関して指定すれば共通に通用します。

プルダウンメニューの基本的なCSSの書き方は、上のHtmlに沿えば、
<span class="menu">のフォバー時に、<ul>~</ul>のサブメニューを表示し
<span class="menu">のアンフォバー時に、<ul>~</ul>のサブメニューを隠す
という方針でCSSを記述し、その際に「transition」等のプロパティを追加して、アニメーション効果を持たせるというものです。

この<ul>~</ul>の部分を隠す方法は、幾つも考えられます。
<span class="menu">は全体を囲うので、この表示高さ(範囲)を変化させマスクしてしまう。
<ul>の表示高さ(範囲)を変化しマスクする、あるいはその「opacity」「visibility」を操作する。
<li>の一個ごとの表示高さ(範囲)を変化しマスクする、あるいはその「opacity」「visibility」を操作する。

また、
▪マスクは「overflow」の切り替えでも操作できるが、これは「transition」が効かない。
▪「opacity」は表示透過であり、常にマウス操作に対応する。これは「transition」が効く。
▪「visibility」は非表示指定ではマウス操作に対応しなく出来る。これは「transition」が効く。
という点で、どの指定を使って隠すかを状況に合わせて選ぶ必要があります。


私のブログタイトル部のプルダウンメニューですが、従来の記述は、<li>の表示高さ「height」を20px → 0pxと変更し、同時にその「overflow」をvisible → hidden に切り替えていました。 しかし、どうも消え方が美しくないのが気になっていました。

プルダウンメニュー の基本構造とマイナーアレンジ_b0174191_00490199.png

上は元に戻る瞬間ですが、一瞬この様な表示になってから繰り上がる様な動作をします。 もっと綺麗な消し方を色々とCSSを書き換えて探したところ、かなり改善されました。

その方法は、<li>は従来の通り高さ「height」を20px → 0pxと変更し、同時に<ul>の「opacity」を 1 → 0 に、更に「visibility」を visible → hidden に変更するものです。

「height」を20px → 0pxの変更は、プルダウンのアニメーションのために必要ですが、この指定だけでは、0px時の高さが最小の状態でも、サブメニューの文字の高さと padding 値は残ります。 その結果、下図の様に1行以上の高さでサブメニューが消えずに止まってしまいます。

プルダウンメニュー の基本構造とマイナーアレンジ_b0174191_01081195.png

これは、<ul>の方で「visibility」を visible → hidden とすると、綺麗に隠してくれます。 また、「opacity」でフェイドアウト効果を付けないと、上図の状態が一瞬目立って表示されます。「opacity」だけで見た目は同じに出来ますが、上図の縮んだサブメニューの部分で hoverが実行されサブメニューが出てしまうので、余り好ましくありません。「visibility」を併記すると、この部分でマウスに反応しなくなり、隠すという意味で理想的になります。

これで<a>Menu Title</a>(実際の画像上では「ExUser Menu」)の下側がマウスに感知することはなくなりました。 しかしCSSの記述上は、<span class="menu">が感知する要素で <a>Menu Title</a>が対象要素ではありません。 下図①は<span class="menu">の本来の要素の場所を表示していて、これは周囲の他のメニュー文字の padding、line-height、margin に準じて 54pxの高さ幅を持っています。

プルダウンメニュー の基本構造とマイナーアレンジ_b0174191_19244174.png

このため、この領域にマウスがあればプルダウンを生じてしまいます。 本当は <a>Menu Title</a> のみをマウスに感知させたいのです。 そこで、明示的に<span class="menu">に「height: 20px;」を指定してやると、上図➁の領域と<a>Menu Title</a>の文字が感知領域となります。 更に➂では「height: 0;」を指定した時で、<a>Menu Title</a>の文字のみが感知領域となり、タイトル文字のみでプルダウンするという目的を達することが出来ました。(<a>Menu Title</a>の文字は<span class="menu">の一部として扱われる様です) このなにげない「height: 0;」は、実に有効な指定なのです。

実際のアニメーションの細かな表情の違いや、マウスを感知する領域には、色々な条件が関わって来ます。 プルダウンメニューの実装は、メニュー周囲の設定がネット上の見本通りではなく、カットアンドトライが必要な場合が多いと言えるでしょう。

CSSの例 (メニューのフォントサイズ medium でデザインしたものです)


.menu {
position: relative;
display: inline-block;
width: 150px;
height: 0; }

.menu a {
display: block;
text-decoration: none; }

.menu ul {
list-style: none;
position: absolute;
z-index: 9999;
width: 100%;
padding: 0px;
visibility: hidden;
opacity: 0;
transition: 0.5s; }

.menu:hover ul {
visibility: visible;
opacity: 1; }

.menu ul li {
display: block;
height: 0;
transition: 0.5s; }

.menu:hover ul li {
height: 20px; }

.menu ul li a {
margin: 4px 10px 0px;
text-align: left; }



上記の 赤文字の値が、いずれも「.menu:hover」時に「transition:0.5s」のタイミングで変化します。
この設定は、このページのプルダウンメニューに実装されていますので、動作を確かめてください。




by Ataron | 2016-09-12 01:59 | ブログスキンのアレンジ | Trackback | Comments(0)
名前
URL
削除用パスワード

※このブログはコメント承認制を適用しています。ブログの持ち主が承認するまでコメントは表示されません。