반응형에 따른 메뉴 정리 및 전체적인 디자인을 조금씩 다듬어 가면서 사이트 퀄리티를 높이고 마무리 하도록 하겠습니다.
우선 현재 상단 메뉴가 스크롤에 따라 배경색이 없어서 하단으로 스크롤시 잘 노출이 되지 않아 메뉴 부분을 전체적으로 다시한번 정리하도록 하겠습니다.
스크롤에 따른 반응을 처리해야 하기 때문에 custom.js 파일 수정을 먼저 실행 합니다.
custom.js
(function ($) { var isMobileSize = true;
제일 상단에 모바일 사이즈 인지를 체크하는 변수를 하나 선언 합니다.
function initScroll() { var didScroll = false, lastScrollTop = 0, delta = 5, navbarHeight = $('#primary-menu').outerHeight(), siteHeader = $('.site-header'); $(window).scroll(function(event) { didScroll = true; }); setInterval(function() { if ( didScroll && !isMobileSize ) { hasScrolled(); didScroll = false; } }, 250); function hasScrolled() { var st = $(this).scrollTop(); // Make sure they scroll more than delta if ( Math.abs(lastScrollTop - st) <= delta) return; if ( st > lastScrollTop && st > navbarHeight ) { // Scroll Down siteHeader.removeClass('nav-down').addClass('nav-up'); } else { // Scroll Up if (st + $(window).height() < $(document).height()) { siteHeader.removeClass('nav-up').addClass('nav-down'); } } if ( st < navbarHeight ) { // big size menu siteHeader.removeClass('nav-down').addClass('nav-top'); $('#primary-menu li a').eq(0).removeClass('active'); } else { // small size menu siteHeader.removeClass('nav-top'); } lastScrollTop = st; } } $( document ).ready(function() { initSlick(); initMasonry(); initMagnific(); initCountUp(); initScroll(); });
윈도우 사이즈 변화 및 스크롤에 따라 클래스를 추가 및 삭제 하고 이에 따른 css를 정리 합니다.
main.css
.site-header .main-navigation .menu-main-container ul li a { background-color: transparent; color: white; padding: 65px 15px 30px; height: 115px; display: inline-block;
기존 내용중 .site-header > .main-navigation > .menu-main-container > ul > li > a 의 스타일일 일부 추가 및 수정 합니다.
160: padding 수정
161: height 고정값 추가
/* scroll */ .site-header.nav-down, .site-header.nav-up { top: -30px; height: 115px; background-color: rgba(255, 255, 255, 1); } .site-header.nav-top { top: 0; background-color: rgba(255, 255, 255, 0); } .site-header.nav-down .main-navigation .menu-main-container ul li a, .site-header.nav-up .main-navigation .menu-main-container ul li a { color: rgba(0, 0, 0, 0.3); }
위와 같이 스크롤에 따른 메뉴 스타일을 추가 해 줍니다.
.site-header .main-navigation .menu-main-container ul li a { color: rgba(0, 0, 0, 0.2); font-size:1.6rem; line-height: 1.6rem; height: inherit; padding: 0.8rem 1rem; width: 100%; }
735: 반응형에 따른 높이 값을 추가 해 줍니다.
사이트를 새로고침 하면 스크롤과 반응형에 따라 변하는 상단 메뉴를 확인하실 수 있습니다.