1
0
mirror of https://github.com/kremalicious/blog.git synced 2024-11-13 16:45:14 +01:00

simpler menu js, super smooth menu show/hide

This commit is contained in:
Matthias Kretschmann 2015-08-19 01:31:58 +02:00
parent 1bd309a7eb
commit f55e3d9783
7 changed files with 53 additions and 37 deletions

View File

@ -95,25 +95,19 @@ var siteNavigation = {
},
siteMenu: function() {
var $thelink = $('.menu-btn'),
var $thesite = $('.site'),
$thelink = $('.menu-btn'),
$thepop = $('.nav-popover');
$thelink.click(function(e) {
e.preventDefault();
// toggle menu
$('body').toggleClass('menu-open');
if ($('body').hasClass('menu-open')) {
$thepop.removeClass('hide');
} else {
$thepop.addClass('hide');
}
$thesite.toggleClass('menu-open');
// bind the hide controls
$(document).bind('click.hidethepop', function() {
$('body').removeClass('menu-open');
$thepop.toggleClass('hide');
$thesite.removeClass('menu-open');
// unbind the hide controls
$(document).unbind('click.hidethepop');
});

View File

@ -40,6 +40,7 @@
.page-single &
border: none
padding-top: ($line-height-computed*2)
&:before
@extend .hide
@ -100,15 +101,37 @@
.by
display: block
.time
margin-bottom: ($line-height-computed*2)
// Categories & Tags
/////////////////////////////////////
.categories
margin-bottom: 0
margin-bottom: ($line-height-computed/2)
.category
text-transform: capitalize
@extend .h6, .textcenter
font-size: $font-size-mini
line-height: 1
color: $brand-grey-light
text-transform: uppercase
border: 1px solid $text-color-dimmed
border-radius: $border-radius-base
padding: 4px 8px
margin: 0
display: inline-block
&:hover,
&:focus
color: $link-color
border-color: $link-color
background: rgba(255,255,255,.3)
&:active
background: $link-color
top: 0
color: #fff
.tag
color: $text-color

View File

@ -28,12 +28,6 @@
@import 'alerts'
@import 'animations'
// Components
@import 'header'
@import 'navigation'
@import 'search'
@import 'footer'
// Content
@import 'content'
@import 'content-photo'
@ -45,5 +39,11 @@
@import 'page-about'
@import 'page-404'
// Components
@import 'header'
@import 'navigation'
@import 'search'
@import 'footer'
// Print
@import 'print'

View File

@ -28,6 +28,11 @@
border-bottom: 1px solid rgba(255,255,255,.7)
box-shadow: 0 1px 4px alpha($brand-dark, .1), 0 -1px 4px alpha($brand-dark, .2)
transform: translate3d(0,-200px,0)
.menu-open &
transform: translate3d(0,0,0)
@media only screen and (min-width: 40.625em) and (min-height: 650px)
.site
position: relative
@ -38,9 +43,10 @@
z-index: 2
margin-top: 80px
margin-bottom: 420px
transform: translate3d(0,0,0)
.menu-open &
margin-top: 220px
transform: translate3d(0,140px,0)
.site__header,
.site__footer

View File

@ -41,36 +41,24 @@
.nav-popover
@extend .divider-top, .list-unstyled
padding: $line-height-computed 0
margin-top: 30px
margin-top: $line-height-computed
margin-bottom: 0
width: 100%
background: $body-bg
display: flex
display: flex // .nav-popver overwrite
margin-left: 0 // .grid overwrite
.grid__col
padding-top: 0
.nav-link
@extend .h6, .textcenter
@extend .category
text-shadow: 0 1px 0 rgba(#fff, .5)
padding: $padding-base-vertical $padding-base-horizontal
margin-bottom: 0
margin-top: 0
display: block
color: $brand-grey-light
text-transform: uppercase
border-radius: $border-radius-base
&:hover,
&:focus
color: $link-color
border-bottom-color: $link-color
background: rgba(255,255,255,.5)
&:active
background: $link-color
top: 0
color: #fff
border: none
// Paginator

View File

@ -204,6 +204,11 @@ hr
border: 0
margin-bottom: ($line-height-computed*2)
.small
font-size: $font-size-small
.mini
font-size: $font-size-small
// Quotes
/////////////////////////////////////

View File

@ -35,7 +35,7 @@
</div>
<ul class="nav-popover grid grid--gutters grid--half grid-medium--third hide">
<ul class="nav-popover grid grid--half grid-medium--third">
{% for category in site.categories %}
<li class="grid__col">
<a class="nav-link" href="/{{ category | first }}/">