Artem_A,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body{
background-color: #FF00FF;
}
.header_menu a {
color: #fff;
font: 18px 'Open Sans';
text-decoration: none;
padding: 8px 17px;
margin: 0px;
}
.header_menu .active {
padding: 8px 17px;
border: 1px solid #fff;
border-radius: 50px;
margin: -1px;
opacity: 0;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function(){
$(document.body).on("click", ".header_menu a", function(){
$('.header_menu .active').removeClass('active');
$(this).css({opacity: 0}).addClass('active').stop(true,true).fadeTo( "slow", 1, function(){
});
});
});
</script>
</head>
<body>
<nav class="header_menu">
<a href="#">Hello</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Portfolio</a>
<a href="#">Team</a>
<a href="#">Blog</a>
<a href="#">Contact</a>
</nav>
</body>
</html>