테스트 사이트 - 개발 중인 베타 버전입니다

접힘메뉴를 만드는 방법을 알려주세요. 채택완료

alexseo 11년 전 조회 7,760
메뉴를 클릭하면 숨어있던 내용이 나오고 
또 클릭하면 숨기는 접힘메뉴에 대해서 찾아 보았으나 
없어서 여기에 글 올림니다.
감사합니다. 
댓글을 작성하려면 로그인이 필요합니다.

답변 5개

채택된 답변
+20 포인트
a
11년 전
히어1님, 답변 대단히 감사드립니다.
스타일은 아래와 같이 같은 곳에 넣어야 하나요.

<style.css>
 .submenu {
 display:none;
}
</style>
 

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

히어1
11년 전
루트의 style.css 에 넣는걸 추천드립니다.
물론 head.sub.php 에
<link rel="stylesheet" href="<?=$g4['path']?>/style.css" type="text/css">
있을경우에는요......

같은 파일에 넣어도 상관은 없지만요.

댓글을 작성하려면 로그인이 필요합니다.

7년 전

많은 도움이 되었습니다. 감사합니다.

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

a
11년 전
히어1님, 답변 대단히 감사합니다.
적용해보겠습니다.
로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

a
11년 전
히어1님, 답변 대단히 감사드립니다.
적용했습니다. 잘 되네요.
고맙습니다. 

혹시 히어1님, 
처음 상태가 펼쳐진 상태인데 
처음 상태가 접혀진 상태이고, 
클릭했을때 펼쳐지게 하려면 어떻게 해야하나요.

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

히어1
11년 전
http://www.watercooling.co.kr/ 의 메뉴처럼되야 정상입니다......초기로딩시에 접혀져야 맞아요.....
마지막 css를 빼먹은건 아니신지........

댓글을 작성하려면 로그인이 필요합니다.

11년 전
head.sub.php
 
<!--메인타이틀레이어메뉴 시작-->
<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);
    }
   }
   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.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>
<!--메인타이틀레이어메뉴 끝-->
 
 
head.php
 
<div>
<div onClick="slide('sub1');">펼치기/닫기</div>
</div>
 
<div id="sub1" class="submenu" style="height:231px;">
내용
</div>
 
style.css
 
.submenu {
 display:none;
}
 
위소스는 그누보드에 사용한거랑 비슷한거에요......
로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인