CSS Hide Parent Toggle Проверено - PullRequest
Новая
       2

CSS Hide Parent Toggle Проверено

0 голосов
/ 18 ноября 2018

Я работаю над сайтом и, наконец, создал адаптивное меню, которое занимает весь экран, когда вы нажимаете на ярлык. Проблема в том, что я не могу скрыть это (я хочу использовать чистый CSS). Я создал новую метку в меню, которая пытается закрыть меню, но она не работает, и я предполагаю, что это потому, что ребенок пытается выбрать родитель. Я новичок в CSS и буду очень признателен за помощь в создании кнопки закрытия, закрывающей меню (ширина: 0%). Спасибо! 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <link href="css/main.css" rel="stylesheet" type="text/css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>La Regina</title>
</head>

<body>
    <div id="pagewrap">

        <!--HEADER-->
        <header class="pagesection" id="pageheader">
            <div class="pagewidth">
                <figure id="logo">
                    <img src="img/logo-full.png" alt="Logotype La Regina">
                </figure>
                <label for="toggle">&#9776;</label>
                <input type="checkbox" id="toggle">
                <div id="myNav" class="overlay">
                <nav>
                    <label for="toggle2">&#9776;</label>
                <input type="checkbox" id="toggle2">
                    <a href="#">Home</a>
                    <a href="#">Menu</a>
                    <a href="#">About us</a>
                    <a href="#">Contact</a>
                </nav>
                </div>
            </div>
        </header>
        <!--END OF HEADER-->

    </div>
</body>

</html>

HTML, тело, число { отступы: 0; поле: 0; стиль списка: нет; } 

#pageheader {
    background: #333;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}
.pagesection {
    padding-left: 11px;
    padding-right: 11px;
}

#logo img{
    width: 200px;;
}

.overlay {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    right: 0;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.9);
    overflow-x: hidden;
    transition: 0.5s;
}

#myNav > nav {
    position: relative;
    top: 25%;
    width: 100%;
    text-align: center;
    margin-top: 30px;
}

#toggle{
    z-index: 3;
}

#toggle2:checked < #myNav{
    width: 0%;
}

#toggle:checked + #myNav{
    width: 100%;
}

Ответы [ 2 ]

0 голосов
/ 18 ноября 2018

К сожалению, в CSS вы не можете подняться на родительский уровень.

Но вы можете сделать это в Pure CSS. 

#pageheader {
    background: #333;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}
.pagesection {
    padding-left: 11px;
    padding-right: 11px;
}

#logo img{
    width: 200px;;
}

.overlay {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    right: 0;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.9);
    overflow-x: hidden;
    transition: 0.5s;
}

#myNav > nav {
    position: relative;
    top: 25%;
    width: 100%;
    text-align: center;
    margin-top: 30px;
}

#toggle{
    z-index: 3;
}

#toggle:checked + #myNav{
    width: 100%;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <link href="css/main.css" rel="stylesheet" type="text/css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>La Regina</title>
</head>

<body>
    <div id="pagewrap">

        <!--HEADER-->
        <header class="pagesection" id="pageheader">
            <div class="pagewidth">
                <figure id="logo">
                    <img src="img/logo-full.png" alt="Logotype La Regina">
                </figure>
                <label for="toggle">&#9776;</label>
                <input type="checkbox" id="toggle">
                <div id="myNav" class="overlay">
                <nav>
                    <label for="toggle">&#9776;</label>
                    <a href="#">Home</a>
                    <a href="#">Menu</a>
                    <a href="#">About us</a>
                    <a href="#">Contact</a>
                </nav>
                </div>
            </div>
        </header>
        <!--END OF HEADER-->

    </div>
</body>

</html>

Как видите, я удалил одно из полей ввода (одно внутри nav), а затем изменил идентификатор атрибута for внутри nav, чтобы он указывал на флажок вне nav, используя селектор

#toggle:checked + #myNav

0 голосов
/ 18 ноября 2018

На что вы хотите повлиять - это класс оверлеев, но я не верю, что вы можете сделать это с помощью CSS.Вы можете сделать это с помощью JQuery.Однако вы можете изменить текущий код так, чтобы исходный переключатель все еще был виден в оверлее, и поэтому, когда вы снимите этот переключатель, оверлей будет удален.

Итак, в html удалите эти две строки: 

<label for="toggle2">&#9776;</label>
            <input type="checkbox" id="toggle2">

В вашем CSS измените 'top' на относительный: 

.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: relative;
right: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}

В противном случае, я бы порекомендовал вам взглянуть на JQuery и функцию hide Я также рекомендовал бы проверить Bootstrap в какой-то момент, когда вы освоитесь с CSS, так как это отличная основа для дизайна, ориентированного на мобильные устройства.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...