Question

我想制作一个只有html和css的响应式菜单，没有Javascript。我还在练习..也许任何人都可以看到为什么我的菜单在点击标签时没有出现？

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

Answer 1

使用响应式框架会更有意义，例如Bootstrap或Foundation。

这是一个使用bootstrap的响应式导航菜单的简单示例。

Responsive navigation bar Preview
Responsive navigation bar Download

Answer 2

你有这个：

.hamburger ul{
        position: fixed;
        width: 240px;
        height: 100%;
        top:300px;
        left: -240px;
        background-color: #e34dd2;
        color: white;
    }

position: fixed;表示其位置值与窗口/视口相关。因此，left: -240px;会将此元素的移出（即使其不可见）。你真的想要这个吗？即使这是故意的，也应该与这条规则一起工作

 #menu-toggle:checked ~ .hamburger ul{
        left:0;
    }

...将它移入，它们的顺序错误 - 前一条规则很可能会覆盖另一条规则，使元素不可见......

在小屏幕上的响应菜单html css

2 个答案: