Menu test

by Raphael Quintao

HTML

<script src="https://quintao.ninja/pinkfloyd/js/libs/scrollbot.js"></script>
<div class="qc-select" style="left: 314.492px; opacity: 1; display: flex;">

  <div class="qc-list-header">Song List</div>
  <ul class="qc-list" id="demo">
    <li class="item" data-index="0" data-selected="false"><span>1</span><span>Christmas Song For Children</span></li>
    <li class="item" data-index="1" data-selected="false"><span>2</span><span>In The Flesh?</span></li>
    <li class="item" data-index="2" data-selected="false"><span>3</span><span>The Thin Ice</span></li>
    <li class="item" data-index="3" data-selected="false"><span>4</span><span>Another Brick In The Wall (Part 1)</span></li>
    <li class="item" data-index="4" data-selected="false"><span>5</span><span>Theme A</span></li>
    <li class="item" data-index="5" data-selected="false"><span>6</span><span>Goodbye Blue Sky</span></li>
    <li class="item" data-index="6" data-selected="false"><span>7</span><span>The Happiest Days Of Our Lives</span></li>
    <li class="item" data-index="7" data-selected="false"><span>8</span><span>Another Brick In The Wall (Part 2)</span></li>
    <li class="item" data-index="8" data-selected="false"><span>9</span><span>Mother</span></li>
    <li class="item" data-index="9" data-selected="false"><span>10</span><span>Empty Spaces</span></li>
    <li class="item" data-index="10" data-selected="false"><span>11</span><span>Young Lust</span></li>
    <li class="item" data-index="11" data-selected="false"><span>12</span><span>One Of My Turns</span></li>
    <li class="item" data-index="12" data-selected="false"><span>13</span><span>Don't Leave Me Now</span></li>
    <li class="item" data-index="13" data-selected="false"><span>14</span><span>Another Brick In The Wall (Part 3)</span></li>
    <li class="item" data-index="14" data-selected="false"><span>15</span><span>Goodbye Cruel World</span></li>
    <li class="item" data-index="15" data-selected="false"><span>16</span><span>Is There Anybody Out...

CSS

.qc-select {
  background: #262626;
  color: #ffffff;
  font-size: 14px;
  border-radius: 5px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 700;
  position: absolute;
  margin: 10px 0 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateX(-50%) translateY(-100%);
  transition: opacity 0.3s linear;
  opacity: 0;
  top: calc(100vh - 20px);
  max-height: calc(100vh - 20px);
}

.qc-list-header {
  border-bottom: 1px solid #000;
  padding: 5px 15px;
  line-height: 27px;
  text-shadow: 0 0 2px rgba(0, 0, 0, .5);
}

.qc-list {
  font-size: 90%;
  font-weight: 300;
  margin: 0;
  overflow: hidden;
  overflow-y: auto;
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.qc-list .item {
  border-top: 1px solid #333;
  border-bottom: 1px solid #000;
  line-height: 33px;
  cursor: pointer;
  display: flex;
  opacity: 0.65;
  flex: 0 0 33px;
}

.qc-list .item[data-selected~=true] {
  background-color: #111 !important;
  border-top-color: #000;
  opacity: 1;
}

.qc-list .item:hover {
  background-color: rgba(255, 255, 255, .1);
}

.qc-list .item span {
  flex: 0 0 30px;
  white-space: nowrap;
  padding-right: 35px;
}

.qc-list .item span:first-child {
  padding-right: 7px;
  text-align: right;
  opacity: 0.8;
}

.debug {
  position: absolute;
  margin: 10px;
  /*background-color: rgba(249, 38, 114, 0.51);*/
  background-color: rgba(225, 225, 225, 0.95);
  padding: 5px 7px;
  border-radius: 5px;
  white-space: pre;
  font-family: monospace;
  font-size: 16px;
}

JavaScript

var debug = document.getElementById('debug1');
debug.innerText = 'ok';

var list = document.getElementsByClassName('qc-list')[0];
list.addEventListener('click', function() {
  //var nindex = this.getAttribute('data-index');
  //me.updateSelected(parseInt(nindex));
  //video.currentTime = chapters[activeIndex].texts[nindex].startTime;
  //me.setVisible(false);
});
//var styled = new scrollbot(list);
//styled.refresh();