메뉴 아이템 배경색 바꾸기 & Drop Down 효과주기

메뉴 아이템 배경색 바꾸기 & Drop Down 효과주기

Drop Down 기능이란 메인 메뉴에 마우스를 올려놓았을 때 서브 메뉴들을 보여주는 기능이다. 하지만 Bueno 테마는 CSS로만 Drop Down 기능이 구현되어 있어서 웹사이트에서 흔히 볼 수 있는 플래시로 만들어진 메인 메뉴들처럼 부드럽게 서브메뉴들이 내려오는 효과는 없다. 워드프레스에서는 이런 효과가 포함된 메뉴는 플래시 프로그램을 사용하지 않고 자바스크립트 라이브러리(library)인 jQuery를 사용한다. 대부분의 워드프레스 유료테마들이 CSS로 만들어진 Drop Down 메뉴에 부드럽게 내려오는 효과를 구현할 때에는 superfish plugin을 사용하는데,  Bueno 테마에는 사용이 되진 않았지만 superfish plugindl ‘wp-content/themes/bueno/includes/js’ 폴더 안에 저장되어 있다. 이 섹션에서는 이 superfish.js를 이용하여 Drop Down 메뉴에 효과를 넣어 보겠다.

메뉴 클래스 이름 파악하기

  1. Google Chrome 개발자 도구로 메뉴를 클릭하여 클래스 이름을 파악한다.
  2. 사이트에서 메뉴를 구성할 때는 <ul> 태그를 사용하는데, Bueno 테마에서도 <ul> 태그가 메뉴로서 사용되고 있다. <ul> 태그에 id값과 class 이름이 있는데, 그 중에서도 워드프레스에서는 ‘menu’라는 이름의 class가 공통적으로 메뉴에 해당하는 class 이름이다. 지금부터 class 이름인 menu를 기억한 수 script.js 파일을 등록해 보겠다.

script.js 파일 등록하기

  1. FTP에 접속해서 ‘wp-content/themes/bueno/includes’ 폴더를 찾는다.
  2. script.js 파일을 작성하기 전에 wp_enqueue_script 함수를 사용하여 script.js 파일이 jQuery 라이브러리를 사용한다는 아래 코드를 추가한다.
    wp_enqueue_script( ‘script’, get_bloginfo(‘template_directory’).’/includes/js/script.js’, array( ‘jquery’ ));
  3. wp_enqueue_script 함수를 이용하여 코드를 추가하는 이유는 사이트가 js 파일들을 불러올 때 가장 마지막에 읽어 들여 좀 더 빠른 속도를 제공하기 때문이다. notepad++ 등과 같은 메모장으로 아래 코드를 작성한 후 script.js 저장하고
    jQuery(document).ready(function(){/* 메뉴 DropDown */
    jQuery(‘ul.menu’).superfish({
    delay: 0,
    animation:{opacity:’show’, height: ‘show’},
    speed: 250
    });
    });
  4. FTP 파일질라를 사용하여 ‘wp-content/themes/bueno/includes/js’ 폴더안에 업로드한다.
  5. 업로드가 완료되었다. 사이트를 열어 보면 메뉴아이템 옆에 ‘》’ 표시와 함께 Drop Down 메뉴가 완성된 것을 확인할 수 있다.

메뉴 배경색 미리 적용하기

이제 메뉴 배경색을 Google Chrome 개발자 도구를 이용하여 배경을 미리 적용해 보겠다.

  1. 개발자 도구를 열고 돋보기 아이콘을 클릭한 후 메뉴와 Search 바 사일를 클릭한다. 메뉴 부분을 감싸고 있는 <div> 태그를 확인할 수 있다.
  2. 메뉴 부분을 감싸고 있는 <div> 태그의 id값은 다음과 같은 ‘pagenav’이다. 다음 그림과 같은 CSS로 메뉴의 배경색과 Top 부분 padding-top 속성을 사용하여 여백을 확보한다.
  3. pagenav에 CSS를 적용하면 다음 그림과 같은 결과 화면을 확인할 수 있다. 위 그림을 보면 ‘Search’ 버튼이 너무 붙어있어, 오른쪽 끝부분에 여유 공간을 설정할 필요가 있다.
  4. 간격을 조절한 후 글자 크기를 줄이는 방법으로 변경해 보도록 하겠다. 먼저 개발자 도구를 실행한 후 다음 그림처럼 ‘SearchBar’ 를 클릭하고 CSS를 적용시켜 미리보기 화면으로 화면을 확인해 보겠다.
  5. SearchBar를 감싸고 있는 <div> 태그의 id값은 ‘메뉴 CSS 미리보기 적용 후 화면’에서 볼 수 있듯이 ‘topsearch’이다. 다음 그림과 같이 padding-right 속성을 사용하여 SearchBar 오른쪽 공간을 띄워 준다.

답글 남기기