레이아웃 최상단에 애니메이션 효과로 펼쳐지는 메뉴

팔공산

조회 수 3,098 추천 수 0 댓글 0

단축키

Prev이전 문서

Next다음 문서

이전 다음 위로 아래로 인쇄 첨부 목록

단축키

Prev이전 문서

Next다음 문서

이전 다음 위로 아래로 인쇄 첨부 목록

첨부파일	등록일	파일크기	다운 수
function.js	2017.01.03	748Bytes	36

Extra Form
원작자	80san
출처	http://www.blueb.co.kr/?m=bluebdata&...amp;c=2/31
적용여부	적용
적용페이지	https://moonhouse.co.kr/xetip

지금 보고 있는 레이아웃 최상단 우측에 보이는 애니메이션 효과로 펼쳐지는 2개의 가로바 메뉴를 출력하는 팁입니다.

먼저 해당 레이아웃의 layout.html 상단부분에 아래 코드를 추가합니다.

<div cond="$layout_info->topmenu == 'Y'" class="topmenu">

<input type="checkbox" class="topmenu__cb" id="menu-cb"/>

<div class="topmenu__content">

<ul class="topmenu__items">

<li class="topmenu__item">

<span class="topmenu__item-text">

<!--%import("js/function.js ")-->

<a href="#favorite"onclick="bookmarksite('{$layout_info->fa}','{$layout_info->logo_url}',this);">Favorite</a>

</span>

</li>

<li cond="$layout_info->top_toggle_text" class="topmenu__item">

<span class="topmenu__item-text">

<a href="./#" onclick="toggle_object('top_toggle'); return false;">{$layout_info->top_toggle_text}</a>

</span>

</li>

<li cond="$layout_info->top_menu1" class="topmenu__item">

<span class="topmenu__item-text">

<a href="{$layout_info->top_menu1_url}">{$layout_info->top_menu1}</a>

</span>

</li>

<li cond="$layout_info->top_menu2" class="topmenu__item">

<span class="topmenu__item-text">

<a href="{$layout_info->top_menu2_url}">{$layout_info->top_menu2}</a>

</span>

</li>

</ul>

</div>

<label class="topmenu__btn" for="menu-cb"></label>

</div>

 

<div id="top_toggle" style="display:none">

<a href="{$layout_info->top_toggle_url}" target="_{$layout_info->top_toggle_target}"><img src="{$layout_info->top_toggle_image}" /></a>

</div>

layout.css 에 아래 코드를 추가합니다.

 

/* 최상단 토글 유틸메뉴 - 펼쳐지는 애니메이션 효과 */

 

