0
ハンバーガーメニューの下の領域にあるリンクの一部はリンクされて表示されません。私はこれが意図しない不透明度設定の結果だと思っていますが、実験後には問題を特定できません。私はHTMLとCSSだけで作業しています.Javascriptフリーです。リンクされたテキストハンバーガーメニューの下の数行はリンケージとして表示されませんが、さらに細かく表示されます
「lorem ipsum」段落の「amet」という語句は、すべてのインスタンスでリンクされています。ホバートしたときに青から赤に変わる必要があります。しかし、たとえば、ビューポートの幅が900pxの場合、最初の2つのインスタンスはリンクされたものとして表示されません。 320pxでは、リンクされていないと表示されるのは最初のものだけなので、固定された高さをカバーするものがリンクを正しく停止しているように見えます。それは何ですか？この問題をどのように取り除くことができますか？
HTML
<body>
<nav role="navigation">
<div id="menuToggle">
<input type="checkbox" />
<span></span>
<span></span>
<span></span>
<ul id="menu">
<a href="#"><li>One</li></a>
<a href="#"><li>Two</li></a>
<a href="#"><li>Three</li></a>
<a href="#"><li>Four</li></a>
</ul>
</div>
</nav>
<h2>Title</h2>
<p>"Lorem ipsum dolor sit <a href="#">amet</a>, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<p>"Lorem ipsum dolor sit <a href="#">amet</a>, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<p>"Lorem ipsum dolor sit <a href="#">amet</a>, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<p>"Lorem ipsum dolor sit <a href="#">amet</a>, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>
</body>
CSS
body
{
margin: 0;
padding: 0;
background: #ffffff;
color: #000000;
font-family: Arial, sans-serif;
}
a
{
text-decoration: none;
color: #000000;
transition: color 0.1s ease;
}
a:link {color: blue}
a:hover, a:active {color: red;}
a:visited {color: purple;}
#menuToggle
{
display: block;
position: relative;
top: 10px;
left: 50px;
z-index: 1;
-webkit-user-select: none;
user-select: none;
}
#menuToggle input
{
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left: -5px;
cursor: pointer;
opacity: 0;
z-index: 2;
-webkit-touch-callout: none;
}
#menuToggle span
{
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;
background: #000000;
border-radius: 3px;
z-index: 1;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
opacity 0.55s ease;
}
#menuToggle span:first-child
{
transform-origin: 0% 0%;
}
#menuToggle span:nth-last-child(2)
{
transform-origin: 0% 100%;
}
#menuToggle span:nth-last-child(3)
{
transform-origin: 0% 100%; background: #000000;
}
#menuToggle input:checked ~ span
{
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
}
#menuToggle input:checked ~ span:nth-last-child(3)
{
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
#menuToggle input:checked ~ span:nth-last-child(2)
{
opacity: 1; background: #000000;
transform: rotate(-45deg) translate(0, -1px);
}
#menu
{
width: 200px;
margin: 30px 0 -180px -50px;
padding: 0 px;
padding-top: -10px;
background: #cccccc;
list-style-type: none;
-webkit-font-smoothing: antialiased;
transform-origin: 0% 0%;
transform: translate(-100%, 0);
transition: transform 0.2s cubic-bezier(0.77,0.2,0.05,1.0);
}
#menu li
{
padding: 10px 0;
font-size: 18px;
}
#menuToggle input:checked ~ ul
{
transform: scale(1.0, 1.0);
opacity: 1;
}
ありがとう@SkyWookie！ :) – ruffle
私の喜び@ruffle :)。 –