블로그

CCZ-CROSS 스킨 꾸미기 - 메뉴 화면 변경 & 메뉴 버튼 보이기

2017. 1. 9. 19:27

내가 현재 사용중인 CCZ-CROSS 스킨의 꾸미기에 관한 글을 좀 더 써보려 한다.

이 스킨을 사용하면서 여기저기 신경쓴 부분들이 많은데도 감춰지거나 잘 활용하지 못하여 안타까운 부분들이 있다. 특히 메뉴 버튼과 사이드 메뉴의 내용들의 구성이 그렇다.

메뉴버튼을 클릭시 나타나는 사이드 메뉴는 현재 상태로도 나쁘지 않지만 모바일 화면이 더 맘에 들어서 PC 화면에서도 같은 모습으로 변경했다.

변경하는 방법은 아주 간단하다.

몇군데만 간단한 수정으로 모바일과 PC 화면에서 동일한 화면을 볼 수 있다.


PC 화면의 메뉴 화면모바일 화면

1메뉴 버튼 보이기 설정



먼저 메뉴 화면을 변경하기 전에 스킨의 모바일에서 보이는 메뉴 버튼인 세줄 모양의 햄버거 버튼이 PC 화면에서는 보이지 않는다.


메뉴 버튼을 PC 에서 보이게 하기 위해서는 스킨의 HTML 에서 site-header 부분에서 icon-navbar 의 visible-xs 와 visible-sm 을 삭제하면 PC 화면에서도 메뉴 버튼을 볼 수 있다. visible-xs 와 visible-sm 은 모바일 화면과 태블릿? 화면에서만 보이게 하라는 것이므로 삭제하면 모든 화면에서 볼 수 있게 된다.

메뉴 버튼의 위치는 원하는 대로 옮기면 된다. 맨 앞으로 변경하고 싶다면 그 아래부분까지 3줄을 잘라서 4번째 <h1 ... 바로 앞으로 옮기면 된다.

<!-- site-header  { -->
<header id="site-header" class="nav-down clearfix" role="banner">
	<div class="header-left">
		<h1 class="brand"><a href="[##_blog_link_샵샵]">[##_title_샵샵]</a></h1>
		<a href="#expand-wrap" id="call-exmenu" aria-haspopup="true" aria-expanded="false">
			<div class="icon-navbar visible-xs visible-sm">  <!-- 메뉴버튼 - visible-xs 와 visible-sm 삭제 -->
				<span class="icon-bar"></span>
			</div>

2메뉴 화면 변경

메뉴 화면을 변경하기 위해서는 몇군데 미리 수정할데가 있다. 바로 위에 버튼 보이기와 비슷한 과정이다.

스킨의 HTML 에서 900번째 줄 근처에 expand-menu 란 부분이 있다. 이 부분이 메뉴 버튼안의 내용이다. 이 부분에도 메뉴버튼과 동일하게 모바일에서만 보이도록 설정한 부분들이 있다. 블로그의 타이틀과 메뉴 링크 추가 등이 모바일에서만 보이도록 설정되어 있다.

<div class="expand-top visible-xs visible-sm">   <!-- 블로그 타이틀 등 - visible-xs 와 visible-sm 삭제 -->
	<span class="expand-title">SONYLOVE</span>

그 아래 920번째 줄 근처에 방문객 수 부분도 동일하게 visible-xs 와 visible-sm 을 삭제하면 모든 환경에서 보이게 된다.

<div class="expand-visitor visible-xs visible-sm">  <!-- 방문객 수 - visible-xs 와 visible-sm 삭제 -->
	<span class="expand-hd sr-only">VISITOR</span>
		<span class="visitor-span today ff-h"><span>

바로 아래 expand-admin 도 마찬가지이다.

<div class="expand-admin ci-link visible-xs visible-sm">     <!-- admin - visible-xs 와 visible-sm 삭제 -->
	<ul class="lts-narrow clearfix">

HTML 에서 변경할 부분은 모두 끝났다.

이제 저장후 CSS 로 이동해서 860번째줄 부분에 @media (min-width: 992px) { #expand-menu ... 로 설정된 부분을 삭제한다.

<!-- PC 화면 설정 삭제 -->
@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;
    }
}

이제 모두 저장후 메뉴 버튼을 클릭해서 확인해본다.

너무 간단한 팁이라서 얼마나 쓸 글이 없어서 뭐 이딴걸 다 쓰나 할지 모르지만 혹시 필요한 분들을 위해 -.-; ...

『블로그』 ARTICLES
more