LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

LOGO

TEXT

Can Hantas

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tincidunt, tortor et sodales fringilla, neque ex vestibulum diam, sed venenatis quam sapien non nisi. Sed consectetur aliquet urna at vehicula. Quisque et interdum ipsum. In a metus vitae dui elementum finibus quis a mauris. Vivamus ornare libero neque, sed tincidunt eros ornare non. Quisque efficitur lorem sit amet venenatis tincidunt. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque laoreet lectus maximus semper sodales. Donec ac porttitor est. Maecenas eget enim nec risus condimentum dictum eget at risus. Morbi convallis ante sagittis, faucibus dolor non, fringilla lorem. Curabitur pellentesque nibh at eros cursus iaculis. Vivamus id mauris id neque tincidunt convallis ut ac turpis. Nulla finibus, purus et viverra auctor, turpis dolor fermentum nisi, quis varius diam tortor sit amet tortor. Proin placerat vel eros ac volutpat. Integer a augue et justo luctus facilisis sed sed magna. Duis a varius nisi. Nunc mollis est orci, ac porta urna aliquet non. Morbi eget ex venenatis ex elementum aliquet. Mauris dolor nulla, luctus tempus tincidunt a, posuere et nunc. Cras quis erat non odio venenatis posuere eget eu massa. Nam lacinia leo ligula, vel feugiat eros placerat a. Nullam eu ante in nisl mollis porttitor. Sed at augue vel lectus pretium rutrum. Nunc quis orci et leo ultrices tempor sit amet ut orci. Duis ex arcu, ultricies nec ornare sed, maximus a turpis. Sed viverra dui tellus. Integer ullamcorper commodo augue, non egestas urna elementum et. Vivamus pharetra rhoncus faucibus. Suspendisse convallis est eget enim fringilla, at faucibus metus consectetur. Cras vel hendrerit diam. Proin eget diam pharetra, feugiat nunc vitae, vehicula lorem. Vestibulum ornare nulla nec nulla tincidunt iaculis. Sed faucibus tempor felis sit amet molestie. Nulla dictum viverra diam sit amet cursus. Vivamus mattis sapien id ipsum tempus, fringilla sodales quam consectetur. Aenean ut laoreet lorem. Suspendisse facilisis eget ligula sed egestas. Aliquam tristique lorem id varius facilisis. Curabitur consequat commodo mauris, et efficitur nisl fringilla vel. Maecenas accumsan nunc in diam condimentum, semper volutpat elit commodo. Mauris massa tortor, elementum nec massa ut, tincidunt vulputate quam. In nisl purus, volutpat id purus ac, tristique dignissim enim. Cras feugiat, turpis placerat ultrices pellentesque, sapien sapien imperdiet libero, ac efficitur lorem risus vitae dui. Proin scelerisque, lectus a pretium sodales, odio eros condimentum odio, a porta lectus nisl ut orci. In consequat orci in urna tempor bibendum. Sed vulputate velit id nibh pretium interdum. Nulla sit amet diam in neque interdum tempor vitae ultricies quam. Vivamus eget accumsan nibh, vitae euismod quam. Sed pellentesque purus luctus, sagittis lectus ac, molestie quam. Curabitur sem ex, suscipit nec massa quis, euismod faucibus libero. In facilisis turpis quam, sed malesuada urna porta nec. Nullam non libero vel sem sollicitudin lacinia. Mauris ut mollis mi. Etiam ullamcorper mollis elit, in interdum risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus semper, sem et pretium pulvinar, purus sapien pellentesque orci, sed lacinia velit nulla ac tortor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque sit amet scelerisque nisi. Duis luctus tincidunt varius. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean rhoncus varius enim. Sed vulputate finibus magna, sed lobortis ipsum dapibus nec. Praesent vel tincidunt sem. Nam sed nisl ipsum. Nulla ipsum est, blandit ut sem vitae, euismod euismod dui. Pellentesque urna mi, malesuada non eros sed, consectetur placerat lorem. Praesent orci quam, bibendum id venenatis in, dignissim non dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod diam lectus, interdum eleifend orci vulputate non. Morbi efficitur vel mi in congue. Integer nulla turpis, imperdiet ac accumsan et, gravida sed est. Nulla tempus risus sit amet justo varius posuere. Morbi sed diam arcu. Praesent tristique magna a neque vestibulum fringilla. Fusce elit magna, dignissim ac sollicitudin sit amet, facilisis eu eros. Nulla quis eros dictum, congue odio quis, blandit dolor. In non tellus sed nisi maximus viverra ut id quam. Fusce eu nunc ut lectus lobortis ullamcorper at feugiat sem. In sem metus, bibendum eu porttitor in, mattis eu elit. Duis non venenatis felis, quis finibus lacus. Etiam et suscipit ipsum. Donec molestie, tellus at aliquam aliquam, felis neque congue turpis, vitae feugiat dolor ipsum vel quam. Nam imperdiet mollis placerat. Curabitur ac sagittis quam. Nunc felis lectus, tincidunt sed vestibulum vel, vestibulum ut est. Nam nec ligula in metus cursus luctus vitae sed lorem. Nulla facilisi. Pellentesque fermentum lacus lorem. Nunc eleifend faucibus urna a scelerisque. Quisque id congue sem. Integer nec enim id neque dictum rutrum in laoreet eros. Vivamus ornare malesuada orci vitae vulputate. Ut vitae neque faucibus, pharetra tellus vitae, euismod velit. Pellentesque congue tortor ac eleifend placerat. Aenean placerat, purus ut bibendum hendrerit, nulla ligula congue nisi, vulputate dignissim risus ipsum ac enim. Proin ligula lacus, fringilla a nibh vel, pretium dignissim sem. In tincidunt pulvinar mauris vel gravida. Maecenas at elit luctus, eleifend libero id, faucibus leo. Morbi bibendum purus nec odio porttitor, eget vestibulum urna tincidunt. Vivamus rutrum sapien est. Phasellus lobortis libero eu massa lacinia tempus. In faucibus gravida nibh at dapibus. Donec eget ante quis felis bibendum aliquet. Donec at ipsum eget elit finibus aliquam id pharetra lacus. Integer id bibendum urna. Morbi eget est lacus. Vestibulum augue justo, rhoncus a fringilla sed, accumsan eu arcu. Donec id metus lacus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin nibh risus, maximus nec ullamcorper ut, ullamcorper sed leo. Praesent rutrum lacus et est posuere, in malesuada elit lobortis. Aliquam sed nisl sed nisi bibendum luctus. Aenean eget magna tortor. Morbi non diam vel risus accumsan tempus. Donec id est consectetur, tempor diam ut, ultricies sem. Ut vulputate ipsum odio, nec tempus lectus viverra a. Aenean venenatis augue quis condimentum cursus. Aenean quis interdum turpis. Proin tincidunt sed libero quis blandit. Aliquam pellentesque massa blandit sollicitudin efficitur. Vivamus finibus orci condimentum purus gravida, in porttitor tortor mollis. Nullam nulla magna, laoreet et fermentum sed, tincidunt sed dui. Maecenas vitae diam varius, fermentum erat quis, viverra leo. Curabitur nec elit viverra, pulvinar massa auctor, fringilla ante. Donec rhoncus ac sapien egestas sagittis. Curabitur ullamcorper nibh et aliquet tincidunt. Vivamus pellentesque metus sem, non ultrices metus faucibus vitae. Aliquam dapibus dapibus ligula, vel eleifend magna ultrices vel. Praesent scelerisque, diam nec condimentum commodo, neque nulla luctus nunc, et iaculis odio elit eget nunc. Donec dapibus faucibus felis at convallis. Nullam semper vestibulum dolor in suscipit. Integer quis sapien auctor, tempor elit vel, pretium ante. Aliquam vitae pretium est. Cras id libero semper, blandit arcu sed, ullamcorper mauris. Aliquam ultricies enim quis auctor gravida. Nam commodo diam tellus, eget aliquet neque tincidunt eget. Integer sed pharetra tortor, id laoreet nulla. Phasellus hendrerit molestie quam eu auctor. Sed vel tortor vel est suscipit laoreet vitae et tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque sit amet mi nisl. Etiam sit amet massa viverra, scelerisque lectus eu, tincidunt nisi. Nullam urna massa, aliquet id tellus quis, dapibus euismod augue. Integer id turpis vitae nibh vulputate tempus. Sed elit massa, venenatis non metus vel, fermentum feugiat elit. Aliquam vitae ultricies mi. Nulla condimentum nibh et velit posuere tincidunt. Vestibulum finibus purus nec tortor porta, et fringilla justo ullamcorper. Sed id accumsan lorem. Nullam vel nunc non augue interdum feugiat vitae eget massa. Donec tincidunt molestie tellus id dictum. Maecenas orci ex, pulvinar maximus massa vitae, accumsan feugiat metus. Proin pellentesque leo vel massa porttitor posuere. Integer sit amet sollicitudin leo. Nunc aliquet elit sed sapien rutrum bibendum. Sed pretium nisi ac condimentum dictum. Integer ex libero, bibendum a enim eget, vulputate tempus ligula. Duis vel congue nibh. Sed rutrum vulputate ex eu dictum. Donec risus libero, posuere id dignissim a, sollicitudin eget orci. Cras tempor magna et urna sollicitudin scelerisque. Etiam quis dignissim lacus, non ultrices dui. Quisque placerat laoreet velit id commodo. Integer tincidunt nec magna tristique efficitur. Nulla pretium bibendum dui sit amet vehicula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ut condimentum lorem, et convallis massa. Quisque et laoreet nisl, nec facilisis tortor. Praesent vitae elit non nunc rhoncus pretium sed non nulla. Aenean mattis eros sit amet mi ullamcorper interdum. Nunc rhoncus laoreet volutpat. Aenean volutpat turpis augue. Nunc in mi egestas, imperdiet magna at, venenatis lectus. Aliquam non tempus magna. Integer tempor odio in ex rutrum, vel fringilla ex gravida. Morbi quis diam quis ipsum porta venenatis eu ac odio. Aenean ac nisi ultrices turpis vestibulum malesuada. Morbi nec nulla ac nisl congue pretium. Sed finibus rutrum aliquam. Pellentesque eget neque ut lectus eleifend fringilla id ut arcu. Phasellus non rhoncus metus. In pretium nec lacus vel vehicula. Mauris iaculis condimentum est ut consequat. Integer nisi eros, cursus a tellus ut, accumsan pharetra sapien. Phasellus efficitur sodales vehicula. Donec sed sapien sodales, convallis turpis nec, lacinia lorem. Mauris libero risus, varius sit amet ex ut, blandit suscipit ipsum. Vestibulum ac ex felis. Nunc massa lacus, pharetra sit amet nisl sit amet, eleifend eleifend mi. Donec malesuada mi enim, sed rhoncus elit imperdiet id. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque malesuada, dolor eget aliquam blandit, neque odio pharetra sapien, a luctus mauris quam non nibh. Donec consectetur erat ante. Nulla tincidunt lacus et dui euismod mollis. Nam imperdiet venenatis mauris in viverra. Curabitur eu dolor in velit tincidunt pharetra at et purus. Proin sollicitudin orci sit amet libero pulvinar, sit amet sodales metus porta. Sed vulputate purus feugiat, condimentum dolor quis, tempor metus. Fusce ex urna, finibus non ornare eget, aliquam et augue. Cras tempus sapien eu leo facilisis, vel bibendum orci eleifend. In molestie nulla vitae odio cursus, mollis placerat purus sollicitudin. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse in libero mi. Quisque orci dolor, porta quis turpis at, fermentum iaculis ligula. Nullam iaculis felis et ex tempor, ut volutpat purus semper. Ut nibh elit, elementum sed eros ac, sollicitudin imperdiet ipsum. Sed a ante turpis. Vivamus risus eros, placerat sit amet augue id, pulvinar consectetur nunc. Nulla sit amet elit at nulla convallis blandit. Nam neque mauris, efficitur vel leo commodo, porttitor tempus neque. Curabitur convallis lectus eget lorem convallis semper. Etiam nisl lorem, dictum nec iaculis efficitur, feugiat sit amet magna. Etiam arcu metus, tincidunt sed porta nec, scelerisque ut quam. Mauris ac mi nisl. Vivamus vitae quam ut felis molestie feugiat quis blandit ante. Mauris cursus imperdiet maximus. Morbi sagittis massa non tristique efficitur. Donec ornare venenatis auctor. Nam eget aliquet tortor. Phasellus consectetur felis molestie lacinia laoreet. Etiam aliquet suscipit lorem ac posuere. Praesent luctus varius ultricies. Phasellus vestibulum, lacus sed condimentum porta, nisi enim placerat tortor, at auctor sem nunc tristique quam. Nulla nunc nunc, placerat eget risus in, efficitur mollis mauris. Maecenas imperdiet enim ligula, quis ultrices felis egestas sit amet. Etiam at arcu quis dui ullamcorper cursus non vitae erat. Pellentesque nec erat in neque rhoncus venenatis ut sit amet ex. Suspendisse sit amet malesuada lorem, id sodales lectus. Etiam non commodo dolor. Nam suscipit euismod justo, quis facilisis metus. Aliquam sodales ullamcorper est, in eleifend nulla molestie sed. Aenean nec maximus augue, sed lobortis dui. Quisque bibendum pulvinar sapien ut sagittis.

