前提・実現したいこと
transformを設定したテキストが、なぜかマウスオンでぶれてしまうことに気づきました。
ぶれるのはプルダウンメニューについているTEST2のテキストです。
ぶれないようにするにはどうしたらいいでしょうか?
下のURLで表示されます。
https://thimbleprojects.org/lastmemoria/657528/
ナビのborderは斜線で表示して、テキストはまっすぐに表示したいのでそういう記述をしています。
※3/20 追記
ぶれ自体は「li.menu__single ul.menu__second-level {」内のtransition記述を消すことで
改善することを確認しましたが、代わりにドロップダウンのふわっとした出方が消えました。
できればドロップダウンのアニメーションも残したいと思っています。
該当のソースコード
HTML
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <title>Thimble Sample</title> 7 <link rel="stylesheet" href="style.css"> 8 </head> 9 <body> 10 11 <div id="gloval-nav"> 12 <ul class="menu"> 13 <li class="menu__single"> 14 <a href="#" class="init-bottom">TEST1</a></li> 15 <li class="menu__single"> 16 <a href="#" class="init-bottom">TEST2</a> 17 <ul class="menu__second-level"> 18 <li class="a"><a href="#">test</a></li> 19 <li class="a"><a href="#">test</a></li> 20 <li class="a"><a href="#">test</a></li> 21 </ul> 22 </li> 23 <li class="menu__single"> 24 <a href="#" class="init-bottom">TEST3</a></li> 25 </ul> 26 </div> 27 28 </body> 29</html>
CSS
1.menu { 2 position: relative; 3 width: 100%; 4 max-width: 480px; /* 600 */ 5 margin: 0 auto; 6 font-size: 20px; 7} 8 9.menu > li { 10 float: left; 11 width: 33%; 12 display:table-cell; 13 vertical-align:middle; 14 text-align:center; 15 -webkit-transform: skewX(-145deg); 16 -moz-transform: skewX(-145deg); 17 transform: skewX(-145deg); 18 border-right: 1px solid #000; 19 border-left: 1px solid #000; 20} 21 22.menu > li+li { 23 border-left: 0; 24 border-right: 1px solid #333; 25} 26 27.menu > li a { 28 display: block; 29 color: #000; 30 padding:0 15px; 31 text-decoration: none; 32 line-height: 1.2 !important; 33} 34 35.menu > li a.init-bottom { 36 transform: skewX(145deg); 37} 38 39.menu > li a:hover { 40 text-decoration: underline; 41} 42 43ul.menu__second-level { 44 visibility: hidden; 45 opacity: 0; 46 transform: skewX(145deg); 47 text-align:left; 48} 49 50.menu > li.menu__single { 51 position: relative; 52} 53 54li.menu__single ul.menu__second-level { 55 position: absolute; 56 top: 30px; 57 left: -60px; 58 width: 110%; 59 -webkit-transition: all .2s ease !important; 60 transition: all .2s ease !important; 61 transform: skewX(145deg); 62} 63 64li.menu__single:hover ul.menu__second-level { 65 top: 30px; 66 left: -60px; 67 visibility: visible; 68 opacity: 1 !important; 69} 70 71.menu > li:hover { 72 -webkit-transition: all .5s; 73 transition: all .5s; 74} 75 76.menu__second-level li { 77 background-color: rgba(255,255,255,0.7); 78 padding: 5px 0; 79 list-style: none; 80} 81 82/* floatクリア */ 83.menu:before, 84.menu:after { 85 content: " "; 86 display: table; 87} 88 89.menu:after { 90 clear: both; 91} 92 93.menu { 94 *zoom: 1; 95}
試したこと
hover時の表示がおかしいので、「.menu > li a:hover {」や「.menu > li:hover {」を修正すれば解決すると思い「.menu > li」と同じ記述をしてみましたが違うようでした。
「.menu > li {」のtransformの記述を消すとぶれはなくなるので
テキストを斜めからまっすぐにしようとする工程にミスがあるのだろうなというのはわかるのですが…。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/03/20 16:01