모바일 보기 상단부분 숨김 & 고정출력
관련링크
본문
1.커뮤니티와 마이페이지 삭제하고 하얀색 빈공간으로 하고 싶습니다
theme>53>mobile>shop> shop.head.php
여기 같은데
<ul id="hd_mb">
<li><a href="<?php echo G5_URL; ?>/">커뮤니티</a></li>
<?php if ($is_member) { ?>
<?php if ($is_admin) { ?>
<li><a href="<?php echo G5_ADMIN_URL ?>/shop_admin/"><b>관리자</b></a></li>
<?php } else { ?>
<li><a href="<?php echo G5_BBS_URL; ?>/member_confirm.php?url=register_form.php">정보수정</a></li>
<?php } ?>
<li><a href="<?php echo G5_BBS_URL; ?>/logout.php?url=shop">로그아웃</a></li>
<?php } else { ?>
<li><a href="<?php echo G5_BBS_URL; ?>/login.php?url=<?php echo $urlencode; ?>">로그인</a></li>
<li><a href="<?php echo G5_BBS_URL ?>/register.php" id="snb_join">회원가입</a></li>
<?php } ?>
<li><a href="<?php echo G5_SHOP_URL; ?>/mypage.php">마이페이지</a></li>
</ul>
<!--/ -->로 커뮤니티 숨기기를 하면 이렇게 나오더라구요 .
2. 로그인 / 회원가입 상호까지 고정출력을 하고싶습니다
현재는 스크롤을 아래로 내리며 상호만 보이네요
답변 2
1.
<li><a href="<?php echo G5_URL; ?>/">커뮤니티</a></li>
<li><a href="<?php echo G5_SHOP_URL; ?>/mypage.php">마이페이지</a></li>
이 2줄을 삭제한 후에
/theme/53/css/mobile_shop.css 파일에서 아래 부분 수정
#hd_mb li{float:left;background:#fff;border-bottom:1px solid #eee;width:50%;position:relative;z-index:9;text-align:center;padding:10px 0}
2.
$( document ).ready( function() {
var jbOffset = $( '#hd_mb' ).offset();
$( window ).scroll( function() {
if ( $( document ).scrollTop() > jbOffset.top ) {
$( '#hd_wr' ).addClass( 'fixed' );
$( '#hd_mb' ).addClass( 'fixed' );
}
else {
$( '#hd_wr' ).removeClass( 'fixed' );
$( '#hd_mb' ).removeClass( 'fixed' );
}
});
});
제가 생초보자라 알려주신 내용 숙지하기 좋네요
1.삭제를 하고 css부분 50%로 고쳤는데 빈공간은 회색으로 나옵니다
css부분에 추가적으로 수정해야 하는게 아닐까 하여
소스 적습니다
[code ]/* 상단 레이아웃 */
#hd {position:relative;}
#hd h1 {position:absolute;font-size:0;text-indent:-9999em;line-height:0;overflow:hidden}
#hd_wr{position:relative;height:70px;padding:10px;background:#fff;
-webkit-box-shadow: 0 0 5px rgba(55,55,5,0.4));
-moz-box-shadow: 0 0 5px rgba(55,55,5,0.4));
box-shadow: 0 0 5px rgba(55,55,5,0.4);}
#hd #hd_btn button{height:50px;width:40px;border:0;background:0;font-size:16px;vertical-align:top;float:left}
#hd #hd_btn a{display:inline-block;height:50px;line-height:50px;width:40px;border:0;background:0;text-align:center;font-size:16px;vertical-align:top;float:left}
#hd_btn .cart-count {position: absolute;top: 20%;right: 0px;display: block;height: 16px;line-height: 16px;border-radius: 8px;background: #ff4444;font-size: 11px;color: #fff;padding: 0 5px;}
#btn_hdcate{position:absolute;top:10px;left:0}
#hd #hd_btn a{position:absolute;top:10px;right:5px}
#hd #btn_hdmy{position:absolute;top:10px;right:45px}
#hd #logo{text-align:center;margin-top:10px}
#hd #logo img{height:auto;max-height:27px;width:auto}
#hd_wr.fixed{position:fixed;top:0;left:0;width:100%;z-index:999;height:50px}
#hd_wr.fixed #btn_hdcate,#hd_wr.fixed #hd_btn a{top:0}
#hd_wr.fixed #logo{margin-top:5px}
#hd_mb:after {display:block;visibility:hidden;clear:both;content:""}
#hd_mb li{float:left;background:#fff;border-bottom:1px solid #eee;width:25%;position:relative;z-index:9;text-align:center;padding:10px 0}
#hd_mb li a{display:block;border-left:1px solid #eee;font-size:0.92em;color:#666}[/code]
2.알려주신 소스 붙여넣기 하였으나 고정이 안되는 것을 확인하였습니다
추가고정하고자 하는 라인이 hd_mb는 확인하였는데 mb라인은 고정이 안되네요
이건 뭔가요? 아래쪽에 mb를 추한것으로 보아 var jbOffset = $( '#hd_mb' ).offset(); 이곳도 mb와 wr 둘다 추가적으로 들어갸야 할것 같은 기분....?
1. 올려주신 소스는 50% 입력이 안되어 있네요..
css 는 ctrl + f5 해야 적용되는건 아시죠??
2. 짐작으로 올린 소스라서.. 안될수도 있습니다.
제가 직접 해보면서 방법을 찾아야하는 부분이라..ㅜㅜ
아래 소스 올려보고 되는지 확인해보세요.
$( document ).ready( function() {
var jbOffset = $( '#hd_mb' ).offset();
$( window ).scroll( function() {
if ( $( document ).scrollTop() > jbOffset.top ) {
$( '#hd_mb' ).addClass( 'fixed' );
}
else {
$( '#hd_mb' ).removeClass( 'fixed' );
}
});
});
1. css 수정후 ctrl + f5를 해야 하는군요 ... (ctrl+f5) ok .저장 기록
pc를 모바일 보기로 했을때 원하는 대로 나왔어요
만세~ (^^)(_ _) 꾸벅 감사합니다
2. 실행후 둘다 안보여요
혹시나 알려주신내용에 상세설명이 있을까하여 인터넷에 css ,상단고정 검색하니 #position:fixed
문자도 나오던데 .. 관련 있을 까요?
$( '#hd_mb' ).addClass( 'fixed' );
이 소스가 #hd_mb 에 fixed 를 추가해주는 겁니다.
감사합니다
일단 스크롤은 원상복귀 해놓았어요
알려주신 소스를 잘 활용해서 고민을 해보겠습니다
개발 아이디어 드립니다.
우선 모바일 접속인것을 확인해야 합니다.
화면 크기로 나누고 계신다면 @media screen and(max)~~~ 이렇게 해서 모바일 화면 구분한 후
나오게 안할 부분을 visibility: hidden; 으로 하시면 될것 같습니다.
display를 이용하면 아예 해당 부분이 없어지고 visibility는 공간은 있고 보이지 않게만 합니다.
모바일 기기로 접속하는것을 구분한다면 그누보드 기본 파일에 보시면 IS_MOBILE 이렇게 되어 있는 부분이 있을 것입니다. 이것을 이용해서 하시면 될것 같습니다.
참고 링크
제가 생초보자 알려주신 내용은 숙지하기가 어렵습니다
제가 할수 있는 부분은 모든 파일을 메모장으로 읽고 ftp로 올리는 작업이라 ^^;;