CSS
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,700");
@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
/* Variables Start */
/* topbar background color */
/* branding background color */
/* leftnav background color */
/* Variables End */
* {
  margin: 0;
  padding: 0;
}

html, body {
  display: flex;
  flex-direction: column;
  height: 100%;
  font-family: 'Open Sans', sans-serif;
  overflow: hidden;
}

header {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 40px;
  min-height: 40px;
  background-color: #3498db;
  color: white;
}
header i.fa.fa-bars {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #2980b9;
  width: 40px;
  height: 100%;
}
@media only screen and (min-width: 1024px) {
  header i.fa.fa-bars {
    display: none;
    flex-direction: row-reverse;
  }
}
header div.branding {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-width: 200px;
  background-color: #2980b9;
  -webkit-transition: all 1s;
  /* Safari */
  transition: all 1s;
}
header div.branding p {
  display: inline;
  margin: 0;
}
header div.branding p.bold {
  font-weight: 700;
}
@media only screen and (max-width: 576px) {
  header div.branding {
    flex-grow: 1;
  }
}
header div.actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  padding-right: 10px;
  flex-grow: 1;
}
header div.actions span {
  font-size: 0.8em;
  margin-left: 10px;
}
@media only screen and (max-width: 576px) {
  header div.actions {
    background-color: #2980b9;
    flex-grow: 0;
  }
}

