JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8" />
<title>Portifolio</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="app.js"></script>
<!-- BOTOES DE NAVEGAÇÃO -->
<div class="menu">
<!-- BOTOES PRINCIPAIS -->
<div class="mainBtn">
<div id="menuBurguer"></div>
</div>
<!-- BOTOES SECUNDARIOS -->
<div class="subBtn">
<div class="listBtn" id="btn1"></div>
<div class="listBtn" id="btn2"></div>
<div class="listBtn" id="btn3"></div>
</div>
</div>
</body>
</html>
CSS
.mainBtn {
margin-top: 25px;
margin-left: 25px;
height: 80px;
width: 80px;
background-color: tomato;
border-radius: 50%
}
.subBtn {
top: 120px;
left: 130px;
position: relative
}
.listBtn {
margin: 5px;
height: 60px;
width: 60px;
background-color: #C5D1EB;
border-radius: 50%;
/* Esse position aqui quem faz tudo funcionar */
position: relative
}
JavaScript
var estados = {
STATE1: 0,
STATE2: 1
};
function main() {
$('.mainBtn').click(function(){
$('#btn1').toggle(
function () {
$(this).animate({left:'250px'}, 300);
},
function () {
$(this).animate({right:'250px'}, 300);
}
);
});
}
$(document).ready(main);