.topmenu { overflow: hidden; position: absolute; right: 4%; top: 0%; width: auto; height: 20px; padding-top:0px; margin-top: 0px; background: transparent; border-radius: 5px; -webkit-transform: translate3d(-11%, 0, 0); transform: translate3d(-11%, 0, 0); box-shadow: 0 1px 1px #888; z-index:1001}

.topmenu__cb { z-index: -1000; position: absolute; left: 0; top: 0; opacity: 0; pointer-events: none;}

.topmenu__content { position: relative; width: 40px; height: 100%; -webkit-transition: width 1s cubic-bezier(0.49, -0.3, 0.68, 1.23); transition: width 1s cubic-bezier(0.49, -0.3, 0.68, 1.23);}

.topmenu__cb:checked ~ .topmenu__content { -webkit-transition: width 1s cubic-bezier(0.48, 0.43, 0.29, 1.3); transition: width 1s cubic-bezier(0.48, 0.43, 0.29, 1.3); width: 350px;}

.topmenu__items { position: relative; width: 410px; height: 100%; padding-left: 20px; padding-right: 110px; list-style-type: none; font-size: 0px;}

.topmenu__item,

.topmenu__item a { display: inline-block; vertical-align: top; width: 70px; text-align: center; color: #6C7784; font-size: 10px; line-height: 20px; -webkit-perspective: 1000px; perspective: 1000px; -webkit-transition: color 0.3s; transition: color 0.3s; cursor: pointer;}

.topmenu__item:hover, 

.topmenu__item a:hover { color: #00bdea;}

.topmenu__item-text { display: block; height: 100%; -webkit-transform: rotateY(-170deg); transform: rotateY(-170deg); opacity: 0; -webkit-transition: opacity 0.7s, -webkit-transform 0.7s cubic-bezier(0.48, 0.43, 0.7, 2.5); transition: opacity 0.7s, -webkit-transform 0.7s cubic-bezier(0.48, 0.43, 0.7, 2.5); transition: transform 0.7s cubic-bezier(0.48, 0.43, 0.7, 2.5), opacity 0.7s; transition: transform 0.7s cubic-bezier(0.48, 0.43, 0.7, 2.5), opacity 0.7s, -webkit-transform 0.7s cubic-bezier(0.48, 0.43, 0.7, 2.5);}

 

.topmenu__cb:checked ~ .topmenu__content .topmenu__item-text { -webkit-transform: rotateY(0); transform: rotateY(0); opacity: 1; -webkit-transition: opacity 0.2s, -webkit-transform 0.7s cubic-bezier(0.48, 0.43, 0.7, 2.5); transition: opacity 0.2s, -webkit-transform 0.7s cubic-bezier(0.48, 0.43, 0.7, 2.5); transition: transform 0.7s cubic-bezier(0.48, 0.43, 0.7, 2.5), opacity 0.2s; transition: transform 0.7s cubic-bezier(0.48, 0.43, 0.7, 2.5), opacity 0.2s, -webkit-transform 0.7s cubic-bezier(0.48, 0.43, 0.7, 2.5);}

 

.topmenu__item:nth-child(1) .topmenu__item-text { -webkit-transition-delay: 0.3s; transition-delay: 0.3s;}

.topmenu__cb:checked ~ .topmenu__content .topmenu__item:nth-child(1) .topmenu__item-text { -webkit-transition-delay: 0s; transition-delay: 0s;}

.topmenu__item:nth-child(2) .topmenu__item-text { -webkit-transition-delay: 0.2s; transition-delay: 0.2s;}

.topmenu__cb:checked ~ .topmenu__content .topmenu__item:nth-child(2) .topmenu__item-text { -webkit-transition-delay: 0.1s; transition-delay: 0.1s;}

.topmenu__item:nth-child(3) .topmenu__item-text { -webkit-transition-delay: 0.1s; transition-delay: 0.1s;}

.topmenu__cb:checked ~ .topmenu__content .topmenu__item:nth-child(3) .topmenu__item-text { -webkit-transition-delay: 0.2s; transition-delay: 0.2s;}

.topmenu__item:nth-child(4) .topmenu__item-text { -webkit-transition-delay: 0s; transition-delay: 0s;}

.topmenu__cb:checked ~ .topmenu__content .topmenu__item:nth-child(4) .topmenu__item-text { -webkit-transition-delay: 0.3s; transition-delay: 0.3s;}

 

.topmenu__btn { position: absolute; right: 0; top: 1px; width: 20px; height: 20px; padding: 5px 10px; cursor: pointer;}

.topmenu__btn:before, .topmenu__btn:after { content: ""; display: block; width: 20px; height: 2px; border-radius: 2px; background: #096DD3; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transition: background-color 0.3s, -webkit-transform 1s cubic-bezier(0.48, 0.43, 0.29, 1.3); transition: background-color 0.3s, -webkit-transform 1s cubic-bezier(0.48, 0.43, 0.29, 1.3); transition: transform 1s cubic-bezier(0.48, 0.43, 0.29, 1.3), background-color 0.3s; transition: transform 1s cubic-bezier(0.48, 0.43, 0.29, 1.3), background-color 0.3s, -webkit-transform 1s cubic-bezier(0.48, 0.43, 0.29, 1.3);}

.topmenu__btn:before { margin-bottom: 5px;}

.topmenu__btn:hover:before, .topmenu__btn:hover:after { background: #00bdea;}

.topmenu__cb:checked ~ .topmenu__btn:before { -webkit-transform: translateY(3.5px) rotate(-225deg); transform: translateY(3.5px) rotate(-225deg);}

.topmenu__cb:checked ~ .topmenu__btn:after { -webkit-transform: translateY(-3.5px) rotate(225deg); transform: translateY(-3.5px) rotate(225deg);}

 

/* 토글 배너 위치*/ 

#top_toggle { position:absolute; top:20px; right:210px; z-index:100;}

 

#top_toggle a img { z-index:99;}

info.xml 에 아래 코드를 추가합니다.

<var name="topmenu" type="select">

<title xml:lang="ko">★최상단 토글 유틸메뉴</title>

<options value="">

<title xml:lang="ko">사용 안 함</title>

</options>

<options value="Y">

<title xml:lang="ko">사용</title>

</options>

</var>

<var name="fa" type="text">

<title xml:lang="ko">1. 즐겨찾기제목</title>

<description xml:lang="ko">즐겨찾기 등록시 제목</description>

</var>

<var name="top_toggle_text" type="text">

<title xml:lang="ko">2. 토글 배너명</title>

<description xml:lang="ko">토글 배너메뉴명을 입력해주세요.</description>

</var>

<var name="top_toggle_image" type="image">

<title xml:lang="ko">　┖ 최상단 토글 배너 이미지</title>

<description xml:lang="ko">최상단 토글배너 이미지를 입력해주세요.</description>

</var>

<var name="top_toggle_url" type="text">

<title xml:lang="ko">　┖ 최상단 토글배너 이미지 링크</title>

<description xml:lang="ko">최상단 토글배너 이미지 클릭시 이동할 링크 URL을 입력해 주세요.</description>

</var>

<var name="top_toggle_target" type="select">

<title xml:lang="ko">　┖ 최상단 토글배너 이미지 Target</title>

<description xml:lang="ko">최상단 토글배너 이미지 클릭시 창의 선택</description>

<options value="blank">

<title xml:lang="ko">새창</title>

</options>

<options value="parent">

<title xml:lang="ko">현재창</title>

</options>

</var>

<var name="top_menu1" type="text">

<title xml:lang="ko">3. 메뉴명</title>

<description xml:lang="ko">메뉴명을 입력해주세요.</description>

</var>

<var name="top_menu1_url" type="text">

<title xml:lang="ko">　┖ 해당 url</title>

<description xml:lang="ko">해당 url를 입력해주세요.</description>

</var>

<var name="top_menu2" type="text">

<title xml:lang="ko">4. 메뉴명</title>

<description xml:lang="ko">메뉴명을 입력해주세요.</description>

</var>

<var name="top_menu2_url" type="text">

<title xml:lang="ko">　┖ 해당 url</title>

<description xml:lang="ko">해당 url를 입력해주세요.</description>

</var>