menu button sticky, but off-canvas menu list is not

[josephmartins]

I’m stumped. I’ve apparently coded myself into a corner with the way I’ve structured this menu

I cobbled together a CSS menu that slides in from the right side of the screen using tranformations. I’m using it in combination with a vertical scrolling responsive site. The intent is to make the entire menu (button and list) sticky.

I fixed the position of the menu button (“showmenu”) but I’ve not been able to get the list to remain fixed no matter what I have tried. Instead the list scrolls up with the rest of the site. So if I scroll down a bit and click the menu button the panel still slides out from the right but the list is above and off the screen.

Here’s the relevant HTML:

<div class="interface"><div class="site-panel">
        <div id="panelClose"><i class="icon-remove"></i></div>
        <section class="nav" role="main-navigation">
            <ul>
                <li class="active"><a href="#videos1">A</a></li>
                <li><a href="#videos2">B</a></li>
                <li><a href="#videos3">C</a></li>
                <li><a href="#videos4">D</a></li>
                <li><a href="#videos5">E</a></li>
                <li><a href="#videos6">F</a></li>
                <li><a href="#videos7">G</a></li>
                <li><a href="#videos8">H</a></li>
        <li><a href="#videos9">I</a></li>
        <li><a href="#videos10">J</a></li>
                <li><a href="#videos11">K</a></li>
            </ul>
        </section>
    </div><!-- site-panel --><div class="headerwrapper stuck">
    <header role="banner">
        <div id="showMenu">
            <a href="#">Menu </a>
            <a href="#" class="burger"><i class="icon-reorder"></i></a>
        </div>
    </header>

And the relevant CSS:

  .site-panel {
  position: absolute;
  top: 0;
  width: 218px;
  z-index: -20; }

#panelClose {
  color: white;
  position: absolute;
  right: 18%;
  top: 6%; }
  @media (min-width: 767px) {
    #panelClose {
      right: 6%; } }

.headerwrapper {
  height: 55px;
  position: absolute;
  width: 100%;
  z-index: 9999; }
  .headerwrapper header {
    position: absolute;
    width: 100%;
    padding: 1.2em 0; }

.burger {
  padding-left: 5px;
  display: inline-block; }

#showMenu {
  background: transparent;
  position: fixed;
  right: 6%;
  padding: .5em 1%;
  text-transform: uppercase;
  font-size: .875em;
  font-weight: 600; }
  @media (min-width: 1024px) {
    #showMenu {
      background: #222222; } }
  #showMenu a {
    text-decoration: none; }

#showMenu a {
  font-size: 1.25em;
  color: white;
  display: inline-block;
  vertical-align: text-top; }

.surface {
  overflow-x: hidden;
  position: relative;
  left: 0;
  -webkit-transition: all .6s ease-in-out;
  -moz-transition: all .6s ease-in-out;
  -ms-transition: all .6s ease-in-out;
  -o-transition: all .6s ease-in-out;
  transition: all .6s ease-in-out; }

.site-panel {
  right: 0;
  -webkit-transition: all .4s ease-in-out;
  -moz-transition: all .4s ease-in-out;
  -ms-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out; }

.surface.nav-show {
  -webkit-transform: translateX(-230px);
  -moz-transform: translateX(-230px);
  -ms-transform: translateX(-230px);
  -o-transform: translateX(-230px);
  transform: translateX(-230px); }
  @media (min-width: 767px) {
    .surface.nav-show {
      -webkit-transform: translateX(-270px);
      -moz-transform: translateX(-270px);
      -ms-transform: translateX(-270px);
      -o-transform: translateX(-270px);
      transform: translateX(-270px); } }

.nav-show .site-panel {
  -webkit-transform: translateX(250px);
  -moz-transform: translateX(250px);
  -ms-transform: translateX(250px);
  -o-transform: translateX(250px);
  transform: translateX(250px);
  -webkit-transition-delay: .2s;
  -moz-transition-delay: .2s;
  -ms-transition-delay: .2s;
  -o-transition-delay: .2s;
  transition-delay: .2s;
  /* Safari */ }
  @media (min-width: 767px) {
    .nav-show .site-panel {
      -webkit-transform: translateX(250px);
      -moz-transform: translateX(250px);
      -ms-transform: translateX(250px);
      -o-transform: translateX(250px);
      transform: translateX(250px); } }

.nav ul {
  list-style: none;
  padding-left: 0;
  padding-top: 0.5em; }
  .nav ul li {
    color: #999999;
    margin: 0.5em 0; }
    .nav ul li a {
      color: inherit;
      text-decoration: none; }
    .nav ul li.active, .nav ul li:hover {
      color: white; }  

[josephmartins]

Thank you very much for taking the time to show me another technique. I appreciate it.

I’ve been experimenting with your code in an attempt to remove JS from the solution (I was hoping to accomplish what I need with just CSS) but I’ve been unsuccessful. Still, I’m glad I at least have something to work with. Thanks again!

[josephmartins]

Ideally, I hope to implement this menu such that:

1. as I scroll the page the menu remains available to the right, and
2. when I mouse over the page and swipe or scroll down the menu it doesn’t disappear.

Right now, not only does it not remain fixed to the right, but when I mouseover and gesture to pan down the menu (since it is longer than the display height) it disappears

[Atelierbram]

Five years ago but forgotten

https://codepen.io/atelierbram/pen/sEatG/

[Author]

Posts