레이아웃의 본문 좌,우측 Wing영역에 이미지파일 하나도 사용하지 않고 스타일리시하게
3차 Menu부터 아코디언처럼 펼쳐지는 메뉴설정 방법입니다.
1. 메뉴를 추가할 레이아웃의 layout.html안에 Wing영역의 메뉴부분에 아래의 코드를 추가합니다.
제가 사용중인 파일도 올립니다. wingmenu.html-x
올리고 보니 .html 확장자 뒤에 무조건 -x가 붙네요. 참고하세요.
<style>
.wmtop a { color:#ffffff; }
.wmtop a:hover { color:#ff6600; }
.wmsub a { color:#ffffff; }
.wmsub a:hover { color:#ff6600; }
</style>
<nav>
<ul>
<!--@foreach($main_menu->list as $key => $val)--><!--@if($val['link'])-->
<!--@if($val['selected']&&$val['list'])-->
{@ $menu_1st = $val }
<li class="wmtop"<!--@if($val['selected'])-->class="on"<!--@end-->><a href="{$val['href']}" <!--@if($val['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end--> >{$val['link']}</a><span></span>
</li>
<!--@end-->
<!--@end--><!--@end-->
<!--@foreach($main_menu->list as $key => $val)--><!--@if($val['link'])-->
{@ $menu_1st = $val }
<!--@if($val['selected']&&$val['list'])-->
<!--@foreach($menu_1st['list'] as $key => $val)--><!--@if($val['link'])-->
{@ $menu_2nd = $val }
<li class="wmsub"<!--@if($val['selected'])-->class="active"<!--@end-->><a href="{$val['href']}" <!--@if($val['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->> {$val['link']}</a>
<!--@if($val['list'] && ($val['expand']=='Y'||$val['selected']) )-->
<ul>
<!--@foreach($val['list'] as $k => $v)--><!--@if($v['link'])-->
<!--@if($v['selected'])-->
{@ $menu_3th = $v }
<!--@end-->
<li<!--@if($v['selected'])-->class="on"<!--@end-->><a href="{$v['href']}" <!--@if($v['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$v['link']}</a></li>
<!--@if($v['list'] && ($v['expand']=='Y'||$v['selected']) )-->
<!--@foreach($v['list'] as $k => $v4)--><!--@if($v4['link'])-->
<!--@if($v['selected'])-->
{@ $menu_4th = $v4 }
<!--@end-->
<li<!--@if($v['selected'])-->class="on"<!--@end-->><a href="{$v4['href']}" <!--@if($v4['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$v4['link']}</a></li>
<!--@end--><!--@end-->
<!--@end-->
<!--@end--><!--@end-->
</ul>
<!--@end-->
</li>
<!--@endif--><!--@endforeach-->
<!--@end-->
<!--@endif--><!--@endforeach-->
</ul>
</nav>
2. style.css 다운받은 css파일안의 코드를 해당 레이아웃css파일안에 추가합니다.
3. 색상변경
* 메뉴글 색상
<style>
.wmtop a { color:#ffffff; }
.wmtop a:hover { color:#ff6600; }
.wmsub a { color:#ffffff; }
.wmsub a:hover { color:#ff6600; }
</style>
* 메뉴바탕 색상 - css안에
- 전체메뉴배경 색상
nav ul li {
background: -webkit-linear-gradient(top, rgba(75,78,88,1) 0%,rgba(63,66,74,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(75,78,88,1) 0%,rgba(63,66,74,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(75,78,88,1) 0%,rgba(63,66,74,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, #4B4E58 0%,#3F424A 100%); /* W3C */
box-shadow: rgba(255,255,255,0.1) 1px 1px 0 inset;
border-bottom: #292b30 1px solid;
}
- 3차 아코디언배경 색상
진한 부분들을 적절히 수정하면 됩니다.
rgba값들도 같이 수정을 해 주시면 좋습니다.
제가 귀찮아서~~~^.^
마우스오버시 우측으로 펼쳐지는 내용 및 메뉴
메뉴 클릭시 화면 중앙에 팝업으로 띄우기
