자바스크립트 트리메뉴 만들기

 

가장 간단하게 만들어 볼 수 있는 세로방향 트리형 메뉴를 만들어 보도록 하겠습니다.

먼저 CSS목록 속성 중 불릿에 대하여 잘 모를 경우 아래 글을 참고하시기 바랍니다.

 

 

  예제모습

예제

 

  트리메뉴 만들기 소스

<!DOCTYPE html>
<html>
<head>
  <title>트리메뉴</title>
  <style type="text/css">
    body {background-color:#000; color:#fff;}
    UL > LI {cursor: pointer; margin:5px;}
    UL > LI > UL {cursor: pointer; display: none;  margin:5px;}
  </style>

  <script type="text/javascript">
    function viewCon(e) {
      e.children(0).style.display = (e.children(0).style.display=='' ? 'block' : '')
    }
  </script>
</head>
<body>
  <UL>
    <LI onclick="viewCon(this)">프로그래밍
      <UL>
        <LI>HTML, CSS, JavaScript
       <LI>JAVA, .NET, 기타
      </UL>
    <LI onclick="viewCon(this)">컴퓨터일반
    <LI onclick="viewCon(this)">여행/맛집
      <UL>
        <LI>여행
        <LI>맛집
      </UL>
  </UL>
</body> 
</html>

 

 

  코딩하기(소스설명)

1. 먼저 불릿을 이용하여 메뉴를 만들어 줍니다.

<UL>
  <LI>상위메뉴
    <UL>
      <LI>하위메뉴1
      <LI>하위메뉴2
    </UL>
  <LI>상위메뉴
</UL>

2. 불릿 메뉴에 CSS 스타일 속성을 설정 합니다.

- 마우스 모양 및 표시할지에 대한 속성(display)을 설정합니다.

UL > LI {cursor: pointer; margin:5px;}

▶상위메뉴 부분 <LI>태그 설정
UL > LI > UL {cursor: pointer; display: none;  margin:5px;}

▶상위메뉴 바로 하위 <UL> 태그 설정 

3. 마우스를 클릭 했을 때 이벤트를 선언 합니다.(하위메뉴를 접거나 펼치기)

function viewCon(e) {
    e.children(0).style.display = (e.children(0).style.display=='' ? 'block' : '')

}

▶현재객체(e)의  자식객체(children) 중 첫번째 객체의 스타일 태그 중 display 속성 값을 설정 합니다.   

▶현재 속성값이 ""(숨김)이면 block(표시), block(표시) 이면 ""(숨김) 로 설정 합니다. 

4. 마우스를 클릭 했을 때 발생 될 이벤트를 호출하는

<LI onclick="viewCon(this)">프로그래밍

▶각 상위메뉴에 onclick이벤트를 주어 viewCon함수를 호출 시킵니다.

▶호출시에는 자신객체를 넘겨 줍니다.

 

  마무리

자신의 하위메뉴 상태가 표시면 숨김으로, 숨김이면 표시로 설정하는 CSS 스타일 속성 값을 입력함으로 메뉴를 펼치고 접기 기능을 구현 하게 됩니다. 스타일 값을 입력 하는 기능은 자바스크립트(JavaScript) 를 이용하여 구현하게 됩니다.

이렇게 하여 간단한 세로 트리메뉴 만들기에 대하여 알아 보았습니다.

 

Posted by JOY [바가지]

댓글을 달아 주세요

  1. 발랄제시카 2018.06.25 12:22 신고  댓글주소  수정/삭제  댓글쓰기

    좋은정보 감사합니다.

  2. 은이c 2018.06.25 13:28 신고  댓글주소  수정/삭제  댓글쓰기

    날이 덥네요~~ 아이들도 고생하겠어요~
    좋은 하루 보내세요~~ ^^

  3. 청결원 2018.06.25 15:56 신고  댓글주소  수정/삭제  댓글쓰기

    한주 시작 잘하세요~
    포스팅 잘 보고 갑니다~



티스토리 툴바