Как убрать фон меню, после перемещения на якорь?

Question

[Jacksnow]

Всем привет. Приспособил к своему сайту меню, при клике на нужный компонент, переходит на якорную ссылку, но прозрачный фон меню остается, получается, что ничего не видно. Как сделать так, чтоб при переходе на якорь из меню выходило?

@import url('css/font-awesome.css');
 
* { padding: 0px; margin: 0px; border: 0px; outline: 0px; }
 
body {
    font-family:Arial, sans-serif;
    font-size: 12px;
}
 
a { text-decoration: none; }
a:hover { text-decoration: underline; }
 
li { list-style: none; }
 
.container { margin: 0px 20% 0px 20%; }
 
#head { margin-top: 20px; }
 
#menu .box {
    position: fixed;
    text-align: center;
    overflow: hidden;
    z-index: -1;
    opacity: 0;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    background: rgba(0,0,0,0.8);
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
 
#menu ul {
    position: relative;
    top: 20%;
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    -ms-transform: scale(2);
    transform: scale(2);
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
 
#menu li {
    display: inline-block;
    margin: 20px;
}
 
#menu li a {
    border-radius: 3px;
    padding: 15px;
    border: 1px solid transparent;
    text-decoration: none;
    font-size: 18px;
    color: #fff;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
 
#menu li a:hover { border-color: #fff; }
 
#menu li a i {
    margin-right: 5px;
    font-size: 24px;
}
 
#toggle-nav-label {
    color: rgba(0,0,0,0.5);
    background: rgba(0,0,0,0.2);
    text-align: center;
    line-height: 30px;
    font-size: 16px;
    display: block;
    cursor: pointer;
    position: relative;
    z-index: 500;
    width: 30px;
    height: 30px;
    border-radius: 5px;
}
 
#toggle-nav { display: none; }
 
#toggle-nav:checked ~ .box {
    opacity: 1;
    z-index: 400;
}
 
#toggle-nav:checked ~ .box ul {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}
 
#toggle-nav:checked ~ #toggle-nav-label {
    background: #fff;
    color: rgba(0,0,0,0.8);
}
 
#content { margin: 20px 0px 20px 0px; }
 
#content h1 {
    margin-bottom: 20px;
    font-size: 30px;
}
 
#content p {
    font-size: 14px;
    line-height: 150%;
    margin-bottom: 20px;
}

<nav id="menu">
               
                <input type="checkbox" id="toggle-nav"/>
                <label id="toggle-nav-label" for="toggle-nav"><i class="icon-reorder"></i></label>
               
                <div class="box">
                    <ul>
                        <li><a href="#"><i class="icon-home"></i> главная</a></li>
                        <li><a href="#"><i class="icon-file-alt"></i> о нас</a></li>
                        <li><a href="#"><i class="icon-copy"></i> вакансии</a></li>
                        <li><a href="#"><i class="icon-envelope"></i> контакты</a></li>
                    </ul>
                </div>
               
            </nav>

Comments

[Hyubert]

js код в студию

[Jacksnow]

его нет

Answer 1

[trushka]

Сделайте #toggle-nav обычным инпутом (type=text) и вместо :checked используйте :focus
Правда, тогда при повторном клике на значёк меню оно не будет закрываться.. Но можно сделать хитро - вместо label сделать просто div какой-нить, а input не прятать, а сделать прозрачным и поместить его над этим div'ом. А вот уже #toggle-nav:focus { z-index:-1 } например, чтоб он под div прятался

Comments

[Jacksnow]

Объясните пожалуйста поподробнее, не все понимаю как сделать пока, новичек. Первый вариант я понял что сделать, но надо, чтоб при клике закрывалось. Как сделать второй вариант?

[Jacksnow]

label заменил div'ом, и вставил #toggle-nav:focus { z-index:-1 } в ксс, меню не закрывается даже от конпки

[trushka]

Jacksnow, ну, в общем как-то так: https://jsfiddle.net/trushka/9ujgp5zr/
Думаю, понятно, что я имел в виду)

[trushka]

Хотя, можно оставить ваш первоначальный вариант, но чючють javascript'a добавить,можно прямо в HTML:
- если клик приходится на ссылку (у target-элемента есть свойство href ), то убирается checked для инпута
https://jsfiddle.net/trushka/9ujgp5zr/1/