これHTMLだから簡単だけど、GUIアプリで作ったら大変だなきっと・・・。とか思ってます。
それではサンプルです。
目標
CSSだけでマウスオンすると展開するメニューを作る。sample.html
| <!DOCTYPE html> <html> <head> <meta content="IE=edge" http-equiv="X-UA-Compatible" /> <link href="./samplecss.css" rel="stylesheet" type="text/css" /> <title>sample</title> </head> <body> <div class="container"> <header>ヘッダーだよ <div id="box">Menu <ul id="list"> <li class="item"> <a href="./LinkA.html">リンクA</a> </li> <li class="item"> <a href="./LinkB.html">リンクB</a> </li> <li class="item"> <a href="./LinkC.html">リンクC</a> </li> <li class="item"> <a href="./LinkD.html">リンクD</a> </li> </ul></div> </header> <main>meinだよ</main> </div> </body> </html> |
samplecss.html
* { margin : 0; padding : 0; box-sizing : border-box; } html{ background-color: #FFAAAA; } a{ text-decoration : none; } .container{ max-width : 900px; margin : 0 auto; } header{ display: block; position: relative; height: 40px; background-color: #AAFFFF; } #box{ position :absolute; top : 0; right : 0; height : 40px; width : 100px; padding : 10px; text-align : center; background : #FFFF55; } #list{ position : absolute; display : none; top : 40px; right : 0; } .item{ list-style-type : none; width :100px; background :#AAAAFF; } .item a{ display : block; padding : 10px; color : #FFFFFF; } #box:hover{ color : #FFFFFF; background-color: #5555FF; } #box:hover #list, #box:hover #list .item{ display: block; } .item:hover{ background : #5555AA; } |
表示例１：メニュー非表示
表示例２：メニュー表示(menuの部分をマウスオンしています。)
ポイント
- HTML側
- div要素でマウスオンする対象を作る。
- マウスオンするdiv要素の子要素としてul要素を設定
<div id="box">Menu
<ul id="list">
<li class="item">
<a href="./LinkA.html">リンクA</a>
</li>
<li class="item">
・
・
・
</ul>
</div> - CSS側
- ul要素,li要素はdisplay:noneを指定し描画されないように指定する。
- マウスオンする対象として作ったdiv要素の疑似クラス:hoverの子孫要素で、
ul要素とli要素に display:block を指定する
#list{
position : absolute;
display : none;
top : 40px;
right : 0;
}
.item{
list-style-type : none;
width :100px;
background :#AAAAFF;
}
.item a{
display : block;
padding : 10px;
color : #FFFFFF;
}
#box:hover{
color : #FFFFFF;
background-color: #5555FF;
}
#box:hover #list,
#box:hover #list .item{
display: block;
}
.item:hover{
background : #5555AA;
}
結構使えそうな部品がわかってきたので、何かWebページを作ってみたいところです。
うーん、コンテンツが特に何もないなぁ。
参考になれば幸いです。
0 件のコメント:
コメントを投稿