Можно ли в чистом css создать кнопку, которая будет отображать ссылку, пока мы не нажмем на нее? - PullRequest
Новая
       18

Можно ли в чистом css создать кнопку, которая будет отображать ссылку, пока мы не нажмем на нее?

1 голос
/ 25 апреля 2020

У меня проблемы с формулировкой вопроса, извините за это ... мой вопрос касается меню, для ясности контекста

Я пытаюсь создать кнопку или аналогичную, когда вы нажимаете на нее ( : focus или, возможно: проверено) появляется раскрывающееся меню со ссылкой, эта ссылка является привязкой к той же странице #target, и при нажатии на нее раскрывающееся меню исчезает, и вы отправляетесь к цели

С помощью флажка я могу отображать меню, ссылка работает, но меню не исчезает при нажатии на ссылку (в моем случае это проблема, так как меню находится в положении: исправлено по всему экран)

С фокусировкой на элементе я могу заставить меню появляться и исчезать при нажатии на содержащуюся в нем ссылку, но ссылка не работает, как если бы она исчезала слишком быстро, чтобы работать

Я действительно могу сделать это с помощью видимости + перехода, но я чувствую, что это плохой хак, потому что я не очень хорош в css, должен быть чистый способ, верно? 

#target  {
    margin-top: 500px;
}
#hided_button {
    visibility: hidden;
}
.show.normal:focus ~ #hided_button.normal,
.show.delayed:focus ~ #hided_button.delayed,
.show.check:checked ~ #hided_button.check {
    visibility: visible;
}
#hided_button.delayed {
    visibility: hidden;
    transition: all 1s;
}
<em>test with :focus on all kind of elements (it disappear well but link doesn't work) :</em>
<p class="show normal" tabindex="0">p_element</p>
<button class="show normal">button</button>
<a href="#" class="show normal">anchor</a>
<input type="button" id="input_button" class="show normal">
<label for="input_button">input</label>
<a id="hided_button" class="normal" href="#target">go_to</a>

<em><br>--------------<br>test with :focus and delay (it works) :</em>
<p class="show delayed" tabindex="0">p_element</p>
<button class="show delayed">button</button>
<a href="#" class="show delayed">anchor</a>
<input type="button" id="input_button2" class="show delayed">
<label for="input_button2">input</label>
<a id="hided_button" class="delayed" href="#target">go_to</a>

<em><br>--------------<br>test with :checked (link works but menu doesn't disapear) :</em>
<input type="checkbox" id="input_button3" class="show check">
<label for="input_button3">checkbox</label>
<a id="hided_button" class="check" href="#target">go_to</a>

<p id="target">target</p>
...