Material T 커스텀 강좌 - 사이드바 추가하기

반응형

적용가능 버전:mark1,2,3,4,5

material T스킨에 원하는 사이드바 요소를 추가하는 방법입니다.

아래는 리스트 형식의 사용자 모듈 예제입니다.

<!-- 사용자 모듈 Mark1,2용 -->

<div class="card">

<div class="card-header ripplelink lessed">

<i class="ic-more_vert"></i>

<h3><i class="ic-info"></i> 사용자 모듈</h3>

</div>

<div class="card-listed-content">

<ul>

<li class="ripplelink" onclick="window.open('url')">내용</li>

</ul>

</div>

</div>

<!-- 사용자 모듈 (Mark 3 이후버전용)  -->

<div class="card">

<div class="card-header ripplelink lessed">

<i class="ic-more_vert"></i>

<h3><i class="ic-info"></i> 사용자 모듈</h3>

</div>

<div class="card-listed-content">

<ul>

<li class="getThumb">

<a class="buttonAnchor ripplelink" href="url">내용

</a>

</li>

</ul>

</div>

</div>

첫줄부터 빨간색 글자에 대한 설명입니다.

-사용자 모듈 : 모듈의 이름을 정해서 입력합니다.

-lessed : 그대로 쓰면, 사이드바가 기본으로 접힘상태로 나타나며, 클릭했을 때 펼쳐지게됩니다. 기본을 펼침으로 쓰려면 지우세요.

-ic-info : 사이드바 제목 왼쪽에 나오는 아이콘입니다. 사용할 수 있는 아이콘 목록은 아래 파일에서 확인하세요.

material-desigin-icons-demo.html

-사용자 모듈: 사이드바의 제목입니다.

-card-listed-content : 리스트형식의 사이드바일경우 사용합니다. 리스트형식이 아닌 경우 "card-content ripplelink"로 바꿔 쓰시면 됩니다.
 ※리스트 형식이 아닌 경우 <ul>~</ul>을 삭제하고 넣고싶은 html코드를 넣으면 됩니다.

-url:리스트를 클릭했을 때 이동할 url을 입력합니다.

-내용:리스트 내용을 입력합니다.

리스트를 추가하려면 <li class=~~ 내용 </li>을 </ul>위로 한줄씩 추가하면 됩니다.

수정을 마친 후에 전체를 복사해서

관리화면에서 HTML배너 사이드바를 하나 추가합니다.

편집창을 열어서 수정한 코드를 붙여넣습니다.

위치를 조정하고 저장을 누르면 끝입니다.

추가된 사이드바의 예시입니다.

반응형

저작자표시비영리동일조건