티스토리 스킨 만들기 강좌 #001 - 1단 스킨(4) 카테고리 메뉴를 드롭다운 메뉴로 만들기

드롭다운 메뉴는 1뎁스 메뉴에 마우스를 올리면 2뎁스 메뉴가 나타나는 방식입니다.

여기서는 티스토리 카테고리 메뉴를 보여주는 치환자

• 분류 전체보기 (13)
  • 티스토리 스킨 강좌 (8)
    • 1단 스킨 (7)
    • 2단 스킨 (1)
  • 티스토리 모듈 강좌 (1)
    • 디자인 수정하기 (1)
    • 간단한 기능 추가하기 (0)
    • 복잡한 기능 추가하기 (0)
  • 티스토리 스킨 배포 (4)

내부를 수정하도록 하겠습니다.

 

1. 카테고리 메뉴 디자인 수정하기

• .area_menu 디자인 수정하기
• @media screen and (min-width: 821px) { 안에 있는 .area_menu 디자인 수정하기
• .area_menu .list_gnb .link_gnb 디자인 수정하기
• (권장) 필요없는 코드 제거하기
• @media screen and (min-width: 821px) { 의 .area_menu .list_gnb .link_gnb 코드 삭제하기
• (권장) 필요없는 코드 제거하기

 

.area_menu 로 검색해서, 다음 코드로 수정합니다. (보더라인과 트랜지션을 제거합니다.)

 

 

.area_menu {
  position: fixed;
  overflow: auto;
}

 

마찬가지로 @media screen and (min-width: 821px) { 안에 있는 .area_menu 코드도 수정해줍니다.

margin: 20px auto 로 수정했는데, 위아래 여백을 20px 씩 주겠다는 뜻입니다.

 .area_menu {
  position: relative;
  max-width: 800px;
  margin: 20px auto;
  overflow: visible;
  background: #fff;
  border: 1px solid #000;
 }

바로 밑에 다음 코드를 추가합니다.

.category_list > li {
  position: relative;
}

 

 

CSS 탭에서 .area_menu .list_gnb .link_gnb 를 검색하여,  관련 부분을 다음과 같이 수정했습니다.

(일부 코드 삭제처리)

.area_menu .list_gnb .link_gnb {
  display: block;
  padding: 15px;
  font-size: 16px;
  font-weight: bold;
}

.area_menu .list_gnb .list_lnb .link_lnb {
  display: block;
  padding: 15px;
}

.area_menu .list_gnb .sub_category_list {
  display: none;
  position: absolute;
  top: 100%;
  width: 100%;
  border: 1px solid #000;
  border-top: 0;
  z-inex: 100;
  background: #fff;
}

 

그리고 그 하단에 있는 .area_menu .list_sns 부분과, .area_menu .box_visit 부분 CSS 를 삭제합니다.

필요없는 코드라서 삭제합니다. 건너뛰어도 무방합니다.

 

 

@media screen and (min-width: 821px) { 로 검색하여 괄호 안에 있는 .area_menu .list_gnb .list_lnb 코드를 삭제합니다.

 

해당 코드 바로 아래에 있는 쓸모없는 코드도 같이 지워줍니다. (건너뛰어도 무방합니다.)

 

2. (선택) 뉴 아이콘이나 글 개수를 지우기

카테고리 목록에 생기는 뉴 아이콘이나 갯수 표시를 지우고 싶으면, 다음 코드를 추가해줍니다.

// 1뎁스 메뉴의 카테고리 개수 제거
.area_menu .list_gnb .link_gnb .c_cnt{
	display: none;
}

// 1뎁스 메뉴의 뉴 아이콘 제거
.area_menu .list_gnb .link_gnb img{
	display: none;
}

// 2뎁스 메뉴의 뉴 아이콘 제거
.area_menu .list_gnb .list_lnb .link_lnb img{
	display: none;
}

// 2뎁스 메뉴의 카테고리 개수 제거
.area_menu .list_gnb .list_lnb .link_lnb .c_cnt{
	display: none;
}

 

3. 카테고리 메뉴를 드롭다운 메뉴로 만드는 코드 추가

• HTML 탭 최하단 script 사이에 다음 코드를 추가합시다.

 

이제 드롭다운 메뉴로 만드는 코드를 추가합니다.

이 코드는 마우스 오버한 메뉴의 서브 메뉴만 보여주는 형식입니다.

HTML 탭 최하단으로 가서, script 사이에 다음 코드를 추가합니다.

 $(document).ready(function () {
  $('.area_menu .list_gnb .link_gnb').on("mouseenter mouseover focus", function () {
    $('ul.sub_category_list').hide();
    $(this).siblings('ul.sub_category_list').show();
  });

  $('.area_menu .list_gnb').on("mouseleave blur", function () {
    $('ul.sub_category_list').hide();
  });
 });

 

3-1. 마우스 오버 시에 전체 메뉴가 보이게 하고 싶으면?

만약 마우스 오버 시에 전체 메뉴가 다 나타나길 원한다면, 다음 코드를 사용하세요.

이 코드가 바뀌었다고 해서 밑에서 달라지는 부분은 없습니다.

$(document).ready(function () {
  $('.area_menu .list_gnb').on("mouseenter mouseover focus", function () {
    $('ul.sub_category_list').show();
  }).on("mouseleave blur", function () {
    $('ul.sub_category_list').hide();
  });
});

 

 

 

4. 오류 수정하기

• @media screen and (max-width: 820px) { 안에 있는 .area_menu .list_gnb .list_lnb 코드 수정하기

 

이렇게 되면, 모바일에서도 스크립트가 동시에 적용이 되어버립니다.

피시에서만 메뉴가 온오프 되도록 CSS 를 수정하겠습니다.

 

@media screen and (max-width: 820px) { 안에 있는 .area_menu .list_gnb .list_lnb 코드를 검색해서 찾습니다.

 

노란색 영역

아래 코드로 수정합니다.

아까 피시에서 보더 디자인을 줬기 때문에 이부분도 수정해줍니다.

.area_menu .list_gnb .list_lnb {
  display: block !important;
  position: static;
  border: 0;
  background: none;
}

 

그러면 이제 성공적으로 마우스 오버 시에 메뉴가 나타났다가 사라지는 걸 볼 수 있습니다.

 

모바일 화면에서 보기

PC 에서 보기

 

 

뭔가 잘못되었다면, 위에서부터 다시 천천히 따라해보세요.

 

 

다음 글에서 계속 적겠습니다.