Divi Mega 메뉴에 대한 햄버거 아이콘을 만드는 방법

게시 됨: 2017-04-18

햄버거 아이콘은 메뉴와 동의어가 되었습니다. 세 개의 쌓인 수평선은 목록의 아이디어를 나타내며 명백한 유사성 때문에 "햄버거"라는 별명을 얻었습니다. Divi는 햄버거 아이콘을 사용하여 모바일 및 "슬라이드 인" 및 "전체 화면"과 같은 특정 헤더 스타일에서 기본 메뉴를 토글합니다.

오늘은 햄버거 아이콘을 사용하여 클릭 시 메가 메뉴를 전환하는 방법을 보여 드리겠습니다. 이것은 메뉴 옵션이 많은 사이트에 적합한 솔루션입니다. 햄버거 아이콘은 헤더를 깔끔하게 유지합니다. 또한 메가 메뉴의 조직화된 4열 레이아웃을 통해 사용자는 필요한 것을 빠르고 효율적으로 찾을 수 있습니다.

전후

기본적으로 메가 메뉴는 기본 상위 메뉴 링크 위로 마우스를 가져가면 작동합니다.

새로운 디자인과 기능을 구현한 후 메가 메뉴는 햄버거 아이콘을 클릭할 때만 표시됩니다.

Divi로 디자인 구현하기

YouTube 채널 구독

메뉴를 메가 메뉴로 변환

먼저 메가 메뉴를 만들거나 현재 메뉴를 메가 메뉴로 변경해야 합니다. 이 부분은 매우 간단합니다.

워드프레스 대시보드에서 모양 → 메뉴로 이동합니다. 새 메뉴 만들기를 클릭하고 메뉴 이름을 지정합니다.

메뉴 만들기 클릭

메뉴 화면의 우측 상단에 있는 화면 옵션 탭을 클릭하고 CSS 클래스를 체크하여 CSS 클래스 메뉴 속성을 활성화 시켜주세요.

이제 생성한 새 메뉴에 메뉴 항목을 추가할 수 있습니다.

먼저 햄버거 아이콘으로 사용할 메뉴 항목을 추가해 보겠습니다. 이 메뉴 항목은 다른 모든 메뉴 항목의 상위 항목이 됩니다.

이 메뉴 항목을 만들려면 다음 설정으로 사용자 정의 링크를 만드십시오. 

URL: http://#

Navigation Label: <div class="hamburger"></div>

CSS Classes: mega-menu

