www.ambanadi.com
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - Responsive demo</title>
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css'>
<link rel='stylesheet' href='https://s3-us-west-2.amazonaws.com/s.cdpn.io/4579/bootstrap-table.css'><link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<body>
  <div id='wrapper'>
		<nav class='navbar navbar-inverse navbar-fixed-top' role='navigation'>
			<div class='navbar-header'>
				<button type='button' class='navbar-toggle' data-toggle='collapse' data-target='.navbar-hamburger-delicious'>
					<span class='sr-only'>Toggle navigation</span>
					<span class='icon-bar'></span>
					<span class='icon-bar'></span>
					<span class='icon-bar'></span>
				</button>
				<a class='navbar-brand' >Responsive Demo</a>
			</div>

			<div class='collapse navbar-collapse navbar-hamburger-delicious'>
				<ul class='nav navbar-nav side-nav fadeInLeft'>
					<li class='toggle-nav visible-lg visible-md visible-sm'><a><i class='fa fa-lg fa-arrow-left'></i>Hide Menu</a></li>
					<li class='dashboard'><a href='#'><i class='fa fa-lg fa-dashboard'></i>Dash</a></li>
					<li class='active docs'><a href='#docs'><i class='fa fa-lg fa-folder-open'></i>Docs</a></li>
					<li class='admin'><a href='#admin'><i class='fa fa-lg fa-user'></i>Admin</a></li>
					<li class='divider'><hr></li>
					<li class='person-lookup'><a href='#personLookup'><i class='fa fa-lg fa-phone-square'></i>Person Lookup</a></li>
					<li class='software-support'><a href='#softwareSupport'><i class='fa fa-lg fa-question-circle'></i>Support</a></li>
					<li class='dashboard-updates'><a href='#dashboardUpdates'><i class='fa fa-lg fa-arrow-up'></i>Updates</a></li>
					<li class='print'><a><i class='fa fa-lg fa-print'></i>Print</a></li>
				</ul>
				<ul class='nav navbar-nav navbar-right navbar-user'>
					<li class='dropdown user-dropdown'>
							<a href='#' class='dropdown-toggle' data-toggle='dropdown'><span class="js-user-name">Ryan Gill</span><b class='caret'></b></a>
							<ul class='dropdown-menu'>
									<li class='settings'><a href='#settings'><i class='fa fa-lg fa-gear'></i> Settings</a></li>
							</ul>
					</li>
				</ul>
			</div>

		</nav>

		<div id='page-wrapper'>
			<div class="container-fluid">
				<div class="row">
					<div class="col-lg-12 col-md-12 col-sm-12">
						<h2>Documents</h2>
            <hr />
					</div>
				</div>
				<div class="row">
					<div class="col-lg-12 col-md-12 col-xs-12 js-content">
            <div class="docs-table">
              <table data-toggle="table" data-show-toggle="true" data-show-columns="true" data-search="true" data-striped="true">
                <thead>
                  <tr>
                    <th data-field="Type">Type</th>
                    <th data-field="Name">Name</th>
                    <th data-field="Description">Description</th>
                    <th data-field="Tags">Tags</th>
                    <th data-field="LastViewed">Last Viewed</th>
                    <th data-field="Expiration">Expiration</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td><i class="fa fa-file-excel-o"></i></td>
                    <td>Remaining Tasks for this app</td>
                    <td>This is a list of all the remaining tasks required to complete this app</td>
                    <td>Responsive, RWD</td>
                    <td>an hour ago</td>
                    <td>Sep 08, 2015</td>
                  </tr>
                  <tr>
                    <td><i class="fa fa-file-powerpoint-o"></i></td>
                    <td>EVAMs presentation</td>
                    <td>This is presentation for the EVAM occuring later this month</td>
                    <td>EVAM</td>
                    <td>a day ago</td>
                    <td>Sep 13, 2015</td>
                  </tr>
                  <tr>
                    <td><i class="fa fa-file-word-o"></i></td>
                    <td>Xmas Party list</td>
                    <td>List of all the people who will be attending the holiday party</td>
                    <td>list</td>
                    <td>a few mins ago</td>
                    <td>Dec 25, 2015</td>
                  </tr>
                </tbody>
              </table>
            </div>
					</div>
				</div>
			</div>

		</div>

	</div>
</body>
<!-- partial -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/4579/bootstrap.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/4579/bootstrap-table.js'></script><script  src="./script.js"></script>

