LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

CSS
html,body {margin:0;padding-top:100px;font-family:"proxima-nova",sans-serif;}
h2 {font-family:"Georgia",serif;font-style:italic;font-weight:100;font-size:23px;}
.main-menu {
  width:1140px;
  background:white;
  box-shadow:0 1px 0 rgba(0,0,0,0.07);
  margin:0 auto;
  padding:0 20px;
  position:relative;
  border-radius:0 0 2px 2px;
  border:1px solid #ccc;
  border-top:6px solid #586698;
}
.main-menu:after {content:"";display:block;clear:both;}
.main-menu ul {list-style-type:none;margin:0;padding:0;}

.main-menu .block {float:left;display:block;padding:0 10px;margin:0;position:relative;height:150px;transition:all 0.2s ease;}

.main-menu .block-admissions {width:140px;}
.main-menu .block-academics {width:200px;}
.main-menu .block-life {width:190px;}
.main-menu .block-athletics {width:130px;}
.main-menu .block-giving {width:160px;}
.main-menu .block-identity {width:200px;}

.main-menu .block .block-expand {
  position:absolute;
  left:0;
  top:50%;
  -webkit-transform:translateY(-50%);
  -moz-transform:translateY(-50%);
  -ms-transform:translateY(-50%);
  height:100%;
  width:100%;
  overflow:hidden;
  box-shadow:inset 0 0 0 1px transparent;
  transition:all 0.3s ease;
  background:white;
  border-top:6px solid #586698;
  margin-top:-3px;
  padding:0;
  text-indent:10px;
}
.main-menu a {text-decoration:none;margin:0;padding:0;}
.main-menu .block h2 {display:block;margin:0;padding:10px 0 0 0;}
.main-menu .block h2 a {
  font-family:'Georgia',serif;
  font-style:italic;
  letter-spacing:1px;
  font-size:22px;
  font-weight:100;
  color:#333333;
}
.main-menu .block li {text-align:left;}
.main-menu .block li a {
  color:#586698;
  text-transform:uppercase;
  letter-spacing:1px;
  font-weight:500;
  font-size:12px;
  line-height:20px;
}
.main-menu .block .menu-links-gray a {color:#777;}
.main-menu .divider {
  width:100%;
  height:1px;
  background:#ccc;
  margin:10px auto;
  transition:all 0.2s ease;
}
.main-menu .arrow {background:transparent;}
.main-menu .arrow:after {
  content:'▾';
  display:block;
  width:100%;
  line-height:26px;
  font-size:18px;
  text-align:center;
  margin:0;
  padding:0;
  position:absolute;
  bottom:0;
  left:0;
  color:#CFC29C;
  background:white;
  cursor:pointer;
}
.block-expanded {
  height:250px !important;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,0.2),0 2px 1px rgba(0,0,0,0.1) !important;
  text-align:left !important:
}
.main-menu .arrow:hover:after {color:#333;background:#f3f3f3;border-radius:2px 2px 0 0;}
.block-expanded .divider {width:90%;background:#ccc;}
.block-expanded .arrow:after,.block-expanded .arrow:hover:after {color:#ddd;background:none;cursor:default;}
.main-menu a:hover {color:black !important;}
@media screen and (max-width: 1200px) {
.main-menu .block {float:left;display:block;padding:0 10px;margin:0;position:relative;height:72px;text-align:center;width:14.5%;}
.main-menu {width:90%;padding:0 5px;}
.main-menu .block h2 a {font-size:18px;}
}
JS
$('.arrow').click(function() {
  var parentBlock = $(this).parent();
  parentBlock.addClass('block-expanded');
  parentBlock.bind('mouseleave',function() {
    setTimeout(function() {
			parentBlock.removeClass('block-expanded');
  	},800);
  });
});
Host Instantly Drag and Drop Website Builder

 

Wed, 11/29/2017 - 11:18

Related Codes

Pen ID
Pen ID
Pen ID