RX / XERXE 활용팁서드파티
Extra Form
서드파티 이름 나의메뉴 위젯
서드파티 URL https://www.xetown.com/rxe_file/784922

모바일에서 나의 메뉴의 갯수도 충분하게 제공하고 컨텐츠 열람하는 곳의 공간을 차지하는 것을 방지 하기 위해 제일 하단에 위치시켜 버튼으로 해당 메뉴까지 빠르게 이동하는 것으로 어제 만들어 보았는데요.

 

오늘은 아예 나의메뉴 버튼을 고정 위치에 노출해 놓고 메뉴 버튼을 눌렀을 경우 레이어로 마이메뉴들이 보이게 처리 해 보았습니다. 

 

이렇게 하면 장점은 컨텐츠 영역에 보이지 않기 때문에 자리를 차지 하지 않고 사용하고 싶을때 버튼 클릭으로 즉시 사용할 수 있습니다. 또 추가로 함께 보이고 싶은 다른 버튼도 추가해서 함께 보여줄 수 있는 장점도 있습니다.

 

 

가장 쉽게 따라 할 수 있는 것으로 

https://hfkais.blogspot.kr/2014/12/simple-popup-layer-html-css-jquery.html

 

위 게시물을 선택했습니다.

 

 

 

 

사용하시는 모바일 레이아웃의 상단에 스크립트를 추가해 줍니다.

 

<script>
jQuery(document).ready(function($) { 
       $('.trigger').click(function(){ 
        $('#mymenu, #overlay_t').show();  
        $('#mymenu').css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) + $(window).scrollTop()) + "px"); 
    }); 
    $('#overlay_t, .close').click(function(e){ 
        e.preventDefault(); 
        $('#mymenu, #overlay_t').hide(); 
    }); 
});
</script>

 

 

 

메뉴버튼에 triger 클래스가 들어가야 동작을 하게 되어있습니다.

<!--@if($is_logged)-->

<a href="#" class="mymenuscroll trigger" cond="!in_array(Context::get('act'), array('dispBoardWrite', 'dispBoardWriteComment', 'dispBoardModifyComment'))">my</a>

<!--@end-->

레이아웃 하단쯤에 위치 시키세요. css로 위치를 잡게 되니 그냥 하단에 위치 시키면 됩니다.

 

버튼의 css를 레이아웃 css에 추가해 주세요.

.mymenuscroll    {display: block; position: fixed;background: url(../images/my_yellow1.png) no-repeat; right: 10px; top: 250px; width: 45px; height: 45px; background-size: 42px 42px; background-repeat: no-repeat; background-position: center center;  text-indent: -9999px; z-index: 100;}

 

 

 

마이메뉴 위젯의 위에 <div id="overlay_t"></div> 를 추가해서 아래와 같이 레이아웃의 하단 즈음에 넣어주세요. 어차피 버튼을 눌러야 나오니 하단 즈음에 넣으시면 됩니다.

 

<div id="overlay_t"></div>

<div id="mymenu" cond="!in_array(Context::get('act'), array('dispBoardWrite', 'dispBoardWriteComment', 'dispBoardModifyComment'))" > <img class="zbxe_widget_output" widget="pr_favorite" skin="button" colorset="white" menu0="61" menu1="44330" use_shortcut="no" /> </div>

 

 

레이아웃의 css에 추가해 주세요.

#overlay_t { background-color: #000; bottom: 0; left: 0; opacity: 0.5; filter: alpha(opacity = 50); /* IE7 & 8 */ position: fixed; right: 0; top: 0; z-index: 99; display:none;}

#mymenu { width:100%; margin-bottom:30px; background:#fff; border:solid 1px #ccc; position:absolute; top:260px; box-shadow: 0px 1px 20px #333; z-index:150; display:none;}

 

 

Screenshot_20171111-155101.png

 

 

my 버튼을 누르면 이렇게 레이어로 뜨게 되었습니다. close 버튼은 굳이 따로 만들지 않았습니다. 바깥쪽을 큭릭하면 닫히니 굳히 필요가 없네요.

 

레이어 높이가 css에서 조절이 될 것 같으니 필요에 따라 조정해 보세요.

 

 

 

 

