@Jacksnow

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

Всем привет. Приспособил к своему сайту меню, при клике на нужный компонент, переходит на якорную ссылку, но прозрачный фон меню остается, получается, что ничего не видно. Как сделать так, чтоб при переходе на якорь из меню выходило? 99b6bfbdb161483eb03e0fb0f88e6b59.png
@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>
  • Вопрос задан
  • 199 просмотров
Пригласить эксперта
Ответы на вопрос 1
trushka
@trushka
Сделайте #toggle-nav обычным инпутом (type=text) и вместо :checked используйте :focus
Правда, тогда при повторном клике на значёк меню оно не будет закрываться.. Но можно сделать хитро - вместо label сделать просто div какой-нить, а input не прятать, а сделать прозрачным и поместить его над этим div'ом. А вот уже #toggle-nav:focus { z-index:-1 } например, чтоб он под div прятался
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы