Menu Swung

Coloque este primeiro código após </style>:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">


Coloque este código entre <style> e </style>:


/*              MENU POR MR. WAFIOSA - DON'T COPY.
                      MANTENHA OS CRÉDITOS
                            ♡ ❤ ♡
                          ••••••••••                                         */

.mr-menu {position:fixed; margin-left:120px; margin-top:150px; width:500px; height:auto; display:inline-block; cursor: hand; float:left; z-index:9999999;}
.mr-menu a{display:inline-block; width:auto; height:14px; line-height:16px; margin:5px; text-align:center; padding:5px; color:#000; font-family:'Montserrat'; font-size:9px; text-align:center; text-transform:uppercase; letter-spacing:1px; background:#beab9a; box-shadow:inset 1px 1px 1px rgba(255, 255, 255, .3), inset -1px -1px 1px rgba(0, 0, 0, .3); transition:1s;}
.mr-menu a:hover {letter-spacing:2px; animation: shaken .3s linear .1s infinite alternate; color: #000; transform: rotate(-10deg); text-shadow: none;}

@keyframes shaken {0% {transform: rotate(-10deg);} 100% {transform: rotate(10deg);}}


Coloque este código após <body> ou <body onkeydown=“return false”>:


<!--     MENU POR MR. WAFIOSA - DON'T COPY.      -->
<div class="mr-menu">
<a href="/"><i class="fa fa-home"></i> HOME </a>
<a href="/"><i class="fa fa-envelope"></i> ASK ME </a>
<a href="/"><i class="fa fa-pencil"></i> SUBMIT </a>
<a href="/"><i class="fa fa-tags"></i> AUTHORSHIPS </a>
<a href="/"><i class="fa fa-star"></i> BLOGROLL </a>
</div>
<!--    FIM DO MENU - MANTENHA OS CRÉDITOS.    -->