div#main-container {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  height: 100%;
}
@media only screen and (max-width: 576px) {
  div#main-container {
    flex-wrap: wrap;
    flex-grow: 1;
  }
}

.left-nav {
  min-width: 200px;
  background-color: #404040;
  height: 100%;
  color: #939da8;
  font-size: 0.8em;
  box-sizing: border-box;
  overflow: hidden;
}
.left-nav ul.menu {
  display: flex;
  flex-direction: column;
  list-style-type: none;
  text-transform: uppercase;
}
.left-nav ul.menu li.menuitem {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  left: 0;
  width: 100%;
  align-items: center;
  justify-content: center;
  border-bottom: solid 0.5px #939da8;
  box-sizing: border-box;
}
.left-nav ul.menu li.menuitem a {
  display: flex;
  height: 35px;
  width: 100%;
  flex-grow: 1;
  align-items: center;
  text-decoration: none;
  color: #939da8;
}
.left-nav ul.menu li.menuitem a i.fa {
  width: 40px;
  text-align: center;
}
@media only screen and (min-width: 576px) and (max-width: 1024px) {
  .left-nav ul.menu li.menuitem a p {
    display: none;
  }
}
.left-nav ul.menu li.menuitem :hover {
  color: white;
}
.left-nav ul.menu li.menuitem.collapsed > ul.submenu {
  height: 0;
  overflow: hidden;
}
.left-nav ul.menu li.menuitem.collapsed > a:after {
  content: '\f107';
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  margin-left: auto;
  margin-right: 5px;
  text-decoration: none;
}
.left-nav ul.menu li.menuitem.expanded > a:after {
  content: '\f106';
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  margin-left: auto;
  margin-right: 5px;
  text-decoration: none;
}
.left-nav ul.menu ul.submenu {
  flex-grow: 1;
}
.left-nav ul.menu ul.submenu li.menuitem {
  height: 25px;
  padding-left: 20px;
  font-size: 0.8em;
  border-bottom: none;
  border-top: solid 1px #404040;
  border-right: solid 1px #404040;
  background-color: white;
}
@media only screen and (min-width: 576px) and (max-width: 1024px) {
  .left-nav ul.menu ul.submenu li.menuitem {
    padding-left: 0;
  }
}
.left-nav ul.menu ul.submenu li.menuitem :hover {
  color: #404040;
}
.left-nav.expanded {
  height: auto;
}
@media only screen and (min-width: 576px) and (max-width: 1024px) {
  .left-nav {
    min-width: 40px;
  }
}
@media only screen and (max-width: 576px) {
  .left-nav {
    width: 100%;
    height: 0;
  }
}

main {
  box-sizing: border-box;
  overflow-x: auto;
  padding: 5px;
  height: 100%;
}
JS
$(document).ready(function() {
  $('i.fa.fa-bars').click(function(){
     $('#main-nav').toggleClass('expanded');
  });
  
  $('li.menuitem:has(ul.submenu)').addClass('collapsed').click(function() {
    $(this).toggleClass('collapsed');
    $(this).toggleClass('expanded');
  });
});
Term
Tue, 12/26/2017 - 12:11

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv