가장 간단하게 만들어 볼 수 있는 세로방향 트리형 메뉴를 만들어 보도록 하겠습니다.
먼저 CSS목록 속성 중 불릿에 대하여 잘 모를 경우 아래 글을 참고하시기 바랍니다.
예제모습
트리메뉴 만들기 소스
<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. 먼저 불릿을 이용하여 메뉴를 만들어 줍니다.
<LI>상위메뉴
<UL>
<LI>하위메뉴1
<LI>하위메뉴2
</UL>
<LI>상위메뉴
</UL>
2. 불릿 메뉴에 CSS 스타일 속성을 설정 합니다.
- 마우스 모양 및 표시할지에 대한 속성(display)을 설정합니다.
▶상위메뉴 부분 <LI>태그 설정
UL > LI > UL {cursor: pointer; display: none; margin:5px;}
▶상위메뉴 바로 하위 <UL> 태그 설정
3. 마우스를 클릭 했을 때 이벤트를 선언 합니다.(하위메뉴를 접거나 펼치기)
e.children(0).style.display = (e.children(0).style.display=='' ? 'block' : '')
}
▶현재객체(e)의 자식객체(children) 중 첫번째 객체의 스타일 태그 중 display 속성 값을 설정 합니다.
▶현재 속성값이 ""(숨김)이면 block(표시), block(표시) 이면 ""(숨김) 로 설정 합니다.
4. 마우스를 클릭 했을 때 발생 될 이벤트를 호출하는
▶각 상위메뉴에 onclick이벤트를 주어 viewCon함수를 호출 시킵니다.
▶호출시에는 자신객체를 넘겨 줍니다.
마무리
자신의 하위메뉴 상태가 표시면 숨김으로, 숨김이면 표시로 설정하는 CSS 스타일 속성 값을 입력함으로 메뉴를 펼치고 접기 기능을 구현 하게 됩니다. 스타일 값을 입력 하는 기능은 자바스크립트(JavaScript) 를 이용하여 구현하게 됩니다.
이렇게 하여 간단한 세로 트리메뉴 만들기에 대하여 알아 보았습니다.
'프로그래밍 > HTML, CSS, JavaScript' 카테고리의 다른 글
체크박스 클릭 시 해당 테이블 줄 배경색 변경하기 (6) | 2018.07.25 |
---|---|
[HTML/CSS] DIV 중앙, 가운데 배치하기 (6) | 2018.07.01 |
[자바스크립트] 일정간격으로 배경 색 변경하기- setInterval (2) | 2018.06.20 |
[자바스크립트] 현재시간 화면에 표시하기 (4) | 2018.06.20 |
[HTML/CSS] 텍스트 그림자 효과 꾸미기 (4) | 2018.06.19 |