<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="house"></div>
<div class="search"></div>
<div class="photo"></div>
<div class="likes"></div>
<div class="profile"></div>
</div>
@import url("https://fonts.googleapis.com/css?family=Lato");
* {
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
body {
background: #fff;
font-family: "Lato", sans-serif;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100vw;
height: 100vh;
}
body .container {
background: #fff;
width: 640px;
height: 96px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
text-align: center;
}
body .container .house,
body .container .search,
body .container .photo,
body .container .likes,
body .container .profile {
height: 96px;
width: 96px;
}
body .container .house:hover,
body .container .search:hover,
body .container .photo:hover,
body .container .likes:hover,
body .container .profile:hover {
cursor: pointer;
}
body .container .house {
background: url("http://frolovoleg.ru/images/sketch-menu/house.gif") no-repeat center;
background-size: 100%;
}
body .container .search {
background: url("http://frolovoleg.ru/images/sketch-menu/search.gif") no-repeat center;
background-size: 100%;
}
body .container .photo {
background: url("http://frolovoleg.ru/images/sketch-menu/photo.gif") no-repeat center;
background-size: 100%;
}
body .container .likes {
background: url("http://frolovoleg.ru/images/sketch-menu/likes.gif") no-repeat center;
background-size: 100%;
}
body .container .profile {
background: url("http://frolovoleg.ru/images/sketch-menu/profile.gif") no-repeat center;
background-size: 100%;
}
(function() {
$(document).ready(function() {
var startStateFunc;
startStateFunc = function() {
$(".house").css({
"background": "url(http://frolovoleg.ru/images/sketch-menu/house.gif), no-repeat, center",
"background-size": "100%"
});
$(".search").css({
"background": "url(http://frolovoleg.ru/images/sketch-menu/search.gif), no-repeat, center",
"background-size": "100%"
});
$(".photo").css({
"background": "url(http://frolovoleg.ru/images/sketch-menu/photo.gif), no-repeat, center",
"background-size": "100%"
});
$(".likes").css({
"background": "url(http://frolovoleg.ru/images/sketch-menu/likes.gif), no-repeat, center",
"background-size": "100%"
});
return $(".profile").css({
"background": "url(http://frolovoleg.ru/images/sketch-menu/profile.gif), no-repeat, center",
"background-size": "100%"
});
};
$(".house").on("click", function() {
startStateFunc();
return $(this).css({
"background": "url(http://frolovoleg.ru/images/sketch-menu/house_active.gif), no-repeat, center",
"background-size": "100%"
});
});
$(".search").on("click", function() {
startStateFunc();
return $(this).css({
"background": "url(http://frolovoleg.ru/images/sketch-menu/search_active.gif), no-repeat, center",
"background-size": "100%"
});
});
$(".photo").on("click", function() {
startStateFunc();
return $(this).css({
"background": "url(http://frolovoleg.ru/images/sketch-menu/photo_active.gif), no-repeat, center",
"background-size": "100%"
});
});
$(".likes").on("click", function() {
startStateFunc();
return $(this).css({
"background": "url(http://frolovoleg.ru/images/sketch-menu/likes_active.gif), no-repeat, center",
"background-size": "100%"
});
});
return $(".profile").on("click", function() {
startStateFunc();
return $(this).css({
"background": "url(http://frolovoleg.ru/images/sketch-menu/profile_active.gif), no-repeat, center",
"background-size": "100%"
});
});
});
}).call(this);
