0
使用ul li a製作一頁響應式下拉式菜單,當漢堡包在移動時點擊關閉它,它會正確隱藏ul。問題是,當我調整大小以查看桌面版本並選擇ul隱藏的菜單項時。我無法弄清楚如何做到目標僅針對移動版UL ...這裏是JS一頁響應式菜單
菜單JS
(function($) {
$.fn.menumaker = function(options) {
var cssmenu = $(this),
settings = $.extend({
format: "dropdown",
sticky: false
}, options);
return this.each(function() {
$(this).find(".button-mobile").on('click', function() {
$(this).toggleClass('menu-opened');
var mainmenu = $(this).next('ul');
if (mainmenu.hasClass('open')) {
mainmenu.slideToggle().removeClass('open');
} else {
mainmenu.slideToggle().addClass('open');
if (settings.format === "dropdown") {
mainmenu.find('ul').show();
}
}
});
cssmenu.find('li ul').parent().addClass('has-sub');
multiTg = function() {
cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>');
cssmenu.find('.submenu-button').on('click', function() {
$(this).toggleClass('submenu-opened');
if ($(this).siblings('ul').hasClass('open')) {
$(this).siblings('ul').removeClass('open').slideToggle();
} else {
$(this).siblings('ul').addClass('open').slideToggle();
}
});
};
if (settings.format === 'multitoggle') multiTg();
else cssmenu.addClass('dropdown');
if (settings.sticky === true) cssmenu.css('position', 'fixed');
resizeFix = function() {
var mediasize = 960;
if ($(window).width() > mediasize) {
cssmenu.find('ul').show();
}
if ($(window).width() <= mediasize) {
cssmenu.find('ul').hide().removeClass('open');
}
};
resizeFix();
return $(window).on('resize', resizeFix);
});
};
})(jQuery);
(function($) {
$(document).ready(function() {
$("#cssmenu").menumaker({
format: "multitoggle"
});
$("#cssmenu ul li a").on('click','li', function() {
$(".button-mobile").removeClass('menu-opened');
// $(this).next('ul').show();
});
});
})(jQuery);
HTML
<header>
<div class="container logo-nav">
<div class="sixteen columns">
<div class="logo"></div>
<nav id="cssmenu">
<div class="button-mobile"></div>
<ul>
<li><a href="#about" class="smoothScroll">ABOUT</a></li>
<li><a href="#services" class="smoothScroll">SERVICES</a></li>
<li><a href="#research-media" class="smoothScroll">RESEARCH-MEDIA</a></li>
<li><a href="#creative" class="smoothScroll">CREATIVE</a></li>
<li class="buttonfill"><a href="#contact" class="smoothScroll">CONTACT</a></li>
</ul>
</nav>
</div>
</div>
<hr>
</header><!-- End Header -->
我需要通過js添加一個id或class到這個ul,它只會在瀏覽器顯示導航的移動版本的960時才被應用,但我不知道如何配置代碼。
使用CSS @media查詢發現屏幕尺寸。例如:@media(max-width:560px){/ * PLACE CSS FOR MOBILE VERSION * /} – mRizvandi