1
我想用html和css做一个响应菜单，没有Javascript。 我还在练习..也许任何人都可以看到为什么我的菜单没有出现点击标签时？在小屏幕上的响应菜单html css
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="Frank.css">
<meta name="author" content="Frank Van Hoek">
<title>Frank</title>
</head>
<body>
<header>
<div class="logo" class="cfx">
<a href="away.html"><img class="imglogo" class="cfx" src="afbeeldingen/logo.png" alt="Logo"></a>
</div>
<div class="facebook" class="cfx"></div>
<a href="https://www.facebook.com/groups/5254824441/?fref=ts"><img class="facebook" class="cfx" src="afbeeldingen/facebook.png" alt="facebook"> </a>
</header>
<div class="wrapper" class="cfx">
<nav class="normaal" class="cfx">
<ul class="menu" class="cfx">
<li class="actief"><a href="Frank.html">Home</a></li>
<li><a href="leden.html">Leden</a></li>
<li><a href="parken.html">Parken</a></li>
<li><a href="evenementen.html">Evenementen</a></li>
<li><a href="overons.html">Over ons</a></li>
</ul>
</nav>
/************HAMBURGER***************/
<nav class="hamburger">
<input type="checkbox" id="menu-toggle">
<label for="menu-toggle"></label>
<ul>
<li class="actief"><a href="Frank.html">Home</a></li>
<li><a href="leden.html">Leden</a></li>
<li><a href="parken.html">Parken</a></li>
<li><a href="evenementen.html">Evenementen</a></li>
<li><a href="overons.html">Over ons</a></li>
</ul>
</nav>
<div class="content" class="cfx">
<h2>BMX : Streetculture in Antwerp</h1>
<video controls><source src="afbeeldingen/StreetcultureInAntwerp.mp4" type="video/mp4"></video>
<p>Onze A.Way leden in dit filmpje zijn Tarik Begdouri, Zeno Peeters, Koen Vanden Broeck en Dimitri Huybrechts. De andere rijders zijn Niels Mertens, Stef de Backer, Brian O' Brien, Jonas van Oosterbosch en Juno Vereecken. Het werd gefilmd en gemonteerd door onze rijder Ilyas Deckers en de achtergrondmuziek is "Al'Tarba Vs Lord Lhus - 3 Amigos feat Dirty Dike & Jace Abstract".</p>
<h1>Nieuwsfeeds</h1>
<div class="nieuwsfeed">
<p class="bericht">
Dit weekend is het de 'Braaab BMX Contest 2015' in '040 BMX park' in Eindhoven. Dit wil je niet missen! Meer informatie vind je op de <a href="https://www.facebook.com/events/1012608095435859/">facebookpagina</a>.
</p>
<p class="datum">
4 maart 2015
</p>
</div>
<div class="nieuwsfeed">
<p class="bericht">
Iemand die deze rail durft te grinden? - Locatie: Aan de schelde, niet ver van ATV
</p>
<p class="datum">
2 maart 2015
</p>
</div>
<div class="nieuwsfeed">
<p class="bericht">
Reminder!!! Deze zondag 2de meeting ivm Bmx jam stadspark - Locatie: Fietsenfikser - Tijdstip: 13u
</p>
<p class="datum">
26 februari 2015
</p>
</div>
<div class="nieuwsfeed">
<p class="bericht">
Deze vrijdag Pizza Friday om 5u in het Stadspark! Be there!
</p>
<p class="datum">
25 februari 2015
</p>
</div>
</div>
<footer>
<p>© All rights reserved - 2015</p>
</footer>
</div>
</body>
</html>
CSS
html
{
font-family: Arial, sans-serif;
height:100%;
margin: 0;
padding: 0;
}
img , video;
{
max-width: 100%;
height: auto;
}
body
{
height:inherit;
margin: inherit;
padding: inherit;
background-color: #000;
}
.wrapper
{
max-width: 900px;
min-width: 400px;
min-height:100%;
margin: 0 auto;
background-color: #000;
}
header
{
background-image:url(afbeeldingen/skyline.png);
margin: auto;
height: 336px;
width: inherit;
}
.logo
{
padding: 0 1.25em;
float: left;
}
.imglogo
{
width: 170px;
height: 170px;
}
.facebook
{
width: 40px;
height: 40px;
text-align:right;
float:right;
padding-top: 30px;
}
nav
{
width: 100%;
padding: 0px auto 0px auto;
}
ul.menu
{
list-style-type: none;
margin: 5px 10% 5px 10%;
padding: 5px auto 5px auto;
left: 0;
text-align: center;
}
.menu li
{
float:left;
margin: 5px auto 5px auto;
padding: 0px 1.875em 0px 1.875em;
background-color: #000;
text-align: center;
}
.menu li:first-child
{
padding: 0px 1.875em 0px 1.875em;
}
.menu li > a
{
display: block;
padding: 10px 0px 10px 0px;
margin: 0px 0px 0px 0px;
text-decoration: none;
color: #fff;
}
.menu li:hover, li.actief
{
background-color: #f08222;
}
.menu li:hover > a, li.actief >a
{
color: #000;
}
.hamburger
{
display: none;
}
.content
{
color: #fff;
display:block;
margin: 50px 7.7777777777777777777777777777778% 70px 7.7777777777777777777777777777778%;
}
.content video
{
width: 760px;
height: auto;
}
.content h1
{
text-decoration: underline;
margin: 50px auto;
}
.nieuwsfeed
{
margin: 30px auto;
padding: 0.625em;
border: 1px solid #fff;
border-radius: 5px;
}
.datum
{
text-align: right;
font-size: 0.8em;
}
.content a:link
{
color: #f08222;
}
.content a:visited
{
color: #e2ff00;
}
footer p
{
color: #fff;
font-size: 0.9em;
text-align: center;
margin: 200px auto 40px auto;
}
/**************************
* MEDIA QUERY *
*************************/
@media screen and (max-width: 820px)
{
html, body {
height: 100%;
}
body {
margin: 0;
overflow-x: hidden;
font-family: Arial, sans-serif;
}
.normaal
{
display:none;
}
.hamburger
{
display: inline-block;
}
#menu-toggle {
display: none;
}
#menu-toggle:checked ~ .hamburger ul{
left:0;
}
#menu-toggle:checked ~ .content {
left:240px;
}
#menu-toggle:checked + label {
left:250px;
}
label[for="menu-toggle"] {
position: fixed;
left:60px;
top:300px;
width: 30px;
height: 30px;
background-color: #0f0;
z-index: 2;
}
.hamburger ul{
position: fixed;
width: 240px;
height: 100%;
top:300px;
left: -240px;
background-color: #e34dd2;
color: white;
}
.hamburger ul {
margin: 0;
padding: 0;
list-style: none;
}
.hamburger li a {
display: block;
padding:0.5em 1em;
color: white;
border-bottom: 1px #424240 solid;
}
.container {
position: relative;
left:0;
padding: 2em;
}
nav, .container, label[for="menu-toggle"] {
-webkit-transition: left 0.5s;
transition: left 0.5s;
}
}
/*************************
* C L E A R F I X *
*************************/
.cfx::before, .cfx::after {
display: table;
line-height: 0;
content: "";
}
.cfx::after {
clear: both;
}
1）行抨击不是一个很好的方式来通过'你的文章主要是代码'的东西。 2）使用JS小提琴3）为什么不使用bootstrap呢？ Bootstrap对于初学者来说是一个很好的方式，可以制作出好的网站，并看看它是如何完成的。 – Robin 2015-03-13 10:34:19
请检查这个例子http://codepen.io/TimPietrusky/pen/CLIsl – Kumar 2015-03-13 10:36:50
这是学校，我必须这样做 – JDC 2015-03-13 10:37:26