Сделать элемент видимым в фокусе - PullRequest
Новая
       0

Сделать элемент видимым в фокусе

3 голосов
/ 05 мая 2020

У меня есть следующий элемент, который я хочу выделить в фокусе. При навигации по веб-странице нажатием Tab на клавиатуре.

У меня есть .pagemenu, которое по умолчанию скрыто и появляется при наведении курсора на .stub. Я хочу, чтобы .pagemenu появлялся, когда я добираюсь до .stub, перемещаясь по странице с помощью кнопки Tab на клавиатуре (специальные возможности).

Обычно :focus делает именно то, что мне нужно. Обычно, когда я использую :focus для элемента и свойство вроде background color, цвет фона меняется, но установка :focus для .stub или .pagenav не работает.

Хорошо, теперь я понимаю, что невозможно сфокусироваться на элементах, которые не отображаются, поэтому я не могу сосредоточиться на .pagenav. Но я могу сосредоточиться на .sub, не так ли? Тогда почему это не работает: 

.stub a:focus .pagenav {
display: block;
position: absolute;
top: 100%;
left: -3px;
width: calc(100% + 6px);
}

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

Добавление непрозрачности к .pagenav было бы хорошей идеей, но это мешает ширине .stub, когда .pagenav не отображается (не знаю почему), и удаляет центрирование содержимого .pagenav. Я открыт для любых решений, включая JS.

gengns ниже предложил решение с непрозрачностью, которое устраняет проблемы, описанные выше, но все еще не решает проблему с :focus на Табл.

Что мне нужно сделать, чтобы .pagenav отображался в фокусе на .stub или .pagenav? 

var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("stub").style.top = "0";
  } else {
    document.getElementById("stub").style.top = "150px";
  }
  prevScrollpos = currentScrollPos;
}
.stub {
  background-color: #577284;
  float: right;
  position: fixed;
  right: 0;
  text-transform: uppercase;
  font-family: 'Yanone Kaffeesatz', sans-serif;
  font-weight: 700;
  padding: 10px;
  border: 3px solid #ff8000;
  margin-right: 1em;
}

#stublink {
  color: #F3E0BE;
  text-decoration: none;
}

.stub:hover .pagenav {
  display: block;
  position: absolute;
  top: 100%;
  left: -3px;
  width: calc(100% + 6px);
}

.pagenav {
  background-color: #577284;
  display: none;
  text-transform: uppercase;
  font-size: 0.8em;
  font-family: 'Yanone Kaffeesatz', sans-serif;
  font-weight: 700;
  border: 3px solid #ff8000;
  border-top: none;
  padding-bottom: 10px;
}

.pagenav a {
  display: block;
  color: #F3E0BE;
  padding: 6px 0px 0px 8px;
}

.pagenav a:hover {
  box-shadow: inset 5px 0 0 0 #ff8000
}

body {
  height: 200vh
}

;
@media only screen and (max-width: 670px) {
  .stub {
    right: 0;
    left: auto;
    top: 0;
    bottom: auto;
  }
  .stub:hover .pagenav {
   display: block;
position: absolute;
top: 100%;
left: -3px;
width: calc(100% + 6px);
  }
}
<body>
  <div class="stub" id="stub">
    <div class="pagenav">
      <a href="#last">
        <table>
          <tr>
            <td>02.19 03.20</td>
            <td>:</td>
            <td class="two"></td>
          </tr>
        </table>
      </a>
      <a href="#previous">
        <table>
          <tr>
            <td>02.18 02.19</td>
            <td>:</td>
            <td class="two"></td>
          </tr>
        </table>
      </a>
      <a href="#dec17">
        <table>
          <tr>
            <td>12.17 04.18</td>
            <td>:</td>
            <td class="two"></td>
          </tr>
        </table>
      </a>
      <a href="#nov17">
        <table>
          <tr>
            <td>11.17 01.18</td>
            <td>:</td>
            <td class="two"></td>
          </tr>
        </table>
      </a>
      <a href="#sep16">
        <table>
          <tr>
            <td>09.16 11.17</td>
            <td>:</td>
            <td class="two"></td>
          </tr>
        </table>
      </a>
      <a href="#sep15">
        <table>
          <tr>
            <td>09.15 08.16</td>
            <td>:</td>
            <td class="two"></td>
          </tr>
        </table>
      </a>
      <a href="#jan15">
        <table>
          <tr>
            <td>01.15 03.16</td>
            <td>:</td>
            <td class="two"></td>
          </tr>
        </table>
      </a>
      <a href="#jan14">
        <table>
          <tr>
            <td>01.14 08.15</td>
            <td>:</td>
            <td class="two"></td>
          </tr>
        </table>
      </a>
    </div><a id="stublink" href=#>Pagemenu</a>
  </div>
  <script></script>
</body>

Ответы [ 3 ]

3 голосов
/ 05 мая 2020

Если я вас хорошо понял, вы хотите показывать свой .pagenav каждый раз, когда пользователь превышает ваш .stub или скрытый .pagenav. Вы можете легко сделать это с непрозрачностью, как вы сказали, и изменением высоты:)

Обновлено : Отображение меню при нажатии Tab. 

const $pagenav = document.querySelector('.pagenav')

document.onkeydown = e =>
  e.code == 'Tab' && $pagenav.classList.toggle('show')
.stub {
  background-color: #577284;
  position: fixed;
  right: 10px;
  text-transform: uppercase;
  font-family: 'Yanone Kaffeesatz', sans-serif;
  font-weight: 700;
  padding: 10px;
  border: 3px solid #ff8000;
  width: 100px;
  text-align: center;
}

#stublink {
  color: #F3E0BE;
  text-decoration: none;
}

.stub .pagenav {
  width: 100%;
  height: 0;
  left: -3px;
  background-color: #577284;
  text-transform: uppercase;
  font-size: 0.8em;
  font-family: 'Yanone Kaffeesatz', sans-serif;
  font-weight: 700;
  filter: opacity(0);

}

.stub:hover .pagenav, .pagenav.show {
  position: absolute;
  top: 100%;
  filter: opacity(100);
  height: auto;
  border: 3px solid #ff8000;
  padding-bottom: 10px;
  border-top: none;
}

.pagenav a {
  display: block;
  color: #F3E0BE;
  padding: 6px 0px 0px 8px;
}

.pagenav a:hover {
  box-shadow: inset 5px 0 0 0 #ff8000
}
<div class="stub">
  <div class="pagenav">
    <a href="#last">
      <table>
        <tr>
          <td>02.19 03.20</td>
          <td>:</td>
          <td class="two"></td>
        </tr>
      </table>
    </a>
    <a href="#previous">
      <table>
        <tr>
          <td>02.18 02.19</td>
          <td>:</td>
          <td class="two"></td>
        </tr>
      </table>
    </a>
    <a href="#dec17">
      <table>
        <tr>
          <td>12.17 04.18</td>
          <td>:</td>
          <td class="two"></td>
        </tr>
      </table>
    </a>
    <a href="#nov17">
      <table>
        <tr>
          <td>11.17 01.18</td>
          <td>:</td>
          <td class="two"></td>
        </tr>
      </table>
    </a>
    <a href="#sep16">
      <table>
        <tr>
          <td>09.16 11.17</td>
          <td>:</td>
          <td class="two"></td>
        </tr>
      </table>
    </a>
    <a href="#sep15">
      <table>
        <tr>
          <td>09.15 08.16</td>
          <td>:</td>
          <td class="two"></td>
        </tr>
      </table>
    </a>
    <a href="#jan15">
      <table>
        <tr>
          <td>01.15 03.16</td>
          <td>:</td>
          <td class="two"></td>
        </tr>
      </table>
    </a>
    <a href="#jan14">
      <table>
        <tr>
          <td>01.14 08.15</td>
          <td>:</td>
          <td class="two"></td>
        </tr>
      </table>
    </a>
  </div><a id="stublink" href=#>Pagemenu</a>
