質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

880閲覧

ナビゲーション部分の単語がちゃんと表示されない

退会済みユーザー

退会済みユーザー

総合スコア0

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/07/12 12:12

グローバルナビゲーションの上にマウスが乗るとメニューが下に表示されるようにしています。
widthが900pxなど大きい時は問題なく表示されるのですが、widthを400pxなど小さくしていくとメニューがちゃんと入らずに単語が切れてしまいます。
htmlの中の「グリンピース」のメニューの部分がそれでメニューがちゃんと表示されません。
nav > ul > li:hover > ul li{
overflow: visible;
height: 24px;
border-bottom:1px solid #ccc;
background-color: aqua;
width: 100%;
list-style: none;
}
のところのheightを100%で指定すれば文章がちゃんと表示されるのですが、そうすると今度はメニューの上下のスライドがカクカクしてちゃんとアニメーションしてくれません。
どうすれば、ブラウザのwidthが小さくなってもちゃんとスライドさせつつ「グリンピース」の単語を表示させることができるでしょうか。

html

1<!doctype html> 2<html> 3<head> 4<meta charset="utf-8"> 5<title>無題ドキュメント</title> 6 <link rel="stylesheet" href="style.css"> 7</head> 8 9<body> 10 <nav class="pc"> 11 <ul> 12 <li>食べ物 13 <ul> 14 <li><a href="">グリーンピース</a></li> 15 <li><a href="">グリーンピース</a></li> 16 </ul> 17 </li> 18 <li>いい 19 <ul> 20 <li><a href="">かかかかかか</a></li> 21 </ul> 22 </li> 23 <li>いい 24 <ul> 25 <li><a href="">ききききききききききき</a></li> 26 </ul> 27 </li> 28 <li>いい 29 <ul> 30 <li><a href="">くくくくくくくく</a></li> 31 <li><a href="">けけけけけけけけけ</a></li> 32 </ul> 33 </li> 34 <li><a class="font-color" href="">いい</a></li> 35 </ul> 36</nav> 37</body> 38</html>

css

1@charset "utf-8"; 2/* CSS Document */ 3nav { 4 background-color: aqua; 5} 6 7nav > ul{display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap; 8 -webkit-box-sizing:border-box; 9 box-sizing:border-box; 10 -webkit-box-pack: justify; 11 -ms-flex-pack: justify; 12 justify-content: space-between; 13 width:100%;margin: auto; 14 list-style: none; 15 padding: 8px 0; 16 } 17 18nav > ul > li{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1; 19 margin:0 1px; 20 position: relative; 21 text-align: center; 22 color: white; 23 } 24nav > ul > li a{ 25 display:block; 26 width: 100%; 27 } 28nav > ul > li:hover{ 29 background:#ededed; 30 color: black; 31 } 32 33nav > ul > li > ul{ 34 display: -webkit-box; 35 display: -ms-flexbox; 36 display: flex; 37 -webkit-box-orient: vertical; 38 -webkit-box-direction: normal; 39 -ms-flex-direction: column; 40 flex-direction: column; 41 position: absolute; 42 right: 0; 43 left: 0; 44 width: 100%; 45 padding: 0; 46} 47 48nav > ul > li:hover > ul{ 49 z-index:3; 50 width:100%; 51 margin:0 auto; 52 padding: 0; 53 } 54 55nav > ul > li > ul > li{ 56 overflow: hidden; 57 height: 0px; 58 -webkit-transition: .2s; 59 -o-transition: .2s; 60 transition: .2s; 61 margin: auto; 62 width: 100%; 63 64 65} 66nav > ul > li:hover > ul li{ 67 overflow: visible; 68 height: 24px; 69 border-bottom:1px solid #ccc; 70 background-color: aqua; 71 width: 100%; 72 list-style: none; 73} 74 75 76nav > ul > li > ul > li a{ 77 background:#ededed; 78} 79.font-color { 80 color: white; 81 text-decoration: none; 82} 83.font-color:hover { 84 color: black; 85} 86

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

「auto transition」でググったところ、
CSS3 transition height 0 to auto
という記事があって、目からウロコが落ちました。

ご提示のコードに適用するとこんな感じかと。
サンプル

css

1nav > ul > li > ul > li{ 2 overflow: hidden; 3 height: 0px; 4 -webkit-transition: .2s; 5 -o-transition: .2s; 6 transition: .2s; 7 margin: auto; 8 width: 100%; 9 10 11} 12nav > ul > li:hover > ul li{ 13 overflow: visible; 14 height: 24px; 15 border-bottom:1px solid #ccc; 16 background-color: aqua; 17 width: 100%; 18 list-style: none; 19}

CSS

1nav > ul > li > ul > li{ 2 overflow: hidden; 3 height: 0px; 4 -webkit-transition: .2s; 5 -o-transition: .2s; 6 transition: .2s; 7 margin: auto; 8 width: 100%; 9 max-height: 0; /* ←追加 */ 10 11} 12nav > ul > li:hover > ul li{ 13 overflow: visible; 14 height: auto; /* ←変更 */ 15 border-bottom:1px solid #ccc; 16 background-color: aqua; 17 width: 100%; 18 list-style: none; 19 max-height: 100px; /* ←追加 */ 20}

投稿2019/07/13 01:28

Lhankor_Mhy

総合スコア35860

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問