질문/공유팁 게시판

나의메뉴 위젯 스킨 - 버튼 스타일

prologos
조회 수 1845 추천 수 6
크게 작게 댓글로 가기
크게 작게 위로 아래로 댓글로 가기

기존 스킨에 대해 폰트어썸 사용안한 버전이 있었으면 한다는 의견이 있어서 utf-8 심볼문자만을 이용한 버튼스타일의 스킨을 하나 만들고 있었습니다.

그리고 추가적으로 모바일 대응에 대한 의견이 있어서 모바일에 대응할 수 있도록 약간의 기능을 추가해서 배포 합니다.

세부적인 디자인은 자신의 사이트에 맞도록 수정해서 사용하시기 바랍니다.

기본 스킨을 수정해서 색감과 디자인을 수정 했고 특히 폰트에 따라 디자인이 틀어지는 현상이 있는거 같아서 리스트 출력 방식을 변경 해 봤습니다.

색감은 @플루오린님의 스샷을 참고 했습니다. ㅎㅎㅎㅎ

 

주의, 컬러셋이 white와 dark가 준비되어 있지만 white만 작업 했습니다.

 

나의 메뉴 버튼 스타일 스킨

button.zip

 

widgets/pr_favorite/skins/ 폴더 아래에 설치 후 사용하시면 됩니다.

 

1. 단축키 사용 유무에 따라 출력 스타일이 다릅니다. 모바일에 대응하기위해 메뉴 길이에 따라 자동 정렬 됩니다. 긴 메뉴는 ellipsis처리 됩니다.

button01.png

 

2. 모바일의경우 화면 스크롤과 편집화면 셀 이동 기능이 겹치는것을 방지하기 위해서 마우스를 단축키 번호위로 가져갔을 경우만 셀 이동이 가능합니다.

button02.png

 

3. 위젯을 조금 여유로운 너비로 사용하시는분들이 많은거 같아서 메뉴 리스트에 스크롤바가 보이도록 변경 했습니다.

button03.png

