CODEWITHSUNDEEP
javascripthtmlcss
Vladimir Markiev
Vladimir Markiev

Reputation: 285

Make element appear on focus

I have the following element which I want to appear on focus. When navigating the webpage by pressing Tab on the keyboard.

I have .pagemenu that is hidden by default and appears when I hover on .stub. I want .pagemenu to appear when I reach .stub navigating the page via Tab button on the keyboard (accessibility).

Usually, :focus does exactly what I need. Usually, when I use :focus for an element, and property like background color, background color changes, but setting :focus for .stub or .pagenav is not working.

Ok, I understand now that it's impossible to focus on elements that are not displayed, so I can't focus on .pagenav. But I can focus on .sub, cant I? Then why is this not working:

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

I don't want to use checkbox as the solution here suggests because I don't want to add extra lines in HTML (and I have trouble understanding checkbox).

Adding opacity to .pagenav would be a good idea, but it messes with the width of .stub when .pagenav isn't displayed (no idea why) and it removes centering of .pagenav content. I'm open to any solutions including JS.

gengns below has proposed a solution with opacity that eliminates issues described above but still doesn't solve the problem with :focus on Tab.

What do I need to do to make .pagenav appear on focus on either .stub or .pagenav itself?

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>

Upvotes: 3

Views: 811

Answers (3)

davidgiesemann
davidgiesemann

Reputation: 1010

Try and put #stublink BEFORE your navigation and add following CSS, as the TAB key will not focus .stub but the #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>

Upvotes: 2

gengns
gengns

Reputation: 1653

If I understood you well, you wanna show your .pagenav each time an user is over your .stub or the hidden .pagenav itself. You can do it easily with the opacity as you said and changing the heights : )

Updated: Display menu when Tab is pressed.

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>

Hope this help or at least point you to the right direction ^^

Upvotes: 2

brandt.codes
brandt.codes

Reputation: 913

You cant focus elements which are not displayed yet (display: none). Maybe you handle this by a small helper element which is displayed?

Upvotes: 0

Related Questions