</div>

Надеюсь на эту помощь или, по крайней мере, укажет вам правильное направление ^^

1 голос
/ 07 мая 2020

Попробуйте поставить #stublink ПЕРЕД вашей навигацией и добавить следующее CSS, так как клавиша TAB будет фокусировать не на .stub, а на # stublink-element: 

.stub:hover .pagenav,
    #stublink:focus + .pagenav{
      display: block;
      position: absolute;
      top: 100%;
      left: -3px;
      width: calc(100% + 6px);
    }


var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("stub").style.top = "0";
  } else {
    document.getElementById("stub").style.top = "150px";
  }
  prevScrollpos = currentScrollPos;
}
.stub {
  background-color: #577284;
  float: right;
  position: fixed;
  right: 0;
  text-transform: uppercase;
  font-family: 'Yanone Kaffeesatz', sans-serif;
  font-weight: 700;
  padding: 10px;
  border: 3px solid #ff8000;
  margin-right: 1em;
}

#stublink {
  color: #F3E0BE;
  text-decoration: none;
}

.stub:hover .pagenav,
.stub:focus-within .pagenav,
#stublink:focus + .pagenav{
  display: block;
  position: absolute;
  top: 100%;
  left: -3px;
  width: calc(100% + 6px);
}

.pagenav {
  background-color: #577284;
  display: none;
  text-transform: uppercase;
  font-size: 0.8em;
  font-family: 'Yanone Kaffeesatz', sans-serif;
  font-weight: 700;
  border: 3px solid #ff8000;
  border-top: none;
  padding-bottom: 10px;
}

.pagenav a {
  display: block;
  color: #F3E0BE;
  padding: 6px 0px 0px 8px;
}

.pagenav a:hover {
  box-shadow: inset 5px 0 0 0 #ff8000
}

body {
  height: 200vh
}

;
@media only screen and (max-width: 670px) {
  .stub {
    right: 0;
    left: auto;
    top: 0;
    bottom: auto;
  }
  .stub:hover .pagenav {
   display: block;
position: absolute;
top: 100%;
left: -3px;
width: calc(100% + 6px);
  }
}
<body>
  <div class="stub" id="stub">
    <a id="stublink" href=#>Pagemenu</a>
    <div class="pagenav">
      <a href="#last">
        <table>
          <tr>
            <td>02.19 03.20</td>
            <td>:</td>
            <td class="two"></td>
          </tr>
        </table>
      </a>
      <a href="#previous">
        <table>
          <tr>
            <td>02.18 02.19</td>
            <td>:</td>
            <td class="two"></td>
          </tr>
        </table>
      </a>
      <a href="#dec17">
        <table>
          <tr>
            <td>12.17 04.18</td>
            <td>:</td>
            <td class="two"></td>
          </tr>
        </table>
      </a>
      <a href="#nov17">
        <table>
          <tr>
            <td>11.17 01.18</td>
            <td>:</td>
            <td class="two"></td>
          </tr>
        </table>
      </a>
      <a href="#sep16">
        <table>
          <tr>
            <td>09.16 11.17</td>
            <td>:</td>
            <td class="two"></td>
          </tr>
        </table>
      </a>
      <a href="#sep15">
        <table>
          <tr>
            <td>09.15 08.16</td>
            <td>:</td>
            <td class="two"></td>
          </tr>
        </table>
      </a>
      <a href="#jan15">
        <table>
          <tr>
            <td>01.15 03.16</td>
            <td>:</td>
            <td class="two"></td>
          </tr>
        </table>
      </a>
      <a href="#jan14">
        <table>
          <tr>
            <td>01.14 08.15</td>
            <td>:</td>
            <td class="two"></td>
          </tr>
        </table>
      </a>
    </div>
  </div>
  <script></script>
</body>
0 голосов
/ 05 мая 2020

Вы не можете сфокусировать элементы, которые еще не отображены (display: none). Может быть, вы справитесь с этим с помощью небольшого вспомогательного элемента, который отображается?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...