【css】メニューの小技０１
2023-09-27
どうも、氷翠です。
あんまりにも基本的なことだったので、あんまり気にしていなかったことだけど、今回仕事で使うことがあったので、思い出した。そこで今回まとめてみました。
まずはHTMLだけど、今回は<nav>の中はリスト形式で行きます。
<nav class="main_menu">
<ul class="orig">
<li><label><a href="#">HOME</a></label></li>
<li>
<label>ABOUT</label>
<ul class="sub">
<li><label><a href="#">ITEM_001</a></label></li>
<li><label><a href="#">ITEM_002</a></label></li>
<li><label><a href="#">ITEM_003</a></label></li>
</ul>
</li>
<li>
<label>PAGE_01</label>
<ul class="sub">
<li><label><a href="#">ITEM_004</a></label></li>
<li><label><a href="#">ITEM_005</a></label></li>
<li><label><a href="#">ITEM_006</a></label></li>
</ul>
</li>
<li>
<label>PAGE_02</label>
<ul class="sub">
<li><label><a href="#">ITEM_007</a></label></li>
<li><label><a href="#">ITEM_008</a></label></li>
<li><label><a href="#">ITEM_009</a></label></li>
</ul>
</li>
<li>
<label>PAGE_03</label>
<ul class="sub">
<li><label><a href="#">ITEM_010</a></label></li>
<li><label><a href="#">ITEM_011</a></label></li>
<li><label><a href="#">ITEM_012</a></label></li>
</ul>
</li>
<li><label><a href="#">PAGE_04</a></label></li>
</ul>
</nav>結構大きくなったけど、実際はコピーしただけなので、そんなに時間はかかっていない。
今回はCSSだけでコントロールしたい。
メニューはタグ的には<nav>を利用する。サイト全体のナビゲーションという意味でね。<nav>自体は何の変哲もないブロック要素のタグだけど。で、その中には<ul>タグを利用してリスト化したメニューを展開する。
更に、<li>の中は<label>で文字を入れておき、部分的にはサブメニューを入れてある。
後はCSSでの処理となる。
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html, body {
background: #000;
width: 100%;
height: 100%;
font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
color: white;
}
body {
display: flex;
justify-content: center;
align-items: center;
}まずは全体の定義として、marginとpaddingを0に、あとはブロック要素のプロパティを「border-box」にしておく。今では「-webkit-」とか「-moz-」を使う必要もないかもしれないが、一応ね。
次に<html>、<body>に対しての設定。このとき、<body>はその中のブロック要素を画面の中央に配置するため、display: flexを設定しておく。で、横の位置を中央にする「justify-content: center;」と縦の位置を中央にする「align-items: center;」を設定します。
.main_menu {
padding: 0.5em 1em;
background: linear-gradient(-90deg, rgba(20,20,20,1) 0%, rgba(40,40,40,1) 100%);
border-radius: 5px;
box-shadow: 2px 2px 10px #AAA, -2px -2px 10px #666;
width: 10em;
}
ul {
list-style: none;
}
ul a {
text-decoration: none;
color: white;
text-shadow: 1px 1px 5px #AAA;
}
.orig > li {
padding: 0.5em 1em;
position: relative;
width: 100%;
border-bottom: 1px solid #666;
z-index: 10;
}
.orig > li:last-child {
border-bottom: none;
}
.orig > li:hover {
z-index: 15;
}
.orig > li:hover:after {
content: ' >';
}<nav>についているクラス「.main_menu」の定義は単純にデザインだけです。ただ、ブロック要素だということを外さないように「display」プロパティはつけません。これにより、画面の中央に配置するためのもの。
あとは<ul>にはリストだという文字の前に「・」があるが、それを消す。
<a>はメニューのボタンらしく、下線も消す。
「.orig > li:hover」では、<li>の上にマウスポインタを重ねた時のデザインをするが、「z-index」の値を変化させるだけ。
「.orig > li:hover:after」は<li>にマウスポインタを重ねた時の、after要素に対しての設定。<li>にマウスを重ねると、文字の後ろに「 >」を表示させる。というものだ。
次はサブメニューの定義になる。
.sub {
position: absolute;
top: 1px;
left: 7.5em;
z-index: 15;
background: linear-gradient(0deg, rgba(10,10,10,1) 0%, rgba(30,30,30,1) 100%);
box-shadow: 2px 2px 10px #666;
border-radius: 5px;
display: none;
}
.orig > li:hover .sub {
display: block;
}
.sub > li {
padding: 0.5em 1em;
}
.sub > li:hover {
text-decoration: underline;
}
.sub > li:hover label {
position: relative;
top: 2px;
left: 2px;
}「.sub」は普通にデザインしていく。が、最後に「display:none」で隠す。次の項目で表示する定義をするからだ。
「.orig > li:hover .sub」大元の<li>にマウスポインタが重なったときのサブメニューの動き。ここで「display: block」を設定しておく。
それから下はサブメニューのデザインと動きになる。
目で確認することはできないが、メインの<li>にマウスポインタが重なると、サブが表示されるようになるが、このときメインの<li>の領域が広がっているため、メインの<li>からサブメニューにマウスポインタをずらしてもまだ、「hover」が効いているということになる。
その領域からマウスポインタが外れない限りはサブメニューは表示されたままになる。この見えない領域が広がるというのが重要になる。
と、こんな感じです。
コメントを残す