이 메뉴 항목은 특정 페이지로 연결되지 않기 때문에 URL은 단순히 해시태그(#)입니다. 이 메뉴 항목을 사용하여 클릭 시 메가 메뉴를 배포할 것입니다.

탐색 레이블에는 몇 가지 간단한 html 코드("hamburger" 클래스가 있는 div)가 있습니다. 이것은 Custom CSS를 사용하여 햄버거 아이콘을 표시하는 데 사용합니다.

CSS 클래스 "mega-menu"는 메가 메뉴 기능을 배포하는 것입니다. 이 CSS 클래스는 하위 항목이 아닌 기본 상위 메뉴 항목에 한 번만 적용해야 합니다.

이제 메가 메뉴를 구성할 메뉴 항목을 추가할 차례입니다. 이 예에서는 기본 메가 메뉴 항목 아래에 다음 상위 및 하위 메뉴 항목을 사용하고 있습니다.

  • 메가 메뉴 햄버거 아이콘 링크
    • 회사 소개
      • 우리 팀
      • 우리의 미션
      • 회사 연혁
    • 서비스
      • 웹 디자인
      • 웹 개발
      • 검색 엔진 최적화
    • 우리의 일
      • 블로그
      • 전자상거래
      • 기업
    • 문의하기
      • 지원하다
      • 지도
      • 채용정보

이제 4개의 메뉴 항목(각각 3개의 하위 항목이 있음)을 구성/끌어서 메인 상위 Mega Menu 링크의 하위 항목이 됩니다.

메뉴 구성이 끝나면 메뉴 설정에서 기본 메뉴를 확인하세요.

메뉴 저장

호버 대신 클릭 시 메뉴를 표시하는 jQuery 추가

이제 메가 메뉴가 생성되었으므로 마우스를 가져갈 때(기본값) 대신 아이콘을 클릭할 때 메가 메뉴가 표시되도록 jQuery를 추가해야 합니다. 이렇게 하려면 테마 옵션 → 통합으로 이동하여 "블로그 헤드에 코드 추가" 섹션에 다음 스크립트를 추가합니다. 

<script>
/*** Open menu itmes with children on click not hover ***/

(function($) {

jQuery(document).ready(function() {
jQuery('#top-menu li.mega-menu > a, #et-secondary-nav li.mega-menu > a').click(function(e) {
e.preventDefault();

jQuery(this).parent().toggleClass('show-submenu');
});
});

jQuery(document).click(function(e) {
if(!$(e.target).closest('.show-submenu').length) {
jQuery('.show-submenu').removeClass('show-submenu');
}
});

})(jQuery);
</script>

사용자 정의 CSS 추가

테마 옵션에 있는 동안 일반 설정에서 다음 사용자 정의 CSS를 추가하십시오. 

/*** hides sub-menu on hover ***/
#et-top-navigation #top-menu li.et-hover ul.sub-menu { display: none!important; }

/*** shows submenu on click ***/
#et-top-navigation #top-menu li.show-submenu ul.sub-menu { display: block!important; visibility: visible!important; opacity: 1!important; }

/*** Hide hamburger menu item on mobile ***/
.et_mobile_menu .mega-menu >
 a{display:none;}


#top-menu .mega-menu > a, #et-secondary-nav .mega-menu > a {padding-bottom: 24px !important;}

/**** hide down arrow ****/
#top-menu .mega-menu > a:first-child:after, #et-secondary-nav .menu-item-has-children > a:first-child:after {display: none;}

/*** show hamburger icon ***/
.hamburger:before {
    font-family: "ETmodules" !important;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 0.6em;
    text-transform: none;
    speak: none;
    position: relative;
    cursor: pointer;
    top: 0;
    left: 0;
    vertical-align: -11px;
    padding-right: 3px;
    font-size: 32px; /*change size of icon here*/
    content: "\61"; /*change icon here*/
    color: #333; /*change color of icon here*/
}

/*** displays the "x" close icon ***/
.show-submenu .hamburger:before {
    content: "\4d"; /*change x icon here*/
}

그게 다야!

이제 가서 결과를 확인하십시오

더 많은 사용자 정의 옵션

입력한 CSS에는 햄버거 아이콘 스타일을 변경할 수 있도록 전체에 주석이 있습니다. 여기에서 아이콘 스타일을 지정하는 CSS의 두 가지 주요 섹션을 찾을 수 있습니다.

햄버거 아이콘 변경

Divi에는 사이트에 사용할 수 있는 다양한 글꼴 아이콘이 있습니다. 다른 스타일의 햄버거 아이콘을 변경하려면 "여기에서 아이콘 변경"이라는 주석으로 레이블이 지정된 CSS 라인을 찾아 편집하기만 하면 됩니다. 

content: "\61"; /*change icon here*/

다음은 다양한 햄버거 아이콘에 대한 다양한 콘텐츠 값입니다. "\61"을 다음 중 하나로 바꾸면 됩니다.

사각형 아이콘 메뉴 – \62

원 아이콘 메뉴 – \63

ul 아이콘 – \64

ol 아이콘 – \65

정사각형 메뉴 아이콘 어둡게 – \e056

서클 메뉴 아이콘 어둡게 – \e057

"X" 아이콘 변경

다른 햄버거 메뉴 아이콘을 사용할 경우 디자인에 맞게 "x" 아이콘을 변경해야 합니다. 다음 CSS를 찾으십시오. 

/*** displays the "x" close icon ***/
.show-submenu .hamburger:before {
    content: "\4d";
}

"\4d"를 다음 콘텐츠 값 중 하나로 바꿉니다.

서클 닫기 메뉴 아이콘 – \51

서클 닫기 메뉴 아이콘 어둡게 – \e051

무료 다크 서클 아이콘 스타일이 적용된 메가 메뉴 햄버거 아이콘은 다음과 같습니다.

햄버거 아이콘의 색상 변경하기

햄버거 아이콘의 색상을 변경하려면 "아이콘 색상 변경"이라고 표시된 CSS 라인을 편집하십시오. 

Color: #333; /*change icon color here*/

햄버거 아이콘 크기 변경하기

햄버거 아이콘의 크기를 변경하려면 "여기서 아이콘 크기 변경"이라고 표시된 CSS 라인을 편집하십시오. 

Font-size: 32px; /*change size of icon here*/

햄버거 아이콘에 레이블 추가하기

아이콘에 레이블을 추가하는 것은 쉽습니다. Appearance → Menus 로 돌아가 "mega-menu" 클래스에 부여한 최상위 메뉴 항목을 편집하기만 하면 됩니다. 탐색 레이블 텍스트 상자에서 div 안에 레이블 텍스트를 추가합니다. 이 예에서는 "메뉴"라는 레이블을 추가했습니다.

<div class=”hamburger”>menu</div>

이제 햄버거 옆에 ​​레이블이 있습니다.

반응?

메가 메뉴는 980px보다 넓은 화면 크기에서만 작동합니다. 화면 크기가 980px 미만인 경우(태블릿 및 스마트폰) 메뉴가 기본 모바일 메뉴로 전환됩니다.

마지막 생각들

메가 메뉴를 좋아하고 헤더에 대해 깨끗하고 미니멀한 디자인을 만들고 싶다면 메가 메뉴를 표시하기 위해 햄버거 아이콘을 추가하는 것이 좋은 솔루션입니다. 이제 사용자는 간단한 클릭으로 모든 탐색 링크를 한 번에 볼 수 있습니다.

또한 Divi의 내장 글꼴 아이콘을 사용하면 처음부터 아이콘을 만들 필요 없이 CSS를 사용하여 햄버거 아이콘을 쉽게 사용자 지정할 수 있습니다.

또한 메가 메뉴에 이미지를 추가하여 더욱 눈에 띄는 메가 메뉴를 만들 수 있습니다.

그게 다야!

이 기능을 즐기시기 바랍니다. 귀하의 의견을 기다리겠습니다.