RX / XERXE 활용팁서드파티
조회 수 101 추천 수 2 댓글 15
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 댓글로 가기 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 첨부
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="!$act=='dispBoardReplyComment' && !$act=='dispBoardModifyComment' && !$act=='dispBoardWrite'">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="!$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" /> </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
    스크립트가 제대로 동작이 된다면 맞는 클래스의 버튼이 눌리면 가려있던 요소가 보이게 되어있습니다.

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