Question

我只想在屏幕尺寸为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"> ☰</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>

Answer 1

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

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

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

查看导航的HREF #main-nav点。没有#close-menu个ID。让我们加一个。

<div id="close-menu"></div>

我们会把它放在导航之前。我们还会为#close-menu

添加css

#close-menu:target + #main-nav {
    width: 0;
}
#close-menu:target ~ .page-wrap {
    width: 100%;
    left: 0;
}

解决方案：http://jsfiddle.net/3X8Tq/1/

看着你的CSS，我相信你对它的运作方式有误解。 css中的子类仅适用于less css库。页面上不存在#close-menu和#open-menu。我建议阅读：目标和css选择器。

menu css html5 - ＆gt;可见和隐藏，屏幕大小

1 个答案: