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


1. 넣고싶은 곳에 자유롭게 코드 삽입
[code]
<?php if(get_cookie('menu_lock') == 'on') { ?>
<a onclick="javascript:menu_lock(0);">잠금풀기</a>
<?php } else { ?>
<a onclick="javascript:menu_lock(1);">메뉴잠금</a>
<?php } ?>
[/code]

2. 아래 자바스크립트를 공통된 js 파일 또는 head.php의 상단에 스크립트로 구분하여 넣어주세요.
[code]
/* 상단 메뉴 고정 설정 */
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();
}
[/code]

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

3. menu.cookie.php의 내용
[code]
<?
include_once('./_common.php');

set_cookie("menu_lock", $type, 86400*7);
?>
[/code]

4. 상단 메뉴의 css를 고정. head.php의 최상단에 삽입(php 밖에)
[code]
<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>
[/code]

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

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

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

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

6. fixed라는 클래스를 CSS에서 만들어주세요.
[code]
.fixed { position:fixed; z-index:1001; width:고정하려는 css(메뉴)의 폭만큼 설정; }
[/code]



끗



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

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