<ul class="menu_list">
<li id="one"><a href="#" onclick="clicked('one');">Home</a></li>
<li id="two"class="current"><a href="#" onclick="clicked('two');">About Us</a></li>
<li id="three"><a href="#" onclick="clicked('three');">Blog</a></li>
<li id="four"><a href="#" onclick="clicked('four');">Services</a></li>
<li id="five"><a href="#" onclick="clicked('five');">Products</a></li>
<li id="six"><a href="#" onclick="clicked('six');">Contact</a></li>
</ul>
@import url(https://fonts.googleapis.com/css?family=Raleway:400,500);
body {
background-color: #212121;
}
.menu_list {
font-family: 'Raleway', Arial, sans-serif;
text-align: center;
text-transform: uppercase;
font-weight: 500;
letter-spacing: 1px;
}
.menu_list * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.35s ease;
transition: all 0.35s ease;
}
.menu_list li {
display: inline-block;
list-style: outside none none;
margin: 0.5em 1em;
padding: 0;
}
.menu_list a {
padding: 0.5em 0.8em;
color: rgba(255, 255, 255, 0.5);
position: relative;
text-decoration: none;
}
.menu_list a:before,
.menu_list a:after {
height: 14px;
width: 14px;
position: absolute;
content: '';
-webkit-transition: all 0.35s ease;
transition: all 0.35s ease;
opacity: 0;
}
.menu_list a:before {
right: 0;
top: 0;
border-right: 3px solid #9b59b6;
border-top: 3px solid #9b59b6;
-webkit-transform: translate(-100%, 50%);
transform: translate(-100%, 50%);
}
.menu_list a:after {
left: 0;
bottom: 0;
border-left: 3px solid #9b59b6;
border-bottom: 3px solid #9b59b6;
-webkit-transform: translate(100%, -50%);
transform: translate(100%, -50%);
}
.menu_list a:hover,
.menu_list .current a {
color: #ffffff;
}
.menu_list a:hover:before,
.menu_list .current a:before,
.menu_list a:hover:after,
.menu_list .current a:after {
-webkit-transform: translate(0%, 0%);
transform: translate(0%, 0%);
opacity: 1;
}
function clicked(elem_id){
var elements = document.getElementsByClassName('current');
elements[0].classList.remove('current');
document.getElementById(elem_id).classList.add('current');
}