With the help of input, I push the panel, but by programming the cross () in the same way, it does not work back, how can the menu data be implemented differently?

.top-panel { background: #000; position: fixed; right: 0px; width: 300px; height: 100%; padding: 0; transform: translateX(200%); } /* Блок сообщения */ .message { color: #fff; font-weight: 300; position: relative; padding: 3em 2em; margin: 0 auto; max-width: 980px } /* Переключатель панели */ label.btn { display: block; position: absolute; right: 50px; top: 60px; cursor: pointer; border-radius: 0 0 5px 5px; padding: 8px 5px; color: #FFF; text-align: center; -webkit-font-smoothing: antialiased; cursor: pointer; transition: all 400ms cubic-bezier(0.17,0.04,0.03,0.94); box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12); z-index: 2 } .open:checked ~ .top-panel { box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); -webkit-transform: translateX(0); -moz-transform: translateX(0); transform: translateX(0); -webkit-transition: 0.5s; -moz-transition: 0.5s; transition: 0.5s } .open:checked ~ label.btn{ display: none; } .open:checked ~ .soc { display: none; } .open:checked ~ .soc_text { display: none; } .open:not(:checked) ~ .top-panel { -webkit-transition: 0.35s; -moz-transition: 0.35s; transition: 0.35s } .open:checked ~ .top-panel > label.btn { background: #dd6149 } #navigation{ font-size: 15px; color:#38AE48; text-transform: uppercase; letter-spacing: 0.2em; padding-bottom: 50px } .fa-times{ position: absolute; right: 20px; top:50px; color:#FFF; } .message a{ display: block; font-size:20px; color:#FFF; letter-spacing: 0.05em; font-family: 'Libre Baskerville', serif; padding-top:20px; } #menu_descr{ font-size: 15px; color:#414141; margin-top:50px; padding-bottom: 30px; } .soc_net i{ color:#414141; margin-right: 20px; margin-left:3px; } 
 <input class="open" id="top-box" type="checkbox" hidden> <label class="btn fas fa-bars fa-2x" for="top-box"></label> <div class="top-panel"> <div class="message wow fadeInLeft"> <p id="navigation">navigation<i class="fas fa-times "></i></p> <a href="#">Home</a> <a href="#">About</a> <a href="#">Services</a> <a href="#">Works</a> <a href="#">Cliens</a> <a href="#">Contacts</a> <p id="menu_descr">Perspiciatis hic praesentium nesciunt. Et neque a dolorum voluptatem porro iusto sequi veritatis libero enim. Iusto id suscipit veritatis neque reprehenderit.</p> <div class="soc_net"> <i class="fab fa-twitter fa-2x"></i> <i class="fab fa-instagram fa-2x"></i> <i class="fab fa-facebook fa-2x"></i> <i class="fab fa-vk fa-2x"></i> </div> </div> </div>

    1 answer 1

    You just don’t need to hide the label, and using the pseudo-elements of this label (before and after) you can draw a cross:

     .top-panel { background: #000; position: fixed; right: 0px; width: 300px; height: 100%; padding: 0; transform: translateX(200%); } /* Блок сообщения */ .message { color: #fff; font-weight: 300; position: relative; padding: 3em 2em; margin: 0 auto; max-width: 980px } /* Переключатель панели */ label.btn { display: block; position: absolute; right: 30px; top: 30px; cursor: pointer; border-radius: 0 0 5px 5px; padding: 8px 5px; color: #FFF; text-align: center; cursor: pointer; transition: all 400ms cubic-bezier(0.17,0.04,0.03,0.94); box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12); z-index: 2; } .open:checked ~ .top-panel { box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); -webkit-transform: translateX(0); -moz-transform: translateX(0); transform: translateX(0); -webkit-transition: 0.5s; -moz-transition: 0.5s; transition: 0.5s } .open:checked ~ label.btn:before, .open:checked ~ label.btn:after{ content: ''; display: block; top: 0; height: 20px; border: 1px solid red; position: absolute; transition: 0.5s } .open:checked ~ label.btn:before { transform: rotate(45deg); } .open:checked ~ label.btn:after { transform: rotate(-45deg); } .open:checked ~ .soc { display: none; } .open:checked ~ .soc_text { display: none; } .open:not(:checked) ~ .top-panel { -webkit-transition: 0.35s; -moz-transition: 0.35s; transition: 0.35s } .open:checked ~ .top-panel > label.btn { background: #dd6149; } #navigation{ font-size: 15px; color:#38AE48; text-transform: uppercase; letter-spacing: 0.2em; padding-bottom: 50px } .fa-times{ position: absolute; right: 20px; top:50px; color:#FFF; } .message a{ display: block; font-size:20px; color:#FFF; letter-spacing: 0.05em; font-family: 'Libre Baskerville', serif; padding-top:20px; } #menu_descr{ font-size: 15px; color:#414141; margin-top:50px; padding-bottom: 30px; } .soc_net i{ color:#414141; margin-right: 20px; margin-left:3px; } 
     <input class="open" id="top-box" type="checkbox" hidden> <label class="btn fas fa-bars fa-2x" for="top-box"></label> <div class="top-panel"> <div class="message wow fadeInLeft"> <p id="navigation">navigation<i class="fas fa-times "></i></p> <a href="#">Home</a> <a href="#">About</a> <a href="#">Services</a> <a href="#">Works</a> <a href="#">Cliens</a> <a href="#">Contacts</a> <p id="menu_descr">Perspiciatis hic praesentium nesciunt. Et neque a dolorum voluptatem porro iusto sequi veritatis libero enim. Iusto id suscipit veritatis neque reprehenderit.</p> <div class="soc_net"> <i class="fab fa-twitter fa-2x"></i> <i class="fab fa-instagram fa-2x"></i> <i class="fab fa-facebook fa-2x"></i> <i class="fab fa-vk fa-2x"></i> </div> </div> </div>

    • Thank you very much, I am ashamed that I didn’t think) <3 - Alexander Pogrebnyak
    • @AlexanderPogrebnyak , happy to help) - humster_spb 2:55 pm