Skip to content

Instantly share code, notes, and snippets.

@Guria

Guria/index.html

Last active August 29, 2015 14:13
Show Gist options
  • Save Guria/e0fdf9a458da7acb4f38 to your computer and use it in GitHub Desktop.
Save Guria/e0fdf9a458da7acb4f38 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href="nav-bar.css" rel="stylesheet">
</head>
<body>
<div class="nav-bar ">
<div class="nav-bar__bar">
<a class="nav-bar__logo" href="#">
<span>LOGO</span>
</a>
<div class="nav-bar__location">
<h1 class="nav-bar__location-title">Science equipment for ISS</h1>
<span class="nav-bar__location-type">Reference list</span>
<a class="nav-bar__location-bookmark" href="#">
<i class="fa fa-star fa-2x"></i>
</a>
<time class="nav-bar__location-datetime">5 March 2014</time>
</div>
<a class="nav-bar__search-button" href="#">
<i class="fa fa-search fa-2x"></i>
<span class="nav-bar__search-label">Search</span>
</a>
<div class="nav-bar__search-field">
<div class="nav-bar__search-tags">
<div class="nav-bar__search-tag">
Placement
<a class="nav-bar__search-tag-close" href="#">
<i class="fa fa-close"></i>
</a>
</div>
<div class="nav-bar__search-tag">
Another Search Tag
<a class="nav-bar__search-tag-close" href="#">
<i class="fa fa-close"></i>
</a>
</div>
</div>
<input type="text" name="" class="nav-bar__search-input" />
<a class="nav-bar__search-close-button" href="#">
<i class="fa fa-close fa-2x"></i>
</a>
</div>
<a class="nav-bar__menu-button" href="#">
<i class="fa fa-bars fa-2x"></i>
<span>Menu</span>
</a>
</div>
<div class="nav-bar__menu">
<ul class="nav-bar__menu-items">
<li><i class="fa fa-area-chart"></i><a href="">Charts</a></li>
<li><i class="fa fa-calendar"></i><a href="">Events</a></li>
</ul>
<div class="nav-bar__menu-footer"></div>
</div>
</div>
</body>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="nav-bar.js"></script>
</html>
Raw
nav-bar.css
body {
margin: 0;
}
.nav-bar {
}
.nav-bar__bar {
height: 64px;
display: grid;
outline:1px solid #B3B3B3;
grid-template-columns: 64px 1fr 128px 128px;
grid-template-areas: "logo location search-button menu-button";
}
.nav-bar__logo {
grid-area: logo;
height: 64px;
background-color: #1BA3E0;
color: white;
border-right: solid 1px;
text-decoration: none;
display: flex;
}
.nav-bar__logo span {
margin: auto;
}
.nav-bar__location {
grid-area: location;
background-color: #1BA3E0;
color: white;
height: 64px;
padding-left: 16px;
display: grid;
grid-template-columns: 1fr 128px 64px;
grid-template-rows: 2fr 1.3fr;
grid-template-areas: "title title bookmark"
"type datetime bookmark";
}
.nav-bar__location-title {
grid-area: title;
margin: 0; /* reset h1 default margin */
overflow: hidden;
white-space: nowrap;
}
.nav-bar__location-type {
grid-area: type;
grid-column-end: datetime;
}
.nav-bar__location-bookmark {
grid-area: bookmark;
align-self: center;
text-align: center;
color: white;
text-decoration: none;
}
.nav-bar__location-bookmark:hover {
color: gold;
}
.nav-bar__location-datetime {
grid-area: datetime;
text-align: right;
}
.nav-bar__search-button {
grid-area: search-button;
}
.nav-bar__search-field {
display: none;
}
.nav-bar__menu-button {
grid-area: menu-button;
}
.nav-bar__menu-button, .nav-bar__search-button {
height: 64px;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
color: #3E525C;
text-decoration: none;
outline:1px solid #B3B3B3;
background-color: white;
}
.nav-bar__menu-button:hover, .nav-bar__search-button:hover {
background-color: #3E525C;
color: white;
}
.nav-bar_search-active .nav-bar__bar{
grid-template-columns: 64px 64px 1fr 128px;
grid-template-areas: "logo search-button search-field menu-button";
}
.nav-bar_search-active .nav-bar__search-button {
background-color: #3E525C;
color: white;
}
.nav-bar_search-active .nav-bar__search-label {
display: none;
}
.nav-bar_search-active .nav-bar__search-field {
grid-area: search-field;
display: grid;
grid-template-columns: auto 1fr 64px;
grid-template-rows: 1fr;
grid-template-areas: "tags search close";
height: 64px;
}
.nav-bar_search-active .nav-bar__search-tags {
grid-area: tags;
display: flex;
align-self: center;
text-align: center;
}
.nav-bar_search-active .nav-bar__search-tag {
background-color: #1BA3E0;
color: white;
padding: 4px;
margin: 4px;
font-size: 1.1em;
}
.nav-bar_search-active .nav-bar__search-tag-close {
margin: 8px;
text-decoration: none;
color: white;
}
.nav-bar_search-active .nav-bar__search-input {
grid-area: search;
align-self: center;
width: 100%;
height: 100%;
padding-left: 8px;
outline: 0;
background-color: transparent;
border: 0px solid;
font-size: 1.3em;
}
.nav-bar_search-active .nav-bar__search-close-button {
grid-area: close;
color: #8C9EA7;
text-decoration: none;
align-self: center;
text-align: center;
}
.nav-bar_search-active .nav-bar__location {
display: none;
}
.nav-bar__menu {
display: none;
background-color: #26363D;
width: 386px;
position: absolute;
right: 0px;
}
.nav-bar_menu-active .nav-bar__menu {
display: block;
height: calc(100% - 64px);
}
.nav-bar_menu-active .nav-bar__menu-button {
background-color: #3E525C;
color: white;
}
.nav-bar__menu-items {
margin: 0;
padding: 0;
list-style-type: none;
}
.nav-bar__menu-items li {
display: grid;
grid-template-columns: 64px 1fr;
grid-template-rows: 1fr;
font-size: 1.5em;
color: white;
height: 64px;
align-items: center;
}
.nav-bar__menu-items li:hover {
background-color: #00AEEF;
color: white;
}
.nav-bar__menu-items i {
padding-left: 16px;
font-size: 32px;
}
.nav-bar__menu-items a {
margin-left: 8px;
color: white;
text-decoration: none;
}
.nav-bar__menu-items li:hover a {
color: white;
}
Raw
nav-bar.js
$(function(){
$(".nav-bar__search-button").click(function(){
$(".nav-bar").toggleClass("nav-bar_search-active");
$(".nav-bar").removeClass("nav-bar_menu-active");
$(".nav-bar__search-input").focus();
});
$(".nav-bar__search-close-button").click(function(){
$(".nav-bar").removeClass("nav-bar_search-active");
$(".nav-bar__search-input").val("");
});
$(".nav-bar__menu-button").click(function(){
$(".nav-bar").toggleClass("nav-bar_menu-active");
$(".nav-bar").removeClass("nav-bar_search-active");
});
$(".nav-bar__search-tags").on("click", "i", function(){
$(this).parents(".nav-bar__search-tag").remove();
});
$(".nav-bar__search-input").keypress(function(e) {
if(e.which == 13) {
$(".nav-bar__search-tags").append(
$('<div class="nav-bar__search-tag">' +
$(".nav-bar__search-input").val() +
'<a class="nav-bar__search-tag-close" href="#"><i class="fa fa-close"></i> </a> </div>')
);
$(".nav-bar__search-input").val("");
}
});
});
Raw
nav-bar.md

KG navbar

Quirk prototype using CSS3 Grid and Flexbox. You have to enable experimental web platform features in chrome: chrome://flags/#enable-experimental-web-platform-features

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment