Skip to content

Instantly share code, notes, and snippets.

@timbroadwater

timbroadwater/WVU Libraries Tab Bar Test

Last active August 29, 2015 14:22
Show Gist options
  • Save timbroadwater/a3d0465d4a5c8785c3d9 to your computer and use it in GitHub Desktop.
Save timbroadwater/a3d0465d4a5c8785c3d9 to your computer and use it in GitHub Desktop.
Download ZIP
WVU Libraries Tab Bar Test
Raw
index.html
<html lang="en">
<head>
<title>Design Patterns | WVU Libraries</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta http-equiv="cleartype" content="on">
<!-- Populate Meta Information -->
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="author" content="WVU Libraries">
<link rel="shortcut icon" href="https://wvrhc.lib.wvu.edu/favicon.ico">
<!-- CSS -->
<link href="css/styles.css" type="text/css" rel="stylesheet" />
<link href="css/wvu.css" type="text/css" rel="stylesheet" />
<link href="css/wvrhc.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" href="css/font-awesome.min.css">
<!-- External CSS -->
<link type="text/css" rel="stylesheet" href="https://fast.fonts.net/cssapi/36d8cd92-7cc7-499b-b169-0eed9d670283.css"></link>
<!-- External JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- JavaScript -->
<script type="text/javascript" src="js/javascript.js"></script>
</head>
<body>
<!-- Website Tab Bar -->
<div class="sticky-header">
<div class="sticky-header-nav tabBar">
<a href="#"><img alt="Menu" src="images/menu.svg" /></a>
</div>
<div class="sticky-header-top tabBar">
<a href="#"><img alt="Back to Top" src="images/top.svg" /></a>
</div>
<div class="sticky-header-filter tabBar">
<a href="#"><img alt="Quicklinks" src="images/filter.svg" /></a>
</div>
<div class="sticky-header-search tabBar">
<a href="#"><img alt="Search" src="images/search.svg" /></a>
</div>
</div>
<!-- WVU Header -->
<div class="wvu-header mobile wvubottom">
<a href="#" id="wvutoggle" class="wvu-masthead__logo wvu-masthead__logo--w-signature">
<img src="images/wvulogo.svg" alt="WVU Libraries" />
<i class="fa fa-chevron-down"></i>
<i class="fa fa-chevron-up"></i>
</a>
<ul class="list">
<li><a class="links" href="https://lib.wvu.edu/about/">About</a></li>
<li><a class="links" href="https://lib.wvu.edu/collections/">Collections</a></li>
<li><a class="links" href="https://lib.wvu.edu/instruction">Instruction</a></li>
<li><a class="links" href="https://lib.wvu.edu/about/news/">News</a></li>
<li><a class="links" href="https://lib.wvu.edu/services/">Services</a></li>
<li><a class="links" href="https://lib.wvu.edu/about/contactus/">Contact</a></li>
<li><a class="links" href="https://lib.wvu.edu/about/giving/">Give</a></li>
<li><a class="links" href="https://lib.wvu.edu/">Library Home</a></li>
</ul>
</div>
<div class="wvu-header tablet wvubottom">
<div class="wrap">
<a href="https://lib.wvu.edu" class="wvu-header-logo wvu-masthead__logo wvu-masthead__logo--w-signature"><span class="wvu-masthead-title wvu-masthead__title--w-signature">Libraries</span></a>
<ul class="wvu-header-mobile-list">
<li><a href="https://lib.wvu.edu/about/">About</a></li>
<li><a href="https://lib.wvu.edu/collections/">Collections</a></li>
<li><a href="https://lib.wvu.edu/instruction">Instruction</a></li>
<li><a href="https://lib.wvu.edu/about/news/">News</a></li>
<li><a href="https://lib.wvu.edu/services/">Services</a></li>
<li><a href="https://lib.wvu.edu/about/contactus/">Contact</a></li>
<li><a href="https://lib.wvu.edu/about/giving/">Give</a></li>
</ul>
</div>
</div>
<!-- WVRHC Header -->
<div class="wvrhc-header mobile wvubottom">
<a id="wvrhctoggle" class="wvrhcTitle" href="#"><span class="flet">WVRHC</span>
<i class="fa fa-chevron-down"></i>
<i class="fa fa-chevron-up"></i>
</a>
<ul class="list2">
<li><a href="https://wvrhc.lib.wvu.edu/about/">About</a></li>
<li><a href="https://wvrhc.lib.wvu.edu/collections/">Collections</a></li>
<li><a href="https://wvrhc.lib.wvu.edu/databases/">Databases</a></li>
<li><a href="https://wvrhc.lib.wvu.edu/research/">Research</a></li>
<li><a href="https://wvrhc.lib.wvu.edu/visit/">Visit</a></li>
<li><a href="https://wvrhc.lib.wvu.edu/">WVRHC Home</a></li>
</ul>
</div>
<div class="wvrhc-header tablet wvubottom">
<div class="wrap">
<a class="wvrhcTitle" href="https://wvrhc.lib.wvu.edu/"><span class="flet">W</span>est <span class="flet">V</span>irginia & <span class="flet">R</span>egional <nobr><span class="flet">H</span>istory <span class="flet">C</span>enter</nobr></a>
<ul class="wvrhcNav">
<li><a href="https://wvrhc.lib.wvu.edu/about/">About</a></li>
<li><a href="https://wvrhc.lib.wvu.edu/collections/">Collections</a></li>
<li><a href="https://wvrhc.lib.wvu.edu/databases/">Databases</a></li>
<li><a href="https://wvrhc.lib.wvu.edu/research/">Research</a></li>
<li><a href="https://wvrhc.lib.wvu.edu/visit/">Visit</a></li>
</ul>
</div>
</div>
<br>
1111
<br>
111
<br>
111
<br>
111
<br>
111
<br>
111
<br>
22222
<br>
111
<br>
111
<br>
111
<br>
111
<br>
111
<br>
111
<br>
111
<br>
111
<br>
111
<br>
111
<br>
111
<br>
111
<br>
111
<br>
111
<br>
111
<br>
111
<br>
111
<br>
111
<br>
111
<br>
111
<br>
111
<br>
111
<br>
111
<br>
111
<br>
111
<br>
111
<br>
111
<br>
111
<br>
111
<br>
111
<br>
111
<br>
111
<br>
111
<br>
111
<br>
111
<br>
111
<br>
111
<br>
111
<br>
111
<br>
111
<br>
111
<br>
111
<br>
111
<br>
111
<br>
111
<br>
111
<br>
111
</body>
</html>
Raw
script.js
// If JavaScript Enabled - Setup
$(document).ready(function() {
$(".wvu-header .list").addClass("wvuhide");
$(".wvrhc-header .list2").addClass("wvuhide");
$("#wvrhctoggle .fa-chevron-up").addClass("thide");
$("#wvutoggle .fa-chevron-up").addClass("thide");
});
// Mobile WVU Nav
$(function () {
$("#wvutoggle").click(function () {
$(".list").slideToggle("fast");
$("#wvutoggle .fa-chevron-up").toggleClass("thide");
$("#wvutoggle .fa-chevron-down").toggleClass("thide");
});
});
// Mobile WVRHC Nav
$(function () {
$("#wvrhctoggle").click(function () {
$(".list2").slideToggle("fast");
$("#wvrhctoggle .fa-chevron-up").toggleClass("thide");
$("#wvrhctoggle .fa-chevron-down").toggleClass("thide");
});
});
Raw
style.css
/*********************************************************************
Variables
**********************************************************************/
$primary-blue: #002855;
$primary-orange: #EAAA00;
$neutral-black: #2C2A29;
$neutral-blue: #333F48;
$neutral-lgray: #A2AAAD;
$neutral-wgray1: #6E6259;
$neutral-wgray2: #968C83;
$neutral-wgray3: #BFB8AF;
$accent-blue1: #0033A0;
$accent-blue2: #005EB8;
$accent-blue3: #9BD3DD;
$accent-orange1: #4B3D2A;
$accent-orange2: #9F7D23;
$accent-orange3: #E35205;
$accent-orange4: #ED8B00;
$accent-green1: #0D5257;
$accent-green2: #708573;
$accent-green3: #9ABEAA;
$accent-red: #BE3A34;
$accent-yellow: #FDDA24;
/*********************************************************************
480px or less
**********************************************************************/
html, body, form, nav, ul, div {
display: block;
margin: 0;
padding: 0;
text-align: center;
font-family: "Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;
}
.sticky-header {
background: #002855;
height: 30px;
position: fixed;
bottom: 0;
left: 0;
z-index: 2;
width:100%;
padding: 10px 0;
.sticky-header a {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
display: block;
}
img {
width: auto;
height: 100%;
max-width: 320px;
}
.tabBar {
width: 25%;
float: left;
height: 30px;
}
}
.wrap {
width: 95%;
margin: 0 auto;
}
.wvrhc-header {
background: $primary-orange;
padding: 0;
overflow: hidden;
#wvrhctoggle {
text-align: left;
padding: 15px 5%;
width: 90%;
border-bottom: 2px solid darken( $primary-orange, 10% );
.fa {
float:right;
}
}
.list2 {
height: auto;
margin: 0;
padding: 0;
width: 100%;
overflow: hidden;
list-style-type: none;
li {
a {
font-size: 0.85em;
color: $primary-blue;
font-weight: 600;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: darken( $primary-orange, 10% );
border-top-width: 1px;
border-top-style: solid;
border-top-color: lighten( $primary-orange, 10% );
border-right: 1px solid lighten( $primary-orange, 10% );
border-left: 2px solid darken( $primary-orange, 10% );
text-decoration: none;
padding-top: 10px;
padding-bottom: 15px;
width: 50%;
display: inline-block;
float:left;
box-sizing: border-box;
}
}
li:nth-last-child(1) a {
color: $accent-red;
}
}
.wvrhcTitle {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 16px;
width:100%;
float:left;
text-transform: uppercase;
color: $primary-blue;
text-shadow: 1px 2px rgb(232, 205, 93);
font-weight:600;
text-decoration: none;
}
.wvrhcNav {
font-size: 1em;
width:100%;
float:right;
list-style-type: none;
font-size: 0.75em;
padding-top: 10px;
li {
display:inline-block;
margin: 15px 0.5em 0 0.5em;
a {
color: $primary-blue;
text-decoration: none;
font-weight: 600;
&:hover {
text-decoration: underline;
}
}
}
}
}
/*********************************************************************
768px to 1024px
**********************************************************************/
@media screen and (min-width: 768px) {
.wvrhc-header {
padding: 20px 0;
border-bottom: none;
.wvrhcNav {
padding-top: 0;
}
}
}
/*********************************************************************
1024px and up
**********************************************************************/
@media screen and (min-width: 1024px) {
.wvrhc-header {
padding: 20px 0px 20px 60px;
.wvrhcTitle {
width:40%;
text-align: left;
border-bottom: none;
}
.wvrhcNav {
width:60%;
text-align: right;
border-top: none;
li {
margin: 0.25em 0.5em 0 0.5em;
}
}
}
}
html, body, form, nav, ul {
display: block;
margin: 0;
padding: 0;
text-align: center;
}
.wrap {
width: 90%;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
display: block;
height: auto;
overflow: hidden;
}
video {
display: block;
}
/* For IE9 */
a img {
border: none;
}
/* For Chrome & Firefox */
*:focus {
outline: 0;
}
textarea:focus, input:focus{
outline: 0;
}
a:hover, a:active, a:focus {
outline: 0;
}
/* WVU Header */
.wvu-header {
left: 0;
width: 100%;
overflow: hidden;
background-color: $primary-blue;
.wvu-masthead__logo {
float:left;
display:block;
width:70.14568%;
}
.wvu-masthead__logo--w-signature {
width: 100%;
}
.imagedesc {
background: url("../images/flying-wv-w-signature3.png") no-repeat center top 1.2em / 300px auto transparent;
}
.wvu-masthead__title--w-signature {
padding-top: 56px;
display: inline-block;
font-size: 16px;
text-transform: uppercase;
color: #fff;
padding-right: 100px;
}
.list {
height: auto;
margin: 0;
padding: 0;
width: 100%;
overflow: hidden;
list-style-type: none;
a {
display: block;
margin: 0;
padding: 0;
box-sizing: border-box;
}
li:nth-last-child(1) a {
color:#ffcc66;
font-weight: 400;
}
.links {
font-size: 0.85em;
color: white;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: darken( $primary-blue, 10% );
border-top-width: 1px;
border-top-style: solid;
border-top-color: lighten( $primary-blue, 10% );
border-right: 1px solid lighten( $primary-blue, 10% );
border-left: 2px solid darken( $primary-blue, 10% );
text-decoration: none;
padding-top: 10px;
padding-bottom: 15px;
width: 50%;
display: inline-block;
float:left;
}
}
.links {
font-size: 0.85em;
color: white;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #004f90;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #0079dd;
text-decoration: none;
padding-top: 10px;
padding-bottom: 15px;
li {
display: block;
margin: 0;
padding: 0;
}
}
}
#wvutoggle {
height: 40px;
display:block;
padding: 10px 5%;
width: 90%;
text-align: left;
border-bottom:2px solid darken( $primary-blue, 10% );
img {
width: auto;
height: 100%;
}
.fa {
float: right;
color: #fff;
position: relative;
top: 8px;
}
}
/* Footer */
footer {
background-color: $primary-blue;
p {
font-size: 0.75em;
line-height: 150%;
}
a {
color: #fff;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
.school-footer {
padding: 30px 0px 0px 0px;
color: #fff;
width: 100%;
.footerTitle {
font-size:1.5em;
font-weight: 300;
display: block;
color: #FC6;
&:hover {
text-decoration:none;
}
}
}
.wvu-footer {
margin: 10px 0px 30px 0px;
width: 100%;
.wvuFooterSites {
float: inherit;
text-align: center;
li {
display: inline-block;
margin: 0px;
padding: 0px;
a {
padding: 10px 0 0 0;
margin: 0 0.5em;
display: block;
font-size: 0.75em;
border-radius: 30px;
color: #fff;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
}
.wvuFooterSocial {
margin-top:30px;
float: inherit;
li {
display: inline;
.socmedia {
opacity: 1;
&:hover {
text-decoration: none;
opacity: 0.75;
}
}
}
}
}
/* State */
.desktop {
display: none;
}
.tablet {
display: none;
}
.wvuhide {
display: none;
}
.thide {
display: none !important;
}
.show {
display: inline-block !important;
}
/*********************************************************************
768px to 1024px
**********************************************************************/
@media screen and (min-width: 768px) {
/* Header */
.wvu-header {
.wvu-masthead__logo--w-signature {
background: url("../images/flying-wv-w-signature.png") no-repeat center top 1.2em / 300px auto transparent;
padding: 0px 0px 20px 0px;
width: 100%;
}
.wvu-masthead-title {
padding-right: 100px;
}
}
.wvu-header-logo {
width: 100%;
float: left;
}
.wvu-header-mobile-list {
width: 100%;
float: left;
padding: 0px 0px 20px 0px;
list-style-type: none;
list-style-image: none;
float: right;
font-size:0.75em;
li {
display: inline-block;
}
a {
margin: 0 0.5em;
color: white;
text-decoration: none;
&:hover {
text-decoration:underline;
}
}
}
/* Footer */
footer {
padding: 30px 0px;
}
.school-footer {
width: 50%;
float: left;
text-align: left;
padding: 0px;
}
.wvu-footer {
width: 50%;
float: left;
padding: 0px;
.wvuFooterSites {
float: right;
text-align: right;
li {
a {
padding: 10px 0 0 0;
margin-left: 1em;
}
}
}
.wvuFooterSocial {
float: right;
}
}
/* State */
.mobile {
display: none !important;
}
.tablet {
display: block;
}
}
/*********************************************************************
1024px and up
**********************************************************************/
@media screen and (min-width: 1024px) {
/* Header */
.wvu-header {
.wvu-masthead__logo--w-signature {
background: url("../images/flying-wv-w-signature.png") no-repeat left top 1.2em / 300px auto transparent;
padding: 0px 0px 20px 54px;
width: 33%;
}
}
.desktop {
display: block;
}
.wvu-header-logo {
width: 50%;
text-align: left;
}
.wvu-header-mobile-list {
width: 50%;
padding: 36px 0px 10px;
text-align: right;
}
/* Footer */
.disclaimer {
white-space: nowrap;
}
}
/*********************************************************************
Print
**********************************************************************/
@media print {
}
Raw
WVU Libraries Tab Bar Test
WVU Libraries Tab Bar Test
------
A [Pen](http://codepen.io/timbroadwater/pen/VLboxo) by [Tim Broadwater](http://codepen.io/timbroadwater) on [CodePen](http://codepen.io/).
[License](http://codepen.io/timbroadwater/pen/VLboxo/license).
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment