지금 보고 있는 레이아웃 최상단 우측에 보이는 애니메이션 효과로 펼쳐지는 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>