纯 HTML 和 CSS 汉堡菜单不起作用
[英]Pure HTML and CSS hamburger menu does not work
问题描述
I'm making a hamburger menu right now with html and css (no js), and the:checked +.something does not work.
我现在正在使用 html 和 css（无 js）制作汉堡菜单，并且：checked +.something 不起作用。 I'm searching for solutions for about 3 hours but i can't find any.我正在寻找大约 3 个小时的解决方案，但我找不到任何解决方案。 If you would help me that would be nice.如果你能帮助我，那就太好了。 Maybe I messed up somewhere because i watched it from a video, but i did the exact same thing like him but i doesn't work:( Here is the code:也许我在某个地方搞砸了，因为我是从视频中观看的，但我做了和他完全相同的事情，但我不工作:(这是代码：
* { margin: 0; padding: 0; } body { background-color: teal; }.navigations { right: 0; z-index: 10; display: block; position: fixed; top: 15px; padding-bottom: 20px; padding-left: 25px; padding-right: 150px; border-radius: 50px 10px 10px 50px; background: rgba(0, 0, 0, 0.5); }.navigations div { display: inline-block; font-size: 25px; }.navigations a { text-decoration: none; color: white; }.burger { z-index: 100; position: fixed; right: 25px; display: block; top: 25px; cursor: pointer; }.burger div { width: 45px; height: 5px; background-color: white; margin: 12px; border-radius: 10px; } #toggle { display: none; position: fixed; } #toggle:checked+.navigations { display: none; }
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale = 1.0"> <link rel="stylesheet" type="text/css" href="something.css"> </head> <body> <div class="navigations"> <div class="nav"> <a href="">About us</a> </div> <div class="nav"> <a href="">Tours</a> </div> <div class="nav"> <a href="">Contacts</a> </div> </div> <label for="toggle"> <div class="burger"> <div class="burgerelem"></div> <div class="burgerelem"></div> <div class="burgerelem"></div> </div> </label> </body> </html>
1 个解决方案
解决方案1
2 已采纳 2019-11-19 18:06:46
It seems like you're actually missing the checkbox element.似乎您实际上缺少复选框元素。 Since you're using the adjacent sibling selector , ( + in #toggle:checked +.navigations ) you should put the checkbox with the .navigations div immediately before the #toggle input.由于您使用的是相邻的同级选择器，（#toggle:checked + #toggle:checked +.navigations中的 + ）您应该将带有.navigations div 的复选框放在#toggle输入之前。
* { margin: 0; padding: 0; } body { background-color: teal; }.navigations { right: 0; z-index: 10; display: block; position: fixed; top: 15px; padding-bottom: 20px; padding-left: 25px; padding-right: 150px; border-radius: 50px 10px 10px 50px; background: rgba(0, 0, 0, 0.5); }.navigations div { display: inline-block; font-size: 25px; }.navigations a { text-decoration: none; color: white; }.burger { z-index: 100; position: fixed; right: 25px; display: block; top: 25px; cursor: pointer; }.burger div { width: 45px; height: 5px; background-color: white; margin: 12px; border-radius: 10px; } #toggle { display: none; position: fixed; } /* Since the.navigations is the next sibling element after #toggle, the + selector works here */ #toggle:checked+.navigations { display: none; }
<input type="checkbox" id="toggle" /> <!-- Add this! --> <div class="navigations"> <div class="nav"> <a href="">About us</a> </div> <div class="nav"> <a href="">Tours</a> </div> <div class="nav"> <a href="">Contacts</a> </div> </div> <label for="toggle"> <div class="burger"> <div class="burgerelem"></div> <div class="burgerelem"></div> <div class="burgerelem"></div> </div> </label>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.