mirror of
https://github.com/kremalicious/blog.git
synced 2024-11-26 11:49:04 +01:00
simpler menu js, super smooth menu show/hide
This commit is contained in:
parent
1bd309a7eb
commit
f55e3d9783
@ -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');
|
||||
});
|
||||
|
@ -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
|
||||
|
@ -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'
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
/////////////////////////////////////
|
||||
|
@ -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 }}/">
|
||||
|
Loading…
Reference in New Issue
Block a user