</body>
</html>

Css

$docs: rgb(34, 153, 81);
$admin: rgb(0,0,0);
$personLookup: rgb(125, 212, 209);
$softwareSupport: rgb(233, 105, 30);
$dashboardUpdates: rgb(164, 106, 206);
$settings: rgb(51, 51, 153);
$white: rgb(255,255,255);
$print: rgb(0,0,0);
$nav-toggle-duration: 500ms;

.rotate-180-deg {
	transform: rotate(180deg);
}

hr {
  margin: 5px 0;
}



.docs-table {
  tbody{
    i {
      display: inline-block;
      margin: 0 auto;
      font-size: 2em;
      width: 100%;
      text-align: center;
    }  
  }
  
}




ul {
  li i {
    display: inline-block;
    margin-right: 10px;
  }
}

li.divider {
	width: 100%;
	hr {
		width: 90%;
		text-align: center;
	}
}

li.sub-li {
	font-size: 0.8em;
}



.navbar.navbar-inverse.navbar-fixed-top {
	background-color: $white;
	border: none;

	.navbar-brand:hover {
		color: #777;
	}
}

.navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse {
	max-height: 500px;
}

.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
	border-top: none;
}

.nav.navbar-nav.side-nav {
	background-color: $white;

	transition: width $nav-toggle-duration ease;

	// Nice sexy silky peanut buttery smoothness
	transform: translate3d(0,0,0);

	&.hide-link-text { // used in combination with #wrapper.extended
		width: 48px;
		left: 0;
		margin-left: 0;
	}
}

.navbar-nav {

	li {
		a { transition: all 250ms ease; }

		&:not(.divider):hover {
			cursor: pointer;
		}

		&.toggle-nav {

			i{
				transition: transform $nav-toggle-duration linear;
			}

			i.rotate-180-deg {
				transform-origin: 10px 8px; // looks funny but I kind of like it ;)
			}
		}
	}

	li > a {
		line-height: 35px;

		transition: all 250ms ease;

		i {
			min-width: 24px;
			width: 24px;
			margin-right: 10px;
			padding-right: 10px;
			text-align: center;
		}
	}

	li.active, li.active:hover{
		&.docs > a {
			background-color: $docs;
			border-color: darken($docs, 10%);
		}
		&.admin > a {
			background-color: $admin;
			border: 1px solid darken($admin, 10%);
		}
		&.person-lookup > a {
			background-color: $personLookup;
			border: 1px solid darken($personLookup, 10%);
		}
		&.software-support > a {
			background-color: $softwareSupport;
			border: 1px solid darken($softwareSupport, 10%);
		}
		&.dashboard-updates > a {
			background-color: $dashboardUpdates;
			border: 1px solid darken($dashboardUpdates, 10%);
		}
		&.print > a {
			background-color: $print;
			border: 1px solid darken($print, 10%);
		}
		
	}

	li:hover{
		&.dashboard > a {
			background-color: lighten(#428bca, 10%) !important;
		}
		&.docs > a {
			background-color: lighten($docs, 5%) !important;
		}
		&.admin > a {
			background-color: lighten($admin, 15%) !important;
		}
		&.person-lookup > a {
			background-color: lighten($personLookup, 5%) !important;
		}
		&.software-support > a {
			background-color: lighten($softwareSupport, 5%) !important;
		}
		&.dashboard-updates > a {
			background-color: lighten($dashboardUpdates, 5%) !important;
		}
		&.print > a {
			background-color: lighten($print, 15%) !important;
		}
		
	}
}

// if height is less than 600px
@media (max-height:600px) {
	ul.navbar-nav.side-nav > li > a {
		height: 40px;
		padding: 5px 15px;
	}
}


body {
  margin-top: 52px;
  padding-bottom: 52px;
}
#wrapper {
	height: 100%;
  padding-left: 0;
}
#page-wrapper {
	height: 100%;
  padding: 5px 15px;
  overflow-x: hidden;
  overflow-y: auto;
}

.navbar-inverse {
  background-color: #e7e7e7;
  border-color: #e7e7e7;
}

