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

背景
投稿者投稿者ueshin0620  いいね0  お気に入り登録
プレイ回数144  難易度(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のタイピング

もっと見る

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

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

人気ランキング

もっと見る

注目キーワード