kokonai ju mp menu

/* credit to intruosers for this menu! */

<style>

@font-face {
font-family: lovely;
src: url(https://dl.dropbox.com/s/xde2bkhiie1bm8r/LovelyRegular.ttf);
}

/* this centers everything and also controls how big the image is */
#contain {
border-width:7px;
border-style:solid;
border-image: url("https://i.imgur.com/NJa4bp2.png") 8 fill round;
max-width: 300px; /* controls how big the image can get at max */
margin: 0 auto; /* centers the image */
position: relative; /* so the links are properly spaced */
}

/* holds the image */
#wow {
max-width: 100%; /* no clue i think i put this here out of habit */
position: relative; /* so that i can change the z index */
z-index: 5; /* puts the image in front of the links */
border: 1px solid white;
}

/* overall link css */
#links {
font-family: lovely;
color: white;
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
text-decoration: none;
font-size: 2.5em;
position: absolute; /* so i can put the links under the image */
width: 200px; /* controls how wide the links are */
top: 50%; /* centering */
transform: translateY(-50%); /* centering */
left: 45%; /* peek out from behind the image */
z-index: 1; /* habit i think */
}

/* css for each link */
#links a {
text-decoration:none;
display: block; /* so they aren't side by side*/
margin-bottom: 9px; /* spaces them out */
background: #FACAE7;
padding: 5px;
border: 1px solid white;
transition: all 0.5s ease;
}

/* when the links are hovered */
#links a:hover {
transform: translateX(122px); /* makes them pop out */
transition: all 0.5s ease;
}

/* the last link */
#links a:last-child {
margin-bottom: 0px; /* so the last link doesn't have extra space */
}

/* whooooo boy this is how i tried to make it mobile friendly... you'll probably have to mess with this in order to change it for your specific image and text so this'll probably require some code knowledge beforehand */
@media (max-width: 475px) {
#contain {
max-width: 250px;
}
#links {
width: 150px;
left: 50%;
font-size: 2em;
}
#links a {
margin-bottom: 12px;
}
#links a:hover {
transform: translateX(90px);
}
}

@media (max-width: 375px) {
#contain {
max-width: 200px;
}
#links {
width: 120px;
left: 50%;
font-size: 1.75em;
}
#links a {
margin-bottom: 8px;
}
#links a:hover {
transform: translateX(75px);
}
}
</style>
</head>
<body>
<div id="contain">
<div id="wow">
<img src="INSERT IMAGE LINK" style="display:block;" width="100%" height="auto">
</div>
<div id="links">
<a href="/#a">one</a>
<a href="/#b">two</a>
<a href="/#c">three</a>
<a href="/#home">four</a>
</div>
</div>
</body>