devo-book/pad.html

<style>

.frame
{
    position:relative;
    width:500px;
    padding:20px;
    border-bottom: none;
    box-sizing:border-box;
}

.frame__image
{
    position:relative;
    z-index:20;
    margin-bottom:19px;
}

.frame__bar
{
    position:relative;
    bottom:0;
    left:0;
    width:100%;
    height:44px;
    overflow:hidden;
    transform-origin: center 22.5px;
}
.frame__bar span
{
    display: block;
    position: absolute;
    top: -10.5px;
    left: 50%;
    width: 20px;
    height: 20px;
    border: 5px solid #000;
    border-right-color: transparent;
    border-bottom-color: transparent;
    transform: translate(-50%, 20px) rotate(45deg);
    transition: left 0.4s;
}
.frame__bar span::before, .frame__bar span::after
{
    content: " ";
    display: block;
    position: absolute;
    width: 1000px;
    height:0px;
    border-top: 5px solid black;
    transform:rotate(-45deg);
}
.frame__bar span::before
{
    bottom: -0.5px;
    right: 20px;
    transform-origin: right bottom;
}
.frame__bar span::after
{
    top: -4px;
    left: 17px;
    transform-origin: left top;
}
.frame__bar--down
{
    transform: scaleY(-1);
}
.frame__bar--up
{
    transform: scaleY(1);
}
.frame__bar--1-3 span
{
    left:16.6%;
}
.frame__bar--2-3 span
{
    left:50%;
}
.frame__bar--3-3 span
{
    left:83%;
}

.frame__bracket
{
    position:relative;
    display:block;
    width:100%;
    height:0px;
    top:-200px;
    z-index:10;
    border-top:5px solid black;
}
.frame__bracket::before, .frame__bracket::after
{
    content:" ";
    display:block;
    width:20px;
    height:171px;
    position:absolute;
    top:-5px;
    border:5px solid black;
}
.frame__bracket::before
{
    border-right-width: 0px;
    left:-20px;
}
.frame__bracket::after
{
    border-left-width: 0px;
    right:-20px;
}

.frame__button
{
    position:relative;
    display:block;
    float:left;
    padding:5px 0px 5px 0px;
    box-sizing: border-box;
    width:33.3%;
    text-align:center;
}
.frame__button[data-frame-active='false']:hover::before
{
    content: " ";
    display: block;
    width: 7px;
    height: 7px;
    background: black;
    position: absolute;
    top: -27px;
    left: 50%;
    transform: translateX(-5px) rotate(45deg);
}
.frame__button[data-frame-index="0"]:hover::before, .frame__button[data-frame-index="1"]:hover::before, .frame__button[data-frame-index="2"]:hover::before
{
    top:auto;
    bottom:-23px;
}
</style>
<div class="frame">
    <div class="frame__image">
        <img style="display:block; width:100%; height:auto;" src="https://via.placeholder.com/1024x512.png"/>
    </div>
    <div class="frame__button">Cover</div><div class="frame__button">Back </div><div class="frame__button">Spine</div>

    <div class="frame__bar"><span></span></div>
    <div class="frame__bracket"></div>

    <div class="frame__button">Intro</div><div class="frame__button">1 & 2</div><div class="frame__button">3 & 4</div>
</div>

<script>
    function frame__setup(inFrame)
    {
        var buttons = inFrame.querySelectorAll(".frame__button");
        var bar = inFrame.querySelector(".frame__bar");
        var active = false;



        function activate(inButton)
        {
            var index = parseInt(inButton.getAttribute("data-frame-index"));
            var classX = "frame__bar--" + ((index % 3)+1) + "-3";
            var classY = index > 2 ? "frame__bar--down" : "frame__bar--up";

            bar.setAttribute("class", "frame__bar " + classX + " " + classY);
            if(active)
            {
                active.setAttribute("data-frame-active", "false");
            }
            active = inButton;
            inButton.setAttribute("data-frame-active", "true");
        }
        function hover(inButton)
        {
            
        }
        for(var i=0; i<buttons.length; i++)
        {
            buttons[i].setAttribute("data-frame-index", i);
            buttons[i].setAttribute("data-frame-active", "false");
            buttons[i].addEventListener("click", function(){ activate(this); });
        }

        activate( buttons[0] );
    }

    frame__setup(document.querySelector(".frame"));
</script>