堆棧內存溢出
  簡體   English   中英

小屏幕上的響應式菜單HTML CSS

[英]Responsive menu html css on small screens

 原文  2015-03-13 10:22:09  7   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