toolbar

by otorineko6790

HTML

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/gh/otorineko6790/homeworkSystem/jquery.toolbar.min.js"></script>
<link href="https://cdn.jsdelivr.net/gh/otorineko6790/homeworkSystem/jquery.toolbar.css" rel="stylesheet" />


<div id="element" class="btn-toolbar"><i class="fa fa-cogs"></i></div>
<div id="toolbar-options" class="hidden">
  <a href="#"><i class="fa fa-plane"></i></a>
  <a href="#"><i class="fa fa-car"></i></a>
  <a href="#"><i class="fa fa-bicycle"></i></a>
</div>

CSS

#element {
  margin: auto;
  position: absolute;
  top: 50px;
  left: 50px;
  padding: 10px;
}

JavaScript

$('#element').toolbar({
  content: '#toolbar-options',
});