Question

我正在尝试使用CSS制作一个简单的移动菜单切换。通过显示和隐藏两个按钮，这两个按钮具有指向显示或隐藏导航菜单的类的不同链接。

这是本教程的编辑link，但现在我想让关闭和打开的按钮处于一个单独的div（标题div）中，并且我在导航显示或隐藏时遇到问题。

不知怎的，我无法正确定位菜单。

所以工作部分是我有一个包含两个链接的div，它们像切换按钮link

一样显示和隐藏彼此

现在我希望他们能够显示和隐藏菜单。我从教程中改变的是，切换按钮不再位于同一个div中，现在我无法将它们定位到导航目标。所以这是我的HTML / CSS标记问题。

这是我到目前为止所做的事情，我想这很简单，但任何帮助都会受到赞赏。

提前致谢！

<style>
#header {
    width: 100%;
    height:100px;
}
/* Hide Menu*/
#mainmenu{
    display: none;
}
#buttons-container a.close-menu-primary{
    display: none;
}

/* Display Menu Items */
#header:target #mainmenu{
    display: block;
}
#buttons-container a.close-menu-primary{
    display: none;

}
/* Hide Open Toggle Link */
#header:target #buttons-container a.open-menu-primary{
    display: none;
}
/* Show Close Toggle Link */
#header:target #buttons-container a.close-menu-primary{
    display: block;
}
</style>

HTML代码

<div class="header-div" id="header">
<div id="buttons-container" >
            <a href="#header" class="open-menu-primary"><span>menu</a>
            <a href="#" class="close-menu-primary"><span>close</span></a>
</div>
</div>
  <nav class="navigation" id="navigation">
  <ul class="mainmenu" id="mainmenu">
    <li><a href="">main1</a></li>
    <li><a href="">main2</a>
      <ul id="submenu">
                <li><a href="#">sub1</a></li>
                <li><a href="#">sub2/a></li>
      </ul>
    </li>
    <li><a href="">main3</a></li>
  </ul>
</nav>

这是Fiddle

Smal更新，本教程正在使用：target选择器这里是w3school描述：带有＃后跟锚名称的URL，链接到文档中的某个元素。链接到的元素是目标元素。：target选择器可用于设置当前活动目标元素的样式。 w3schools.com/cssref/sel_target.asp

Answer 1

您真的可以简化代码。在这种情况下，你不需要div。并且您只需要一个链接来切换菜单 - 为什么在div中放入一个链接？见下文

＆＃13;

label {  
  cursor: pointer;
}
   #menu {
 display: none; /* hide the checkbox */
   }
   .mainmenu {
 display: none;
   }
   #menu:checked + .mainmenu {
 display: block;
  }

   nav{display:none;}

   label{color:blue;text-decoration:underline;}

＆＃13;

<label for="menu">Menu</label>
<input type="checkbox" id="menu">
<ul class="mainmenu" id="mainmenu">
  <li><a href="">main1</a>
  </li>
  <li id="hover-sub"><a href="javascript:void(0)">main2</a>
    <ul id="submenu">
      <li class="menu-item"><a href="#">sub1</a>
      </li>
      <li class="menu-item"><a href="#">sub2</a>
      </li>
    </ul>
  </li>
  <li><a href="" class="con">main3</a>
  </li>
</ul>

＆＃13;

Here is a fiddle

Answer 2

您是否有兴趣制作dropdown menu

（这个只创建一个常规的css下拉菜单，并在CSS中使用常规转换：）

* {transition:all 0.3s;-webkit-transition:all 0.3s;font-family: 'Roboto', sans-serif;}
.header-nav {position:relative;float:left;margin:0 auto;}
.header-nav ul {position:absolute;float:left;list-style:none;margin:0;padding:0;}
.header-nav ul li {position:relative;float:left;border-left:4px solid rgba(224, 52, 106, 1);}
.header-nav ul li ul {margin-left:-4px;}
.header-nav > ul {position:relative;}
.header-nav > ul > li:last-child {border-right:4px solid rgba(224, 52, 106, 1);}

菜单是

还是toggle button？

（这个使用转换和HTML复选框来创建切换按钮：）

.spinner-master input[type=checkbox]:checked ~ .spinner-spin > .horizontal {opacity: 0;}
.spinner-master input[type=checkbox]:checked ~ .spinner-spin > .diagonal.part-1 {transform:rotate(405deg);-webkit-transform:rotate(405deg);margin-top:10px;}
.spinner-master input[type=checkbox]:checked ~ .spinner-spin > .diagonal.part-2 {transform:rotate(-405deg);-webkit-transform:rotate(-405deg);margin-top:-16px;}

Answer 3

总之，答案比你想到的更简单。所以我的目标是包含我想要定位的目标的元素。请参阅代码和小提琴。

CSS代码：

.wrap {
    width:100%;
    height:100%;
}
}
.header {
    width: 100%;
    height:100px;
}
#buttons-container {
    background-color: #006cad;
    text-align:right;
    padding:16px;
}
/* Hide Menu*/
#mainmenu{
    display: none;
}
#buttons-container a.close-menu-primary{
    display: none;
}
/* Display Menu Items */
#wrap:target .navigation #mainmenu{
    display: block;
}
#buttons-container a.close-menu-primary{
    display: none;

}
/* Hide Open Toggle Link */
#wrap:target #buttons-container a.open-menu-primary{
    display: none;
}
/* Show Close Toggle Link */
#wrap:target #buttons-container a.close-menu-primary{
    display: block;
}

HTML code：

<div id="wrap">
<div class="header" id="header">
<div id="buttons-container" >
                <a href="#wrap" class="open-menu-primary"><span>menu</a>
                <a href="#" class="close-menu-primary"><span>close</span></a>
</div>
</div>
      <nav class="navigation" id="navigation">
      <ul class="mainmenu" id="mainmenu">
        <li><a href="">main1</a></li>
        <li id="hover-sub"><a href="javascript:void(0)">main2</a>
          <ul id="submenu">
                <li class="menu-item"><a href="#">sub1</a></li>
                <li class="menu-item"><a href="#">sub2</a></li>
          </ul>
        </li>
        <li><a href="" class="con">main3</a></li>
      </ul>
    </nav>
</div>

这是一个小提琴link

css：目标选择器一个链接目标是两个div？

3 个答案: