메뉴 건너뛰기

MH

내 사랑치 않고 끝내는 것 보다 사랑해서 잃어 버리는 편이 좋다.

It is better to have loved and lost than to have never loved at all.

문하우스
2020.03.24 11:20

반응형 햄버거(삼선)안 메뉴 만들기

조회 수 8 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 인쇄 첨부
Extra Form
원작자 80san
적용여부 적용
적용페이지 https://moonhouse.co.kr/gradeup

요즘은 레이아웃을 만들때 반응형으로 제작하는 것이 추세입니다.

반응형으로 레이아웃을 제작하다보면 메뉴처리 부분이 항상 고민입니다.

sweetMobile 레이아웃같이 상단에 스와프 기능으로 메뉴를 줄 수도 있지만,

메뉴의 종류가 많거나 2차, 3차메뉴가 존재 한다면 아무래도 힘들죠.     

 

그래서 PC모드에서는 상단에 가로로 나열 처리하고 마우스 오버시 2차, 3차 메뉴가 드롭방식으로 출력되게 하고,

모바일이나 좁은 화면에서는 상단 좌/우측에 일명 햄버거(삼선)형태를 만들어서 터치시 화면을 차지하면서 메뉴들을 출력되게 하는 방식을 많이 사용합니다.

 

PC모드의 메뉴 방식은 다영한 소스가 공개되어 있고 적용하기도 그다지 어렵지 않습니다.

그런데 햄버거 형태안의 메뉴출력 방식은 그다지 많이 공개 되어져 있지 않습니다.

그리고 보통은 1차메뉴 부분을 2차메뉴 출력을 나타내는 기능으로 많이 사용하여 XE나 라이믹스 메뉴 체계와는 잘 맞지를 않습니다.

아니면 모든 1,2,3차 메뉴를 한번에 다 출력하는 식이죠.

 

이런 불편함을 극복하고자 여러 소스들을 받아서 테스트하고 실험하면서 적용도 해 보았지만 만족스러운 결과를 얻지는 못했습니다.

그래도 가장 좋았던 결과가 1차메뉴 아래/옆에 + 영역을 만들어서 적용한 방법이 제일 만족스러운 결과였던 것 같습니다.

01.jpg    02.jpg

 

그러다 서핑중에 디자인이 예쁜 형태의 소스를 얻게 되어서 적용해 보았습니다.

https://www.blueb.co.kr/?c=1/4&p=3&uid=3914

03.jpg

처음 접했을때 메뉴명을 터치하면 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; }

붉은색 코드는 마우스 오버시 + 부분이 회전되게한 코드(별거 아님~)

파란색 코드는 메뉴영역의 색상을 지정한 부분입니다.

4.jpg

Who's 팔공산

profile

이 世上에서 現在가 가장 중요한 時間이며,
내가 만나고 있는 바로 그 사람이 第一 중요한 사람이며,
同時에 가장 중요한 것은 그 사람에게 善으로서 行하는 것이다.

Atachment
첨부 '4'
    댓글이 하나도 없네요ㅠㅠ
    Tip이 도움이 되었다면 댓글과 평가 부탁합니다. Tip에 대한 궁금한 점은 댓글로 남겨 주시면 성심껏 답변 드립니다.
?

List of Articles
번호 분류 제목 원작자 날짜 조회 수 적용여부
» 문하우스 반응형 햄버거(삼선)안 메뉴 만들기 file 80san 2020.03.24 8 적용
270 문하우스 DB를 건더리면... 1탄 - 세밀한 페이지 복사 file 80san 2020.03.06 20
269 XE타운 XE보드에서 getTimeGap을 하루전, 2일전, 1달전 등으로 바꾸고 싶습니다 file 웹지기 2020.02.01 47 변형
268 XE타운 프로필 이미지가 없는 경우 물음표(?)가 아닌 닉네임 앞자리 + 개별 배경색 표시 file 구름이 2020.01.07 36 변형
267 문하우스 mh_fullpage 레이아웃과 sketchbook5 게시판스킨의 충돌 해결 80san 2020.01.06 34 적용
266 문하우스 제목에 마우스 Hover시 썸네일 출력하기 file 80san 2019.12.24 38 적용
265 문하우스 마감일자 있는 게시판 내용을 위젯으로 출력해 보기 file 80san 2019.12.07 38 적용
264 XE타운 마감일자가 있는 성격의 게시물 제목에 자동으로 상태(종료, 오늘종료, 진행중 등등 ) 반영하기 팁 file 마트몬 2019.12.03 67 변형
263 문하우스 Html안에서 이미지 경로 설정 방법 80san 2019.11.24 74 적용
262 문하우스 로그인 회원만 파일 다운로드 되게 스케치북 게시판 수정방법 file 80san 2019.11.23 81 적용
261 문하우스 게시판 상단에 풀립형식으로 위젯이나 기타글 등록하는 방법 file 80san 2019.11.16 88 적용
260 문하우스 위젯에 닫기 버턴을 달아보자 file 80san 2019.11.08 76 적용
259 문하우스 레이아웃에 Elegant Accordion 갤러리 적용하는 방법 file 80san 2019.11.05 67 적용
258 XE타운 게시판목록 제목 뒤에 붙는 아이콘 제어하기 file 구름이 2019.10.23 102 적용
257 XE타운 사이트의 특정파일(이미지,동영상,압축파일)들을 타 사이트에서 링크 금지 시키는 방법 튜닝셀프 2019.10.19 114 적용
256 문하우스 "게시판 전체 검색 모듈"을 스케치북에 적용하는 방법 file 라르게덴 2019.10.15 96 변형
255 문하우스 Lightbox 적용 위젯에서 원본 파일 출력 file 80san 2019.09.22 124 적용
254 문하우스 에니메이션(-webkit-animation) 효과 쉽게 적용하는 방법 file 80san 2019.09.19 143 적용
253 Xe 위젯에 특정 카테고리글만 출력하기 file 앙띠2 2019.09.10 401 적용
252 문하우스 게시판으로 간단한 거래장부 만들기 file 80san 2019.03.27 316 NO
목록
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 14 Next
/ 14

위로