원페이지 방식의 테마이기 때문에 스크롤에 따는 현재 메뉴를 highlight 시키는 기능을 script와 css를 추가 해서 완료 하도록 하겠습니다.
기존의 index.php 파일의 section의 id 부분이 숫자로 되어 있는데 이 부분을 클릭시 이동을 위해 상단 메뉴와 동일한 아이디 이름으로 변경 합니다.
index.php 파일에서 section_# 로 되어 있는 아이디 부분을 검색 해서 수정 합니다.
index.php
<!-- services --> <section id="services" class="services"> .. <!-- about us --> <section id="about" class="about bg-light-gray"> .. <!-- portfolio --> <section id="portfolio" class="portfolio"> .. <!-- team: meet the team --> <section id="team" class="team bg-dark-gray"> .. <!-- goal --> <section id="goal" class="goal"> .. <!-- contact --> <section id="contact" class="contact pb-0"> .. <!-- sns --> <section id="sns" class="sns">
위과 같이 각 section의 id 값을 변경 해 주고
외모 > 메뉴 에서
위와 같이 수정하고 저장 합니다.
custom.js
function initMenu() { var sectionArray = $('#primary-menu li a'); $.each( sectionArray, function(index, value) { var $value = $(value), $href = $value.attr('href').slice(1); $(document).scroll(function() { var offsetSection = $('section[id='+$href+']').offset().top - offsetTop, docScroll = $(document).scrollTop(), docScroll1 = docScroll + 1; if ( docScroll1 >= offsetSection ) { $('li a').removeClass('active'); $('li a:link').addClass('inactive'); $('li a').eq(index).addClass('active'); $('li a:link').eq(index).removeClass('inactive'); } }); sectionArray.eq(index).on('click', function(event) { event.preventDefault(); var offsetClick = $('section[id='+$href+']').offset().top - offsetTop; $('html, body').animate({ 'scrollTop': offsetClick }, 800) }); }); } $( document ).ready(function() { initSlick(); initMasonry(); initMagnific(); initCountUp(); initScroll(); initMenu(); });
위의 내용은 스크롤에 따른 메뉴 highlight(해당 a 태그에 class 추가) 작업 및 클릭에 따른 이동을 자연스럽게 이동하는 스크립트 부분입니다.
여기까지 저장하고 새로고침 하면 스크롤에 따른 메뉴가 정리 된것을 확인하실 수 있습니다.
이제 거의 마무리 단계로 모바일에서 메뉴 부분을 정리하도록 하겠습니다.
custom.js
(function ($) { var isMobileSize = true; var offsetTop = 85; // skrollr on off function enableSkrollr(){ console.log('we are on desktop'); var s = skrollr.init({ forceHeight: false }); } function disableSkrollr(){ console.log('we are on mobile'); // Destroy Skrollr var s = skrollr.init(); s.destroy(); } enquire.register("screen and (min-width: 992px)", { match : function() { enableSkrollr(); isMobileSize = false; offsetTop = 85; }, unmatch : function() { disableSkrollr(); isMobileSize = true; $('.site-header').removeClass('nav-up nav-down nav-top'); offsetTop = 50; } });
4, 23, 29: 반응형에 따라 상단 여백을 지정합니다.
var $body = $('body'), $siteNavigation = $('#site-navigation'), $menuToggle = $('.menu-toggle'), $menuWrap = $('.main-navigation .menu-main-container'), $menuWrapAtag = $('.main-navigation .menu-main-container ul li a'); $menuToggle.on('click', function(event) { var $this = $(this), status = $this.attr('aria-expanded'); if ( status === 'true' ) { // open mobile menu $body.bind('touchmove', function(e){e.preventDefault()}); $menuWrap.addClass('active'); $menuWrapAtag.addClass('reset'); $menuWrapAtag.each(function(i, el) { setTimeout(function() { $(el).removeClass('reset').addClass('eff'); }, 100 + (i * 100)); }); } else { // close mobile menu $body.unbind('touchmove'); setTimeout(function() { $menuWrap.removeClass('active'); }, 200); $menuWrapAtag.addClass('reset').removeClass('eff'); } }); $menuWrapAtag.on('click', function() { $menuToggle.attr('aria-expanded', 'false'); $siteNavigation.removeClass('toggled'); $body.unbind('touchmove'); $menuWrap.removeClass('active'); $menuWrapAtag.addClass('reset').removeClass('eff'); });
마지막으로 main.css 파일을 일부 수정 하겠습니다.
.site-header .main-navigation .menu-main-container.active { top: 0; }
기존 .site-header .main-navigation.toggled .menu-main-container -> 부분을 .site-header .main-navigation .menu-main-container.active 로 수정 합니다.
기존에는 마우스 클릭 후 class 변화에 따른 모바일 메뉴 방식에서 마우스 클릭에 따른 class 부여 방식으로 변경 했습니다.
.site-header .main-navigation .menu-main-container ul li { float: none; } .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%; position: relative; transition: all 0.25s ease-in-out; } .site-header .main-navigation .menu-main-container ul li a.reset { opacity: 0; top: -25px; } .site-header .main-navigation .menu-main-container ul li a.eff { opacity: 1; top : 0; }
.site-header .main-navigation .menu-main-container ul li a 클래스에
position 및 transition을 속성을 추가 하고 .reset, .eff 클래스를 추가 했습니다.
.reset 클래스를 초기화 클래스 이고
.eff 클래스는 top 및 opacity 효과를 주는 클래스 입니다.