- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库?
- java - OnItemClickListener 不起作用,但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
我正在尝试仅使用 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>
关于CSS :target selector one link targeting two div's?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31766106/
我想知道这两者之间有什么不同 .myClass/DomElement .myotherclassinsidethatelement 和 .myClass/DomElement > .myothercl
使用 jQuery on() 版本 1.7。我通常这样绑定(bind)我的事件: $(".foo").on("click", function() { console.log("foo cli
我想找到与选择器匹配的所有元素,但如果它已经包含在匹配元素中则不查找。 $('#container').find('.child').not('.child .child'); 请注意,.child
我有一个看起来像这样的无序列表,但更广泛: Parent Category 2 Parent Category 2 Parent Category 3
这个问题在这里已经有了答案: CSS negation pseudo-class :not() for parent/ancestor elements (2 个答案) 关闭 4 年前。
我希望使用 CSS :not() 来定位 before 选择器。这可能吗? 示例: https://jsfiddle.net/uuq62b8d/ a.button:before { content
这有什么区别: $.each($('#myTable input[name="deleteItem[]"]:checked').do_something()); 还有这个: $('#myTable i
已关闭。这个问题是 not reproducible or was caused by typos 。目前不接受答案。 这个问题是由拼写错误或无法再重现的问题引起的。虽然类似的问题可能是 on-top
我正在使用 UL LI 列表和 jQuery 创建一棵树。我使用了 jQuery 选择器 jQuery(li:has(ul)) 查找所有具有子节点的列表节点,然后向其添加单击事件。 jQuery(li
我真的不知道如何命名这两种方法,所以请原谅我这样调用它们。 字符串选择器 $("#myList li").eq(3); 函数选择器 $("#myList li:eq(3)"); 据我所知,他们都做同样
我有以下代码: .. 我正在使用以下 CSS 来排除具有“main-l tbl”类的表: table:not(.main-l .views-table) { .. } 我注
这个问题已经有答案了: 已关闭12 年前。 Possible Duplicate: What is the difference between $ and jQuery 我注意到使用“jQuery(
我有许多 css 选择器和许多选择器异常,所以我使用 :not 将它们排除在外... 示例(只是一些我不需要的选择器): [class*="-dashboard-"]:not([class$="-bi
CADisplayLink 有这个方法是有道理的,但我很好奇为什么 UIScreen 也会有它。 最佳答案 文档说屏幕提供的显示链接与该屏幕相关联。但是,查看官方文档,与任何屏幕都没有明显的关系;显示
我在这里阅读了关于 toArray() 的文档,并在控制台中对其进行了测试。我找不到在选择器上调用 toArray() 和调用选择器本身之间的区别。 两种方式都得到了完全相同的结果,这是一个与选择器匹
我有一个问题,为什么这两个代码片段不同。 $('#ctl00_DDMenu1_HyperLink1') //jQuery(a#ctl00_DDMenu1_HyperLink1 Default.asp
我想通过以下方式模拟我可以在 jQuery 中实现的目标$('.someClass:not(.hidden)') 我试过下面的代码。 $crawler->filter('someClass:not(.
这个问题不太可能对任何 future 的访客有帮助;它只与一个较小的地理区域、一个特定的时间点或一个非常狭窄的情况相关,通常不适用于全世界的互联网受众。如需帮助使此问题更广泛适用,visit the
我想通过以下方式模拟我可以在 jQuery 中实现的目标$('.someClass:not(.hidden)') 我试过下面的代码。 $crawler->filter('someClass:not(.
我想根据 Iterator::next 中当前枚举变体的某些属性更改枚举变体。我有两次尝试,都没有编译: enum Test { A(Vec), B, } impl Iterator
我是一名优秀的程序员,十分优秀!