<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<div class="menu">
<a class="yellow" href="#">Home</a>
<a class="green" href="#">Blog</a>
<a class="pink" href="#">Kureshki</a>
<a class="purple" href="#">Themes</a>
<a class="blue" href="#">Madenca</a>
<a class="orange" href="#">Contact</a>
</div>
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600);
* {
margin: 0;
padding: 0;
}
body {
background: #111;
color: #fff;
font-family: 'Open sans', sans-serif;
font-weight: 300;
font-size: 20pt;
}
a {
color: #fff;
text-decoration: none;
}
.menu {
width: 570px;
margin: 30px auto;
}
.menu a {
width: 180px;
line-height: 180px;
display: block;
margin: 5px;
text-align: center;
float: left;
opacity: 0.3;
}
.yellow { background: #fdd22a; }
.blue { background: #009fe3; }
.purple { background: #574696; }
.orange { background: #ee7202; }
.pink { background: #e61c67; }
.green { background: #96c11f; }
$(document).ready(function() {
$(document).ready(function() {
$('.menu a').hover(function() {
$(this).stop().animate({
opacity: 1
}, 200);
}, function() {
$(this).stop().animate({
opacity: 0.3
}, 200);
});
});