0

我只想在屏幕大小为 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"> ☰&lt;/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>
4

1 回答 1

1

首先你需要媒体查询（http://jsfiddle.net/3X8Tq/）

@media all and (min-width: 320px) {
    #main-nav {
    width: 20%;
}
    .page-wrap {
        width: 80%;
    }
}

这适用于小窗口，但对于大屏幕，关闭按钮不起作用。这是因为关闭按钮从未起作用。它之所以有效，是因为 CSS 仅应用了 open :target。因此，让关闭按钮起作用。我们在页面上没有打开菜单或关闭菜单 ID，但您确实有它们的 CSS。

#main-nav请参阅指向导航的 HREF 。没有#close-menu身份证。让我们添加一个。

<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 中的子类仅适用于较少的 css库。和页面#close-menu上#open-menu不存在。我建议一般阅读 :target 和 css 选择器。

于 2013-04-11T15:43:18.853 回答