new UI Home page

by myrluk3

HTML

<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.css">
<div class="left-menu-container" style="float:left;">
  <i class="fa fa-bars"></i>
  <div class="left-menu">
    <div class="menu">Home</div>
    <div class="menu">Control Panel</div>
    <div class="menu">Report Builder</div>
    <div class="menu">Dashboard</div>
    <div class="menu">Notification Center</div>
    <div class="sub-menu">Management</div>
    <div class="sub-menu">Distribution</div>
    <div class="menu">History</div>
  </div>
</div>

<div class="right-menu-container" style="float:right;">
  <i class="fa fa-cog" style="float:right;"></i>
  <div class="right-menu">
    <br/>
    <table cellspacing="2">
      <tbody>
        <tr>
          <td>
            <div class="options">
              Log out
            </div>
          </td>
          <td>
            
          </td>
        </tr>
        <tr>
          <td>

          </td>
          <td>

          </td>
        </tr>
      </tbody>
    </table>

  </div>
</div>

<div class="toolbar">


  <i id="toggle" class="fa fa-toggle-off" title="Design mode"></i>

</div>

CSS

/* ====================== MAIN ====================== */

hr {
  margin: 10px 0;
}

.rotate {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=3);
}


/* ====================== MENU ====================== */

.right-menu-container i,
.left-menu-container i {
  font-size: 1em;
  cursor: pointer;
  padding: 13px;
  color: rgb(66, 139, 202);
  background-color: white;
}

.left-menu {
  height: 500px;
  width: 131px;
  border-right: 1px solid lightgrey;
}

.left-menu .menu:first-child {
  border-top: 1px solid white;
}

.left-menu .menu {
  color: white;
  cursor: pointer;
  background-color: rgb(66, 139, 202);
  padding: 5px;
  border-bottom: 1px solid white;
  width: 130px;
}

.left-menu .sub-menu {
  color: rgb(66, 139, 202);
  cursor: pointer;
  background-color: white;
  padding: 5px;
  border-top: 1px solid white;
  margin-left: 5px;
}

.left-menu .menu:hover {
  color: rgb(66, 139, 202);
  background-color: white;
  border-bottom: 1px solid rgb(66, 139, 202);
}

.left-menu .sub-menu:hover {
  color: white;
  background-color: rgb(66, 139, 202);
}

.right-menu {
  width: 200px;
  height: 500px;
  border-left: 1px solid lightgrey;
  margin-top: 40px;
}

.right-menu div,
.right-menu select {
  font-size: 12px;
  color: #666;
}

.options {
  padding: 10px;
}


/* ====================== TOOLBAR ====================== */

.toolbar {
  margin: 0 40px;
  padding: 10px 5px;
  background-color: rgb(66, 139, 202);
}

.toolbar .ol-sum:before {
  content: 'M';
  font-family: tahoma;
  position: fixed;
  top: -10px;
  left: 4px;
  font-size: 1.1em;
}

.toolbar i {
  color: white;
  width: 10px;
  margin: 0 10px;
  font-size: 1em;
  cursor: pointer;
}

.toolbar > i:hover {
  /* color: orange; */
}

JavaScript

$('.fa-bars').click(function() {
  $('.left-menu').animate({
    width: 'toggle'
  });
});

$('.fa-cog').click(function() {
  $('.right-menu').animate({
    width: 'toggle'
  });
});

$('.fa-bars').trigger('click');
$('.fa-cog').trigger('click');

$('#toggle').click(function() {
  $(this).toggleClass('fa-toggle-on');
  $(this).toggleClass('fa-toggle-off');
});