Question

我正在尝试使用：target伪类创建移动导航。我的问题是，当我打开导航时，打开按钮不会隐藏，以使关闭按钮可见。

这不起作用 - ＆gt; ＃nav-menu：target＃mobile-menu-open

这是我的代码：

HTML

<nav>
        <a href="#nav-menu" id="mobile-menu-open"></a>
        <a href="#" id="mobile-menu-close"></a>
        <ul id="nav-menu">
            <li><a href="side-a.html">Side A</a></li>
            <li><a href="side-b.html">Side B</a></li>
        </ul>
</nav>

CSS

nav {
clear: both;
text-align: left;
height: 24px;
margin: auto;
position: relative;}

#nav-menu {
display: none;}

#nav-menu li {
display: block;
text-align: left;
padding: 11px 8px;
font-weight: bold;
font-size: 14px;}

#nav-menu a:link, #nav-menu a:visited {
color:#CCC;
text-decoration: none;
transition: all 0.15s ease-in-out;}

#nav-menu a:hover, #nav-menu a:visited hover {
color:#FFF;
text-decoration: none;
transition: all 0.15s ease-in-out;}

#mobile-menu-open {
display: block;}

#mobile-menu-close {
display: none;}

#mobile-menu-open, #mobile-menu-close {
width: 24px;
height: 18px;
background: url(../bilder/mobile-menu-button.png) bottom no-repeat;
margin-top: 91px;
padding-left: 9px;
opacity: 0.75;
filter: alpha(opacity=50);
transition: all 0.3s ease-in-out;}

#mobile-menu-open:hover, #mobile-menu-close:hover {
opacity: 1.0;
filter: alpha(opacity=100);}

#nav-menu:target {
display: block;
padding-top: 11px;
background: #333;}

#nav-menu:target #mobile-menu-open {
display: none;}

#nav-menu:target #mobile-menu-close {
display: block;}

Answer 1

好的，这是一个例子

Fiddle

您需要将+添加到此#nav-menu:target + #mobile-menu-open

Answer 2

我明白了：D

我只是将id =“nav-menu”添加到并更改了css show并将导航隐藏到＃nav-menu ul ...

问题是在将＃nav-menu定位到div外面的按钮后...希望我的解释是可以理解的......

Greetz，Björn

移动导航：目标

2 个答案: