[고도몰/쇼핑몰디자인] 상단 메뉴 만들기

 

 

작업 버전 : 고도몰5 스탠다드

작업 : 상단 메뉴 만들기

필요 스킬 : html / CSS

적용 스킨 : 모먼트

 

고도몰 모먼트 스킨에는 상단 메뉴(링크)가 없고 상단에 카테고리가 존재하고 전체 카테고리(버튼)도 존재한다.

이럴 경우 상단에는 카테고리 대신 메뉴(링크)를 만들어주고 싶을 때가 있다.

그럴 때 어떻게 해주면 될까?

간단하게 스토리_g 스킨에 있는 상단 메뉴 소스를 가져오기로 한다.

 

 

스토리_ g 스킨에 있는 상단 메뉴를 가져 오자.

story_g 스킨을 작업 스킨으로 설정한 후

디자인 - 전체 레이아웃 - 상단 디자인

- 상단 기본 파일 클릭

 

 

69번 ~ 74번 줄을 복사한다.

 

상단 메뉴 소스

그리고 모먼트 스킨을 작업 스킨으로 설정후

똑같은 위치인 상단 기본파일로 간 다음에,

 

 

 62 ~ 64번 줄을 지운 다음에

 

 

과감하게 지워주세요!

아래 소스를 붙여넣기 한다.

 

<ul class="header">

      <li><a href="../service/company.php">{=__('회사소개')}</a></li>

      <li><a href="../service/notice.php">{=__('공지사항')}</a></li>

      <li><a href="../service/qa.php">{=__('1:1 문의')}</a></li>

</ul>

 

<style>

    .header{

        float:left;

        padding:0 0 0 10px;

        margin-left:80px;

     }

    .header >li{

       float:left;

       margin: 13px 0;

        padding: 0 25px;

       font-size:14px;

        font-weight:bold;

    }

</style>

 

그리고 스타일시트 - layout - layout.css에 가서

152번째 줄을 지운 다음에

여기도 지워주세요!

#header .header_gnb{

       height:50px;

}

 

로 바꿔 주면 된다.

적용전 : 상단 카테고리

 

적용후 : 상단 메뉴

<li><a href="메뉴를 통해 가고 싶은 페이지

url">{=__('메뉴 이름')}</a></li>

 

font-size:14px;

메뉴 폰트 크기를 바꾸려면 14px를 16px, 20px, 30px 등 키우면 된다!