波旁威士忌补充导航菜单在单击时向上滑动

Question

我正在使用波旁补充装导航菜单，并希望对其进行修改，以便在小模式下单击链接时菜单会向上滑动。此时菜单下拉，但当单击菜单项时，菜单保持下拉状态。由于我使用带有固定顶部菜单的页面滚动，这意味着很多内容都隐藏在菜单后面。

这是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>

南海

.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

查看以下演示，按照您的期望在小型和大型版本中进行测试。

编辑 2

根据您的要求更新了小版本的切换。

代码笔

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 2

你可以试试...

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

Answer 3

检查以下代码，希望对您有所帮助。

我使用火柴媒体来检查屏幕分辨率。IE 10 及更高版本支持它。您可以将匹配媒体填充 https://github.com/paulirish/matchMedia.js/用于 IE9 及更低版本。

"min-width： 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

Answer 4

因此，我通过检测菜单按钮是否可见，然后将其用作 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');
      }
    });
  });
});