상단 메뉴 잠궈보기 > 그누4 팁자료실

그누4 팁자료실

그누보드4와 관련된 팁을 여러분들과 함께 공유하세요.
나누면 즐거움이 커집니다.

상단 메뉴 잠궈보기 정보

상단 메뉴 잠궈보기

본문

이 팁의 내용은 상단 메뉴뿐만 아니라, 그누보드의 모든 php,css에서 적용되는 내용입니다.
응용은 여러분의 몫이에요.


1. 넣고싶은 곳에 자유롭게 코드 삽입

<?php if(get_cookie('menu_lock') == 'on') { ?>
<a onclick="javascript:menu_lock(0);">잠금풀기</a>
<?php } else { ?>
<a onclick="javascript:menu_lock(1);">메뉴잠금</a>
<?php } ?>


2. 아래 자바스크립트를 공통된 js 파일 또는 head.php의 상단에 스크립트로 구분하여 넣어주세요.

/* 상단 메뉴 고정 설정 */
function menu_lock(type) {
	if(type == 0) {
		$.post(g4_path+'/menu.cookie.php', { type: 'off' });
		alert('잠금이 풀렸습니다.\n\n상단의 메뉴가 스크롤을 따라다니며\n7일간 현재 상태가 유지됩니다.');
	} else {
		$.post(g4_path+'/menu.cookie.php', { type: 'on' });
		alert('잠금 되었습니다.\n\n상단의 메뉴가 고정되며\n7일간 현재 상태가 유지됩니다.');
	}
	location.reload();
}


※ 여기서 menu.cookie.php 파일을 만들어야합니다.
루트에 위치하면 됩니다.

3. menu.cookie.php의 내용

<?
include_once('./_common.php');

set_cookie("menu_lock", $type, 86400*7);
?>


4. 상단 메뉴의 css를 고정. head.php의 최상단에 삽입(php 밖에)

<script type="text/javascript">
<?php if(get_cookie('menu_lock') == 'off'): ?>
	jQuery(window).scroll(function() {
		var position = jQuery(window).scrollTop();

		if(position >= 100) {
			jQuery('#header').addClass('fixed'); 
		} else {
			jQuery('#header').removeClass('fixed');
		}
	});
<?php endif; ?>
</script>


※ 5. 스크롤이 맨 위에 위치해있으면 CSS의 fixed 클래스를 만들지않거나 지우고,
스크롤이 맨 위가 아니라면 CSS의 fixed 클래스를 추가합니다.

우선 태그 중 header라는 ID가 있어야 클래스를 만들어내겠졍

꼭 header가 아니어도 되고 고정시킬 부분을 감싸는 ID로 바꿔도 되요 :)


<div id="header">
	이러쿵저러쿵
</div>


6. fixed라는 클래스를 CSS에서 만들어주세요.

.fixed { position:fixed; z-index:1001; width:고정하려는 css(메뉴)의 폭만큼 설정; }








요거 만들때 저도 질문해가면서 다른거 응용해가면서 짠거라
더 효율적이고 짧은 코드가 있다면 지적 부탁드립니다.

그누보드의 쿠키 함수를 이용했습니다.
쿠키의 유지 기간을 변경하시려면 menu.cookie.php의 set_cookie 함수 3번째 인자 값을 변경해주세요.
추천
2

댓글 1개

전체 103 |RSS
그누4 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT