Make Lists TOC Menu

Di sela-sela tadabur ilmu bazzar pahala, gue sempatkan mosting. Rada lawas tema yang akan dibawakan kali ini. Kalau kita mau berbuka puasa pasti kenal dengan menu! Disinilah perbedaan menu berbuka puasa dengan menu navigasi. Yang satu bisa kalian makan, dan yg satu lagi hanya bisa dinikmati sebatas memakai/memasang :D Menu yg akan Koben sharing mirip-mirip dengan artikel sebelumnya yaitu tentang make menu pinggir or gigir use css. Banyak juga ternyata artikel tutorial ttg MENU di blog ini ;) AA kasih judul postingan menunya yaitu Make Lists TOC Menu.
Original source: ckknight.github.io/gorillascript

Adapun bumbu-bumbu untuk membuat menu list toc tidak lain CSS & HTML.

#toc {
margin: 0;
padding: 0;
width: 19em;
right: -18.8em;
top: 0;
height: 100%;
position: fixed;
overflow-y: hidden;
background-color: #2b2b2b;
transition: right 0.4s ease-in-out;
}
#toc:hover {
right: 0;
overflow-x: hidden;
overflow-y: scroll;
}
#toc ul {
margin: 0;
padding: 0;
border-left: 3px solid #37abc8;
}
#toc li { display: block; }
#toc li a {
display: block;
color: #d4d4d4;
padding: 0.6em 1em;
border-bottom: 1px solid #4a4a4a;
transition-property: border-bottom,background-color;
transition-duration: 0.4s;
transition-delay: 0.1s;
}
#toc li a:hover {
background-color: #4a4a4a;
border-bottom: 1px solid #37abc8;
}
#toc-label {
display: inline-block;
background: #37abc8;
position: fixed;
right: 0;
top: 3.2em;
opacity: 0.67;
z-index: 100;
font-size: 14px;
font-family: Helvetica, arial, freesans, clean, sans-serif;
}
#toc-label a {
color: white;
display: block;
width: 5.1em;
padding: 0.3em 0 0.3em 1em;
}
#toc-label:hover {
opacity: 1;
}

Untuk membuka list's menu yg tersembunyi, cukup hanya dengan mengarahkan cursor ke sebelah kanan monitor kalian!

<div id="toc">
<h3 id="toc-label"><a href="#">Table of Contents</a></h3>
<ul>
<li><a href="">Your Title 1</a></li>
<li><a href="">Your Title 2</a></li>
<li><a href="">Your Title 3</a></li>
<li><a href="">Your Title 4</a></li>
<li><a href="">Your Title 5</a></li>
<li><a href="">Your Title 6</a></li>
<li><a href="">Your Title 7</a></li>
<li><a href="">Your Title 8</a></li>
<li><a href="">Your Title 9</a></li>
<li><a href="">Your Title 10</a></li>
<li><a href="">Your Title 11</a></li>
<li><a href="">Your Title 12</a></li>
<li><a href="">Your Title 13</a></li>
<li><a href="">Your Title 14</a></li>
<li><a href="">Your Title 15</a></li>
<li><a href="">Your Title 16</a></li>
<li><a href="">Your Title 17</a></li>
<li><a href="">Your Title 18</a></li>
<li><a href="">Your Title 19</a></li>
<li><a href="">Your Title 20</a></li>
<li><a href="">Your Title 21</a></li>
<li><a href="">Your Title 22</a></li>
<li><a href="">Your Title 23</a></li>
<li><a href="">Your Title 24</a></li>
<li><a href="">Your Title 25</a></li>
<li><a href="">Your Title 26</a></li>
<li><a href="">Your Title 27</a></li>
<li><a href="">Your Title 28</a></li>
<li><a href="">Your Title 29</a></li>
<li><a href="">Your Title 30</a></li>
<li><a href="">Your Title 31</a></li>
<li><a href="">Your Title 32</a></li>
<li><a href="">Your Title 33</a></li>
<li><a href="">Your Title 34</a></li>
<li><a href="">Your Title 35</a></li>
<li><a href="">Your Title 36</a></li>
<li><a href="">Your Title 37</a></li>
<li><a href="">Your Title 38</a></li>
<li><a href="">Your Title 39</a></li>
<li><a href="">Your Title 40</a></li>
</ul>
</div>

Bonus: adnantopal.github.io/slimmenu - cdpn.io/klnjw - www.outyear.co.uk/smint
Semoga bermanfaat :)