Tip Wing영역 아코디언메뉴 생성하는 방법
레이아웃의 본문 좌,우측 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값들도 같이 수정을 해 주시면 좋습니다.
제가 귀찮아서~~~^.^
팔공산
첨부 3
- a.jpg 17.5KB · 0
- style.css 10.5KB · 23
- wingmenu.html-x-x-x 2.5KB · 40
