Как сделать ссылки в скрытых элементах списка кликабельными

Question

Я создаю меню для адаптивной страницы только с HTML и CSS. Когда размер страницы меньше 850 пикселей (для планшетов и мобильных телефонов), горизонтальное меню скрыто, и пользователям необходимо нажать кнопку, чтобы получить доступ к меню. Это одна страница с плавной прокруткой.

Однако, когда вы открываете меню, ссылки не щелкают. Я заметил, что когда я показываю меню, ссылки работают нормально. Как сделать ссылки кликабельными? Я подумал, что это может быть связано с тем, что ссылки «перекрываются» другим элементом.

Любая помощь будет оценена

/*********** HIDDEN MENU section  *************/



#hidden-menu-items {
	display: none;
	position:absolute;
	z-index: 2;
}

/******* This displays the menu on click *******/

input[type=image]{
		cursor: pointer;
}
input[type=image]:focus {
		outline: none;
}
input[type=image]:focus + ul#hidden-menu-items {
	display: block;
}

Here's the HTML
```
<!-- Hidden Mobile Menu-->

      <div id="hidden-menu">
          <input type="image" src="images/menu-button-red-png.png" alt="menu-button" class="menu-button">

        <!-- Hidden Menu Items-->

          <ul id="hidden-menu-items">
            <li><a href="#title">About the avengers</a></li>
            <li><a href="#avengers">Meet our heros</a></li>
            <li><a href="#movies-list">Movie Timeline</a></li>
            <li><a href="">Upcoming Movies</a></li>
          </ul> 
      </div>

Answer 1

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

Используйте :focus-within на родительском

/*********** HIDDEN MENU section  *************/

#hidden-menu-items {
  display: none;
  position: absolute;
  z-index: 2;
}


/******* This displays the menu on click *******/

input[type=image] {
  cursor: pointer;
}

#hidden-menu:focus-within {
  outline: none;
}

#hidden-menu:focus-within #hidden-menu-items {
  display: block;
}

<!-- Hidden Mobile Menu-->

<div id="hidden-menu">
  <input type="image" src="images/menu-button-red-png.png" alt="menu-button" class="menu-button">

  <!-- Hidden Menu Items-->

  <ul id="hidden-menu-items">
    <li><a href="#title">About the avengers</a></li>
    <li><a href="#avengers">Meet our heros</a></li>
    <li><a href="#movies-list">Movie Timeline</a></li>
    <li><a href="">Upcoming Movies</a></li>
  </ul>
</div>

Но: вы не можете использовать фокусировку внутри, потому что вы! caniuse: CSS focus-inside

Для решения без JS и focus-within используйте скрытые переключатели и комбинатор CSS 101 * вместе с псевдоклассом :checked.

/*********** HIDDEN MENU section  *************/

.hidden-menu-items {
  display: none;
  position: absolute;
  z-index: 2;
}


/******* This displays the menu on click *******/

.menu-button {
  cursor: pointer;
}
.menu-open-indicator,
.menu-close-indicator {
  display: none;
}
.menu-open-indicator:checked ~ .menu-open,
.menu-close {
  display: none;
}
.menu-open-indicator:checked ~ .menu-close,
.menu-open-indicator:checked ~ .hidden-menu-items {
  display: block;
}

<!-- Hidden Mobile Menu-->

<div class="hidden-menu">
  <input type="radio" name="menu-toggle" id="my-menu-open" class="menu-open-indicator">
  <input type="radio" name="menu-toggle" id="my-menu-close" class="menu-close-indicator">
  <label class="menu-open" for="my-menu-open">
    <img src="images/menu-button-red-png.png" alt="menu-button" class="menu-button">
  </label>
  <label class="menu-close" for="my-menu-close">
    <img src="images/menu-button-red-png.png" alt="menu-button" class="menu-button">
  </label>

  <!-- Hidden Menu Items-->

  <ul class="hidden-menu-items">
    <li><a href="#title">About the avengers</a></li>
    <li><a href="#avengers">Meet our heros</a></li>
    <li><a href="#movies-list">Movie Timeline</a></li>
    <li><a href="">Upcoming Movies</a></li>
  </ul>
</div>

Answer 2

Я думаю, что ввод теряет фокус, когда вы нажимаете на ссылки, поэтому они снова становятся скрытыми.

Я бы предложил использовать jQuery для добавления / удаления класса при нажатии и настройки CSS в соответствии с этим (или простоизменение CSS с помощью jQuery).

Вот пример:

$('#hidden-menu input').on('click', function(e) {
  $('#hidden-menu-items').toggleClass('visible');
});

#hidden-menu-items {
    display: none;
    position: absolute;
    z-index: 2;
}

#hidden-menu-items.visible {
  display: block;
}

#hidden-menu {
  border: 1px solid pink;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="hidden-menu">
  <input type="image" src="images/menu-button-red-png.png" alt="menu-button" class="menu-button">

  <!-- Hidden Menu Items-->
  <ul id="hidden-menu-items">
    <li><a href="#title">About the avengers</a></li>
    <li><a href="#avengers">Meet our heros</a></li>
    <li><a href="#movies-list">Movie Timeline</a></li>
    <li><a href="">Upcoming Movies</a></li>
  </ul> 
</div>

И ссылка на скрипку: https://jsfiddle.net/mzLwg0xb/.