Bourbon Refill Navigationsmenü bei Klick nach oben

Question

Ich benutze das Bourbon Refill Navigationsmenü und möchte es so ändern, dass wenn ein Link im kleinen Modus geklickt wird, das Menü wieder hochgleitet. Im Moment wird das Menü ausgeblendet, aber wenn ein Menüelement angeklickt wird, bleibt das Menü unten. Da ich Scroll-on-Page mit einem festen Top-Menü verwende, bedeutet dies, dass ein großer Teil des Inhalts hinter dem Menü versteckt ist.

Hier ist der Code auf Codepen:

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

Meine vorhandenen Code ist unten:

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'); 
    } 
}); 
}); 
}); 

Hilfe sehr geschätzt

Mike

Answer 1

So sortierte ich dies durch Erfassen, ob die Menütaste sichtbar war, und mit dann, dass als Knebel in der 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

Sie könnten versuchen, ...

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

Answer 3

Schauen Sie sich die folgende Demo getestet in kleinen Arbeits Großen und Ganzen Version als Ihre Erwartung.

EDIT 2

Aktualisiert Makeln für kleine Version wie pro Ihre Anforderung.

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

Überprüfen Sie die folgenden Code, hoffe, es hilft.

Ich habe matchmedia verwendet, um die Bildschirmauflösung zu überprüfen. IE 10 und höher unterstützt es. Sie können Matchmedia Polyfill https://github.com/paulirish/matchMedia.js/ für IE9 und darunter verwenden.

"min-width: 53.75em" ist von Refills css nach diesem Punkt wechselt es zur mobilen Navigation.

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

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