본문으로 바로가기

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

로딩중..
2016.02.23 00:55

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


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


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

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

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


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


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



그래서 PC 화면에서도


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

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

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

site-headerhead-leftcall-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 이부분을 삭제 해주시면 됩니다!!

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



이제 본인에 입맞게 padding 값과 width 너비를 조절해주면 됩니다!

그럼 PC화면에서도 예쁘게 블로그를 꾸미시길 바랍니다! ㅎㅎ

신고

댓글을 달아 주세요

  1. BlogIcon SONYLOVE 2016.02.23 02:20 신고

    확실히 메뉴바 모양이 모바일용이 이쁘더라고요. 데탑용은 좀 ....ㅡ,.ㅡ

    • BlogIcon COCOSOFT COCO Media 2016.02.23 15:03 신고

      네 ㅠㅎㅎ 기본에 충실한 스킨이라서 그런거같아요. 그래서 꾸밀때는 다른 스킨들보다 더 좋은거같아요 ㅎㅎ 스킨구조도 포스팅으로 알려주셨고 웬만한 CSS강좌도 있으니깐요.이번에 스킨고친다고 많이 배우고있네요ㅎㅎ

    • BlogIcon SONYLOVE 2016.02.23 20:15 신고

      저도 이번에 스킨 꾸미느라 공부 많이 당하고 있습니다. ㅠ.ㅠ

    • BlogIcon COCOSOFT COCO Media 2016.02.23 20:38 신고

      저두요 ㅠㅠ 하도 뜯고고치다보니 지금 익플10에서 로딩이 제대로 되지 않고 프리로더 도는 현상이 계속발생했네요.. 그럼 fouc 를 걸어놓은 곳이 나타나질 않아서.. ㅠ_ㅠ 원본스킨은 잘보이는데

      도대체 뭘 ㅠ 부착해서 그랬는지 하나씩 다보고있네요 ㅎㅎ
      2016년 2월19일에 한국인터넷진흥원에서 발표한 통계를 보니깐 아직도
      윈도우8때문에 한국 사람에서 익스플로러10을 29%나 사용하더라구요. 운영체제를 다맞추기는 정말 힘든거같아요 ㅠ_ㅠ.. 윈7도 익플11을 지원하는데.. 윈8만 ㅠ지원하지않으니..

      정말 평소에 사용하지않는 거지같은 익플이지만 점유율이 가장높으니 울며겨자먹기로 맞추는수밖에 없을것 같아요.
      ㅠ_ㅠ오늘은 역순으로 하나씩 지워가면서 스킨 꾸미는걸 해봐야겠네요

    • BlogIcon SONYLOVE 2016.02.23 20:47 신고

      구형 익스까지 배려하시다니.. 너무 친절하신데요. 저는 될라면 되고 안되면 말고의 심정으로 해요. 윈도우는 확인할 방법도 없기도 하고요. ㅡ,.ㅡ

    • BlogIcon COCOSOFT COCO Media 2016.02.23 20:58 신고

      소니러브님 스킨은 끊김현상없이! 구형익스플로러에서도 잘 돌아가고 있어요 ㅎㅎ! 원본스킨도 익플10에서는 계속 새로고침을 해야지 정상적으로 나타나거든요 ㅎㅎ 그런 현상없이 한번에 로딩이 잘되고있습니다!!

    • BlogIcon SONYLOVE 2016.02.23 21:40 신고

      다행이네요. 될대로 되라하는 심정이었는데요;;; 속으로는 내심 구형 익스에서는 불편한게 많아져서 사용자들이 억지로라도 업글의 마음이 생기길 바랬는데요. -.-;
      그리고 저는 FOUC 이라고 써진건 모두 찾아서 지워버렸어요. style.css 와 html, reset.css 모두요.
      코코님도 같은 스킨 쓰는 다른 블로그보다 꽤 빠르게 느껴져요.

  2. BlogIcon BlackTeddyBear 2016.05.01 03:13 신고

    이해가안되네요;;

  3. BlogIcon 엔쵸비킹 2017.02.19 13:35 신고

    CCZ-CROSS 스킨 사용중이었는데 이 포스팅보고 적용시켰습니다. 감사합니다!

티스토리 툴바