AXTopDownMenu

AXISJ Menu Expend
- mondo.co.kr
- AXISJ Simple
  Feature
  
  Design
  
  Application
  
  Options
  
  Feature
  
  Design
  
  Applications
  
  Feature
  
  Design
  
  Applications
  
  Options
  
  Options
- AXISJ Journey
- AXInput
- Jowrney
- Stacey
ABOUT AXISJ Menu Expend
- mondo.co.kr
- AXISJ Simple
- AXISJ Journey
- AXWaterfall
- Squall
- tom@axisj.com
  Feature
  
  Design
  
  Application
  
  Options
  
  Feature
  
  Design
  
  Applications
  
  Feature
  
  Design
  
  Applications
  
  Options
  
  Options
No Expand Menus
No Expand Menus
AXISJ Menu Expend
- mondo.co.kr
- AXISJ Journey
- AXInput
- Jowrney
- Stacey

AXTopDownMenu - TagInit way

Style Sheet

.varrow1 	{position:absolute;background: transparent url('images/allow_menu1.gif') no-repeat;width:19px;height:10px;z-index:2;_margin-top:4px;}
        .varrow2 	{position:absolute;background: transparent url('images/allow_menu2.gif') no-repeat;width:19px;height:10px;z-index:2;_margin-top:4px;}
        .harrow 	{position:absolute;background: transparent url('images/allow_menu3.gif') no-repeat;width:9px;height:13px;z-index:2;}

.AXMenuBox{position:relative;background: #3e4558;height:40px;line-height:40px;padding:0px 20px;min-width:700px;}
        .AXMenuBox a{
            transition-delay:0s;
            transition-timing-function:ease;
            transition-duration:0.3s;
            transition-property:all;
        }
        .AXMenuBox ul{list-style:none;margin:0px; padding:0px;}
        .AXMenuBox ul li{list-style:none;margin:0px; padding:0px;float:left;}

.AXMenuBox .parentMenu{color:#fff;position:relative;font-size:14px;}
                .AXMenuBox .parentMenu a{
                    display:block;_display:inline-block;
                    color:#fff;text-decoration:none;
                    height:40px;line-height:40px;font-family:'Consolas';
                    padding:0px 10px;
                }
                .AXMenuBox .parentMenu a:hover{background:#9197a4;}
                .AXMenuBox .parentMenu a:focus{background:#9197a4;}
                .AXMenuBox .parentMenu a.on{background:#9197a4;}

.AXMenuBox .childMenu{position:absolute;line-height:25px;font-size:12px;display:none;}
                .AXMenuBox .childMenu ul{
                    background:#ebebeb;border:1px solid #ccc;border-radius:5px;
                    padding:3px; margin:0px;display:block;position:relative;
                    box-shadow:0px 0px 3px #ccc;
                    }
                    .AXMenuBox .childMenu ul li{float:none;padding:0px; margin:0px;border-bottom:1px solid #ebebeb;}
                        .AXMenuBox .childMenu ul li a{
                            display:block;_width:100%;
                            padding:0px 10px;
                            height:30px;line-height:30px;
                            background:#424a5c;
                            border-radius:3px;
                            color:#fff; text-decoration: none;white-space:nowrap;
                            }
                        .AXMenuBox .childMenu ul li a:hover{background:#9197a4;}

.AXMenuBox .childMenu ul li a.on{background:#9197a4;}
                        .AXMenuBox .childMenu ul li a.expand{background-image:url(images/rightArrows.png);background-repeat:no-repeat;background-position:100% 0px;padding-right:30px;}
                        .AXMenuBox .childMenu ul li a.expand:hover{background-image:url(images/rightArrows.png);background-repeat:no-repeat;background-position:100% -30px;padding-right:30px;}

.AXMenuBox .childsMenu{position:absolute;line-height:20px;font-size:12px;}
                .AXMenuBox .childsMenu ul{background:#ebebeb;border:1px solid #ccc;padding:3px; margin:0px;}
                    .AXMenuBox .childsMenu ul li{float:none;padding:0px; margin:0px;border-bottom:1px solid #ebebeb;}
                        .AXMenuBox .childsMenu ul li a{}

.clear{clear:both;}

Script

var myMenu = new AXTopDownMenu();
        var myMenuForScript = new AXTopDownMenu();
        var fnObj = {
            pageStart: function(){
                AXCode.bind(); // 소스보기

myMenu.setConfig({
                    menuBoxID:"menuBox",
                    parentMenu:{
                        className:"parentMenu"
                    },
                    childMenu:{
                        className:"childMenu",
                        align:"center",
                        valign:"top",
                        margin:{top:0, left:0},
                        arrowClassName:"varrow2",
                        arrowMargin:{top:1, left:0}
                    },
                    childsMenu:{
                        className:"childsMenu",
                        align:"left",
                        valign:"top",
                        margin:{top:-4, left:0},
                        arrowClassName:"harrow",
                        arrowMargin:{top:13, left:1}
                    }
                });
                //myMenu.setHighLightMenu(0);
                //myMenu.setHighLightMenu([0,1,3,2]);
                myMenu.setHighLightOriginID("ID1245");
                // script

myMenuForScript.setConfig({
                    targetID:"myMenuBox2",
                    parentMenu:{
                        className:"parentMenu"
                    },
                    childMenu:{
                        className:"childMenu",
                        hasChildClassName:"expand", // script 방식에서만 지원 됩니다.
                        align:"left",
                        valign:"bottom",
                        margin:{bottom:-5, left:-5},
                        arrowClassName:"varrow1",
                        arrowMargin:{bottom:1, left:20}
                    },
                    childsMenu:{
                        className:"childsMenu",
                        hasChildClassName:"expand",
                        align:"left",
                        valign:"bottom",
                        margin:{bottom:-4, left:0},
                        arrowClassName:"harrow",
                        arrowMargin:{bottom:13, left:1}
                    }
                });