[크롬에서는 정상적으로 작동을 하나, 익스플로러에서는 마우스클릭이 어렵습니다]
아래의 메뉴에서 처럼 마우스오버시 회전하며 색상및 문구가 변경되게 하는 Tip을 XE메뉴에 적용하는 방법입니다.
<style>
.gnb { margin:0px Auto; text-align: center; padding:0 5px; }
.gnb a { padding:0 5px 0 0px; font-weight:bold; font-size:1em; line-height: 25px; text-decoration:none; overflow:hidden; color:white;}
.link-effect-1 a span { position: relative; padding: 0 5px; background:black; display: inline-block; vertical-align: middle; *vertical-align: auto; *zoom: 1; *display: inline; -moz-transition: 0.3s; -o-transition: 0.3s; -webkit-transition: 0.3s; transition: 0.3s; -moz-transform-origin: 50% 0 50%; -ms-transform-origin: 50% 0 50%; -webkit-transform-origin: 50% 0 50%; transform-origin: 50% 0 50%; -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform-style: preserve-3d;}
.link-effect-1 a span::before { position: absolute; top: 100%; left: 0; width: 100%; height: 100%; background: gray; content: attr(data-hover); -moz-transition: background 0.3s; -o-transition: background 0.3s; -webkit-transition: background 0.3s; transition: background 0.3s; -moz-transform: rotateX(-90deg); -ms-transform: rotateX(-90deg); -webkit-transform: rotateX(-90deg); transform: rotateX(-90deg); -moz-transform-origin: 50% 0 50%; -ms-transform-origin: 50% 0 50%; -webkit-transform-origin: 50% 0 50%; transform-origin: 50% 0 50%;}
.link-effect-1 a:hover span, .link-effect-1 a:focus span { -moz-transform: rotateX(90deg) translateY(-22px); -ms-transform: rotateX(90deg) translateY(-22px); -webkit-transform: rotateX(90deg) translateY(-22px); transform: rotateX(90deg) translateY(-22px);}
.link-effect-1 a:hover span::before, .link-effect-1 a:focus span::before { background:white; color:black;}
</style>
<div class="gnb">
<!--@foreach($bottom_menu->list as $key => $val)--><!--@if($val['link'])-->
<!--@if($val['selected'])-->
{@ $menu_1st = $val }
<!--@end-->
<!--@if($val['selected'])--><!--@end-->
<span class="link-effect-1">
<a href="{$val['href']}"<!--@if($val['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>| <span data-hover="{$val['text']}">{$val['text']}</span></a>
</span>
<!--@endif--><!--@endforeach-->
</div>
오렌지색 부분이 바탕색상 및 글꼴색상 변경하는 부분입니다.
파란색부분을 수정하면 가로,세로 배열을 바꿀 수 있습니다. span 대신에 div 하면 세로 정렬됩니다.