레이아웃의 본문 좌,우측 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차 아코디언배경 색상
.wmsub ul li:hover { background: -webkit-linear-gradient(top, rgba(58,96,209,1) 0%,rgba(44,72,194,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(58,96,209,1) 0%,rgba(44,72,194,1) 100%); /* Opera 11.10+ */background: -ms-linear-gradient(top, rgba(58,96,209,1) 0%,rgba(44,72,194,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, #ffffff 0%,#eeeeee 100%); /* W3C */ box-shadow:#5173d5 1px 1px 0 inset; }
진한 부분들을 적절히 수정하면 됩니다.
rgba값들도 같이 수정을 해 주시면 좋습니다.
제가 귀찮아서~~~^.^
마우스오버시 우측으로 펼쳐지는 내용 및 메뉴
메뉴 클릭시 화면 중앙에 팝업으로 띄우기
