위의 이미지에서 보는 것과 같이 마우스클릭시 6개의 원형메뉴가 레이아웃에 나타나게 하는 방법입니다.
적용할 레이아웃을 고릅니다.
1. ../conf/info.xml을 열어서 아래의 메뉴항목을 추가합니다.
<var name="roundmenu" type="select">
<title xml:lang="ko">★원형 메뉴사용</title>
<title xml:lang="en">★Total Bottom User</title>
<description xml:lang="ko">하단 원형 메뉴를 출력합니다</description>
<description xml:lang="en">Bottom User</description>
<options value="">
<title xml:lang="ko">출력안함</title>
<title xml:lang="en">Not Display</title>
</options>
<options value="Y">
<title xml:lang="ko">출력</title>
<title xml:lang="en">Display</title>
</options>
</var>
<var name="rm_text0" type="text">
<title xml:lang="ko"> ┖ 버턴메뉴명</title>
<title xml:lang="en"> ┖ Button Menu</title>
<description xml:lang="ko">버턴메뉴명을 작성하세요.</description>
<description xml:lang="en">Button Menu Name</description>
</var>
<var name="rm_b_color" type="text">
<title xml:lang="ko"> ┖ 버턴색상</title>
<title xml:lang="en"> ┖ Button Color</title>
<description xml:lang="ko">버턴색상을 지정하세요(기본 블랙)</description>
<description xml:lang="en">Button Menu Colore(Basic black(#000000))</description>
</var>
<var name="rm_text1" type="text">
<title xml:lang="ko"> ┖ 1번 메뉴</title>
<title xml:lang="en"> ┖ 1 Menu</title>
<description xml:lang="ko">1번 메뉴명을 작성하세요.</description>
<description xml:lang="en">1 Menu Name</description>
</var>
<var name="rm_url1" type="text">
<title xml:lang="ko"> ┖ 1번 메뉴 url</title>
<title xml:lang="en"> ┖ 1 Menu Url</title>
<description xml:lang="ko">1번 메뉴 주소를 적어세요.</description>
<description xml:lang="en">1 Menu Url</description>
</var>
<var name="rm_text2" type="text">
<title xml:lang="ko"> ┖ 2번 메뉴</title>
<title xml:lang="en"> ┖ 2 Menu</title>
<description xml:lang="ko">2번 메뉴명을 작성하세요.</description>
<description xml:lang="en">2 Menu Name</description>
</var>
<var name="rm_url2" type="text">
<title xml:lang="ko"> ┖ 2번 메뉴 url</title>
<title xml:lang="en"> ┖ 2 Menu Url</title>
<description xml:lang="ko">2번 메뉴 주소를 적어세요.</description>
<description xml:lang="en">2 Menu Url</description>
</var>
<var name="rm_text3" type="text">
<title xml:lang="ko"> ┖ 3번 메뉴</title>
<title xml:lang="en"> ┖ 3 Menu</title>
<description xml:lang="ko">3번 메뉴명을 작성하세요.</description>
<description xml:lang="en">3 Menu Name</description>
</var>
<var name="rm_url3" type="text">
<title xml:lang="ko"> ┖ 3번 메뉴 url</title>
<title xml:lang="en"> ┖ 3 Menu Url</title>
<description xml:lang="ko">3번 메뉴 주소를 적어세요.</description>
<description xml:lang="en">3 Menu Url</description>
</var>
<var name="rm_text4" type="text">
<title xml:lang="ko"> ┖ 4번 메뉴</title>
<title xml:lang="en"> ┖ 4 Menu</title>
<description xml:lang="ko">4번 메뉴명을 작성하세요.</description>
<description xml:lang="en">4 Menu Name</description>
</var>
<var name="rm_url4" type="text">
<title xml:lang="ko"> ┖ 4번 메뉴 url</title>
<title xml:lang="en"> ┖ 4 Menu Url</title>
<description xml:lang="ko">4번 메뉴 주소를 적어세요.</description>
<description xml:lang="en">4 Menu Url</description>
</var>
<var name="rm_text5" type="text">
<title xml:lang="ko"> ┖ 5번 메뉴</title>
<title xml:lang="en"> ┖ 5 Menu</title>
<description xml:lang="ko">5번 메뉴명을 작성하세요.</description>
<description xml:lang="en">5 Menu Name</description>
</var>
<var name="rm_url5" type="text">
<title xml:lang="ko"> ┖ 5번 메뉴 url</title>
<title xml:lang="en"> ┖ 5 Menu Url</title>
<description xml:lang="ko">5번 메뉴 주소를 적어세요.</description>
<description xml:lang="en">5 Menu Url</description>
</var>
<var name="rm_text6" type="text">
<title xml:lang="ko"> ┖ 6번 메뉴</title>
<title xml:lang="en"> ┖ 6 Menu</title>
<description xml:lang="ko">6번 메뉴명을 작성하세요.</description>
<description xml:lang="en">6 Menu Name</description>
</var>
<var name="rm_url6" type="text">
<title xml:lang="ko"> ┖ 6번 메뉴 url</title>
<title xml:lang="en"> ┖ 6 Menu Url</title>
<description xml:lang="ko">6번 메뉴 주소를 적어세요.</description>
<description xml:lang="en">6 Menu Url</description>
</var>
2. ../layout.html에 아래 코드를 적당한 곳에 추가합니다.
3. roundmenu.html파일을 아래와 같이 만듭니다.
<style>
.menu { width:80px; height: 80px; box-sizing: border-box; font-size:12px; }
.menu-open { display: none; }
.menu-open-button { border:5px double #ffffff; border-radius: 50%; width: 50px; height: 50px; margin-left: 0px; position: absolute; color: #FFFFFF; text-align: center; line-height: 50px; -webkit-transform: ranslate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition: -webkit-transform ease-out 200ms; transition: -webkit-transform ease-out 200ms; transition: transform ease-out 200ms; transition: transform ease-out 200ms, -webkit-transform ease-out 200ms; }
.menu-open-button { z-index: 12; cursor: pointer; box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14); }
.menu-open:checked + .menu-open-button { -webkit-transition-timing-function: linear; transition-timing-function: linear; -webkit-transition-duration: 200ms; transition-duration: 200ms; -webkit-transform: scale(0.8, 0.8) translate3d(0, 0, 0); transform: scale(0.8, 0.8) translate3d(0, 0, 0); }
.menu-item { background: #555555; border-radius: 50%; width: 49px; height: 49px; line-height: 49px; position: absolute; color: #FFFFFF; text-align: center; text-decoration:none; margin:3px; z-index: 11;}
.menu-item:hover { background: #EEEEEE; color: #3290B1; }
.menu-open:checked ~ .menu-item { -webkit-transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33); transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33); }
.menu-open:checked ~ .menu-item:nth-child(3) { transition-duration: 180ms; -webkit-transition-duration: 180ms; -webkit-transform: translate3d(0.08361px, -74.99997px, 0); transform: translate3d(0.08361px, -74.99997px, 0); }
.menu-open:checked ~ .menu-item:nth-child(4) { transition-duration: 280ms; -webkit-transition-duration: 280ms; -webkit-transform: translate3d(60.9466px, -32.47586px, 0); transform: translate3d(60.9466px, -32.47586px, 0); }
.menu-open:checked ~ .menu-item:nth-child(5) { transition-duration: 380ms; -webkit-transition-duration: 380ms; -webkit-transform: translate3d(60.9466px, 32.47586px, 0); transform: translate3d(60.9466px, 32.47586px, 0); }
.menu-open:checked ~ .menu-item:nth-child(6) { transition-duration: 480ms; -webkit-transition-duration: 480ms; -webkit-transform: translate3d(0.08361px, 74.99997px, 0); transform: translate3d(0.08361px, 74.99997px, 0); }
.menu-open:checked ~ .menu-item:nth-child(7) { transition-duration: 580ms; -webkit-transition-duration: 580ms; -webkit-transform: translate3d(-60.86291px, 32.62064px, 0); transform: translate3d(-60.86291px, 32.62064px, 0); }
.menu-open:checked ~ .menu-item:nth-child(8) { transition-duration: 680ms; -webkit-transition-duration: 680ms; -webkit-transform: translate3d(-60.03006px, -32.33095px, 0); transform: translate3d(-60.03006px, -32.33095px, 0); }
.bluer { background-color: #669AE1; box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14); text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12); }
.bluer:hover { color: #669AE1; text-shadow: none; }
.greenr { background-color: #70CC72; box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14); text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12); }
.greenr:hover { color: #70CC72; text-shadow: none; }
.redr { background-color: #FE4365; box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14); text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12); }
.redr:hover { color: #FE4365; text-shadow: none; }
.purpler { background-color: #C49CDE; box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14); text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12); }
.purpler:hover { color: #C49CDE; text-shadow: none; }
.oranger { background-color: #FC913A; box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14); text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12); }
.oranger:hover { color: #FC913A; text-shadow: none; }
.lightbluer { background-color: #62C2E4; box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14); text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12); }
.lightbluer:hover { color: #62C2E4; text-shadow: none; }
</style>
<block cond="!$layout_info->rm_b_color">{@ $layout_info->rm_b_color = 'black'}</block>
<div class="menu" style="margin:0px 0px 0px 0px;">
<input type="checkbox" href="#" class="menu-open" name="menu-open" id="menu-open" />
<label class="menu-open-button" for="menu-open" style="background: {$layout_info->rm_b_color};">
<span>{$layout_info->rm_text0}</span>
</label>
<a href="{$layout_info->rm_url1}" class="menu-item bluer">{$layout_info->rm_text1}</a>
<a href="{$layout_info->rm_url2}" class="menu-item greenr">{$layout_info->rm_text2}</a>
<a href="{$layout_info->rm_url3}" class="menu-item redr">{$layout_info->rm_text3}</a>
<a href="{$layout_info->rm_url4}" class="menu-item purpler">{$layout_info->rm_text4}</a>
<a href="{$layout_info->rm_url5}" class="menu-item oranger">{$layout_info->rm_text5}</a>
<a href="{$layout_info->rm_url6}" class="menu-item lightbluer">{$layout_info->rm_text6}</a>
</div>
style="margin:0px 0px 0px 0px;" 이곳에 원형메뉴가 위치할 적당한 수치를 입력하세요.