콩바구니의 그림일기

자작 만화 일러스트 페이퍼차일드 팬아트

자바스크립트로 작성한 움직이는 내비게이션

콩바구니(이)가 2009년 February 2일에 작성함. 분류: XHTML, 창작.

이번에 만든것은 , 자바스크립트로 만든 움직이는 내비게이션 입니다.
보통 내비게이션을 움직이게 하기 위해서 플래시를 사용하곤 하는데, 플래시를 사용할 경우 접근성에 문제가 생기기때문에 저는 그방법이 별로 좋지않은 방법이라고 생각합니다. 키보드만으로 접근이 불가능 하다거나, 특정 OS 에서 제대로 작동하지 않거나, 특정 브라우저(익스플로러)에서만 정상 작동하거나. 그런 문제가 생깁니다.

HTML

우선 HTML 파일에서, 움직이게 하고자 하는 메뉴의 마크업에 id 와 class 를 정해서 적어줍니다. id와 class는 임의로 정합니다. 예문에는 id를 navigation 이라고 적었는데, mainMenu 도 좋고, menu 도 상관없습니다. 무었이든 좋습니다. (id와 class는 대소문자 구별 하고, 첫글자는 반드시 영문자 알파뱃이여야 한다는 것만 알면 됩니다. 특수문자나 숫자는 class 나 id 의 첫글자가 될수 없습니다.)

  1. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>
  2. <html xmlns=”http://www.w3.org/1999/xhtml”>
    1. <head>
      1. <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
      2. <title>움직이는 내비게이션</title>
      3. </head>
    2. <body>
      1. <div id=”navigation”>
        1. <ul>
          1. <li class=”link1″><a href=”#”>link 1</a></li>
          2. <li class=”link2″><a href=”#”>link 2 </a></li>
          3. <li class=”link3″><a href=”#”>link 3</a> </li>
          4. <li class=”link4″><a href=”#”>link 4 </a></li>
          5. </ul>
        2. </div>
      2. </body>
    3. </html>

메뉴부분의 마크업은, class 와 ID 를 적어주는것만으로 족합니다. 인라인스크립트(<li onclick = “함수이름;”> 같은것) , 인라인스타일(<li style=”color:#f00;”>같은것)은 전혀 필요 업습니다. 제가 작성하는 웹문서는 구조(html)와 표현(CSS), 동작(javascript)을 완전히 분리하거든요.

이파일을 사파리에서 열어보면 다음과 같이 나옵니다.
javascript-animated-navigagion-01

Stylesheet

HTML 파일에서 정한 id와 class를 이용하여 CSS를 작성합니다. CSS 를 HTML 안에 넣기도 합니다만, 따로 작성하여 그파일을 링크거는것이 좋습니다.

  1. <head>
    1. <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
    2. <title>움직이는 내비게이션</title>
    3. <link rel=”stylesheet” href=”style.css” media=”all” type=”text/css”/>
    4. </head>

HTML 파일의 <head>부분에 작성할 CSS 파일의 링크를 걸어두고, CSS파일을 작성합니다.

  1. @charset “utf-8″;
  2. /* CSS Document */
  3. #navigation ul{
    1. list-style:none;
    2. padding:0;
    3. border:1px solid #ccc;
    4. overflow:hidden;
    5. }
  4. #navigation li{
    1. float:left;
    2. width:50px;
    3. overflow:hidden;
    4. height:100px;
    5. background:#eee;
    6. }
  5. #navigation li:hover {
    1. width:100px;
    2. }
  6. #navigation a{
    1. display:block;
    2. width:100%;
    3. height:100%;
    4. padding:5px;
    5. }
  7. #navigation a:hover {
    1. background:#000;
    2. color:#fff;
    3. }

CSS 적용결과는 다음과 같습니다.

javascript-animated-navigagion-02

이 메뉴에 마우스가 올라가면,
javascript-animated-navigagion-03
이렇게 변합니다.
조금 썰렁한가요? CSS를 이용하면 좀더 화려하게 꾸밀수 있습니다. 하지만 여기서는 여기까지만 하렵니다.

Javascript

자바스크립트를 작성하기에 앞서, HTML 의 HEAD 부분에 다음을 추가합니다.

  1. <head>
    1. <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
    2. <title>움직이는 내비게이션</title>
    3. <script type=”text/javascript” src=”java.js” ></script>
    4. <link rel=”stylesheet” href=”style.css” media=”all” type=”text/css”/>
    5. </head>

그리고 java.js 를 작성합니다.

  1. // JavaScript Document
  2. function addLoadEvent(func) {
    1. var oldonLoad = window.onload;
    2. if (typeof window.onload != ‘function’) {
      1. window.onload = func;
      2. } else {
      3. window.onload = function(){
        1. oldonLoad();
        2. func();
        3. }
      4. }
    3. }
  3. addLoadEvent(animationLoad);
  4. function animationLoad(){
    1. animationNavigation(“navigation”,60,150,100);
    2. }
  5. function animationNavigation(id,minW,maxW,speed){
    1. if (!speed) speed = 100;
    2. if (!document.getElementById(id))return false;
    3. var top_el = document.getElementById(id);
    4. var li_el = top_el.getElementsByTagName(“li”);
    5. for (var i=0;i<li_el.length;i++){
      1. if (minW) {li_el[i].width = minW;} else {li_el[i].width = 17;}
      2. li_el[i].status = “normal”;
      3. li_el[i].minWidth = li_el[i].width;
      4. if (maxW) {li_el[i].maxWidth =maxW} else {li_el[i].maxWidth = 100;}
      5. li_el[i].style.width = li_el[i].width+”px”;
      6. li_el[i].id = id+”_”+i;
      7. li_el[i].onmouseover = function (){
        1. this.status = “up”;
        2. animationNavigation_widthPlus(this.id,speed)
        3. }
      8. li_el[i].onmouseout = function (){
        1. this.status = “down”;
        2. animationNavigation_widthMinus(this.id,speed)
        3. }
      9. }
    6. }
  6. function animationNavigation_widthPlus(id,speed){
    1. if (!document.getElementById(id))return false;
    2. var item_el = document.getElementById(id);
    3. if (item_el.status!=”up”) return false;
    4. item_el.width = item_el.width + Math.ceil((item_el.maxWidth-item_el.width)/2);
    5. item_el.style.width = item_el.width + “px”;
    6. if (item_el.width < item_el.maxWidth) {
      1. this.timeout = setTimeout(‘animationNavigation_widthPlus(“‘+id+’”);’,speed);
      2. }
    7. }
  7. function animationNavigation_widthMinus(id,speed){
    1. if (!document.getElementById(id))return false;
    2. var item_el = document.getElementById(id);
    3. if (item_el.status!=”down”) return false;
    4. item_el.width = item_el.width – Math.ceil((item_el.width-item_el.minWidth)/2);
    5. item_el.style.width = item_el.width + “px”;
    6. if (item_el.width > item_el.minWidth) {
      1. this.timeout = setTimeout(‘animationNavigation_widthMinus(“‘+id+’”);’,speed);
      2. }
    7. }

javascript-animated-navigagion-04

이제 내비게이션이 움직입니다.

소스파일 다운로드

javascript-animated-navigagion