Dynamic Dashboard Layout with CSS & jQuery

In this example below you will see how to do a Dynamic Dashboard Layout with CSS & jQuery with some HTML / CSS and Javascript

Fixed Layout with custom scroll bar.

Thumbnail
This awesome code was written by ravenous, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright ravenous ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Dynamic Dashboard Layout with CSS & jQuery</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>


    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  
      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      /* Import fonts */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic);

@import url(http://weloveiconfonts.com/api/?family=entypo);

/* Entypo */
[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
}

* {
  box-sizing:border-box;
  -moz-box-sizing:border-box;
}
html, body {
  height:100%;
}
body {
    color: #797979;
    background: #EEE;
    font-family: 'Open Sans', sans-serif;
    font-size:13px;
}
a:link, a:visited, a:active {
	color:#333;
	text-decoration:none;
}
a:hover {
	color:crimson;
}
::selection {
    background: crimson;
    color: #fff;
}
.wrapper {
    width: 100%;
    height: 100%;
}
header {
  min-height:55px;
  background:#333;
  position:fixed;
  left:0;
  right:0;
  z-index:1002;
}
/* NAVIGATION */
nav {
	width: 80px;
	height: 100%;
	position: fixed;
	background: #777;
	padding-top:85px;
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	z-index:1003;
}
nav:after {
	content:'';
	position:absolute;
	top:0;
	width:100%;
	height:55px;
	background:#666;
}
nav ul {
  position:relative;
}
nav ul li {
	padding:10px;
	cursor: pointer;
	position:relative;
  transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
}
/* TEST NAV */
nav ul li [class*="entypo-"] {
  display: inline;
  font-size: 30px;
  position:relative;
  left:15px;
  transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
}
nav ul .menu-item {
  display:none;
  padding-left:10px;
  font-size:11px;
  text-transform:uppercase;
}
nav:hover ul [class*="entypo-"] {
  left:0;
  font-size:15px;
}
/* TEST NAV END */
nav ul li:hover {
	background: crimson;
}
nav ul li:hover:before {
  content: '';
  border-color: transparent #EEE transparent transparent ;
  right: 0;
  border-width:10px;
  position: absolute;
  border-style: solid;
  top: 8px;
}
nav a:link, nav a:visited, nav a:active, nav a:hover {
	color:#EEE;
}
/* NAVIGATION SUB MENU */

nav .subnav {
  display:none;
  background:#666;
}
nav .subnav li {
  padding:10px;
  font-size:10px;
  text-transform:uppercase;
}
nav .subnav li:hover {
  background: crimson;
  border-left: 10px solid #B31131;
}
nav .subnav li:hover:before {
  top: 6px;
}
nav .subnav li [class*="entypo-"] {
  top:0;
  left:0;
  font-size:11px;
}
/* HEADER USERPANEL */

header .userpanel{
  width: 280px;
  height: 100%;
  position: absolute;
  top: 0;
  right: 50px;
  background: #373939;
  cursor: pointer;
  z-index: 100;
}
header .userpanel .user {
  width:100%;
  height:100%;
  position:relative;
  text-align:center;
  color:white;
}
header .userpanel .user > div:nth-child(-n+2) {
  border-right: 2px solid #333;
}
header .userpanel .notification {
  width:60px;
  height:100%;
  line-height:60px;
  float:left;
  display:block;
  position:relative;
}
header .userpanel .notification [class*="entypo-"] {
  font-size:17px;
  margin-right:13px;
}
header .userpanel .notification .number {
width: 20px;
height: 20px;
background: #2890E6;
border-radius: 5px;
line-height: 20px;
position: absolute;
top: 12px;
right:14px;
z-index: -1;
}
header .userpanel .picture {
  width:60px;
  height:100%;
  line-height:55px;
  float:left;
  display:block;
  position:relative;
}
header .userpanel .picture img {
  width:100%;
  height:100%;
  padding:5px;
  border-radius:7px;
  overflow:hidden;
  filter: grayscale(0.8);
  -webkit-filter: grayscale(0.8);
}
header .userpanel .picture img:hover {
  filter: grayscale(0);
  -webkit-filter: grayscale(0);
}
header .userpanel .name {
  width:160px;
  height:100%;
  line-height:55px;
  float:left;
  display:block;
  position:relative;
  text-align:left;
  padding:0 10px;
}
header .userpanel .name [class*="entypo-"] {
  position: absolute;
  font-size:20px;
  right:15px;
  transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
}
header .userpanel .drop {
  width:160px;
  min-height:100px;
  display:none;
  position:absolute;
  top:55px;
  right:0;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  background:crimson;
}
header .userpanel .drop:before {
  content:'';
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 9px solid crimson;
  left: 15px;
  top:-8px;
  position:absolute;
}
/* CONTENT */

.main-content {
  height: calc(100% - 55px);
  margin-left:80px;
   transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
}
.container {
  width: 100%;
  height:100%;
  display: inline-block;
  margin-top: 55px;
  padding: 15px;
  background:#EEE;
}
.nav-hover {
  width:150px;
}
.push {
  margin-left:150px;
}
.arrow {
  transform:rotate(180deg);
  -webkit-transform:rotate(180deg);
  -moz-transform:rotate(180deg);
}
.active {
  background:#B31131!important;
}
    </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>

  <section class="wrapper">
  <header>
    <section class="userpanel">
      <div class="user">
        <div class="notification"><span class="entypo-bell"></span><span class="number">6</span></div>
        <div class="picture"><img src="http://lorempixel.com/output/people-q-c-400-400-9.jpg" alt="User Name" /></div>
        <div class="name">Nombre Usuario<span class="entypo-down-open"></span></div>
        <div class="drop"></div>
      </div>
    </section>
  </header>
  <aside>
<nav role='navigation'>
  <ul>
   <li><a href="#"><span class="entypo-rocket"></span><span class="menu-item">Escritorio</span></a></li>
	<li><a href="#"><span class="entypo-archive"></span><span class="menu-item">Clientes</span></a></li>
	<li><a href="#"><span class="entypo-briefcase"></span><span class="menu-item">Proyectos</span></a></li>
	<li><a href="#"><span class="entypo-user"></span><span class="menu-item">Usuarios</span></a></li>
	<li class="has-sub"><a href="#"><span class="entypo-battery"></span><span class="menu-item">Alimentadores</span></a>
    </li>
    <ul class="subnav">
		<li><a href="#"><span class="entypo-right-open"></span> <span>Cargos</span></a></li>
		<li><a href="#"><span class="entypo-right-open"></span> <span>Niveles de Usuario</span></a></li>
		</ul>
  </ul>
</nav>  
  </aside>
  <section class="main-content">
    <div class="container">
    </div>
  </section>
  <footer></footer>
</section>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ficha.testhd.net/js/jquery.nicescroll.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/ravenous/dynamic-dashboard-layout-with-css-andamp-jquery-tAJuw */
/* Import fonts */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic);