.navbar-toggle {
    background: rgb(125,120,120);
  }
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
  color: #fff;
  background-color: #428bca;
}
.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus {
  color: #fff;
  background-color: #428bca;
}
@media (max-width: 767px) {
  .navbar-inverse .navbar-nav .open .dropdown-menu > .dropdown-header {
    border-color: #DFF0D9;
  }
  .navbar-inverse .navbar-nav .open .dropdown-menu .divider {
    background-color: #428bca;
  }
  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
    color: #999;
  }
  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #fff;
    background-color: transparent;
  }
  .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a,
  .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:hover,
  .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #fff;
    background-color: #428bca;
  }
  .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a,
  .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:hover,
  .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:focus {
    color: #444;
    background-color: transparent;
  }
  
  .nav.navbar-nav.side-nav {
    background-color: rgb(220,225,225);
    border: 2px solid rgb(200, 215, 215);
  }
}

/* Nav Announcements */
.alerts-heading {
  font-size: 50px;
  margin: 0;
}
.alerts-text {
  margin: 0;
}

/* Edit Below to Customize Widths > 768px */
@media (min-width:768px) {
  /* Wrappers */
  #wrapper {
	padding-left: 225px;

	transition: padding-left 800ms ease;

	&.expanded { // used in combination with .side-nav.hide-link-text
		padding-left: 48px;
	}

  }
  #page-wrapper {
	padding: 0px 25px 15px 25px;
  }

  /* Side Nav */
  .side-nav {
	margin-left: -225px;
	left: 225px;
	width: 225px;
	position: fixed;
	top: 50px;
	height: auto;
	border-radius: 0;
	border: none;
	background-color: #F3F3F3;
	overflow-x: hidden;
	overflow-y: hidden;
	user-select: none;
  }

  /*menu overrides*/
  .side-nav>li.dropdown>ul.dropdown-menu {
	position: relative;
	min-width: 225px;
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 0;
	background-color: transparent;
	box-shadow: none;
  }
  .side-nav>li.dropdown>ul.dropdown-menu>li>a {
	color: #999999;
	padding: 15px 15px 15px 25px;
  }
  .side-nav>li.dropdown>ul.dropdown-menu>li>a:hover,
  .side-nav>li.dropdown>ul.dropdown-menu>li>a.active,
  .side-nav>li.dropdown>ul.dropdown-menu>li>a:focus {
	color: #fff;
	background-color: #428bca;
  }
  .side-nav>li>a {
	width: 225px;
  }

  .navbar-inverse .navbar-nav>li>a:hover,
  .navbar-inverse .navbar-nav>li>a:focus {
	background-color: #c9c9c9;
  }

  .navbar-collapse {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}

.header-text {
	display: inline-block;
	border-bottom: 1px solid lightgrey;
	font-weight: 300;

	animation-delay: 0;
	animation-duration: 600ms;
}

Js

function activateNav() {
  $('ul.nav > li').on('click', function (evt) {
    if ($(evt.currentTarget).hasClass('toggle-nav')) return;
    $(evt.currentTarget).addClass('active').siblings().removeClass('active');
  });
}


var docs = [
  {
    "Type": "excel",
    "Name": "Remaining tasks for this app",
    "Description": "This is a list of all the remaining tasks required to complete this app",
    "Tags": "Responsive, RWD",
    "LastViewed": "an hour ago",
    "Expiration": "Sep 17, 2015"
  },
  {
    "Type": "ppt",
    "Name": "EVAMs presentation",
    "Description": "This is presentation for the EVAM occuring later this month",
    "Tags": "EVAM",
    "LastViewed": "a day ago",
    "Expiration": "Sep 08, 2015"
  },
  {
    "Type": "word",
    "Name": "Xmas Party list",
    "Description": "List of all the people who will be attending the holiday party",
    "Tags": "Responsive, RWD",
    "LastViewed": "a few mins ago",
    "Expiration": "Dec 25, 2014"
  }
];


function addToggle() {
	$('li.toggle-nav').on('click', function () {
		$(this).find('i').toggleClass('rotate-180-deg');
		$('.navbar-nav.side-nav').toggleClass('hide-link-text');
		$('#wrapper').toggleClass('expanded');
	});
}

function fixHamburgerUl() {
	$('.navbar-toggle').on('click', function () {
		$('.navbar-nav.side-nav').removeClass('hide-link-text');
		$("#wrapper").removeClass('expanded');
		$('i.fa-arrow-left').removeClass('rotate-180-deg');
	});
}

function init() {
  activateNav();
  addToggle();
  fixHamburgerUl();
}

init();

Leave a Reply

Your email address will not be published. Required fields are marked *