How to make the panel was initially pulled out, and only after pressing it closed, and it could be pulled out again?

jsfiddle

@charset "UTF-8"; .nav { width: 500px; min-width: 500px; /* фиксируСм ΠΈ выставляСм высоту ΠΏΠ°Π½Π΅Π»ΠΈ Π½Π° максимум */ height: 100%; position: fixed; top: 0; bottom: 0; margin: 0; /* сдвигаСм (прячСм) панСль ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΡ€Π°Π²ΠΎΠ³ΠΎ края страницы */ right: -500px; /* Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ отступы */ padding: 15px 20px; /* ΠΏΠ»Π°Π²Π½Ρ‹ΠΉ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ смСщСния ΠΏΠ°Π½Π΅Π»ΠΈ */ -webkit-transition: right 0.3s; -moz-transition: right 0.3s; transition: right 0.3s; /* опрСдСляСм Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° ΠΏΠ°Π½Π΅Π»ΠΈ */ background: #16a085; /* ΠΏΠΎΠ²Π΅Ρ€Ρ… Π΄Ρ€ΡƒΠ³ΠΈΡ… элСмСнтов */ z-index: 2000; } .nav-toggle { /* Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΡƒΠ΅ΠΌ */ position: absolute; /* ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΡ€Π°Π²ΠΎΠ³ΠΎ края ΠΏΠ°Π½Π΅Π»ΠΈ */ right: 500px; /* отступ ΠΎΡ‚ Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ края ΠΏΠ°Π½Π΅Π»ΠΈ */ top: 3em; /* Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ отступы */ padding: 0.5em; background: inherit; /* Ρ†Π²Π΅Ρ‚ тСкста */ color: #dadada; /* Π²ΠΈΠ΄ курсора */ cursor: pointer; /* Ρ€Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π° */ font-size: 1.2em; line-height: 1; /* всСгда ΠΏΠΎΠ²Π΅Ρ€Ρ… Π΄Ρ€ΡƒΠ³ΠΈΡ… элСмСнтов страницы */ z-index: 2001; /* Π°Π½ΠΈΠΌΠΈΡ€ΡƒΠ΅ΠΌ Ρ†Π²Π΅Ρ‚ тСкста ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ */ -webkit-transition: color .25s ease-in-out; -moz-transition: color .25s ease-in-out; transition: color .25s ease-in-out; box-shadow: 0 0 21px 5px black; } .nav-toggle:after { content: '\2630'; text-decoration: none; } /* Ρ†Π²Π΅Ρ‚ тСкста ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ */ .nav-toggle:hover { color: #f4f4f4; } [id='nav-toggle'] { position: absolute; display: none; } [id='nav-toggle']:checked~.nav>.nav-toggle { left: auto; right: 2px; top: 1em; } [id='nav-toggle']:checked~.nav { right: 0; box-shadow: -4px 0px 20px 0px rgba(0, 0, 0, 0.5); -moz-box-shadow: -4px 0px 20px 0px rgba(0, 0, 0, 0.5); -webkit-box-shadow: -4px 0px 20px 0px rgba(0, 0, 0, 0.5); overflow-y: auto; } [id='nav-toggle']:checked~main>article { -webkit-transform: translateX(-500px); -moz-transform: translateX(-500px); transform: translateX(-500px); } [id='nav-toggle']:checked~.nav>.nav-toggle:after { content: '\2715'; } body { -webkit-animation: bugfix infinite 1s; } @-webkit-keyframes bugfix { to { padding: 0; } } @media screen and (min-width: 500px) { html, body { margin: 0; overflow-x: hidden; } } @media screen and (max-width: 500px) { html, body { margin: 0; overflow-x: hidden; } .nav { width: 100%; box-shadow: none } } /** * Π€ΠΎΡ€ΠΌΠΈΡ€ΡƒΠ΅ΠΌ ΡΡ‚ΠΈΠ»ΡŒ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° (Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏ) ΠΏΠ°Π½Π΅Π»ΠΈ */ .nav h2 { width: 90%; padding: 0; margin: 10px 0; text-align: center; text-shadow: rgba(255, 255, 255, .1) -1px -1px 1px, rgba(0, 0, 0, .5) 1px 1px 1px; font-size: 1.3em; line-height: 1.3em; opacity: 0; transform: scale(0.1, 0.1); -ms-transform: scale(0.1, 0.1); -moz-transform: scale(0.1, 0.1); -webkit-transform: scale(0.1, 0.1); transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -webkit-transform-origin: 0% 0%; transition: opacity 0.8s, transform 0.8s; -ms-transition: opacity 0.8s, -ms-transform 0.8s; -moz-transition: opacity 0.8s, -moz-transform 0.8s; -webkit-transition: opacity 0.8s, -webkit-transform 0.8s; } .nav h2 a { color: #dadada; text-decoration: none; text-transform: uppercase; } /*ΠΏΠ»Π°Π²Π½ΠΎΠ΅ появлСниС Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° (Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠ°) ΠΏΡ€ΠΈ раскрытии ΠΏΠ°Π½Π΅Π»ΠΈ */ [id='nav-toggle']:checked~.nav h2 { opacity: 1; transform: scale(1, 1); -ms-transform: scale(1, 1); -moz-transform: scale(1, 1); -webkit-transform: scale(1, 1); } .nav>ul { display: block; margin: 0; padding: 0; list-style: none; } .nav>ul>li { line-height: 2.5; opacity: 0; -webkit-transform: translateX(50%); -moz-transform: translateX(50%); -ms-transform: translateX(50%); transform: translateX(50%); -webkit-transition: opacity .5s .1s, -webkit-transform .5s .1s; -moz-transition: opacity .5s .1s, -moz-transform .5s .1s; -ms-transition: opacity .5s .1s, -ms-transform .5s .1s; transition: opacity .5s .1s, transform .5s .1s; } [id='nav-toggle']:checked~.nav>ul>li { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } /* опрСдСляСм ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π»Ρ‹ появлСния ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² мСню */ .nav>ul>li:nth-child(2) { -webkit-transition: opacity .5s .2s, -webkit-transform .5s .2s; transition: opacity .5s .2s, transform .5s .2s; } .nav>ul>li:nth-child(3) { -webkit-transition: opacity .5s .3s, -webkit-transform .5s .3s; transition: opacity .5s .3s, transform .5s .3s; } .nav>ul>li:nth-child(4) { -webkit-transition: opacity .5s .4s, -webkit-transform .5s .4s; transition: opacity .5s .4s, transform .5s .4s; } .nav>ul>li:nth-child(5) { -webkit-transition: opacity .5s .5s, -webkit-transform .5s .5s; transition: opacity .5s .5s, transform .5s .5s; } .nav>ul>li:nth-child(6) { -webkit-transition: opacity .5s .6s, -webkit-transform .5s .6s; transition: opacity .5s .6s, transform .5s .6s; } .nav>ul>li:nth-child(7) { -webkit-transition: opacity .5s .7s, -webkit-transform .5s .7s; transition: opacity .5s .7s, transform .5s .7s; } /** * ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ ссылок ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² мСню */ .nav>ul>li>a { display: inline-block; position: relative; padding: 0; font-family: 'Open Sans', sans-serif; font-weight: 300; font-size: 1.2em; color: #dadada; width: 100%; text-decoration: none; /* ΠΏΠ»Π°Π²Π½Ρ‹ΠΉ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ */ -webkit-transition: color .5s ease, padding .5s ease; -moz-transition: color .5s ease, padding .5s ease; transition: color .5s ease, padding .5s ease; } /** * состояниС ссылок мСню ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ */ .nav>ul>li>a:hover, .nav>ul>li>a:focus { color: white; padding-left: 15px; } /** * линия подчСркивания ссылок мСню */ .nav>ul>li>a:before { content: ''; display: block; position: absolute; right: 0; bottom: 0; height: 1px; width: 100%; -webkit-transition: width 0s ease; transition: width 0s ease; } .nav>ul>li>a:after { content: ''; display: block; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: #3bc1a0; -webkit-transition: width .5s ease; transition: width .5s ease; } /** * Π°Π½ΠΈΠΌΠΈΡ€ΡƒΠ΅ΠΌ линию подчСркивания * ссылок ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ */ .nav>ul>li>b:hover:before { width: 0%; background: #3bc1a0; -webkit-transition: width .5s ease; transition: width .5s ease; } .nav>ul>li>a:hover:after { width: 0%; background: transparent; -webkit-transition: width 0s ease; transition: width 0s ease; } .mask-content { display: block; position: fixed; top: 0; left: 0; z-index: 1000; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); visibility: hidden; opacity: 0; } [id='nav-toggle']:checked~.mask-content { visibility: visible; opacity: 1; -webkit-transition: opacity .5s, visibility .5s; transition: opacity .5s, visibility .5s; } 
 <input type="checkbox" id="nav-toggle" hidden> <nav class="nav"> <label for="nav-toggle" class="nav-toggle" onclick></label> <h2 class="logo"></h2> <ul> <li> <h3>Новости</h3> <li><a href="https://habr.com/company/spbifmo/blog/426347">Π£ΡΠ·Π²ΠΈΠΌΠΎΡΡ‚ΡŒ Π² PlayStation 4 β€” Π½Π°Π±ΠΎΡ€ символов Π² сообщСнии для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ ΡƒΠ΄Π°Π»Π΅Π½Π½ΠΎ ΠΏΡ€Π΅Π²Ρ€Π°Ρ‰Π°Π΅Ρ‚ приставку Π² ΠΏΠΎΡ‡Ρ‚ΠΈ Β«ΠΊΠΈΡ€ΠΏΠΈΡ‡Β»</a> <li><a href="https://habr.com/post/426317">1155 vs 2011. Π’ Π±ΠΎΠΉ ΠΈΠ΄ΡƒΡ‚ ΠΎΠ΄Π½ΠΈ старики</a> <li><a href="https://habr.com/post/426333">Microsoft выпустил ΠΊΠΎΠ΄ MS-DOS 1.25 ΠΈ 2.0 ΠΏΠΎΠ΄ Π»ΠΈΡ†Π΅Π½Π·ΠΈΠ΅ΠΉ MIT</a> <li><a href="https://habr.com/post/426303">ΠšΡ€Π°Ρ‚ΠΊΠΈΠΉ экскурс ΠΏΠΎ основным ΠΌΠΎΠΌΠ΅Π½Ρ‚Π°ΠΌ Zend Framework</a> <li><a href="https://habr.com/company/1cloud/blog/426335/">Β«ΠœΠ°Ρ€ΡΠΈΠ°Π½ΡΠΊΠ°Ρ тСхнология»: ΠΏΠΎΡ‡Π΅ΠΌΡƒ Π΄Π°Ρ‚Π°-Ρ†Π΅Π½Ρ‚Ρ€Ρ‹ пСрСходят Π½Π° Ρ‚ΠΎΠΏΠ»ΠΈΠ²Π½Ρ‹Π΅ ячСйки</a> </ul> </nav>

    1 answer 1

    There is a simple solution: just add the checked attribute to the input.

    <input type="checkbox" id="nav-toggle" hidden checked >

    • Yes, thank you kind man, 4 hours already break my head !!!!! - Barbrust
    • @Barbrust mark the answer as true (check mark on the left) if it helped you - Stranger in the Q 1:34 pm