@import url(http://weloveiconfonts.com/api/?family=entypo);

/* Entypo */
[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
}

* {
  box-sizing:border-box;
  -moz-box-sizing:border-box;
}
html, body {
  height:100%;
}
body {
    color: #797979;
    background: #EEE;
    font-family: 'Open Sans', sans-serif;
    font-size:13px;
}
a:link, a:visited, a:active {
	color:#333;
	text-decoration:none;
}
a:hover {
	color:crimson;
}
::selection {
    background: crimson;
    color: #fff;
}
.wrapper {
    width: 100%;
    height: 100%;
}
header {
  min-height:55px;
  background:#333;
  position:fixed;
  left:0;
  right:0;
  z-index:1002;
}
/* NAVIGATION */
nav {
	width: 80px;
	height: 100%;
	position: fixed;
	background: #777;
	padding-top:85px;
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	z-index:1003;
}
nav:after {
	content:'';
	position:absolute;
	top:0;
	width:100%;
	height:55px;
	background:#666;
}
nav ul {
  position:relative;
}
nav ul li {
	padding:10px;
	cursor: pointer;
	position:relative;
  transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
}
/* TEST NAV */
nav ul li [class*="entypo-"] {
  display: inline;
  font-size: 30px;
  position:relative;
  left:15px;
  transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
}
nav ul .menu-item {
  display:none;
  padding-left:10px;
  font-size:11px;
  text-transform:uppercase;
}
nav:hover ul [class*="entypo-"] {
  left:0;
  font-size:15px;
}
/* TEST NAV END */
nav ul li:hover {
	background: crimson;
}
nav ul li:hover:before {
  content: '';
  border-color: transparent #EEE transparent transparent ;
  right: 0;
  border-width:10px;
  position: absolute;
  border-style: solid;
  top: 8px;
}
nav a:link, nav a:visited, nav a:active, nav a:hover {
	color:#EEE;
}
/* NAVIGATION SUB MENU */

nav .subnav {
  display:none;
  background:#666;
}
nav .subnav li {
  padding:10px;
  font-size:10px;
  text-transform:uppercase;
}
nav .subnav li:hover {
  background: crimson;
  border-left: 10px solid #B31131;
}
nav .subnav li:hover:before {
  top: 6px;
}
nav .subnav li [class*="entypo-"] {
  top:0;
  left:0;
  font-size:11px;
}
/* HEADER USERPANEL */

header .userpanel{
  width: 280px;
  height: 100%;
  position: absolute;
  top: 0;
  right: 50px;
  background: #373939;
  cursor: pointer;
  z-index: 100;
}
header .userpanel .user {
  width:100%;
  height:100%;
  position:relative;
  text-align:center;
  color:white;
}
header .userpanel .user > div:nth-child(-n+2) {
  border-right: 2px solid #333;
}
header .userpanel .notification {
  width:60px;
  height:100%;
  line-height:60px;
  float:left;
  display:block;
  position:relative;
}
header .userpanel .notification [class*="entypo-"] {
  font-size:17px;
  margin-right:13px;
}
header .userpanel .notification .number {
width: 20px;
height: 20px;
background: #2890E6;
border-radius: 5px;
line-height: 20px;
position: absolute;
top: 12px;
right:14px;
z-index: -1;
}
header .userpanel .picture {
  width:60px;
  height:100%;
  line-height:55px;
  float:left;
  display:block;
  position:relative;
}
header .userpanel .picture img {
  width:100%;
  height:100%;
  padding:5px;
  border-radius:7px;
  overflow:hidden;
  filter: grayscale(0.8);
  -webkit-filter: grayscale(0.8);
}
header .userpanel .picture img:hover {
  filter: grayscale(0);
  -webkit-filter: grayscale(0);
}
header .userpanel .name {
  width:160px;
  height:100%;
  line-height:55px;
  float:left;
  display:block;
  position:relative;
  text-align:left;
  padding:0 10px;
}
header .userpanel .name [class*="entypo-"] {
  position: absolute;
  font-size:20px;
  right:15px;
  transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
}
header .userpanel .drop {
  width:160px;
  min-height:100px;
  display:none;
  position:absolute;
  top:55px;
  right:0;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  background:crimson;
}
header .userpanel .drop:before {
  content:'';
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 9px solid crimson;
  left: 15px;
  top:-8px;
  position:absolute;
}
/* CONTENT */

.main-content {
  height: calc(100% - 55px);
  margin-left:80px;
   transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
}
.container {
  width: 100%;
  height:100%;
  display: inline-block;
  margin-top: 55px;
  padding: 15px;
  background:#EEE;
}
.nav-hover {
  width:150px;
}
.push {
  margin-left:150px;
}
.arrow {
  transform:rotate(180deg);
  -webkit-transform:rotate(180deg);
  -moz-transform:rotate(180deg);
}
.active {
  background:#B31131!important;
}

/*Downloaded from https://www.codeseek.co/ravenous/dynamic-dashboard-layout-with-css-andamp-jquery-tAJuw */
// Side Menu

$(document).ready(function(){
$('nav').hover(function(e){
  e.preventDefault();
  e.stopPropagation();
    $('nav').addClass('nav-hover');
    $('.main-content').addClass('push');
    $('nav ul .menu-item').stop().fadeIn(1200);
},function(){
    $('.subnav').fadeOut('fast');
    $('.menu-item').hide();
    $('nav').removeClass('nav-hover');
    $('.main-content').removeClass('push');
 
});
  
// Display Sub Menu
  
  $('nav ul .has-sub').click(function(e){
    e.preventDefault();
    e.stopPropagation();
    $('.subnav').filter(':not(:animated)').slideToggle();
  });
  
// Header User Panel
  
 $('header .userpanel .name').click( function(e){
          e.preventDefault();
          e.stopPropagation();
        $('header .userpanel .name').toggleClass('active');
        $('header .userpanel .name span').toggleClass('arrow');
        $("header .userpanel .drop").stop().fadeToggle(500); 
    });
$('.main-content').click( function(){
        $('header .userpanel .name').removeClass('active');
        $('header .userpanel .name span').removeClass('arrow');
        $("header .userpanel .drop").filter(':not(:animated)').fadeOut();
    });
 
// Container Scroll Bar
  
   $("html").niceScroll({styler:"fb",cursorcolor:"#e8403f", cursorwidth: '6', cursorborderradius: '10px', background: '#404040', spacebarenabled:false,  cursorborder: '', zindex: '1000'});
});

Comments