個人練習用:サイトパーツ、動きのあるメニューバー

背景
投稿者投稿者ueshin0620いいね0お気に入り登録
プレイ回数106難易度(4.5) 2586打 英語
動きのあるメニューバーのサンプルHTML、CSS
HTMLのあとCSSがはじまります。transitionプロパティで動きのある横並びドロップダウンメニューです。メニュー部分にマウスオーバーするとコンテンツの上に子メニューが展開します。

transitionプロパティはdisplayでの制御をサポートしていないため、子孫メニューの制御はoverflowで行っております。displayでの制御も可能ですが、その場合動きはなくなります。解説なしです。個人練習用に作りました。

関連タイピング

問題文

ふりがな非表示 ふりがな表示

(<!DOCTYPE html><html><head><meta charset="UTF-8">)

<!DOCTYPE html><html><head><meta charset="UTF-8">

(<title>The sample of menu bar</title><link rel="stylesheet" href="css/mn.css">)

<title>The sample of menu bar</title><link rel="stylesheet" href="css/mn.css">

(</head><body><ul class="nav">)

</head><body><ul class="nav">

(<li><a href="#">Home</a></li><li><a href="#">Strategy</a><ul>)

<li><a href="#">Home</a></li><li><a href="#">Strategy</a><ul>

(<li><a href="#">b1</a></li><li><a href="#">b1</a></li></ul></li>)

<li><a href="#">b1</a></li><li><a href="#">b1</a></li></ul></li>

(<li><a href="#">About</a><ul><li><a href="#">c1</a><ul>)

<li><a href="#">About</a><ul><li><a href="#">c1</a><ul>

(<li><a href="#">c2</a></li><li><a href="#">c2</a></li></ul></li>)

<li><a href="#">c2</a></li><li><a href="#">c2</a></li></ul></li>

(<li><a href="#">c1</a></li></ul></li><li><a href="#">Works</a>)

<li><a href="#">c1</a></li></ul></li><li><a href="#">Works</a>

(<ul><li><a href="#">d1</a></li><li><a href="#">d1</a><ul>)

<ul><li><a href="#">d1</a></li><li><a href="#">d1</a><ul>

(<li><a href="#">d2</a></li><li><a href="#">d2</a><ul class="left">)

<li><a href="#">d2</a></li><li><a href="#">d2</a><ul class="left">

(<li><a href="#">d3</a></li><li><a href="#">d3)

<li><a href="#">d3</a></li><li><a href="#">d3

(</a></li></ul></li></ul></li></ul></li>)

</a></li></ul></li></ul></li></ul></li>

(<li><a href="#">Contact</a><ul><li><a href="#">e1</a><ul class="left">)

<li><a href="#">Contact</a><ul><li><a href="#">e1</a><ul class="left">

(<li><a href="#">e2-1</a></li><li><a href="#">e2-1</a></li></ul></li>)

<li><a href="#">e2-1</a></li><li><a href="#">e2-1</a></li></ul></li>

(<li><a href="#">e1</a><ul class="left"><li><a href="#">e2-2</a></li>)

<li><a href="#">e1</a><ul class="left"><li><a href="#">e2-2</a></li>

(<li><a href="#">e2-2</a></li></ul></li></ul></li><!--nav--></ul>)

<li><a href="#">e2-2</a></li></ul></li></ul></li><!--nav--></ul>

(<div class="content"><p>Main content.</p></div></body></html>)

<div class="content"><p>Main content.</p></div></body></html>

(start css)

start css

(.nav { width: 750px; height: 40px; margin: 100px auto 0 auto;)

.nav { width: 750px; height: 40px; margin: 100px auto 0 auto;

(padding: 0;)

padding: 0;

など

(display: flex; })

display: flex; }

(.nav li { position: relative; list-style: none;)

.nav li { position: relative; list-style: none;

(bottom: 0;})

bottom: 0;}

(.nav li a { display: block; width: 150px; height: 40px;)

.nav li a { display: block; width: 150px; height: 40px;

(text-align: center; color: #fff; font-size: 14px;)

text-align: center; color: #fff; font-size: 14px;

(line-height: 2.8; background: #9fb7d4; transition: 0.5s;)

line-height: 2.8; background: #9fb7d4; transition: 0.5s;

(text-decoration: none; border-right: 1px solid #eee;)

text-decoration: none; border-right: 1px solid #eee;

(box-sizing: border-box; })

box-sizing: border-box; }

(.nav > li:hover > a {/*layer-1*/color: orange; background: #afc6e2; })

.nav > li:hover > a {/*layer-1*/color: orange; background: #afc6e2; }

(.nav > li li:hover > a {/*layer-2*/color: olive; background: #afc6e2; })

.nav > li li:hover > a {/*layer-2*/color: olive; background: #afc6e2; }

(.nav li ul {top: 40px; left: -40px; position: absolute; })

.nav li ul {top: 40px; left: -40px; position: absolute; }

(.nav li ul li { overflow: hidden; height: 0; transition: 0.5s; })

.nav li ul li { overflow: hidden; height: 0; transition: 0.5s; }

(.nav li ul li a { border-top: 1px solid #eee; })

.nav li ul li a { border-top: 1px solid #eee; }

(.nav li:hover > ul > li { overflow: visible; height: 40px; })

.nav li:hover > ul > li { overflow: visible; height: 40px; }

(.nav li ul li ul { top: 0; left: 110px; })

.nav li ul li ul { top: 0; left: 110px; }

(.nav li ul li ul:before {/*layer-2*/position: absolute;)

.nav li ul li ul:before {/*layer-2*/position: absolute;

(content: ""; top: 15px; left: 30px; border: 5px solid transparent;)

content: ""; top: 15px; left: 30px; border: 5px solid transparent;

(border-left: 5px solid #fff; })

border-left: 5px solid #fff; }

(.nav li ul li ul li:hover > a {/*layer-3*/color: pink; background: #afc6e2; })

.nav li ul li ul li:hover > a {/*layer-3*/color: pink; background: #afc6e2; }

(.nav li ul li ul.left { top: 0; left: -190px; })

.nav li ul li ul.left { top: 0; left: -190px; }

(.nav li ul li ul.left:before,/*layer-2-left*/)

.nav li ul li ul.left:before,/*layer-2-left*/

(.nav li ul li ul li ul.left:before {/*layer-3-left*/)

.nav li ul li ul li ul.left:before {/*layer-3-left*/

(position: absolute; content: ""; top: 15px; left: 190px;)

position: absolute; content: ""; top: 15px; left: 190px;

(border: 5px solid transparent; border-right: 5px solid #fff; })

border: 5px solid transparent; border-right: 5px solid #fff; }

(.nav li ul li ul.left li:hover > a {/*layer-2-left*/)

.nav li ul li ul.left li:hover > a {/*layer-2-left*/

(color: pink; background: #afc6e2; })

color: pink; background: #afc6e2; }

(.nav li ul li ul li ul.left li:hover > a {/*layer-3-left*/)

.nav li ul li ul li ul.left li:hover > a {/*layer-3-left*/

(color: purple; background: #afc6e2; })

color: purple; background: #afc6e2; }

(.content { width: 750px; height: 200px; margin: 0 auto;)

.content { width: 750px; height: 200px; margin: 0 auto;

(padding: 10px; text-align: left; box-sizing: border-box; })

padding: 10px; text-align: left; box-sizing: border-box; }

問題文を全て表示 一部のみ表示 誤字・脱字等の報告

ueshin0620のタイピング

オススメの新着タイピング

タイピング練習講座 ローマ字入力表 アプリケーションの使い方 よくある質問

人気ランキング

注目キーワード