[英]Bourbon Refill Navigation Menu slide up on click
我正在使用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');
}
});
});
});
非常感謝
麥克風
請查看以下經過測試的小型和大型版本,以滿足您的需求。
編輯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();
});
你可以試試......
$('header.navigation').on('click',function(){
$('header.navigation ul.submenu').css('display','none');
})
檢查以下代碼,希望它有所幫助。
我用matchmedia來檢查屏幕分辨率。 IE 10及以上版本支持它。 對於IE9及以下版本,您可以使用matchmedia polyfill https://github.com/paulirish/matchMedia.js/ 。
“min-width:53.75em”來自Refills css,此后它改為移動導航。
$('li.nav-link').on('click', function(){
if(!window.matchMedia("(min-width: 53.75em)").matches) {
menuToggle.trigger('click');
}
})
所以我通過檢測菜單按鈕是否可見,然后將其用作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');
}
});
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.