접힘메뉴를 만드는 방법을 알려주세요.
본문
메뉴를 클릭하면 숨어있던 내용이 나오고
또 클릭하면 숨기는 접힘메뉴에 대해서 찾아 보았으나
없어서 여기에 글 올림니다.
감사합니다.
답변 5
히어1님, 답변 대단히 감사드립니다.
스타일은 아래와 같이 같은 곳에 넣어야 하나요.
<style.css>
.submenu {
display:none;
}
</style>
루트의 style.css 에 넣는걸 추천드립니다.
물론 head.sub.php 에
<link rel="stylesheet" href="<?=$g4['path']?>/style.css" type="text/css">
있을경우에는요......
같은 파일에 넣어도 상관은 없지만요.
head.sub.php
<!--메인타이틀레이어메뉴 시작-->
<script language="javascript">
<!--
function slide(Id, interval, to) {
var obj = document.getElementById(Id);
var H, step = 25;
<script language="javascript">
<!--
function slide(Id, interval, to) {
var obj = document.getElementById(Id);
var H, step = 25;
if (obj == null) return;
if (to == undefined) { // user clicking
if (obj._slideStart == true) return;
if (obj._expand == true) {
to = 0;
obj.style.overflow = "hidden";
} else {
slide.addId(Id);
for(var i=0; i < slide.objects.length; i++) {
if (slide.objects[i].id != Id && slide.objects[i]._expand == true) {
slide(slide.objects[i].id);
}
}
if (to == undefined) { // user clicking
if (obj._slideStart == true) return;
if (obj._expand == true) {
to = 0;
obj.style.overflow = "hidden";
} else {
slide.addId(Id);
for(var i=0; i < slide.objects.length; i++) {
if (slide.objects[i].id != Id && slide.objects[i]._expand == true) {
slide(slide.objects[i].id);
}
}
obj.style.height = "";
obj.style.overflow = "";
obj.style.display = "block";
to = obj.offsetHeight;
obj.style.overflow = "hidden";
obj.style.height = "1px";
}
obj._slideStart = true;
}
step = ((to > 0) ? 1:-1) * step;
interval = ((interval==undefined)?1:interval);
obj.style.overflow = "";
obj.style.display = "block";
to = obj.offsetHeight;
obj.style.overflow = "hidden";
obj.style.height = "1px";
}
obj._slideStart = true;
}
step = ((to > 0) ? 1:-1) * step;
interval = ((interval==undefined)?1:interval);
obj.style.height = (H=((H=(isNaN(H=parseInt(obj.style.height))?0:H))+step<0)?0:H+step)+"px";
if (H <= 0) {
obj.style.display = "none";
obj.style.overflow = "hidden";
obj._expand = false;
obj._slideStart = false;
} else if (to > 0 && H >= to) {
obj.style.display = "block";
obj.style.overflow = "visible";
obj.style.height = H + "px";
obj._expand = true;
obj._slideStart = false;
} else {
setTimeout("slide('"+Id+"' , "+interval+", "+to+");", interval);
}
}
slide.objects = new Array();
slide.addId = function(Id)
{
for (var i=0; i < slide.objects.length; i++) {
if (slide.objects[i].id == Id) return true;
}
slide.objects[slide.objects.length] = document.getElementById(Id);
}
//-->
</script>
<!--메인타이틀레이어메뉴 끝-->
if (H <= 0) {
obj.style.display = "none";
obj.style.overflow = "hidden";
obj._expand = false;
obj._slideStart = false;
} else if (to > 0 && H >= to) {
obj.style.display = "block";
obj.style.overflow = "visible";
obj.style.height = H + "px";
obj._expand = true;
obj._slideStart = false;
} else {
setTimeout("slide('"+Id+"' , "+interval+", "+to+");", interval);
}
}
slide.objects = new Array();
slide.addId = function(Id)
{
for (var i=0; i < slide.objects.length; i++) {
if (slide.objects[i].id == Id) return true;
}
slide.objects[slide.objects.length] = document.getElementById(Id);
}
//-->
</script>
<!--메인타이틀레이어메뉴 끝-->
head.php
<div>
<div onClick="slide('sub1');">펼치기/닫기</div>
</div>
</div>
<div id="sub1" class="submenu" style="height:231px;">
내용
</div>
내용
</div>
style.css
.submenu {
display:none;
}
display:none;
}
위소스는 그누보드에 사용한거랑 비슷한거에요......
히어1님, 답변 대단히 감사드립니다.
적용했습니다. 잘 되네요.
고맙습니다.
혹시 히어1님,
처음 상태가 펼쳐진 상태인데
처음 상태가 접혀진 상태이고,
클릭했을때 펼쳐지게 하려면 어떻게 해야하나요.
http://www.watercooling.co.kr/ 의 메뉴처럼되야 정상입니다......초기로딩시에 접혀져야 맞아요.....
마지막 css를 빼먹은건 아니신지........
히어1님, 답변 대단히 감사합니다.
적용해보겠습니다.
많은 도움이 되었습니다. 감사합니다.
답변을 작성하시기 전에 로그인 해주세요.
