我只想在屏幕尺寸为 320px 时隐藏菜单...现在菜单始终隐藏，我需要调用它们。
当屏幕尺寸为 320px 时，则可以，当我需要调用#main-nav 时，但默认尺寸必须可见
* {
box-sizing: border-box;
}
html, body {
min-height: 100%;
font-size: 11pt;
font-family: 'PT Sans', Arial, sans-serif;
}
.main-header {
background: linear-gradient(#3F94BF, #246485);
padding: 5px;
text-align: center;
color: white;
text-shadow: #222 0px -1px 1px;
position: relative;
width: 100%;
transition: all 0.3s ease;
}
.page-wrap {
float: right;
width: 100%;
transition: width 0.3s ease;
}
nav a {
color: #fff;
display: block;
text-align: center;
text-decoration: none;
line-height: 40px;
text-shadow: 1px 1px 0px #283744;
}
nav a:hover, nav a:active {
background-color: #8c99a4;
}
.main-nav {
position: fixed;
width: 0;
height: 100%;
font-weight: bold;
background: linear-gradient(#3F94BF, #246485);
overflow: hidden;
transition: width 0.3s ease;
}
.content {
overflow: hidden;
padding: 20px 20px 20px 20px;
}
#close-menu {
display: none;
}
#open-menu {
display: block;
}
#main-nav:target {
width: 20%;
}
#main-nav:target + .page-wrap {
width: 80%;
.open-menu {
display: block;
}
.close-menu {
display: none;
}
.main-header {
width: 80%;
left: 20%;
}
}
/*Styles for screen 515px and lower*/
@media only screen and (max-width: 480px) {
}
html
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Language" content="de" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/main.css" media="screen" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<nav class="main-nav" id="main-nav">
<a href="#details">Details</a>
<a href="#adresses">Adresses</a>
<a href="#kontakt">Kontakt</a>
</nav>
<div class="page-wrap">
<header class="main-header">
<a href="#main-nav" class="open-menu"> ☰</a>
<a href="#close-menu" class="close-menu">close</a>
<h1>VIGOUI</h1>
</header>
<div class="content">
It’s all about playing four quarters. I think we played well but the other team played well too. They took advantage of certain circumstances that arose. It’s a physical game.
</div>
</div>
</body>
</html>
最佳答案
首先你需要媒体查询(http://jsfiddle.net/3X8Tq/)
@media all and (min-width: 320px) {
#main-nav {
width: 20%;
}
.page-wrap {
width: 80%;
}
}
这对于小窗口非常有用，但对于大屏幕，关闭按钮不起作用。这是因为关闭按钮从未起作用。它之所以有效，是因为 CSS 仅应用了开放的 :target。因此，让关闭按钮起作用。我们在页面上没有打开菜单或关闭菜单 ID，但您确实有它们的 CSS。
查看 HREF #main-nav 指向导航。没有 #close-menu id。让我们添加一个。
<div id="close-menu"></div>
我们会把它放在导航之前。我们还将为 #close-menu
#close-menu:target + #main-nav {
width: 0;
}
#close-menu:target ~ .page-wrap {
width: 100%;
left: 0;
}
解决方案:http://jsfiddle.net/3X8Tq/1/
看看您的 css，我相信您对它的工作原理有误解。您的 css 中的子类仅适用于 less css图书馆。页面上不存在 #close-menu 和 #open-menu。我建议阅读一般的 :target 和 css 选择器。
关于html - 菜单 css html5 -> 可见和隐藏，屏幕大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15952888/