요즘은 레이아웃을 만들때 반응형으로 제작하는 것이 추세입니다.
반응형으로 레이아웃을 제작하다보면 메뉴처리 부분이 항상 고민입니다.
sweetMobile 레이아웃같이 상단에 스와프 기능으로 메뉴를 줄 수도 있지만,
메뉴의 종류가 많거나 2차, 3차메뉴가 존재 한다면 아무래도 힘들죠.
그래서 PC모드에서는 상단에 가로로 나열 처리하고 마우스 오버시 2차, 3차 메뉴가 드롭방식으로 출력되게 하고,
모바일이나 좁은 화면에서는 상단 좌/우측에 일명 햄버거(삼선)형태를 만들어서 터치시 화면을 차지하면서 메뉴들을 출력되게 하는 방식을 많이 사용합니다.
PC모드의 메뉴 방식은 다영한 소스가 공개되어 있고 적용하기도 그다지 어렵지 않습니다.
그런데 햄버거 형태안의 메뉴출력 방식은 그다지 많이 공개 되어져 있지 않습니다.
그리고 보통은 1차메뉴 부분을 2차메뉴 출력을 나타내는 기능으로 많이 사용하여 XE나 라이믹스 메뉴 체계와는 잘 맞지를 않습니다.
아니면 모든 1,2,3차 메뉴를 한번에 다 출력하는 식이죠.
이런 불편함을 극복하고자 여러 소스들을 받아서 테스트하고 실험하면서 적용도 해 보았지만 만족스러운 결과를 얻지는 못했습니다.
그래도 가장 좋았던 결과가 1차메뉴 아래/옆에 + 영역을 만들어서 적용한 방법이 제일 만족스러운 결과였던 것 같습니다.
그러다 서핑중에 디자인이 예쁜 형태의 소스를 얻게 되어서 적용해 보았습니다.
https://www.blueb.co.kr/?c=1/4&p=3&uid=3914
처음 접했을때 메뉴명을 터치하면 1차메뉴로 연결되고 우측의 숫자부분을 터치하면 2차메뉴들이 드롭되게 하면 되겠다 싶었죠.
그래서 최근에 만든 유료 레이아웃인 Mh_Justice 에 적용해 보았습니다.
원소스를 간단히 요약하면 아래와 같이 됩니다.
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<ul class="mainmenu">
<li><img src="images/envelope.png" alt="Envelope icon" class="icon"><span>Messages</span><div class="messages">23</div></li>
<ul class="submenu">
<div class="expand-triangle"><img src="images/expand.png"></div>
<li><span>New</span></li>
</ul>
</ul>
<script src="js/script.js"></script>
<script src="js/retina.min.js"></script>
jquery.min.js는 XE에서 기본 제공하므로 삭제
retina.min.js는 이미지들에 옵션을 주는 스크립트 파일인 것 같은데 이미지들을 최소하 하므로 삭제
style.css 와 script.js 파일을 해당 폴더에 업로드합니다.
기존에 사용하던 반응형메뉴 소스를 열어서 위의 원본 소스와 결합합니다.
상단의 멤버/로그인 부분과 햄버거 소스 부분은 생략하고 설명합니다.(각자가 사용하는 코드가 다를 수 있으므로)
<load target="css/style.css" />
<style type="text/css">
#sidebar-wrapper { background:<!--@if($li->smenu_color == 'blue')-->#2980B9<!--@elseif($li->smenu_color == 'black')-->#444<!--@elseif($li->smenu_color == 'red')-->#e4644b<!--@else-->#aaa<!--@end--> }
</style>
<div id="wrapper">
<div class="overlay"></div>
<nav class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper" role="navigation">
<ul class="nav sidebar-nav {$li->smenu_color}">
<ul class="mainmenu" loop="$Smart->list=>$key1,$val1" class="active"|cond="$val1['selected']">
<li cond="$val1['href']">
<i class="fas fa-align-left icon"></i>
<span><a href="{$val1['href']}" target="_blank"|cond="$val1['open_window']=='Y'">{$val1['link']}</a></span>
<span cond="$val1['list']" class='submenu-indicator'>+</span>
</li>
<ul cond="$val1['list']" class="submenu">
<div class="expand-triangle"><img src="img/underline.png"></div>
<li loop="$val1['list']=>$key2,$val2" class="active"|cond="$val2['selected']">
<span><a href="{$val2['href']}" target="_blank"|cond="$val2['open_window']=='Y'">{$val2['link']}</a></span>
<ul cond="$val2['list']" class="submenu2">
<li loop="$val2['list'] => $key3, $val3">
<span><a href="{$val3['href']}" target="_blank"|cond="$val3['open_window'] == 'Y'"><i class="fa fa-reply-all fa-rotate-180" style="margin-right:5px"></i>{$val3['link']}</a></span>
</li>
</ul>
</li>
</ul>
</ul>
</ul>
</nav>
</div>
<load target="js/script.js" />
<style> ~ </style>부분은 색상선택시 바탕색상을 지정
붉은색 코드들이 원본에 XE코드 적용한 형태
파란색부분이 1차메뉴, 2차메뉴가 Hidden이거나 존재 하지 않을때 숨기는 조건문
그리고 이미지 부분들을 폰터어썸이나 css로 커버했으며 1차메뉴 아래의 bar만 이미지 사용
style.css를 수정
.sidebar-nav li { display:inline-block; line-height:20px; position:relative; width:100%;}
.sidebar-nav li a { color:#fff !important; }
.sidebar-nav .plus { text-align:right; color:#fff; padding:5px; margin-right:10px; font-size:12px; }
.sidebar-nav .plus span { color:#fff; }
.mainmenu { font-size:16px; position:relative; margin:0px auto; padding:10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);}
.mainmenu > li { box-sizing:border-box; height:48px; color:#fff; }
.mainmenu > li span { line-height:48px; display:block;}
.mainmenu > li span a { color:#fff !important; }
.mainmenu > li .icon { display:block; float:left; padding:16px 20px 0 20px;}
.mainmenu .submenu-indicator { font-size:18px; background:#444; color:#fff; line-height:19px; display:block; float:right; width:20px; height:20px; margin-top:-33px; margin-right:19px; padding:0; text-align:center; border-radius:10px; -o-transition:transform .3s linear; -moz-transition:transform .3s linear; -webkit-transition:transform .3s linear; -ms-transition:transform .3s linear; }
.mainmenu .submenu-indicator:hover { -ms-transform:rotate(45deg); -moz-transform:rotate(45deg); -webkit-transform:rotate(45deg); transform:rotate(45deg)}
.expand-triangle { width:220px; height:10px; content:" ";}
.expand-triangle img { width:inherit; height:inherit; vertical-align:top;}
.submenu { font-size:13px; box-sizing:border-box; content:" "; }
.submenu li { line-height:30px; margin-left:-40px; padding-top:11px; transition:border-left 220ms ease-in; }
.submenu li span a { color:#eee !important; }
.submenu .chosen,.submenu .chosen:hover { border-left:solid 6px #fff;}
.submenu li:hover { border-left:solid 6px #fff;}
.submenu li span { margin-left:30px;}
.submenu2 { font-size:13px; box-sizing:border-box; content:" "; }
.submenu2 li { margin-left:-40px; padding-top:0px; transition:border-left 220ms ease-in; }
.blue, .blue .sidebar-nav li a:hover, .blue .mainmenu , .blue .mainmenu > li, .blue .submenu li, .blue .submenu2 li
{ background:#2980B9; }
.red, .red .sidebar-nav li a:hover, .red .mainmenu , .red .mainmenu > li, .red .submenu li, .red .submenu2 li
{ background:#e4644b; }
.black, .black .sidebar-nav li a:hover, .black .mainmenu, .black .mainmenu > li, .black .submenu li, .black .submenu2 li
{ background:#444; }
.black .mainmenu .submenu-indicator { background:#000; color:#fff; }
.gray, .gray .sidebar-nav li a:hover, .gray .mainmenu, .gray .mainmenu > li, .gray .submenu li, .gray .submenu2 li
{ background:#aaa; }
붉은색 코드는 마우스 오버시 + 부분이 회전되게한 코드(별거 아님~)
파란색 코드는 메뉴영역의 색상을 지정한 부분입니다.