堆栈内存溢出
  繁体   English   中英

小屏幕上的响应式菜单HTML CSS

[英]Responsive menu html css on small screens

 原文  2015-03-13 10:22:09  3   2    html/ css/ css3

问题描述

我想只用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;
}

2 个解决方案

解决方案1
 0  2015-03-13 10:40:43

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

这是利用引导程序的响应式导航菜单的一个简单示例。

响应式导航栏预览
响应式导航栏下载

解决方案2
 0  2016-06-19 21:39:26

你有这个： 

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

...将其移入时，顺序错误-前一条规则很可能会覆盖另一条规则，从而使该元素不可见...

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 响应式菜单不适用于小屏幕 CSS / Javascript-适用于较小屏幕的移动响应菜单 小屏幕上的响应式 Flexbox html不会为小屏幕加载CSS 关于如何使此文本 CSS animation 在小屏幕上响应的任何想法？ 用于响应式的 HTML + CSS 菜单按钮 我正在尝试为小屏幕提供一个响应式导航栏，如何更改指向CSS下拉菜单的左侧链接？ HTML，CSS，JS响应式下拉菜单 HTML CSS（响应下拉菜单） 使用HTML，CSS和jQuery创建响应式菜单
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM