Bourbon Refill導航菜單向上滑動

Question

我正在使用Bourbon Refill導航菜單，並希望對其進行修改，以便在小模式中單擊鏈接時菜單會向上滑動。此時菜單下降，但當菜單項被點擊時，菜單保持下降。由於我使用帶有固定頂級菜單的滾動頁面，這意味着很多內容都隱藏在菜單後面。

這裏是Codepen代碼：

http://codepen.io/mikehdesign/pen/LVjbPv/

我現有的代碼如下：

HTML

<header class="navigation" role="banner"> 
<div class="navigation-wrapper"> 
<a href="javascript:void(0)" class="logo"> 
<img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_1_dark.png" alt="Logo Image"> 
</a> 
<a href="javascript:void(0)" class="navigation-menu-button" id="js-mobile-menu">Menu</a> 
<nav role="navigation"> 
    <ul id="js-navigation-menu" class="navigation-menu show"> 
    <li class="nav-link"><a href="javascript:void(0)">About Us</a></li> 
    <li class="nav-link"><a href="javascript:void(0)">Contact</a></li> 
    <li class="nav-link"><a href="javascript:void(0)">Testimonials</a></li> 
    <li class="nav-link"><a href="javascript:void(0)">Sign up</a></li> 
    </ul> 
</nav> 

SCSS

.navigation { 
$large-screen: em(860) !default; 
$large-screen: $large-screen; 

// Mobile view 
.navigation-menu-button { 
display: block; 
float: right; 
margin: 0; 
padding-top: 0.5em; 

@include media ($large-screen) { 
    display: none; 
} 
} 

// Nav menu 
.navigation-wrapper { 
@include clearfix; 
position: relative; 
} 

.logo { 
float: left; 

img { 
    max-height: 2em; 
    padding-right: 1em; 
} 
} 

nav { 
float: none; 

@include media ($large-screen) { 
    float: left; 
    line-height: 1.5em; 
    padding-top: 0.3em; 
} 
} 

ul.navigation-menu { 
clear: both; 
display: none; 
margin: 0 auto; 
overflow: visible; 
padding: 0; 
width: 100%; 

@include media ($large-screen) { 
    display: block; 
    margin: 0; 
    padding: 0; 
} 

&.show { 
    display: block; 
} 
} 

// Nav items 
ul li.nav-link { 
display: block; 
text-align: right; 
width: 100%; 

@include media ($large-screen) { 
    background: transparent; 
    display: inline; 
    text-decoration: none; 
    width: auto; 
} 
} 

li.nav-link a { 
display: inline-block; 

@include media ($large-screen) { 
    padding-right: 1em; 
} 
} 
} 

JS

$(document).ready(function() { 
var menuToggle = $('#js-mobile-menu').unbind(); 
$('#js-navigation-menu').removeClass("show"); 

menuToggle.on('click', function(e) { 
e.preventDefault(); 
$('#js-navigation-menu').slideToggle(function(){ 
if($('#js-navigation-menu').is(':hidden')) { 
$('#js-navigation-menu').removeAttr('style'); 
    } 
}); 
}); 
}); 

幫助非常感謝

邁克

Answer 1

所以我整理這通過檢測菜單按鈕是否是可見的，然後使用該作爲JQuery的切換：

$(document).ready(function() { 
    var menuToggle = $('#js-mobile-menu').unbind(); 
    $('#js-navigation-menu').removeClass("show"); 

    $('li.nav-link').on('click', function(){ 
    if($(".navigation-menu-button").is(":visible") ) { 
     menuToggle.trigger('click'); 
} 
    }); 

    menuToggle.on('click', function(e) { 
    e.preventDefault(); 
    $('#js-navigation-menu').slideToggle(function(){ 
     if($('#js-navigation-menu').is(':hidden')) { 
     $('#js-navigation-menu').removeAttr('style'); 
     } 
    }); 
    }); 
}); 

Answer 2

你可以試試...

$('header.navigation').on('click',function(){ 
    $('header.navigation ul.submenu').css('display','none'); 
}) 

Answer 3

看看下面的演示測試在小型和大型工作版本作爲您的期望。

EDIT 2

更新撥動的小版本按您的要求。

Codepen

jQuery的

function smallVersion() { 
    $("#js-navigation-menu a").on('click', function(e) { 
    $('#js-navigation-menu').slideToggle(function() { 
     if ($('#js-navigation-menu').is(':hidden')) { 
     $('#js-navigation-menu').removeAttr('style'); 
     } 
    }); 
    }); 
} 

function dothis(){ 
    var ww = $(window).width(); 
    var emToPx = 53.75 * parseFloat($("html").css("font-size")); 
    if(ww < emToPx) { 
     smallVersion(); 
    } 
} 

$(document).ready(function() { 
    var menuToggle = $('#js-mobile-menu').unbind(); 
    $('#js-navigation-menu').removeClass("show"); 

    menuToggle.on('click', function(e) { 
    e.preventDefault(); 
    $('#js-navigation-menu').slideToggle(function(){ 
     if($('#js-navigation-menu').is(':hidden')) { 
     $('#js-navigation-menu').removeAttr('style'); 
     } 
    }); 
    }); 

    dothis(); 
}); 

Answer 4

檢查下面的代碼，希望它幫助。

我已經使用matchmedia來檢查屏幕分辨率。 IE 10及以上版本支持它。對於IE9及更低版本，您可以使用matchmedia polyfill https://github.com/paulirish/matchMedia.js/。

「最小寬度：53.75em」來自Refills css，在此之後它將更改爲移動導航。

$('li.nav-link').on('click', function(){ 
    if(!window.matchMedia("(min-width: 53.75em)").matches) { 
     menuToggle.trigger('click'); 
    } 
}) 

http://codepen.io/praveenvijayan/pen/YXrbKB