이 코드를 열었다면, 이제 수정하실 준비가 된 상태 입니다.

다른 코드들은 보지 마시고, 코드 하단만 보시면 됩니다. ( 수동 카테고리 영역 )

2. 코드 이해하기

코드 하단부를 보시면 아래와 같은 코드 묶음이 있습니다.

        <!-----------------------------------------------------------------------------------------------------------------

            수동 카테고리

            자유롭게 추가가 가능합니다.

            만약 이 코드가 고정 카테고리 위에 있다면,

            카테고리보다 앞 부분에 수동 카테고리가 보여지게 됩니다.

        ------------------------------------------------------------------------------------------------------------------>

        <li

            data-name="Q & A"

            data-cate_no="board-6"

            data-param=""

            data-link_product_list="/board/상품문의/6/"

            data-design_page_url="/board/상품문의/6/">

            <a href="/board/상품문의/6/" class="sp--btn sp--currentlink" scale="xl" theme="theme" effect="underline-tick">

                Q &amp; A

            </a>

        </li>

        <li

            data-name="REVIEWS"

            data-cate_no="board-4"

            data-param=""

            data-link_product_list="/board/상품후기/4/"

            data-design_page_url="/board/상품후기/4/">

            <a href="/board/상품후기/4/" class="sp--btn sp--currentlink" scale="xl" theme="theme" effect="underline-tick">

                REVIEWS

            </a>

        </li>

        <!-- // -->

두 색상의 코드는 서로 다르게 생겼지만, 실제로 한개의 카테고리를 의미 합니다.

만약 링크를 하나 지우신다면, 색상 한개의 블럭 전체를 삭제해야 하며, 추가를 해야 한다면 색상 한개의 블럭 전체를 복사해서 하나 더 넣으셔야 합니다.

수동 카테고리 한개를 추가한다면 아래와 같은 모습이 됩니다.

        <!-----------------------------------------------------------------------------------------------------------------

            수동 카테고리

            자유롭게 추가가 가능합니다.

            만약 이 코드가 고정 카테고리 위에 있다면,

            카테고리보다 앞 부분에 수동 카테고리가 보여지게 됩니다.

        ------------------------------------------------------------------------------------------------------------------>

        <li

            data-name="Q & A"

            data-cate_no="board-6"

            data-param=""

            data-link_product_list="/board/상품문의/6/"

            data-design_page_url="/board/상품문의/6/">

            <a href="/board/상품문의/6/" class="sp--btn sp--currentlink" scale="xl" theme="theme" effect="underline-tick">

                Q &amp; A

            </a>

        </li>

        <li

            data-name="REVIEWS"

            data-cate_no="board-4"

            data-param=""

            data-link_product_list="/board/상품후기/4/"

            data-design_page_url="/board/상품후기/4/">

            <a href="/board/상품후기/4/" class="sp--btn sp--currentlink" scale="xl" theme="theme" effect="underline-tick">

                REVIEWS

            </a>

        </li>

        <li

            data-name="배송조회"

            data-cate_no="other-1"

            data-param=""

            data-link_product_list="연결할링크"

            data-design_page_url="seo가 적용된 링크">

            <a href="연결할링크" class="sp--btn sp--currentlink" scale="xl" theme="theme" effect="underline-tick">

                메뉴명

            </a>

        </li>

        <!-- // -->

이 영역을 뜯어서 설명한다면,

        <li

            data-name="배송조회"       // 식별할 수 있는 텍스트 ( 그냥 메뉴명과 같은걸 적으면 됩니다 )

            data-cate_no="other-1"      // 식별할 수 있는 코드 ( 마우스 오버시 연결할 코드이므로, 중복되지 않도록 적어주세요. 자신이 알아볼 수 있는 문자면 됩니다. )

            data-param=""

            data-link_product_list="연결할링크" // 실제로 연결할 링크 ( 일반적인 url )

            data-design_page_url="seo가 적용된 링크">   // seo가 적용된 링크 ex ) /여성/티셔츠/ 처럼 한글 주소 ( 그냥 연결할 링크와 같은걸 적으시면 됩니다 )

            <a href="연결할링크" class="sp--btn sp--currentlink" scale="xl" theme="theme" effect="underline-tick">

                메뉴명   // 화면에 보여질 

            </a>

        </li>

카테고리 코드의 양이 많은 이유는 여러 장소에 여러 방식으로 사용되기 때문입니다.

좌측 패널, 서브 카테고리 등 많은 페이지에서 동시에 활용되므로, 번거로우시더라도 올바르게 입력하시길 바랍니다.

3. 마우스 오버시 글자 변형하기

만약 마우스 오버전, 오버후를 이미지로 하고 싶다면

관리자 > 상품관리 > 상품분류 관리 >>> 분류꾸미기 > 메뉴 이미지

이부분을 수정하시면 됩니다.

이미지가 아닌 텍스트로 변경하고 싶을땐 코드를 변경해야 하는데요.

우선 마우스 오버를 관리할 파일을 엽니다.

메뉴얼에서는 가시적인 설명을 포함합니다.

<div class="displaynone" sp--js-category-hover>

    <span data-category="카테고리 번호">

        마우스 오버시 나올 텍스트

    </span>

    <span data-category="카테고리 번호">

        마우스 오버시 나올 텍스트

    </span>

</div>

색상 한개가 하나의 메뉴에 대한 코드이며, 반복적으로 입력해서 여러가지 카테고리를 관리할 수 있습니다.

예를 들어 women 카테고리가 카테고리 번호가 3 이라면

    <span data-category="3">

        여성의류

    </span>

이렇게 연결해줍니다.

그럼 "women" 카테고리에 마우스를 올리면 "여성의류" 라는 텍스트로 변경됩니다.

* 주의할점은 마우스를 올리기 전의 글자의 가로 길이가 마우스 올렸을때의 글자 길이보다 반드시 길어야 합니다.

* 만약 오버시 글자가 더 길면 .. 으로 표현됩니다.

* 수동으로 연결한 카테고리는 카테고리 번호가 data-cate_no="other-1"  이부분 입니다.

* 카테고리 번호대신 other-1 을 입력하시면 수동 카테고리도 연결이 가능합니다.