gpt4 book ai didi

CSS :target selector one link targeting two div's?

转载 作者:可可西里 更新时间:2023-11-01 14:45:00 28 4
gpt4 key购买 nike

我正在尝试仅使用 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

小更新,本教程使用 :target 选择器,这里是 w3school 描述:带有 # 后跟 anchor 名称的 URL,链接到文档中的某个元素。链接到的元素是目标元素。 :target 选择器可用于设置当前事件目标元素的样式。 w3schools.com/cssref/sel_target.asp

最佳答案

您真的可以简化代码。对于这种情况,您不需要 div。你只需要一个链接来切换菜单——为什么要把一个链接放在一个 div 中?见下文

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;}
<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>

Here is a fiddle

关于CSS :target selector one link targeting two div's?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31766106/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com