Class: AXTopDownMenu

AXTopDownMenu

new AXTopDownMenu()

AXTopDownMenu

Version:
  • v1.28
Author:
  • tom@axisj.com
Example
 var myMenu = new AXTopDownMenu();
 myMenu.setConfig({
    menuBoxID:"menuBox",        //{string} - 메뉴타겟 엘리먼트 아이디
    parentMenu:{
        className:"parentMenu"  //[string] - 1단계 메뉴의 CSS 클래스
    },
    childMenu:{
        className:"childMenu",  //[String] - 2단계 메뉴의 CSS 클래스
        align:"center",         //[string] - ('left'|'center'|'right')
        valign:"top",           //[string] - ('top'|'bottom')
        margin:{top:0, left:0},     //[object] - {top:0, left:0}|{bottom:0, left:0}
        arrowClassName:"varrow2",   //[String] - 2단계 메뉴의 박스 화살표 CSS 클래스
        arrowMargin:{top:1, left:0} //[object] - {top:0, left:0}|{bottom:0, left:0}
    },
    childsMenu:{
        className:"childsMenu", //[String] - 3단계 메뉴 이상의 CSS 클래스
        align:"left",           //[string] - ('left'|'center'|'right')
        valign:"top",           //[string] - ('top'|'bottom')
        margin:{top:-4, left:0},        //[object] - {top:0, left:0}|{bottom:0, left:0}
        arrowClassName:"harrow",        //[String] - 3단계 메뉴의 박스 화살표 CSS 클래스
        arrowMargin:{top:13, left:1}    //[object] - {top:0, left:0}|{bottom:0, left:0}
    },
    // 메뉴 a 태그가 onclick 이 있으면 data-href, 없으면 href 가 됩니다
    onclick: function(item){}
});

Extends

Methods

staticAXTopDownMenu.setHighLightID()

메뉴의 포지션 값으로 포지션에 해당하는 메뉴를 하이라이트 처리해 줍니다.

Type Description
array

[0, 1] 와 같이 각 뎁스의 순번을 전달합니다.

Example
     myMenu.setHighLightMenu([2, 1]); // 3번째 아이템(1depth)의 2번째 아이템(2depth)을 하이라이트 처리합니다.

staticAXTopDownMenu.setHighLightOriginID()

타겟 엘리먼트안에 Html 엘리먼트로 메뉴를 정의한 경우 엘리먼트 안에 사용자가 정의해 둔 아이디로 메뉴의 하이라이트를 처리해줍니다.

Type Description
string

메뉴 엘리먼트에 사용자가 정의한 ID

Example
     myMenu.setHighLightOriginID("ID1245");

staticAXTopDownMenu.setTree(obj)

메뉴타겟 엘리먼트 아이디 안에 메뉴 대상 HTML 엘리먼트가 있는 경우 자동으로 메뉴를 구성합니다. setTree 메소드는 타겟을 빈 노드로 선언하고 setTree 메소드를 통해 동적으로 메뉴를 구성하는 메소드입니다.

Name Type Description
obj jsObject

example code 참고

Example
     var sampleTreeItem = {
    label: "Bottom Menu",            //{string} - 메뉴의 라벨
    url: "http://www.axisj.com",     //{string} - 연결URL
    addClass: "myMenuClass",         //{string} - 메뉴아이템에 추가할 CSS 클래스
    cn: [sampleTreeItem, ...., sampleTreeItem]    //[array] - 자식 메뉴 Array
};

     var myMenu = new AXTopDownMenu();

     var tree = [
     {label:"Bottom Menu", url:"http://www.axisj.com", cn:[
       {label:"valign - bottom", url:"http://www.axisj.com"},
       {label:"margin - bootom", url:"http://www.axisj.com"},
       {label:"margin - top X", url:"http://www.axisj.com"}
   ]},
     {label:"Script Control Way", url:"http://www.axisj.com", cn:[
        {label:"Script Way Use setTree", url:"abhttp://www.axisj.comc"},
        {label:"setHighLightMenu", url:"http://www.axisj.com", cn:[
            {label:"first : String", url:"http://www.axisj.com"},
            {label:"second : Array", url:"http://www.axisj.com"},
            {label:"third : setHighLightOriginID", url:"http://www.axisj.com"}
        ]},
       {label:"myMenu2", url:"http://www.axisj.com"}
   ]},
     {label:"no Expand Menu", url:"http://www.axisj.combc"},
     {label:"no Expand Menu", url:"http://www.axisj.com"},
     {label:"no Expand Menu", url:"http://www.axisj.com"}
     ];
     myMenu.setTree(Tree);