$is_logged 가 안먹는 경우는 Context::get('is_logged') 으로 하시면 됩니다.   <!--@if(Context::get('is_logged'))-->

  • profile
    pjk 2017.11.12 01:23:28
    감사합니다. 덕분에 모바일에는 적용을 성공했는데 마지막에 메뉴를 추가하고 적용을 누르면 저장 실패라고 메세지가 나오네요..어디 위젯 설치가 문제가 있는건지....연구를 해봐야겠네요 ㅜㅜ

    pc는 어디에 적용해야할지 고민이네요.. ^^
  • profile
    웹지기 2017.11.12 10:56:21
    pc는 보통 레이아웃 측면에 배치하면 편리합니다.
  • profile
    pjk 2017.11.12 11:15:27
    감사합니다.
  • profile

    close 버튼은 필요없긴 한데 디자인상 필요하신 경우


    css에 아래를 추가 하구요.

    .close {
    color: #fff;
    font: 30px/100% arial, sans-serif;
    position: absolute;
    left: 50%;
    text-decoration: none;
    text-shadow: 0 1px 0 #777;
    top: -55px;
    }
    close:after {
    content: 'X'; /* ANSI X letter */
    }


    <div id="overlay_t"></div>
    <div id="mymenu" cond="!$act=='dispBoardReplyComment' && !$act=='dispBoardModifyComment' && !$act=='dispBoardWrite'"> <img class="zbxe_widget_output" widget="pr_favorite" skin="button" colorset="white" menu0="61" menu1="44330" use_shortcut="no" />
    <span class="close"></span>
    </div>


    이렇게 하면 DIV 위쪽에 X 버튼이 노출됩니다.

    .close 를 이미 사용해서 곤란하다면 다른 이름으로 하고 스크립트에서도 동일하게 변경해 주면 됩니다.

     

    Screenshot_20171112-132551.png

     

     

  • profile
    달콤한인생 2017.11.13 22:33:04
    저어기 마이 버튼을 조금 밑으로 내리려면 어딜 수정해야 하나요ㅠ
  • profile
    웹지기 2017.11.13 22:37:57
    이전 게시글에서 작업하신 내용중에

    .mymenuscroll {display: block; position: fixed;background: url(../images/my_blue.png) no-repeat; right: 10px; top: 250px; width: 45px; height: 45px; background-size: 42px 42px; background-repeat: no-repeat; background-position: center center; text-indent: -9999px; z-index: 150;}

    이부분이 버튼 디자인 입니다.

    top:250px 여기가 버튼 높이 위치입니다.
  • profile
    달콤한인생 2017.11.13 23:09:18
    감사합니다! 너무 편리한 기능 알려주셔서 감사해요!
  • profile
    달콤한인생 2017.11.13 22:42:30
    그냥 버튼을 조금 작게 수정했습니다! 꿀팁 감사합니다ㅠ
  • profile
    달콤한인생 2017.11.13 23:22:06
    울횐님들 벌써 귀엽고 좋다고 난리네요! 큰절받으세요!!
  • profile
    달콤한인생 2017.11.14 00:04:54

    @웹지기님 혹시 이거 설정하고 회원정보 수정했을 경우 메뉴 초기화 되는 현상이 있어요. 혹시 지기님께선 아무 이상 없으신가요?

  • profile
    달콤한인생 2017.11.14 02:02:31
    위젯과 관련된 문제였네요ㅠ
  • profile
    스트렌져 2017.11.14 19:35:54
    혹시 반응형 레이아웃의 경우 동일하게 하면
    pc에서는 나오는데 모바일에서는 my 버튼이 나오지 않는데
    원인을 알수있을까요~
  • profile
    웹지기 2017.11.14 19:40:42
    글쎄요. 반응형이 라면 가로폭에 따라 감추고 노출 하는건 css에서 보통 처리한다는 정도만 알고 있어서요. 폭이 좁아질때 display:none 되는 클래스를 쓰신건 아닌지 저도 알 수는 없습니다.
  • profile
    스트렌져 2017.11.14 21:37:11
    아 로그인을 안해서 안나왔었습니다. ㅡㅡ;;;
    근데 또 문제가..
    모바일에서 my 아이콘을 누루면 # 처리되면서 아무반응이 없는데
    이부분은 어디를 봐야되는지요
  • profile
    웹지기 2017.11.14 21:38:40
    스크립트가 제대로 동작이 된다면 맞는 클래스의 버튼이 눌리면 가려있던 요소가 보이게 되어있습니다.
  • profile
    누구니이넌 2017.11.21 17:25:32
    웹지기님 css 에서 display:none; 를 삭제하고 모바일에서 새로고침하니 마이메뉴 가 나오는데요
    동그란 버튼은 안나오고 마이메뉴가 펼처저서 기존 위젯이 나오더라구요 버튼이 나오게 하려면 어떻게 해야 할까요 ?
  • profile
    웹지기 2017.11.21 17:27:31
    display:none; 을 삭제하면 안됩니다. 그러면 그냥 처음부터 노출 됩니다.

    버튼이 나오는건 그냥 나와야 되구요...


    <!--@if($is_logged)-->
    <a href="#" class="mymenuscroll trigger" cond="!$act=='dispBoardReplyComment' && !$act=='dispBoardModifyComment' && !$act=='dispBoardWrite'">my</a>
    <!--@end-->

    이 코드는 버튼의 코드인데 보시면 로그인 한 사람에게만 보이게 되어 있습니다. 로그인 하셨는데 안나오나요?
  • profile
    누구니이넌 2017.11.21 17:57:08
    로그인 하였는데 안나오고 있습니다 ㅎㅎ
    css 문제 아닐까요? 그 이미지 경로를 잘못했..그래서 다 해봤는데
    아닌거 같아서요 ㅠㅠ
    아래에 답글 달아주신건 어디에 넣어야 할지 몰라 아둥바둥 중입니다 ㅋㅋ
  • profile
    웹지기 2017.11.21 17:32:07
    cond="!in_array(Context::get('act'), array('dispBoardWrite', 'dispBoardWriteComment', 'dispBoardModifyComment'))"

    글쓰기 댓글쓰기 댓글 수정에서 안보이게 하려고 넣은 코드를 위와 같이 바꿔보세요. 저도 일부 안보이는 페이지들이 있어서 수정했습니다.

    본문에는 수정해 놓았습니다. 아마 이문제가 아닐까 생각이 드네요..
  • profile
    누구니이넌 2017.11.21 17:52:46
    그...그....그게어디죠?;;;
  • profile
    웹지기 2017.11.21 17:59:17

    버튼 코드 입니다.
    <!--@if($is_logged)-->
    <a href="#" class="mymenuscroll trigger" cond="!in_array(Context::get('act'), array('dispBoardWrite', 'dispBoardWriteComment', 'dispBoardModifyComment'))">my</a>
    <!--@end-->

    이렇게 바꿔서 해보세요.

     

    이렇게 해서도 버튼이 안보인다면 본문 맨 아래에 적어 놓은

    $is_logged 가 안먹는 경우는 Context::get('is_logged') 으로 하시면 됩니다.   <!--@if(Context::get('is_logged'))-->

     

    이문제 입니다.

  • profile
    누구니이넌 2017.11.21 18:28:50
    웹지기님 죄송합니다 png 파일의 확장자가 한개 더써있어서 못불러 왔습니다 ;;;
    근데 my 메뉴 버튼 터치 하면 상단으로 올라가면서 아무 반응이 없습니다
    어떤게 잘못일까요
    <!--@if(Context::get('is_logged'))-->
    <a href="#" class="mymenuscroll trigger" cond="!in_array(Context::get('act'), array('dispBoardWrite', 'dispBoardWriteComment', 'dispBoardModifyComment'))">my</a>
    <!--@end-->
    <div id="overlay_t"></div>
    <div id="mymenu" cond="!$act=='dispBoardReplyComment' && !$act=='dispBoardModifyComment' && !$act=='dispBoardWrite'">
    <img class="zbxe_widget_output" widget="pr_favorite" skin="default" colorset="white" menu0="130" menu1="1365" use_shortcut="no" /></div>
  • profile
    누구니이넌 2017.11.21 18:32:26
    자문자답입니다 스크립트 를 layout.html 에 포함시켯습니다
  • profile
    웹지기 2017.11.21 18:33:13
    스크립트 없이는 동작하지 않죠.
  • profile
    누구니이넌 2017.11.21 20:07:40
    스크립트를 레이아웃 설정의 헤드스크립트 넣는부분에 넣어서 햇다가 레이아웃html에 넣다가 왓다갓다해서 그랫나봐요 ㅠㅠ 감사합니다 웹지기님

서버에 요청 중입니다. 잠시만 기다려 주십시오...