티스토리 CCZ-CROSS 스킨 확장 메뉴 PC에서 사용하기

오늘은 티스토리 블로그 반응형 스킨인 CCZ-CROSS의 확장 메뉴의 수정에 대해서 알아보겠습니다.

흉내내기님이 만드신 CCZ-CROSS스킨은 모바일과 테블릿에서 확장 메뉴를 지원합니다.

슬라이드 메뉴(?) 사이드 메뉴(?) 사이드 네비게이션(?) 콜 메뉴(?) 정확한 명칭은 잘모르겠어요 ㅠ 죄송합니다.

스킨 다운로드 및 스킨소개는 해당 페이지를 확인하세요.

http://webdir.tistory.com/491 - CCZ-CROSS 스킨 소개

아무튼 좌측 상단을 클릭하면 짜잔 하고 예쁜 메뉴가 튀어나옵니다.

하지만! PC화면에서는 카테고리만 덩그라니... ㅠ_ㅠ

그래서 PC 화면에서도

모바일과 태블릿과 같은 확장 사이드 슬라이드 네비게이션 메뉴를 사용해보도록 하겠습니다.

본격적으로 시작 해봅시다.

우선 해당 부분이 어떤 요소인지 확인을 해봅시다.! 모바일 화면에서 확인을 해보면

site-header 안 head-left 안 call-exmenu 요소 였습니다.

메뉴를 열어서 확인을 해보니

몇몇 요소들이 모바일과 태블릿 환경에서만 보여지도록 클래스 값을 가진 것을 알 수있습니다.

더자세한 반응현 유틸리티 속성에 대해서 알고 싶으시다면

해당 링크를 확인하세요!!

http://bootstrapk.com/css/#responsive-utilities

이제 HTML/CSS 편집으로 들어가 해당 부분을 찾아서 수정해줍니다.

모바일과 태블릿만 보이도록 설정된 클래스 값을 수정해서 데스크탑에서도 나타나게 설정을 하는 작업입니다.


		<div class="expand-top visible-xs visible-sm">
		<div class="expand-visitor visible-xs visible-sm">
		<div class="expand-admin ci-link visible-xs visible-sm">

visible-xs 와 visible-sm 을 삭제하거나 데스크탑용 클래스를 추가해줘야합니다.

저는 삭제를 하겠습니다. 위에 부분을 각각 찾아서 아래처럼 만들어주세요.


		<div class="expand-top">
		<div class="expand-visitor">
		<div class="expand-admin ci-link">

아래의 이미지 처럼 코드가 떨어져있으니 잘확인하시고 삭제해주셔야합니다.

삭제를 하고 새로 고침을 하고 확인해보니

밑에 메뉴가 추가 되었는데 다른 요소들은 보이지 않습니다.

바로! 데스크탑이상 화면에서는 흰색 배경이 설정 되어 있어서 그렇습니다.

스타일 속성을 변경을 해주러 갑니다.


/* 모달 카테고리확장
-------------------------------------------------------------------------- */
@media (min-width:992px) {
    #expand-menu {
        width: 50%;
        height: 100%;
        background: #fff
    }
    #expand-menu .scrollable {
        padding: 60px 30px 90px
    }
    .expand-hd {
        padding-top: 0;
        padding-bottom: 0
    }
}

CSS 에서 모달 카테고리확장 부분에 @media 미디어쿼리 안 #expand-menu에 배경색이 흰색이 지정되어있습니다.

backgraound: #fff 이부분을 삭제 해주시면 됩니다!!

그럼 모바일과 같은 네비게이션 확장 사이드 슬라이드 메뉴가 나오게 됩니다!