<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Marcupoco</title>
    <link rel = "stylesheet" href = "css/style.css"></style>
    <script type = "text/javascript" src = "/js/script.js"></script>
    
    <link href='https://fonts.googleapis.com/css?family=Poppins:500|IM+Fell+Double+Pica' rel='stylesheet' type='text/css' >
    </head>

<body>
<div id="sse1">
  <div id="sses1">
    <ul>
      <table>
        <tr>
          <td><a href="?menu=1&skin=2&p=Javascript-Menus">ABOUT</a></td>
          <td><a href="?menu=1&skin=2&p=Horizontal-Menus">BLOG</a></li>
          <td><a href="?menu=1&skin=2&p=Web-Menus">SOCIAL</a></li>
        </ul>
      </tr>
    </table>
  </div>
</div>
<br /><br /><br />
<div id = "container">
  <p>About me: I saw the best minds of my generation destroyed by madness, starving hysterical naked,

</p>
<div id = "portrait"></div>
</div>
</body>
</html>
/* Visit http://www.menucool.com/horizontal/javascript-menu for source code and other menu CSS templates */

* {
  margin: 0;
  padding:0;
}
body {
  width:100%;
  overflow-y: scroll;
  overflow-x: hidden;
  background-color: rgb(232, 231, 149);
}
#portrait {
  width: 50vw;
  height: 50vw;
  border-radius: 25vw;
  left:25%;
  position: absolute;
  background-color: white;
  background-image: url('https://i.imgur.com/SKQrQ2p.jpg?1') no-repeat;
}
#container {
  left:10%;
  width: 80%;
  position: absolute;
}
p {
  color: white;
  font: bold 46px "IM Fell Double Pica";
  text-align: justify;
  text-shadow: 1px 1px 0 #000;
}
#sse1
{
    /*You can decorate the menu's container, such as adding background images through this block*/
  
    height: 50px;
    padding: 0px;
    margin: 0px;
    border-radius: 0px;
    box-sizing: content-box;
}
#sses1
{
    margin:0;/*This will make the menu center-aligned. Removing this line will make the menu align left.*/
}
#sses1 table
{ 
    background-color: rgb(120, 97, 63);
    border-bottom: 10px solid white;
    position: absolute;
    padding:0;
    margin:0;
    width: 100%;
    table-layout:fixed;
    z-index: 0;
}
#sses1 td
{
    background-color: rgb(120, 97, 63);
    border:none;
    border-top-right-radius:10px 25px;
    border-top-left-radius: 10px 25px;
    text-align: center;
    width: 36%;
    padding:0;margin:0;
    transition: background-color 1s;
}


/*CSS for background bubble*/
#sses1 td.highlight
{
    background-color:#800;
    border-radius: 5px 5px;
    top:48px;
    height:8px;
    width:33%;
    z-index: 1;
    position: absolute;
    overflow:hidden;
}
#sses1 td a
{
    box-sizing: content-box;
    height:30px;
    padding-top: 13px;
    border:none;
    margin: 0;
    color: #fff;
    font: bold 20px 'Poppins' sans-serif;
    text-align: center;
    text-decoration: none;
    display: block;
    position: relative;
    z-index: 2;
    transition: color 1s;

}
#sses1 td:hover {
  background-color: rgb(255,255,255);
}
#sses1 td a:hover {
  color: #800
}
/*! Visit www.menucool.com for source code, other menu scripts and web UI controls
*  Please keep this notice intact. Thank you. */

var sse1 = function () {
    var rebound = 10; //set it to 0 if rebound effect is not prefered
    var slip, k;
    return {
        buildMenu: function () {
            var m = document.getElementById('sses1');
            var ul = m.getElementsByTagName("tr")[0];
            m.style.width = window.width+"px";
            var items = m.getElementsByTagName("td");
            var a = m.getElementsByTagName("a");

            slip = document.createElement("td");
            slip.className = "highlight";
            ul.appendChild(slip);

            var url = document.location.href.toLowerCase();
            k = -1;
            var nLength = -1;
            for (var i = 0; i < a.length; i++) {
                if (url.indexOf(a[i].href.toLowerCase()) != -1 && a[i].href.length > nLength) {
                    k = i;
                    nLength = a[i].href.length;
                }
            }

            //k reps where the bar returns to
            k = 1

            if (k > -1) {
                slip.style.width = items[k].offsetWidth + "px";
                slip.style.left = items[k].offsetLeft + "px";
                
            }
            else {
                slip.style.visibility = "hidden";
            }

            for (var i = 0; i < items.length - 1; i++) {
                items[i].onmouseover = function () {
                    if (k == -1) slip.style.visibility = "visible";
                    if (this.offsetLeft != slip.offsetLeft) {
                        sse1.move(this);
                    }
                }
            }

            m.onmouseover = function () {
                if (slip.t2)
                    slip.t2 = clearTimeout(slip.t2);
            };

            
        },
        move: function (target) {
            clearInterval(slip.timer);
            var direction = (slip.offsetLeft < target.offsetLeft) ? 1 : -1;
            slip.timer = setInterval(function () { sse1.mv(target, direction); }, 15);
        },
        mv: function (target, direction) {
            if (direction == 1) {
                if (slip.offsetLeft - rebound < target.offsetLeft)
                    this.changePosition(target, 1);
                else {
                    clearInterval(slip.timer);
                    slip.timer = setInterval(function () {
                        sse1.recoil(target, 1);
                    }, 15);
                }
            }
            else {
                if (slip.offsetLeft + rebound > target.offsetLeft)
                    this.changePosition(target, -1);
                else {
                    clearInterval(slip.timer);
                    slip.timer = setInterval(function () {
                        sse1.recoil(target, -1);
                    }, 15);
                }
            }
            this.changeWidth(target);
        },
        recoil: function (target, direction) {
            if (direction == -1) {
                if (slip.offsetLeft > target.offsetLeft) {
                    slip.style.left = target.offsetLeft + "px";
                    clearInterval(slip.timer);
                }
                else slip.style.left = slip.offsetLeft + 2 + "px";
            }
            else {
                if (slip.offsetLeft < target.offsetLeft) {
                    slip.style.left = target.offsetLeft + "px";
                    clearInterval(slip.timer);
                }
                else slip.style.left = slip.offsetLeft - 2 + "px";
            }
        },
        changePosition: function (target, direction) {
            if (direction == 1) {
                //following +1 will fix the IE8 bug of x+1=x, we force it to x+2
                slip.style.left = slip.offsetLeft + Math.ceil(Math.abs(target.offsetLeft - slip.offsetLeft + rebound) / 10) + 1 + "px";
            }
            else {
                //following -1 will fix the Opera bug of x-1=x, we force it to x-2
                slip.style.left = slip.offsetLeft - Math.ceil(Math.abs(slip.offsetLeft - target.offsetLeft + rebound) / 10) - 1 + "px";
            }
        },
        changeWidth: function (target) {
            if (slip.offsetWidth != target.offsetWidth) {
                var diff = slip.offsetWidth - target.offsetWidth;
                if (Math.abs(diff) < 4) slip.style.width = target.offsetWidth + "px";
                else slip.style.width = slip.offsetWidth - Math.round(diff / 3) + "px";
            }
        }
    };
} ();

if (window.addEventListener) {
    window.addEventListener("load", sse1.buildMenu, false);
}
/*else if (window.attachEvent) {
    window.attachEvent("onload", sse1.buildMenu);
}
else {
    window["onload"] = sse1.buildMenu;
}*/

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.