자바스크립트 제이쿼리 header gnb 탑메뉴 예제 1 (PC & 모바일)

https://codepen.io/kimyangsun/pen/BaYKPXm
자바스크립트 header gnb 탑메뉴 예제 1 (PC & 모바일)
...
codepen.io
자바스크립트 header gnb 탑메뉴 예제 1 (PC & 모바일) 코드펜 소스코드입니다.
탑메뉴 중에서도 자주 쓰이는 형태인데 2차메뉴까지 존재하는 경우 대부분 이런형식으로 작업하기에 예제를 만들어두면 좋을거 같아서 코드를 짰습니다.
물론 웹접근성도 준수하는 코드로 제작하였습니다. (ex : 키보드 접근성)
모바일 메뉴도 작업해뒀기에 새창으로 들어가서 화면을 조절해가며 확인하면 될 거 같습니다. :)
// 헤더 gnb 스크립트
let header = $('.header');
initGnb(header);
function initGnb(header){
let gnb = header.find('.header-gnb');
let gnbMenu = gnb.find('.gnb-depth-1 .depth-1');
let depthMenu = gnb.find('.gnb-depth-2');
let maxHeight = calculateMaxHeight();
if (window.innerWidth > 1024) {
changeMenuHeight(maxHeight);
}
gnb.on('mouseenter focusin', function(){
gnbOpen(header);
})
gnb.on('mouseleave focusout', function(){
gnbClose(header);
})
gnbMenu.on('mouseenter focusin', function(){
$(this).addClass('current');
})
gnbMenu.on('mouseleave focusout', function(){
$(this).removeClass('current');
})
$(window).on('resize', function(){
if (window.innerWidth > 1024) {
maxHeight = calculateMaxHeight();
changeMenuHeight(maxHeight);
}
});
function gnbOpen(header){
let headerHeight = maxHeight + 90;
header.css("height", headerHeight + "px").addClass('open');
}
function gnbClose(header){
header.removeClass('open').removeAttr("style");
}
function calculateMaxHeight(){
let heights = [];
depthMenu.each(function(){
let height = $(this).innerHeight();
heights.push(height);
});
let maxHeight = Math.max.apply(null, heights);
return maxHeight;
}
function changeMenuHeight(height) {
depthMenu.css("height", height + "px");
}
}
// 모바일 헤더 gnb 스크립트
let mobileGnb = $('.mobile-gnb');
initMobileGnb(mobileGnb);
function initMobileGnb(mobileGnb){
let html = $('html');
let sidebarButton = mobileGnb.find('.sidebar-btn');
let mobileMenu = mobileGnb.find('.depth-1 > a');
sidebarButton.on('click', function(){
if (mobileGnb.hasClass('open')) {
mobileGnbClose(mobileGnb);
} else {
mobileGnbOpen(mobileGnb);
}
});
mobileMenu.on('click', function(){
let $this = $(this);
let target = $this.parent();
let depthTarget = $this.siblings('ul');
let otherLinks = target.siblings('li');
let otherItems = otherLinks.find('ul');
if (target.hasClass('current')){
target.removeClass('current');
depthTarget.stop().slideUp(300);
} else {
otherLinks.removeClass('current');
otherItems.stop().slideUp(300);
target.addClass('current');
depthTarget.stop().slideDown(300);
}
});
$(window).on('resize', function(){
if (window.innerWidth > 1024) {
mobileGnbClose(mobileGnb);
}
});
function mobileGnbOpen(gnb){
gnb.addClass('open');
html.addClass('not-scroll');
}
function mobileGnbClose(gnb){
gnb.removeClass('open');
html.removeClass('not-scroll');
}
}
자바스크립트 header gnb 탑메뉴 예제 2 (PC & 모바일)
See the Pen header gnb 탑메뉴 예제 2 (자체 커스텀 코드) by kimyangsun (@kimyangsun) on CodePen. https://codepen.io/kimyangsun/pen/XWZdPbL 자바스크립트 header gnb 탑메뉴 예제 2 (PC & 모바일) ... codepen.io 자바스크립트 header
kimyang-sun.tistory.com
자바스크립트 header gnb 탑메뉴 예제 3 (PC & 모바일)
See the Pen 자바스크립트 header gnb 탑메뉴 예제 3 (PC & 모바일) by kimyangsun (@kimyangsun) on CodePen. https://codepen.io/kimyangsun/pen/YzjJgLL 자바스크립트 header gnb 탑메뉴 예제 3 (PC & 모바일) ... codepen.io 자바스크립
kimyang-sun.tistory.com