Atachment
첨부
위로 아래로
댓글 29
  • profile
    오~~ 드디어 이제 모바일에 나의메뉴를....
    첨부좀 해주세요 ㅋ
  • profile profile
    헛! 파일이 어디갔지요? 삽입된 이름만 보이네요ㅋ 다시 업로드 할께요.
  • ?
    멋저부러!!
  • ?
    갈수록 죽여주는구만...
  • profile
    오 완전체
  • profile
    .pr_mymenu ul, .pr_mymenu_edit ul, .pr_mymenu_node ul {
    float: left;
    padding: 0;
    border-left: 1px solid #d5dcde;
    border-right: 1px solid #d5dcde;
    border-bottom: 1px solid #d5dcde;
    list-style: none;
    margin: 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width: 100%;
    background-color: #fff;
    }

    마지막에 배경 흰색이 빠진것 같아 저희는 추가했습니다.
  • ?
    프로로고스님 너무 잘됩니다. 다만 예를 들어 10개를 3개 ~4개 정도로 줄일려면 어디를 봐주면 될까요?
  • ? profile

    제일 간단하게 하려면 아래 굵은 글씨 코드를 삽입 해 보세요. 마지막 5가 개수 입니다.


    pr_favorite.class.php 22라인 부근...
    if(Context::get('is_logged'))
            {
                $widget_info->menu = $this->getMenuData($args);
                $widget_info->my_menu = $this->getMyFavorite();
                $widget_info->my_menu = array_slice($widget_info->my_menu, 0, 5);
            }
    updateMyMenu.php 48라인 부근...

    $data = $new_menu;
    $data = array_slice($data, 0, 5);

  • profile ?
    정말 감사합니다.^^
  • profile

    즐겨찾기 맨 끝에 홈으로 가는 메뉴를 살짝 끼워 넣고 싶다면.. 아래 처럼 해보세요~~

    <ul id="prmymenu">
    {@ $count = 0; $msg_empty = '나만의 메뉴를 사용해 보세요. 자주 사용하시는 메뉴 10개까지 등록 가능합니다.';}
    <!--@foreach($widget_info->my_menu as $key => $val)-->
    <!--@if(0 < $val)-->
    {@ $idx = $key == 9 ? 0 : $key + 1; $count++; }
    <!--@if(!$widget_info->menu->data[$val])-->
    {@ $widget_info->my_menu[$key] = 0; }
    <!--@end-->
    <li><span cond="$widget_info->use_shortcut=='yes'" class="pr_scut">{$idx}</span><a href="{$widget_info->menu->data[$val]->href}" target="_blank"|cond="$widget_info->menu->data[$val]->is_window=='Y'">{$widget_info->menu->data[$val]->text}</a></li>
    <!--@end-->
    <!--@end-->
    <!--@if(0 < $count)-->
    <li><a href="/">홈으로</a></li>
    <!--@end-->
    <!--@if(0 == $count)-->
    <li><span class="pr_trymymenu">{$msg_empty}</span></li>
    <!--@end-->
    </ul>

     

     

     

    <ul id="prmymenu">
            {@ $count = 0; $msg_empty = '나만의 메뉴를 사용해 보세요. 자주 사용하시는 메뉴 10개까지 등록 가능합니다.';}
            <!--@foreach($widget_info->my_menu as $key => $val)-->
                <!--@if(0 < $val)-->
                    {@ $menuNum = $key + 1; $menuNum = $menuNum > 9 ? 0 : $menuNum; $count++; }
                    <li><a href="{$widget_info->menu->data[$val]->href}" target="_blank"|cond="$widget_info->menu->data[$val]->is_window=='Y'"><span class="pr_iboard">{$menuNum}</span>{$widget_info->menu->data[$val]->text}</a></li>
                <!--@end-->
            <!--@end-->
            <!--@if(0 < $count)-->
            <li><a href="/"><span class="pr_iboard">H</span>홈으로</a></li>
            <!--@end-->
            <!--@if(0 == $count)-->
                <li><span class="pr_trymymenu">{$msg_empty}</span></li>
            <!--@end-->
            </ul>

  • profile profile
    웹지기님 레이아웃 좌우로 즐겨찾게 메뉴 빼 놓으셨던데 어떻게 구현 하신걸까요?
  • profile profile
    그건 이 자료와 상관없이 배너 같은 것을 좌우로 배치하는 기술이라.. 설명이.....
  • profile profile
    네 레이아웃에서 한번 설정을 해봐야 겠네요 답변 감사드립니다.^^
  • profile profile
    보통 레이아웃의 영역 밖으로 하는것이라 레이아웃 설정에는 없습니다.
  • profile profile
    네 레이아웃 서브 페이지를 서브로 구성하고 해볼려고 했는데.. 이건 아닌것 같네요 ^^
  • profile profile

    그리고 지금 메인쪽은 굉장히 넓은 해상도로 구성되어 있으셔서 옆에 더 배치하시면 잘려서 못보는 사람이 너무 많습니다. 지금 레이아웃 안에서 해결하셔야 할 것 같네요.

    서브레이아웃으로 사용하시는 쪽은 양쪽에 배치를 해도 될 것 같구요.

  • profile
    이 위젯을 붙이니까 홈페이지가 좀 있어 보이네요 ㅎㅎㅎㅎㅎㅎ
  • ?

    기존에 단축키를 사용하는 유저 입장에서

    단축키는 사용하지 않지만, 번호 라벨링은 계속해서 출력되면 좋겠습니다.

    즉..현재는 단축키 yes를 해야만 메뉴라벨링이 붙어서 나와서 약간 허전한감이 있습니다. ^^

  • ? profile

    아래 두곳에서 처리하는 부분이니 수정하시면 될듯합니다.

     

    html: <span cond="$widget_info->use_shortcut=='yes'" class="pr_scut">{$idx}</span>

     

    스크립트:

    var use_scut = '{$widget_info->use_shortcut}';
                    if('yes' == use_scut) {
                        html += '<li><span class="pr_scut">'+m_num+'</span><a href="'+pr_MenuData[val].href+'"'+blank+'>'+pr_MenuData[val].text+'</a></li>';
                    }
                    else {
                        html += '<li><a href="'+pr_MenuData[val].href+'"'+blank+'>'+pr_MenuData[val].text+'</a></li>';
                    }

  • profile ?

    네. 감사합니다.. 그나저나 굳이 반응형이 필요 없는 유저 인경우이긴한데..

    2017-11-07 17 22 22.png

     

    편집 모드의 스킨의 결과물이 훨씬 아름답습니다. 편집모드 스타일 그대로 저장이후의 디자인으로서 계속 사용할 방법은 없겠죠?

     

    본문의 그것 : 역시 아름답습니다.

    button02.png

     

     

  • ? profile
    일때문에 다음 업데이트는 시간이 좀 걸릴것 같기는 한데 기본 스킨 스타일도 변경할 예정 입니다. 폰트에 따라 레이아웃이 조금 틀어지는 현상이 있는거 같아서요. 하지만... 역시 디자인은 사용자가 자신에 맞게 수정해서 쓰는게 제일이긴 하죠 ^^;
  • profile
    아닛!! 큰절받아주세요ㅠ 감사히 쓰겠습니다!
  • profile

     나만의메뉴 이거 PC에서도 무척 편리하지만... 모바일에서 엄청 좋네요 ㅋ

     

    Screenshot_20171107-202058.png

     

     

    Screenshot_20171107-202129.png

     

  • profile ?

    전 기존에 있었는데 제가 지정한거였으니 이제는 나만의 메뉴로 바꿔야겠어요

  • ? profile
    네. 지금 해 놓으신 것도 좋더라구요. 회원 입맛대로 할 수 있는 장점이 있으니 회원들이 좋아하실 것 같네요~
  • profile ?
    네. 일장일단이 있는것 같아 웹지기님 홈 버튼 기능이랑도 적절이 합치면 좋을것 같습니다.
  • ?

    스크린샷 2017-11-07 오후 10.36.41.png

     

    90c22b4b2230a190d33efd1282ea76bf.png

     

    모바일의 화면 공간을 최소화 하기 위해 메뉴를 5개로 강제 시키고 CSS 로 조정하여 만들었습니다.... 

  • ? profile
    변경하신 즐겨찾기, 숫자, 새글 표시 있는 스킨 좋습니다. css 알려 주세요~ ^^
  • profile

    멋져요!! 감사합니다