• 북마크
  • 1:1문의
  • 새글
  • 회원가입
  • 로그인

이윰빌더

  • Home
  • 스터디
  • 이윰빌더

비반응형 커뮤니티 메뉴 반응형에서 사용하기.

2,681 2015.10.02 01:10

짧은주소

본문

안녕하세요...즐거운 추석 되셨는지요...

비반응형 pc커뮤니티 테마의 좌측 슬라이드 메뉴, 우측 슬라이드 그리고 페이지 로딩소스를 반응형 커뮤니티 테마에서 사용하는 방법을 적어볼께요...


수정하지 않은 반응형 커뮤니티 테마기준으로 작성되었습니다.

custom.css의 아래 소스를 추가합니다.


/*전체로딩....*/
.t-center {text-align:center}
#preloader {position:fixed;top:0;left:0;right:0;bottom:0;background-color:#fff;z-index:99999}
#status {position:fixed;z-index:99999;width:250px;height:250px;position:absolute;left:50%; top:50%; margin:-125px 0 0 -125px}
#status p {top:60%}

/*----- Sidebar (Left) -----*/
.ebm-sidebar {background-color:#fff;width:266px;display:block;position:absolute;top:0px;left:0px;bottom:0px;overflow:hidden;position:fixed;}
.ebm-sidebar-scroll {width:266px;overflow:scroll;overflow-x:hidden;height:100%}
.ebm-sidebar .sidebar-nav {padding-right:0px}
.ebm-sidebar .list-group {margin-bottom:0}
.ebm-sidebar .list-group-item {border:0;border-top:1px solid #e5e5e5;border-bottom:1px solid #e5e5e5}
.ebm-sidebar .list-group-item:first-child {border-top:0}
.ebm-sidebar .list-group-item:last-child {border-bottom:0}
.ebm-sidebar .sidebar-search {background-color:#fff;padding:15px 10px 5px;border-bottom:1px solid #bf1143}
.ebm-sidebar .sidebar-section {background-color:#bf1143;height:50px}
.ebm-sidebar .sidebar-section p {font-size:12px;color:#fff;font-weight:700;padding-top:15px;padding-left:10px}
.ebm-sidebar .sidebar-section a {width:50px;height:38px;position:absolute;left:195px;top:0px;text-align:right;padding-top:12px;color:#fff;font-size:16px}
.ebm-sidebar .sidebar-copyright {background-color:#000;height:50px}
.ebm-sidebar .sidebar-copyright p {font-size:11px;color:#fff;font-weight:300;padding-top:17px;padding-left:10px}

/*----- Sidebar (Right) -----*/
.ebm-sidebar-open,.ebm-sidebar-close {cursor:pointer}
.ebm-sidebar-mb {position:fixed;top:0px;right:0;width:300px;background:#f4f4f4;-ms-transform:translateX(100%);-webkit-transform:translateX(100%);transform:translateX(100%);
transition:all 0.2s;z-index:9999;border-left:0px solid #ccc;margin-right:-301px;-webkit-box-shadow:0 0 8px rgba(0,0,0,0.25);-moz-box-shadow:0 0 8px rgba(0,0,0,0.25);box-shadow:0 0 8px rgba(0,0,0,0.25)}
.ebm-sidebar-mb-scroll {z-index:2;overflow:auto;overflow-x:hidden;height:100%}
.ebm-sidebar-mb.sidebar-mb-open {margin-right:0;-ms-transform:translateX(0);-webkit-transform:translateX(0);transform:translateX(0)}
.ebm-sidebar-mb-title {position:absolute;top:0;width:280px;height:50px;padding:0 10px;line-height:50px;z-index:3;background:#fff;border-bottom:1px solid #e5e5e5}
.ebm-sidebar-mb-in {padding:10px}
.ebm-toggle-btn a {position:absolute;top:0;right:10px;width:40px;height:49px;text-align:center;font-size:16px}

/*----- Content -----*/
#content {backface-visibility:hidden;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden}
.ebm-content {background-color:#fff;display:block;position:relative;min-height:100%;-webkit-box-shadow:0 0 8px rgba(0,0,0,0.35);-moz-box-shadow:0 0 8px rgba(0,0,0,0.35);box-shadow:0 0 8px rgba(0,0,0,0.35)}
.ebm-header {background-color:#eaeaea;border-bottom:solid 1px #d5d5d5;height:50px;width:100%;z-index:1;display:block;overflow:hidden;position:relative}
.ebm-header .sidebar-btn {position:absolute;top:0;left:0;z-index:999;width:50px;height:37px;display:block;font-size:16px;padding-top:13px;text-align:center}
.ebm-header .sidebar-btn i {color:#000;text-shadow:0 1px 0 #fff}
.ebm-header .ebm-logo {position:relative;z-index:99;display:block;font-size:18px;padding-top:10px;text-align:center;font-weight:700}
.ebm-header .ebm-logo a {color:#000;text-shadow:0 1px 0 #fff}
.ebm-header .ebm-login {position:absolute;right:0px;top:0px;z-index:999;width:60px;height:33px;display:block;font-size:11px;padding-top:17px;padding-right:15px;text-align:right}
.ebm-header a.ebm-login {color:#bf1143;text-shadow:0 1px 0 #fff}
.ebm-member-bar {padding:8px 10px;background:#fff;border-bottom:1px solid #e5e5e5}
.ebm-member-bar li.dropdown-extended li {border-left:0;padding:5px 10px}
.ebm-member-bar li.dropdown-extended .dropdown-menu {margin-top:8px;margin-right:-190px;min-width:160px;max-width:250px;width:250px}
.ebm-member-bar li.dropdown-extended .dropdown-menu:before {right:197px}
.ebm-member-bar li.dropdown-extended .dropdown-menu:after {right:198px}
.ebm-member-bar li.dropdown-extended .badge-dark {background:#bf1143}
.ebm-title-wrap {position:relative;padding:20px 10px 0;background:#fff}
.ebm-title-wrap .ebm-title {padding:10px;background:#f8f8f8;border:1px solid #bbb;text-align:center}
.ebm-title-wrap .ebm-title .con-map>li+li:before {padding:0 5px 0 0;color:#ccc;content:"/\00a0"}
.ebm-notice-wrap {position:relative;padding:0px 10px 10px;background:#fff;margin-top:-1px}
.ebm-notice-wrap .ebm-notice-box {padding:7px 10px;border:1px solid #bbb}
.ebm-content-wrap {padding:10px;background:#fff;min-height:418px}
.ebm-footer {padding:10px;background:#fff;border-top:1px solid #e5e5e5}
.ebm-footer p {font-size:11px}
.ebm-footer p a {font-size:11px}

/* Sidebar Menu */
.sidebar-nav li {padding:0}
.sidebar-nav li a {display:block;padding:8px 30px 8px 10px}
.sidebar-nav li a:hover {text-decoration:none}
.sidebar-nav > li.active,.sidebar-nav > li.active:hover {background:#f6fee6;border-color:#87b822}
.sidebar-nav > li.active > a {color:#54545a;font-weight:bold}
.sidebar-nav li ul {padding:0;list-style:none}
.sidebar-nav li ul,.sidebar-nav li.active ul a {background:#fafafa}
.sidebar-nav li ul a {color:#555;font-size:12px;border-top:solid 1px #ddd;padding:6px 30px 6px 20px}
.sidebar-nav li a i {width:20px;text-align:center;color:#a5a5aa}
.sidebar-nav ul li:hover a,.sidebar-nav ul li.active a {color:#bf1143}
.sidebar-nav ul ul li:hover a,.sidebar-nav ul ul li.active a {color:#bf1143}
.list-group-item li > .badge {float:right}
.sidebar-nav span.badge {margin-top:8px;margin-right:10px}
.sidebar-nav .list-toggle > span.badge {margin-right:25px}
.sidebar-nav ul li span.badge {margin-top:8px;font-size:11px;padding:3px 5px;margin-right:10px}
.sidebar-nav a.subsub-style {padding-left:30px}
.list-toggle:after {top:7px;right:10px;color:#777;font-size:14px;content:"\f104";position:absolute;font-weight:normal;display:inline-block;font-family:FontAwesome}
.list-toggle.active:after {color:#87b822;content:"\f107"}
.list-group-item.active,
.list-group-item.active:focus {
  z-index: 0;
}


그리고 수정할 파일은  head_bs.html 파일에 28번째줄에


<!--{* ----- 로딩효과 시작 ----- *}-->
<div id="preloader">
 <div id="status">
     <p class="t-center">
  로딩로딩로딩로딩
        </p>
    </div>
</div>
<!--{* ----- 로딩효과 끝 ----- *}-->

<!--{* Start Style Switcher *}-->
<!--{? (_is_member && eyoom.use_switcher=='on') || _is_admin}-->
{# switcher}
<!--{/}-->
<!--{* End Style Switcher *}-->

<!--{* rgh-f 왼쪽사이드메뉴영역 *}-->
    <div id="sidebar" class="ebm-sidebar hidden-pc">
        <div class="ebm-sidebar-scroll">
         <div class="sidebar-section">
             <p>MENU</p>
                <a href="#" class="sidebar-close"><i class="fa fa-times"></i></a>
            </div>

            <ul class="list-group sidebar-nav" id="sidebar-nav">
                <!--{* Home *}-->
                <li class="list-group-item {? defined('_INDEX_')}active{/}">
                    <a href="{C.G5_URL}{? _is_member && eyoomer.main_index != 'index'}/?home{/}">Home</a>
                </li>
                <!--{* End Home *}-->

                <!--{* Menu *}-->
                <!--{@ menu}-->
                <li class="list-group-item {? menu.submenu}list-toggle{/} {? .active}active{/}">
                 <a {? menu.submenu}data-toggle="collapse" data-parent="#sidebar-nav" href="#collapse-{.key_}"{:}href="{.me_link}" target="_{.me_target}"{/}>
                        <!--{? .me_icon}--><i class="fa {.me_icon}"></i> <!--{/}-->{.me_name}
                    </a>
     <!--{@ submenu}-->
                 <!--{? ..index_ == 0}-->
                    <ul id="collapse-{.key_}" class="collapse {? .active}in{/}">
                    <!--{/}-->
                        <li class="{? ..active}active{/}">
                         <a href="{..me_link}" target="_{..me_target}">
                             <!--{? ..me_icon}--><i class="fa {..me_icon}"></i> <!--{/}-->{..me_name}<!--{? ..new}--> <i class="fa fa-circle color-red"></i><!--{/}-->
                         </a>
       <!--{@ subsub}-->
       <!--{? ...index_ == 0}-->
       <ul class="in">
       <!--{/}-->
        <li class="{? ...active}active{/}">
         <a href="{...me_link}" target="_{...me_target}" class="subsub-style">
          - <!--{? ...me_icon}--><i class="fa {...me_icon}"></i> <!--{/}-->{...me_name}<!--{? ...new}--> <i class="fa fa-circle nav-new2"></i><!--{/}-->
         </a>
        </li>
       <!--{? ...index_ == ...size_-1}-->
       </ul>
       <!--{/}-->
       <!--{/}-->
                        </li>
                    <!--{? ..index_ == ..size_-1}-->
                    </ul>
                    <!--{/}-->
     <!--{/}-->
                </li>
                <!--{/}-->
                <!--{* End Menu *}-->
            </ul>

         <div class="sidebar-section"><p>DEFAULT MENU</div>
            <ul class="list-group sidebar-nav">
    <!--{* START DEFAULT MENU //필요에 따라 사용하세요. 테마 page 폴더에 html파일을 생성 후 아래와 같은 형식으로 a태그에 링크를 연결합니다. *}-->
    <!--{? 1 //DEFAULT 메뉴 안보임:0, 보임:1}-->
    <li class="list-group-item">
     <a href="{C.G5_BBS_URL}/faq.php"><i class="fa fa-question-circle"></i> FAQ</a>
    </li>
    <li class="list-group-item">
     <a href="{C.G5_BBS_URL}/qalist.php"><i class="fa fa-lock"></i> 1:1 문의</a>
    </li>
    <li class="list-group-item">
     <a href="{C.G5_BBS_URL}/new.php"><i class="fa fa-file-text-o"></i> 새글</a>
    </li>
    <!--{/}-->
    <!--{* END DEFAULT MENU *}-->
            </ul>

         <div class="sidebar-section"><p>INFORMATION</p></div>
            <ul class="list-group sidebar-nav">
    <!--{* START INFO MENU //필요에 따라 사용하세요. 테마 page 폴더에 html파일을 생성 후 아래와 같은 형식으로 a태그에 링크를 연결합니다. *}-->
    <!--{? 1 //INFO 메뉴 안보임:0, 보임:1}-->
    <li class="list-group-item {? _pid == 'aboutus'}active{/}">
     <a href="{C.G5_URL}/page/?pid=aboutus"><i class="fa fa-building"></i> ABOUT US</a>
    </li>
    <li class="list-group-item {? _pid == 'provision'}active{/}">
     <a href="{C.G5_URL}/page/?pid=provision"><i class="fa fa-clipboard"></i> 이용약관</a>
    </li>
    <li class="list-group-item {? _pid == 'privacy'}active{/}">
     <a href="{C.G5_URL}/page/?pid=privacy"><i class="fa fa-male"></i> 개인정보 취급방침</a>
    </li>
    <li class="list-group-item {? _pid == 'noemail'}active{/}">
     <a href="{C.G5_URL}/page/?pid=noemail"><i class="fa fa-exclamation-triangle"></i> 이메일 무단수집거부</a>
    </li>
    <li class="list-group-item {? _pid == 'contactus'}active{/}">
     <a href="{C.G5_URL}/page/?pid=contactus"><i class="fa fa-map-marker"></i> CONTACT US</a>
    </li>
    <!--{/}-->
    <!--{* END INFO MENU *}-->
            </ul>

         <div class="sidebar-copyright">
             <p>&copy; {config.cf_title}. All Rights Reserved.</p>
            </div>
        </div>
    </div>

<div id="content" class=" ebm-content">

<a href="#" class="sidebar-btn btn-e btn-e-red"><i class="fa fa-reorder font-size-14"></i></a><!--{* 좌측 슬라이드 버튼 *}-->
   
<a href="#" class="ebm-sidebar-open btn-e btn-e-red"><strong class="username"><!--{? eyoomer.mb_nick}-->{eyoomer.mb_nick}<!--{:}-->{eyoomer.mb_name}<!--{/}--> <i class="fa fa-outdent"></i></strong></a><!--{* 우측슬라이드 버튼*}-->

<!--{* rgh-f 왼쪽사이드메뉴영역 *}-->


그리고 tail_bs.html 에서 95번째 줄에


 <!--{* ----- 우측 사이드 영역 시작 ----- *}-->
 <aside class="ebm-sidebar-mb">
  <div class="ebm-sidebar-mb-title">
   <div class="ebm-toggle-btn">
    <a class="ebm-sidebar-close"><i class="fa fa-close"></i></a>
   </div>
   <h5>MEMBER & SITE <span class="color-red">INFO</span></h5>
  </div>
  <div class="ebm-sidebar-mb-scroll scrollable">
   <div class="ebm-sidebar-mb-in">
 <div class="margin-bottom-30"></div>
 
 <div class="margin-bottom-20">
  <!--{* 아웃로그인 *}-->
  {=eb_outlogin(eyoom.outlogin_skin)}
 </div>
 <div class="margin-bottom-20">
  <!--{* 투표 *}-->
  <!--{? eyoom.use_gnu_poll == 'y'}-->{=poll('basic')}<!--{:}-->{=eb_poll(eyoom.poll_skin)}<!--{/}-->
 </div>
 <div class="margin-bottom-20">
  <!--{* 랭킹 *}-->
  {latest->latest_rankset('basic','10')}
 </div>
 <div  class="margin-bottom-20">
  <!--{* 인기검색어 *}-->
  <!--{? eyoom.use_gnu_popular == 'y'}-->{=popular('basic')}<!--{:}-->{=eb_popular(eyoom.popular_skin)}<!--{/}-->
 </div>
 <div class="margin-bottom-20">
  <!--{* 사이트통계 *}-->
  <!--{? eyoom.use_gnu_visit == 'y'}-->{=visit('basic')}<!--{:}-->{=eb_visit(eyoom.visit_skin)}<!--{/}-->
 </div>
 <div class="t-right">
  <!--{* ----- 소셜링크 영역 시작 ----- *}-->
     <div class="eb-social-icon">
            <ul>
                <li class="social-facebook"><a target="_blank" href="#">Facebook</a></li>
                <li class="social-twitter"><a target="_blank" href="#">Twitter</a></li>
                <li class="social-google"><a target="_blank" href="#">Google Plus</a></li>
                <li class="social-tumblr"><a target="_blank" href="#">Tumblr</a></li>
                <li class="social-instagram"><a target="_blank" href="#">Instagram</a></li>
            </ul>
     </div>
     <!--{* ----- 소셜링크 영역 끝 ----- *}-->
 </div>
 <div class="margin-bottom-20"></div>
</div>
  </div>
 </aside>
 <!--{* ----- 우측 사이드 영역 끝 ----- *}-->


</div><!--{*  왼쪽사이드메뉴영역 *}-->


그리고 tail_bs.html 에서 167번째 줄에

<script type="text/javascript" src="../js_mo/snap.min.js"></script>
<script type="text/javascript" src="../js_mo/app_mo.js"></script>


추가 하시면 되구요 해당파일은 pc_basic 테마에 있어서요...


소스가 길다고 생각하시면 template.class 추가하시고  {# sss_mo} 이런식으로 쓰시면 됩니다.

그리고 원본소스를 수정했기에 버튼을 그냥 상단에 두었구요 모바일 노출이나 hidden-sm hidden-xs를 적절히 쓰시면 될꺼같습니다.

우측 슬라이드는 css가 맞지 않아서 원본소스에 깔면 약간 깨져서 보이는데요...css를 적절히 수정하시면 될꺼같습니다.

1
좋아요!
3
- 크롱크롱 메일보내기 아이디로 검색 - 회원등급 : 새싹/Level 9 - 포인트 : 14,345
레벨 9
경험치 8,924

Progress Bar 96%

- 가입일 : 2015-02-28 00:26:30
- 서명 :
- 자기소개 :
댓글목록

비즈팔님의 댓글

좋은 자료 감사합니다. ^^

축하합니다. 첫댓글 포인트 57포인트를 획득하였습니다.

shadow님의 댓글

멋진 정보 감사합니다.^^

티보리님의 댓글

와우 감사합니다.

joosam님의 댓글

꿀 팁이십니다~~ 고맙습니다~~

littlebe님의 댓글

아직 적용 전인데... 해 보고 싶은 부분이라서요.
감사합니다.

littlebe님의 댓글

좋은 정보 감사합니다. ^^

김성수님의 댓글

아직 적용 전인데... 해 보고 싶은 부분이라서요.
감사합니다.

Total 42건 1 페이지
번호 제목 글쓴이 날짜 추천
42 red123 아이디로 검색 2017.03.09 1,671 0
41 red123 아이디로 검색 2017.03.07 2,136 0
40 red123 아이디로 검색 2017.03.07 1,549 1
39 이윰EGG 아이디로 검색 2016.11.28 1,439 0
38 red123 아이디로 검색 2016.11.03 1,965 0
37 red123 아이디로 검색 2016.11.02 1,524 0
36 red123 아이디로 검색 2016.11.01 2,006 0
35 red123 아이디로 검색 2016.11.01 1,534 1
34 이윰EGG 아이디로 검색 2016.09.28 1,433 0
33 red123 아이디로 검색 2016.09.23 1,273 0
32 red123 아이디로 검색 2016.09.23 1,360 0
31 red123 아이디로 검색 2016.09.23 3,266 0
30 red123 아이디로 검색 2016.09.07 8,989 0
29 이윰EGG 아이디로 검색 2016.06.13 1,951 0
28 이윰EGG 아이디로 검색 2016.05.13 3,742 2
27 이윰EGG 아이디로 검색 2016.04.18 3,777 5
26 red123 아이디로 검색 2016.04.08 2,877 0
25 칠천피트 아이디로 검색 2016.03.13 2,407 1
24 이윰EGG 아이디로 검색 2016.02.15 2,676 1
23 이윰EGG 아이디로 검색 2016.01.21 2,116 0
LOGIN
사이드 메뉴

최신글이 없습니다.

최신글이 없습니다.

출석 랭킹

오늘의 랭킹

회원사진

닉네임

개근왕

최다1위

shadow shadow
Ranking

    출력할 랭킹이 없습니다.

  • 01 shadow
    674,374
  • 02 신비
    335,419
  • 03 가을하늘
    204,735
  • 04 mame
    202,630
  • 05 이윰MOUNT
    199,181
  • 06 미스코리아
    163,939
  • 07 레오나르도
    147,576
  • 08 테크니션
    142,655
  • 09 이윰IN
    135,258
  • 10 비온뒤맑음
    127,882
  • 01 shadow
    28,938
  • 02 joosam
    23,606
  • 03 티보리
    21,954
  • 04 홍인
    18,644
  • 05 레오나르도
    18,088
  • 06 이윰IN
    17,983
  • 07 도깨비
    16,614
  • 08 이윰EGG
    16,105
  • 09 자이언트
    14,698
  • 10 미스트
    14,379