Menu 菜单

使用说明 PLUGIN

在v1.0版本基础上使用原生方法重写了该插件,使得该插件更方便使用和升级。

菜单基本结构如下:

                        <ul class="ax-menu">
                            <li>
                                <a href="###"><span class="ax-name">1.文字</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                <ul>
                                    <li><a href="###"><span class="ax-name">1.1.文字</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                        <ul>
                                            <li><a href="###"><span class="ax-name">1.1.1.文字</span></a></li>
                                            <li><a href="###"><span class="ax-name">1.1.2.文字</span></a></li>
                                            <li><a href="###"><span class="ax-name">1.1.3.文字</span></a></li>
                                        </ul>
                                    </li>
                                    <li><a href="###"><span class="ax-name">1.2.文字</span></a></li>
                                    <li><a href="###"><span class="ax-name">1.3.文字</span></a></li>
                                </ul>
                            </li>
                            <li>
                                <a href="###"><span class="ax-name">2.文字</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                <ul>
                                    <li><a href="###"><span class="ax-name">2.1.文字</span></a></li>
                                    <li><a href="###"><span class="ax-name">2.2.文字</span></a></li>
                                    <li><a href="###"><span class="ax-name">2.3.文字</span></a></li>
                                </ul>
                            </li>
                            <li>
                                <a href="###"><span class="ax-name">3.文字</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                <ul>
                                    <li><a href="###"><span class="ax-name">3.1.文字</span></a></li>
                                    <li><a href="###"><span class="ax-name">3.2.文字</span></a></li>
                                    <li><a href="###"><span class="ax-name">3.3.文字</span></a></li>
                                </ul>
                            </li>

                        </ul>
                        

深色风格

使用ax-menu-dark类可实现深色折叠菜单,背景色自行定义。

                                <ul class="ax-menu ax-menu-dark" axMenu style="background: #0b244d;">
                                    <li>
                                        <a href="###"><span class="ax-name">河北</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                        <ul>
                                            <li><a href="###"><span class="ax-name">石家庄</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                                <ul>
                                                    <li><a href="###"><span class="ax-name">长安区</span></a></li>
                                                    <li><a href="###"><span class="ax-name">桥西区</span></a></li>
                                                    <li><a href="###"><span class="ax-name">新华区</span></a></li>
                                                    <li><a href="###"><span class="ax-name">裕华区</span></a></li>
                                                    <li><a href="###"><span class="ax-name">井陉矿区</span></a></li>
                                                </ul>
                                            </li>
                                            <li><a href="###"><span class="ax-name">邢台</span></a></li>
                                            <li><a href="###"><span class="ax-name">邯郸</span></a></li>
                                            <li><a href="###"><span class="ax-name">保定</span></a></li>
                                            <li><a href="###"><span class="ax-name">衡水</span></a></li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="###"><span class="ax-name">四川</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                        <ul>
                                            <li><a href="###"><span class="ax-name">成都</span></a></li>
                                            <li><a href="###"><span class="ax-name">南充</span></a></li>
                                            <li><a href="###"><span class="ax-name">绵阳</span></a></li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="###"><span class="ax-name">广西</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                        <ul>
                                            <li><a href="###"><span class="ax-name">南宁</span></a></li>
                                            <li><a href="###"><span class="ax-name">柳州</span></a></li>
                                        </ul>
                                    </li>

                                </ul>
                                    

不要左边距

使用ax-no-padding类可去除左边距;深色风格不适合去除左边距!

                                <ul class="ax-menu ax-no-padding" axMenu>
                                    <li>
                                        <a href="###"><span class="ax-name">河北</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                        <ul>
                                            <li><a href="###"><span class="ax-name">石家庄</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                                <ul>
                                                    <li><a href="###"><span class="ax-name">长安区</span></a></li>
                                                    <li><a href="###"><span class="ax-name">桥西区</span></a></li>
                                                    <li><a href="###"><span class="ax-name">新华区</span></a></li>
                                                    <li><a href="###"><span class="ax-name">裕华区</span></a></li>
                                                    <li><a href="###"><span class="ax-name">井陉矿区</span></a></li>
                                                </ul>
                                            </li>
                                            <li><a href="###"><span class="ax-name">邢台</span></a></li>
                                            <li><a href="###"><span class="ax-name">邯郸</span></a></li>
                                            <li><a href="###"><span class="ax-name">保定</span></a></li>
                                            <li><a href="###"><span class="ax-name">衡水</span></a></li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="###"><span class="ax-name">四川</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                        <ul>
                                            <li><a href="###"><span class="ax-name">成都</span></a></li>
                                            <li><a href="###"><span class="ax-name">南充</span></a></li>
                                            <li><a href="###"><span class="ax-name">绵阳</span></a></li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="###"><span class="ax-name">广西</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                        <ul>
                                            <li><a href="###"><span class="ax-name">南宁</span></a></li>
                                            <li><a href="###"><span class="ax-name">柳州</span></a></li>
                                        </ul>
                                    </li>

                                </ul>
                                    

使用小点作为指示

使用ax-style-dot类可使菜单用小点作为指示。

                                <ul class="ax-menu ax-style-dot" axMenu>
                                    <li>
                                        <a href="###"><span class="ax-name">河北</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                        <ul>
                                            <li><a href="###"><span class="ax-name">石家庄</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                                <ul>
                                                    <li><a href="###"><span class="ax-name">长安区</span></a></li>
                                                    <li><a href="###"><span class="ax-name">桥西区</span></a></li>
                                                    <li><a href="###"><span class="ax-name">新华区</span></a></li>
                                                    <li><a href="###"><span class="ax-name">裕华区</span></a></li>
                                                    <li><a href="###"><span class="ax-name">井陉矿区</span></a></li>
                                                </ul>
                                            </li>
                                            <li><a href="###"><span class="ax-name">邢台</span></a></li>
                                            <li><a href="###"><span class="ax-name">邯郸</span></a></li>
                                            <li><a href="###"><span class="ax-name">保定</span></a></li>
                                            <li><a href="###"><span class="ax-name">衡水</span></a></li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="###"><span class="ax-name">四川</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                        <ul>
                                            <li><a href="###"><span class="ax-name">成都</span></a></li>
                                            <li><a href="###"><span class="ax-name">南充</span></a></li>
                                            <li><a href="###"><span class="ax-name">绵阳</span></a></li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="###"><span class="ax-name">广西</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                        <ul>
                                            <li><a href="###"><span class="ax-name">南宁</span></a></li>
                                            <li><a href="###"><span class="ax-name">柳州</span></a></li>
                                        </ul>
                                    </li>

                                </ul>
                            

使用ax-style-dotax-no-padding类。

                                <ul class="ax-menu ax-style-dot ax-no-padding" axMenu>
                                    <li>
                                        <a href="###"><span class="ax-name">河北</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                        <ul>
                                            <li><a href="###"><span class="ax-name">石家庄</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                                <ul>
                                                    <li><a href="###"><span class="ax-name">长安区</span></a></li>
                                                    <li><a href="###"><span class="ax-name">桥西区</span></a></li>
                                                    <li><a href="###"><span class="ax-name">新华区</span></a></li>
                                                    <li><a href="###"><span class="ax-name">裕华区</span></a></li>
                                                    <li><a href="###"><span class="ax-name">井陉矿区</span></a></li>
                                                </ul>
                                            </li>
                                            <li><a href="###"><span class="ax-name">邢台</span></a></li>
                                            <li><a href="###"><span class="ax-name">邯郸</span></a></li>
                                            <li><a href="###"><span class="ax-name">保定</span></a></li>
                                            <li><a href="###"><span class="ax-name">衡水</span></a></li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="###"><span class="ax-name">四川</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                        <ul>
                                            <li><a href="###"><span class="ax-name">成都</span></a></li>
                                            <li><a href="###"><span class="ax-name">南充</span></a></li>
                                            <li><a href="###"><span class="ax-name">绵阳</span></a></li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="###"><span class="ax-name">广西</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                        <ul>
                                            <li><a href="###"><span class="ax-name">南宁</span></a></li>
                                            <li><a href="###"><span class="ax-name">柳州</span></a></li>
                                        </ul>
                                    </li>

                                </ul>
                                    

对深色菜单使用ax-style-dot类可使菜单用小点作为指示。

                                <ul class="ax-menu ax-menu-dark ax-style-dot" axMenu style="background: #0b244d;">
                                    <li>
                                        <a href="###"><span class="ax-name">河北</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                        <ul>
                                            <li><a href="###"><span class="ax-name">石家庄</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                                <ul>
                                                    <li><a href="###"><span class="ax-name">长安区</span></a></li>
                                                    <li><a href="###"><span class="ax-name">桥西区</span></a></li>
                                                    <li><a href="###"><span class="ax-name">新华区</span></a></li>
                                                    <li><a href="###"><span class="ax-name">裕华区</span></a></li>
                                                    <li><a href="###"><span class="ax-name">井陉矿区</span></a></li>
                                                </ul>
                                            </li>
                                            <li><a href="###"><span class="ax-name">邢台</span></a></li>
                                            <li><a href="###"><span class="ax-name">邯郸</span></a></li>
                                            <li><a href="###"><span class="ax-name">保定</span></a></li>
                                            <li><a href="###"><span class="ax-name">衡水</span></a></li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="###"><span class="ax-name">四川</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                        <ul>
                                            <li><a href="###"><span class="ax-name">成都</span></a></li>
                                            <li><a href="###"><span class="ax-name">南充</span></a></li>
                                            <li><a href="###"><span class="ax-name">绵阳</span></a></li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="###"><span class="ax-name">广西</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                        <ul>
                                            <li><a href="###"><span class="ax-name">南宁</span></a></li>
                                            <li><a href="###"><span class="ax-name">柳州</span></a></li>
                                        </ul>
                                    </li>

                                </ul>
                                    

使用竖线作为指示

使用ax-style-line类可使菜单用竖线作为指示。

                                <ul class="ax-menu ax-style-line" axMenu>
                                    <li>
                                        <a href="###"><span class="ax-name">河北</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                        <ul>
                                            <li><a href="###"><span class="ax-name">石家庄</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                                <ul>
                                                    <li><a href="###"><span class="ax-name">长安区</span></a></li>
                                                    <li><a href="###"><span class="ax-name">桥西区</span></a></li>
                                                    <li><a href="###"><span class="ax-name">新华区</span></a></li>
                                                    <li><a href="###"><span class="ax-name">裕华区</span></a></li>
                                                    <li><a href="###"><span class="ax-name">井陉矿区</span></a></li>
                                                </ul>
                                            </li>
                                            <li><a href="###"><span class="ax-name">邢台</span></a></li>
                                            <li><a href="###"><span class="ax-name">邯郸</span></a></li>
                                            <li><a href="###"><span class="ax-name">保定</span></a></li>
                                            <li><a href="###"><span class="ax-name">衡水</span></a></li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="###"><span class="ax-name">四川</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                        <ul>
                                            <li><a href="###"><span class="ax-name">成都</span></a></li>
                                            <li><a href="###"><span class="ax-name">南充</span></a></li>
                                            <li><a href="###"><span class="ax-name">绵阳</span></a></li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="###"><span class="ax-name">广西</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                        <ul>
                                            <li><a href="###"><span class="ax-name">南宁</span></a></li>
                                            <li><a href="###"><span class="ax-name">柳州</span></a></li>
                                        </ul>
                                    </li>

                                </ul>
                                    

使用ax-style-lineax-no-padding类。

                                <ul class="ax-menu ax-style-line ax-no-padding" axMenu>
                                    <li>
                                        <a href="###"><span class="ax-name">河北</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                        <ul>
                                            <li><a href="###"><span class="ax-name">石家庄</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                                <ul>
                                                    <li><a href="###"><span class="ax-name">长安区</span></a></li>
                                                    <li><a href="###"><span class="ax-name">桥西区</span></a></li>
                                                    <li><a href="###"><span class="ax-name">新华区</span></a></li>
                                                    <li><a href="###"><span class="ax-name">裕华区</span></a></li>
                                                    <li><a href="###"><span class="ax-name">井陉矿区</span></a></li>
                                                </ul>
                                            </li>
                                            <li><a href="###"><span class="ax-name">邢台</span></a></li>
                                            <li><a href="###"><span class="ax-name">邯郸</span></a></li>
                                            <li><a href="###"><span class="ax-name">保定</span></a></li>
                                            <li><a href="###"><span class="ax-name">衡水</span></a></li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="###"><span class="ax-name">四川</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                        <ul>
                                            <li><a href="###"><span class="ax-name">成都</span></a></li>
                                            <li><a href="###"><span class="ax-name">南充</span></a></li>
                                            <li><a href="###"><span class="ax-name">绵阳</span></a></li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="###"><span class="ax-name">广西</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                        <ul>
                                            <li><a href="###"><span class="ax-name">南宁</span></a></li>
                                            <li><a href="###"><span class="ax-name">柳州</span></a></li>
                                        </ul>
                                    </li>

                                </ul>
                                    

对深色菜单使用ax-style-line类可使菜单用竖线作为指示。

                                <ul class="ax-menu ax-menu-dark ax-style-line" axMenu style="background: #0b244d;">
                                    <li>
                                        <a href="###"><span class="ax-name">河北</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                        <ul>
                                            <li><a href="###"><span class="ax-name">石家庄</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                                <ul>
                                                    <li><a href="###"><span class="ax-name">长安区</span></a></li>
                                                    <li><a href="###"><span class="ax-name">桥西区</span></a></li>
                                                    <li><a href="###"><span class="ax-name">新华区</span></a></li>
                                                    <li><a href="###"><span class="ax-name">裕华区</span></a></li>
                                                    <li><a href="###"><span class="ax-name">井陉矿区</span></a></li>
                                                </ul>
                                            </li>
                                            <li><a href="###"><span class="ax-name">邢台</span></a></li>
                                            <li><a href="###"><span class="ax-name">邯郸</span></a></li>
                                            <li><a href="###"><span class="ax-name">保定</span></a></li>
                                            <li><a href="###"><span class="ax-name">衡水</span></a></li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="###"><span class="ax-name">四川</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                        <ul>
                                            <li><a href="###"><span class="ax-name">成都</span></a></li>
                                            <li><a href="###"><span class="ax-name">南充</span></a></li>
                                            <li><a href="###"><span class="ax-name">绵阳</span></a></li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="###"><span class="ax-name">广西</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                        <ul>
                                            <li><a href="###"><span class="ax-name">南宁</span></a></li>
                                            <li><a href="###"><span class="ax-name">柳州</span></a></li>
                                        </ul>
                                    </li>

                                </ul>
                                    

八级管理

本框架定义了8级菜单管理,如果需要定义更多级别,请修改css。

                            <style>
                                .ax-menu > li > a{
                                    padding-left:14px;
                                }
                                .ax-menu > li > ul > li > a{
                                    padding-left:calc(14px*3);
                                }
                                .ax-menu > li > ul > li > ul > li > a{
                                    padding-left:calc(14px*5);
                                }
                                .ax-menu > li > ul > li > ul > li > ul > li > a{
                                    padding-left:calc(14px*7);
                                }
                                .ax-menu > li > ul > li > ul > li > ul > li > ul > li > a{
                                    padding-left:calc(14px*9);
                                }
                                .ax-menu > li > ul > li > ul > li > ul > li > ul > li > ul > li > a{
                                    padding-left:calc(14px*11);
                                }
                                .ax-menu > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > a{
                                    padding-left:calc(14px*13);
                                }
                                .ax-menu > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > a{
                                    padding-left:calc(14px*15);
                                }
                            </style>
                        

自定义宽度

本框架定义了菜单的宽度为220px,用户根据自己需要添加ax-full可实现全宽效果。

                                <ul class="ax-menu ax-full" axMenu>
                                    <li>
                                        <a href="###"><span class="ax-name">河北</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                        <ul>
                                            <li><a href="###"><span class="ax-name">石家庄</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                                <ul>
                                                    <li><a href="###"><span class="ax-name">长安区</span></a></li>
                                                    <li><a href="###"><span class="ax-name">桥西区</span></a></li>
                                                    <li><a href="###"><span class="ax-name">新华区</span></a></li>
                                                    <li><a href="###"><span class="ax-name">裕华区</span></a></li>
                                                    <li><a href="###"><span class="ax-name">井陉矿区</span></a></li>
                                                </ul>
                                            </li>
                                            <li><a href="###"><span class="ax-name">邢台</span></a></li>
                                            <li><a href="###"><span class="ax-name">邯郸</span></a></li>
                                            <li><a href="###"><span class="ax-name">保定</span></a></li>
                                            <li><a href="###"><span class="ax-name">衡水</span></a></li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="###"><span class="ax-name">四川</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                        <ul>
                                            <li><a href="###"><span class="ax-name">成都</span></a></li>
                                            <li><a href="###"><span class="ax-name">南充</span></a></li>
                                            <li><a href="###"><span class="ax-name">绵阳</span></a></li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="###"><span class="ax-name">广西</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                        <ul>
                                            <li><a href="###"><span class="ax-name">南宁</span></a></li>
                                            <li><a href="###"><span class="ax-name">柳州</span></a></li>
                                        </ul>
                                    </li>

                                </ul>

                                <ul class="ax-menu ax-menu-dark ax-full" axMenu style="background: #0b244d;">
                                    <li>
                                        <a href="###"><span class="ax-name">河北</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                        <ul>
                                            <li><a href="###"><span class="ax-name">石家庄</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                                <ul>
                                                    <li><a href="###"><span class="ax-name">长安区</span></a></li>
                                                    <li><a href="###"><span class="ax-name">桥西区</span></a></li>
                                                    <li><a href="###"><span class="ax-name">新华区</span></a></li>
                                                    <li><a href="###"><span class="ax-name">裕华区</span></a></li>
                                                    <li><a href="###"><span class="ax-name">井陉矿区</span></a></li>
                                                </ul>
                                            </li>
                                            <li><a href="###"><span class="ax-name">邢台</span></a></li>
                                            <li><a href="###"><span class="ax-name">邯郸</span></a></li>
                                            <li><a href="###"><span class="ax-name">保定</span></a></li>
                                            <li><a href="###"><span class="ax-name">衡水</span></a></li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="###"><span class="ax-name">四川</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                        <ul>
                                            <li><a href="###"><span class="ax-name">成都</span></a></li>
                                            <li><a href="###"><span class="ax-name">南充</span></a></li>
                                            <li><a href="###"><span class="ax-name">绵阳</span></a></li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="###"><span class="ax-name">广西</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                        <ul>
                                            <li><a href="###"><span class="ax-name">南宁</span></a></li>
                                            <li><a href="###"><span class="ax-name">柳州</span></a></li>
                                        </ul>
                                    </li>

                                </ul>
                                    

或者修改ax-menu的宽度,写入style即可。

                                <ul class="ax-menu" axMenu style="width:400px;">
                                    <li>
                                        <a href="###"><span class="ax-name">河北</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                        <ul>
                                            <li><a href="###"><span class="ax-name">石家庄</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                                <ul>
                                                    <li><a href="###"><span class="ax-name">长安区</span></a></li>
                                                    <li><a href="###"><span class="ax-name">桥西区</span></a></li>
                                                    <li><a href="###"><span class="ax-name">新华区</span></a></li>
                                                    <li><a href="###"><span class="ax-name">裕华区</span></a></li>
                                                    <li><a href="###"><span class="ax-name">井陉矿区</span></a></li>
                                                </ul>
                                            </li>
                                            <li><a href="###"><span class="ax-name">邢台</span></a></li>
                                            <li><a href="###"><span class="ax-name">邯郸</span></a></li>
                                            <li><a href="###"><span class="ax-name">保定</span></a></li>
                                            <li><a href="###"><span class="ax-name">衡水</span></a></li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="###"><span class="ax-name">四川</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                        <ul>
                                            <li><a href="###"><span class="ax-name">成都</span></a></li>
                                            <li><a href="###"><span class="ax-name">南充</span></a></li>
                                            <li><a href="###"><span class="ax-name">绵阳</span></a></li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="###"><span class="ax-name">广西</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                        <ul>
                                            <li><a href="###"><span class="ax-name">南宁</span></a></li>
                                            <li><a href="###"><span class="ax-name">柳州</span></a></li>
                                        </ul>
                                    </li>

                                </ul>
                                    

样式汇总

本框架菜单使用ul和li进行布局,对ul使用不同的样式将呈现不同结果,以下为样式说明:

样式 是否必须 说明
ax-menu 必须 基本样式
ax-menu-dark 简约浅色风格
ax-no-padding 是否保留左边距,适合浅色风格
ax-style-dot 小点指示
ax-style-line 竖线指示

互斥折叠

本菜单提供互斥折叠的属性:toggle。toggle默认是true,即互斥;使用toggle: false是可同时折叠展开。

                                <ul class="ax-menu ax-style-dot" axMenu="toggle:false">
                                    <li>
                                        <a href="###"><span class="ax-name">河北</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                        <ul>
                                            <li><a href="###"><span class="ax-name">石家庄</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                                <ul>
                                                    <li><a href="###"><span class="ax-name">长安区</span></a></li>
                                                    <li><a href="###"><span class="ax-name">桥西区</span></a></li>
                                                    <li><a href="###"><span class="ax-name">新华区</span></a></li>
                                                    <li><a href="###"><span class="ax-name">裕华区</span></a></li>
                                                    <li><a href="###"><span class="ax-name">井陉矿区</span></a></li>
                                                </ul>
                                            </li>
                                            <li><a href="###"><span class="ax-name">邢台</span></a></li>
                                            <li><a href="###"><span class="ax-name">邯郸</span></a></li>
                                            <li><a href="###"><span class="ax-name">保定</span></a></li>
                                            <li><a href="###"><span class="ax-name">衡水</span></a></li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="###"><span class="ax-name">四川</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                        <ul>
                                            <li><a href="###"><span class="ax-name">成都</span></a></li>
                                            <li><a href="###"><span class="ax-name">南充</span></a></li>
                                            <li><a href="###"><span class="ax-name">绵阳</span></a></li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="###"><span class="ax-name">广西</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                        <ul>
                                            <li><a href="###"><span class="ax-name">南宁</span></a></li>
                                            <li><a href="###"><span class="ax-name">柳州</span></a></li>
                                        </ul>
                                    </li>

                                </ul>
                                    

展开和折叠

菜单默认是折叠的,对要展开的a节点使用ax-selected即可展开该菜单以及所有父菜单。请观摩效果演示。

                                    <ul class="ax-menu ax-style-dot" axMenu>
                                        <li>
                                            <a href="###"><span class="ax-name">河北</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                            <ul>
                                                <li class="ax-active"><a href="###"><span class="ax-name">石家庄</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                                    <ul>
                                                        <li><a href="###"><span class="ax-name">长安区</span></a></li>
                                                        <li><a href="###"><span class="ax-name">桥西区</span></a></li>
                                                        <li><a href="###" class="ax-selected"><span class="ax-name">新华区</span></a></li>
                                                        <li><a href="###"><span class="ax-name">裕华区</span></a></li>
                                                        <li><a href="###"><span class="ax-name">井陉矿区</span></a></li>
                                                    </ul>
                                                </li>
                                                <li><a href="###"><span class="ax-name">邢台</span></a></li>
                                                <li><a href="###"><span class="ax-name">邯郸</span></a></li>
                                                <li><a href="###"><span class="ax-name">保定</span></a></li>
                                                <li><a href="###"><span class="ax-name">衡水</span></a></li>
                                            </ul>
                                        </li>
                                        <li>
                                            <a href="###"><span class="ax-name">四川</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                            <ul>
                                                <li><a href="###"><span class="ax-name">成都</span></a></li>
                                                <li><a href="###"><span class="ax-name">南充</span></a></li>
                                                <li><a href="###"><span class="ax-name">绵阳</span></a></li>
                                            </ul>
                                        </li>
                                        <li>
                                            <a href="###"><span class="ax-name">广西</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                            <ul>
                                                <li><a href="###"><span class="ax-name">南宁</span></a></li>
                                                <li><a href="###"><span class="ax-name">柳州</span></a></li>
                                            </ul>
                                        </li>

                                    </ul>
                                    

如果a标签有ID属性,那么可以使用active属性的方式打开该菜单。

                                    <ul class="ax-menu ax-style-dot" axMenu="active:'#thisActive'">
                                        <li>
                                            <a href="###"><span class="ax-name">河北</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                            <ul>
                                                <li><a href="###"><span class="ax-name">石家庄</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                                    <ul>
                                                        <li><a href="###"><span class="ax-name">长安区</span></a></li>
                                                        <li><a href="###"><span class="ax-name">桥西区</span></a></li>
                                                        <li><a href="###" id="thisActive"><span class="ax-name">新华区</span></a></li>
                                                        <li><a href="###"><span class="ax-name">裕华区</span></a></li>
                                                        <li><a href="###"><span class="ax-name">井陉矿区</span></a></li>
                                                    </ul>
                                                </li>
                                                <li><a href="###"><span class="ax-name">邢台</span></a></li>
                                                <li><a href="###"><span class="ax-name">邯郸</span></a></li>
                                                <li><a href="###"><span class="ax-name">保定</span></a></li>
                                                <li><a href="###"><span class="ax-name">衡水</span></a></li>
                                            </ul>
                                        </li>
                                        <li>
                                            <a href="###"><span class="ax-name">四川</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                            <ul>
                                                <li><a href="###"><span class="ax-name">成都</span></a></li>
                                                <li><a href="###"><span class="ax-name">南充</span></a></li>
                                                <li><a href="###"><span class="ax-name">绵阳</span></a></li>
                                            </ul>
                                        </li>
                                        <li>
                                            <a href="###"><span class="ax-name">广西</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                            <ul>
                                                <li><a href="###"><span class="ax-name">南宁</span></a></li>
                                                <li><a href="###"><span class="ax-name">柳州</span></a></li>
                                            </ul>
                                        </li>

                                    </ul>
                                    

使用cookie

本菜单提供保持状态的属性:cookie。cookie默认为空,即不使用cookie;如果需要使用cookie,可给cookie参数设定一个唯一字符串,如此浏览器会记住用户对菜单的最后一次操作,点击菜单之后刷新浏览器依然可以保持当前状态,直到清除浏览器缓存。

                                <ul class="ax-menu ax-style-dot" axMenu="cookie:'cookie001'">
                                    <li>
                                        <a href="###" id="cookie01"><span class="ax-name">河北</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                        <ul>
                                            <li><a href="###" id="cookie02"><span class="ax-name">石家庄</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                                <ul>
                                                    <li><a href="###"><span class="ax-name" id="cookie03">长安区</span></a></li>
                                                    <li><a href="###"><span class="ax-name" id="cookie04">桥西区</span></a></li>
                                                    <li><a href="###"><span class="ax-name" id="cookie05">新华区</span></a></li>
                                                    <li><a href="###"><span class="ax-name" id="cookie06">裕华区</span></a></li>
                                                    <li><a href="###"><span class="ax-name" id="cookie07">井陉矿区</span></a></li>
                                                </ul>
                                            </li>
                                            <li><a href="###" id="cookie08"><span class="ax-name">邢台</span></a></li>
                                            <li><a href="###" id="cookie09"><span class="ax-name">邯郸</span></a></li>
                                            <li><a href="###" id="cookie10"><span class="ax-name">保定</span></a></li>
                                            <li><a href="###" id="cookie11"><span class="ax-name">衡水</span></a></li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="###" id="cookie12"><span class="ax-name">四川</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                        <ul>
                                            <li><a href="###" id="cookie13"><span class="ax-name">成都</span></a></li>
                                            <li><a href="###" id="cookie14"><span class="ax-name">南充</span></a></li>
                                            <li><a href="###" id="cookie15"><span class="ax-name">绵阳</span></a></li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="###" id="cookie16"><span class="ax-name">广西</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                        <ul>
                                            <li><a href="###" id="cookie17"><span class="ax-name">南宁</span></a></li>
                                            <li><a href="###" id="cookie18"><span class="ax-name">柳州</span></a></li>
                                        </ul>
                                    </li>

                                </ul>
                                    

使用图标

使用ax-legend类表示菜单图标。请观摩效果演示。

                                 <ul class="ax-menu ax-style-dot" axMenu>
                                    <li>
                                        <a href="###"><span class="ax-legend ax-iconfont ax-icon-global-f"></span><span class="ax-name">河北</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                        <ul>
                                            <li><a href="###"><span class="ax-name">石家庄</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                                <ul>
                                                    <li><a href="###"><span class="ax-name">长安区</span></a></li>
                                                    <li><a href="###"><span class="ax-name">桥西区</span></a></li>
                                                    <li><a href="###"><span class="ax-name">新华区</span></a></li>
                                                    <li><a href="###"><span class="ax-name">裕华区</span></a></li>
                                                    <li><a href="###"><span class="ax-name">井陉矿区</span></a></li>
                                                </ul>
                                            </li>
                                            <li><a href="###"><span class="ax-name">邢台</span></a></li>
                                            <li><a href="###"><span class="ax-name">邯郸</span></a></li>
                                            <li><a href="###"><span class="ax-name">保定</span></a></li>
                                            <li><a href="###"><span class="ax-name">衡水</span></a></li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="###"><span class="ax-legend ax-iconfont ax-icon-edit"></span><span class="ax-name">四川</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                        <ul>
                                            <li><a href="###"><span class="ax-legend ax-iconfont ax-icon-wifi"></span><span class="ax-name">成都</span></a></li>
                                            <li><a href="###"><span class="ax-legend ax-iconfont ax-icon-check"></span><span class="ax-name">南充</span></a></li>
                                            <li><a href="###"><span class="ax-legend ax-iconfont ax-icon-me"></span><span class="ax-name">绵阳</span></a></li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="###"><span class="ax-legend ax-iconfont ax-icon-search"></span><span class="ax-name">广西</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                        <ul>
                                            <li><a href="###"><span class="ax-name">南宁</span></a></li>
                                            <li><a href="###"><span class="ax-name">柳州</span></a></li>
                                        </ul>
                                    </li>

                                 </ul>
                                 <ul class="ax-menu ax-menu-dark" axMenu style="background: #0b244d;">
                                    <li>
                                        <a href="###"><span class="ax-legend ax-iconfont ax-icon-global-f"></span><span class="ax-name">河北</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                        <ul>
                                            <li><a href="###"><span class="ax-name">石家庄</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                                <ul>
                                                    <li><a href="###"><span class="ax-name">长安区</span></a></li>
                                                    <li><a href="###"><span class="ax-name">桥西区</span></a></li>
                                                    <li><a href="###"><span class="ax-name">新华区</span></a></li>
                                                    <li><a href="###"><span class="ax-name">裕华区</span></a></li>
                                                    <li><a href="###"><span class="ax-name">井陉矿区</span></a></li>
                                                </ul>
                                            </li>
                                            <li><a href="###"><span class="ax-name">邢台</span></a></li>
                                            <li><a href="###"><span class="ax-name">邯郸</span></a></li>
                                            <li><a href="###"><span class="ax-name">保定</span></a></li>
                                            <li><a href="###"><span class="ax-name">衡水</span></a></li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="###"><span class="ax-legend ax-iconfont ax-icon-edit"></span><span class="ax-name">四川</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                        <ul>
                                            <li><a href="###"><span class="ax-legend ax-iconfont ax-icon-wifi"></span><span class="ax-name">成都</span></a></li>
                                            <li><a href="###"><span class="ax-legend ax-iconfont ax-icon-check"></span><span class="ax-name">南充</span></a></li>
                                            <li><a href="###"><span class="ax-legend ax-iconfont ax-icon-me"></span><span class="ax-name">绵阳</span></a></li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="###"><span class="ax-legend ax-iconfont ax-icon-search"></span><span class="ax-name">广西</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                        <ul>
                                            <li><a href="###"><span class="ax-name">南宁</span></a></li>
                                            <li><a href="###"><span class="ax-name">柳州</span></a></li>
                                        </ul>
                                    </li>

                                </ul>
                                    

使用徽章

使用ax-legend类表示菜单图标。请观摩效果演示。

                                <ul class="ax-menu ax-style-dot" axMenu>
                                    <li>
                                        <a href="###"><span class="ax-legend ax-iconfont ax-icon-global-f"></span><span class="ax-name">河北</span><span class="ax-dot ax-bg-danger"></span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                        <ul>
                                            <li><a href="###"><span class="ax-name">石家庄</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                                <ul>
                                                    <li><a href="###"><span class="ax-name">长安区</span></a></li>
                                                    <li><a href="###"><span class="ax-name">桥西区</span></a></li>
                                                    <li><a href="###"><span class="ax-name">新华区</span></a></li>
                                                    <li><a href="###"><span class="ax-name">裕华区</span></a></li>
                                                    <li><a href="###"><span class="ax-name">井陉矿区</span></a></li>
                                                </ul>
                                            </li>
                                            <li class="ax-active"><a href="###"><span class="ax-name">邢台</span><span class="ax-badge ax-badge-primary">New</span></a></li>
                                            <li><a href="###"><span class="ax-name">邯郸</span></a></li>
                                            <li><a href="###"><span class="ax-name">保定</span></a></li>
                                            <li><a href="###"><span class="ax-name">衡水</span></a></li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="###"><span class="ax-legend ax-iconfont ax-icon-edit"></span><span class="ax-name">四川</span><span class="ax-badge ax-badge-danger">21</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                        <ul>
                                            <li><a href="###"><span class="ax-legend ax-iconfont ax-icon-wifi"></span><span class="ax-name">成都</span></a></li>
                                            <li><a href="###"><span class="ax-legend ax-iconfont ax-icon-check"></span><span class="ax-name">南充</span></a></li>
                                            <li><a href="###"><span class="ax-legend ax-iconfont ax-icon-me"></span><span class="ax-name">绵阳</span></a></li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="###"><span class="ax-legend ax-iconfont ax-icon-search"></span><span class="ax-name">广西</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                        <ul>
                                            <li><a href="###"><span class="ax-name">南宁</span></a></li>
                                            <li><a href="###"><span class="ax-name">柳州</span></a></li>
                                        </ul>
                                    </li>

                                </ul>
                                    

ajax追加

使用url属性向菜单追加子菜单。url填写的是菜单的ajax文件地址。追加菜单(广东)

  •         <script type="text/javascript">
                var ajax = new axMenu('#menuAdd');
                document.querySelector("#menuAjax").onclick = function() {
                    ajax.update({
                        url: 'ax-menu-ajax.html'
                    });
                }
            </script>
                             
  •                                 <a href="###" class="ax-btn ax-primary ax-sm" id="menuAjax">追加菜单(广东)</a>
                                    <ul class="ax-menu ax-style-dot" id="menuAdd">
                                        <li>
                                            <a href="###"><span class="ax-name">河北</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                            <ul>
                                                <li><a href="###"><span class="ax-name">石家庄</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                                    <ul>
                                                        <li><a href="###"><span class="ax-name">长安区</span></a></li>
                                                        <li><a href="###"><span class="ax-name">桥西区</span></a></li>
                                                        <li><a href="###"><span class="ax-name">新华区</span></a></li>
                                                        <li><a href="###"><span class="ax-name">裕华区</span></a></li>
                                                        <li><a href="###"><span class="ax-name">井陉矿区</span></a></li>
                                                    </ul>
                                                </li>
                                                <li><a href="###"><span class="ax-name">邢台</span></a></li>
                                                <li><a href="###"><span class="ax-name">邯郸</span></a></li>
                                                <li><a href="###"><span class="ax-name">保定</span></a></li>
                                                <li><a href="###"><span class="ax-name">衡水</span></a></li>
                                            </ul>
                                        </li>
                                        <li>
                                            <a href="###"><span class="ax-name">四川</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                            <ul>
                                                <li><a href="###"><span class="ax-name">成都</span></a></li>
                                                <li><a href="###"><span class="ax-name">南充</span></a></li>
                                                <li><a href="###"><span class="ax-name">绵阳</span></a></li>
                                            </ul>
                                        </li>
                                        <li>
                                            <a href="###"><span class="ax-name">广西</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                            <ul>
                                                <li><a href="###"><span class="ax-name">南宁</span></a></li>
                                                <li><a href="###"><span class="ax-name">柳州</span></a></li>
                                            </ul>
                                        </li>
    
                                    </ul>
                                        

禁止使用

内置参数dispose可以禁止使用菜单。禁止使用 重新启用

  •     <script type="text/javascript">
                var dispose = new axMenu('#menuDispose');
                document.querySelector('#menuStop').onclick = function() {
                    dispose.update({
                        dispose: true
                    });
                }
                document.querySelector('#menuStart').onclick = function() {
                    dispose.update({
                        dispose: false
                    });
                }
        </script>
                             
  •                                 <a href="###" class="ax-btn ax-danger ax-sm" id="menuStop">禁止使用</a> <a href="###" class="ax-btn ax-primary ax-sm" id="menuStart">重新启用</a><
                                    <ul class="ax-menu ax-style-dot" id="menuDispose">
                                        <li>
                                            <a href="###"><span class="ax-name">河北</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                            <ul>
                                                <li><a href="###"><span class="ax-name">石家庄</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                                    <ul>
                                                        <li><a href="###"><span class="ax-name">长安区</span></a></li>
                                                        <li><a href="###"><span class="ax-name">桥西区</span></a></li>
                                                        <li><a href="###"><span class="ax-name">新华区</span></a></li>
                                                        <li><a href="###"><span class="ax-name">裕华区</span></a></li>
                                                        <li><a href="###"><span class="ax-name">井陉矿区</span></a></li>
                                                    </ul>
                                                </li>
                                                <li><a href="###"><span class="ax-name">邢台</span></a></li>
                                                <li><a href="###"><span class="ax-name">邯郸</span></a></li>
                                                <li><a href="###"><span class="ax-name">保定</span></a></li>
                                                <li><a href="###"><span class="ax-name">衡水</span></a></li>
                                            </ul>
                                        </li>
                                        <li>
                                            <a href="###"><span class="ax-name">四川</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                            <ul>
                                                <li><a href="###"><span class="ax-name">成都</span></a></li>
                                                <li><a href="###"><span class="ax-name">南充</span></a></li>
                                                <li><a href="###"><span class="ax-name">绵阳</span></a></li>
                                            </ul>
                                        </li>
                                        <li>
                                            <a href="###"><span class="ax-name">广西</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                            <ul>
                                                <li><a href="###"><span class="ax-name">南宁</span></a></li>
                                                <li><a href="###"><span class="ax-name">柳州</span></a></li>
                                            </ul>
                                        </li>
    
                                    </ul>
                                        

禁止打开/关闭子菜单

a标签使用aria-disabled="true"属性可禁止用户打开或者关闭子菜单;如果a标签有ID属性,则可通过disabled:'#xxx'属性方法禁止菜单。

                                    <ul class="ax-menu ax-style-dot" axMenu>
                                        <li>
                                            <a href="###"><span class="ax-name">河北</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                            <ul>
                                                <li><a href="###" aria-disabled="true"><span class="ax-name">石家庄</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                                    <ul>
                                                        <li><a href="###"><span class="ax-name">长安区</span></a></li>
                                                        <li><a href="###" class="ax-selected"><span class="ax-name">桥西区</span></a></li>
                                                        <li><a href="###"><span class="ax-name">新华区</span></a></li>
                                                        <li><a href="###"><span class="ax-name">裕华区</span></a></li>
                                                        <li><a href="###"><span class="ax-name">井陉矿区</span></a></li>
                                                    </ul>
                                                </li>
                                                <li><a href="###"><span class="ax-name">邢台</span></a></li>
                                                <li><a href="###"><span class="ax-name">邯郸</span></a></li>
                                                <li><a href="###"><span class="ax-name">保定</span></a></li>
                                                <li><a href="###"><span class="ax-name">衡水</span></a></li>
                                            </ul>
                                        </li>
                                        <li>
                                            <a href="###" aria-disabled="true"><span class="ax-name">四川</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                            <ul>
                                                <li><a href="###"><span class="ax-name">成都</span></a></li>
                                                <li><a href="###"><span class="ax-name">南充</span></a></li>
                                                <li><a href="###"><span class="ax-name">绵阳</span></a></li>
                                            </ul>
                                        </li>
                                        <li>
                                            <a href="###"><span class="ax-name">广西</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                            <ul>
                                                <li><a href="###"><span class="ax-name">南宁</span></a></li>
                                                <li><a href="###"><span class="ax-name">柳州</span></a></li>
                                            </ul>
                                        </li>

                                    </ul>
                                    

监听方法

支持5个监听事件,show点击展开事件,shown展示完成事件,hide点击折叠事件,hidden折叠完成事件,selected选择菜单事件。回调函数支持index参数,该参数表示点击时LI的顺序位置。请观摩效果演示。

  •         <script type="text/javascript">
                var event = new axMenu('#menuEvent');
                event.on('show', function(i) {
                    alert('开始展开第' + i + '个LI');
                }).on('shown', function(i) {
                    alert('已展开了第' + i + '个LI');
                }).on('hide', function(i) {
                    alert('开始折叠第' + i + '个LI');
                }).on('hidden', function(i) {
                    alert('已折叠了第' + i + '个LI');
                }).on('selected', function(i) {
                    alert('已经选择了第' + i + '个LI');
                });
            </script>
                             
  •                                 <ul class="ax-menu ax-style-dot" id="menuEvent">
                                        <li>
                                            <a href="###"><span class="ax-name">河北</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                            <ul>
                                                <li><a href="###"><span class="ax-name">石家庄</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                                    <ul>
                                                        <li><a href="###"><span class="ax-name">长安区</span></a></li>
                                                        <li><a href="###"><span class="ax-name">桥西区</span></a></li>
                                                        <li><a href="###"><span class="ax-name">新华区</span></a></li>
                                                        <li><a href="###"><span class="ax-name">裕华区</span></a></li>
                                                        <li><a href="###"><span class="ax-name">井陉矿区</span></a></li>
                                                    </ul>
                                                </li>
                                                <li><a href="###"><span class="ax-name">邢台</span></a></li>
                                                <li><a href="###"><span class="ax-name">邯郸</span></a></li>
                                                <li><a href="###"><span class="ax-name">保定</span></a></li>
                                                <li><a href="###"><span class="ax-name">衡水</span></a></li>
                                            </ul>
                                        </li>
                                        <li>
                                            <a href="###"><span class="ax-name">四川</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                            <ul>
                                                <li><a href="###"><span class="ax-name">成都</span></a></li>
                                                <li><a href="###"><span class="ax-name">南充</span></a></li>
                                                <li><a href="###"><span class="ax-name">绵阳</span></a></li>
                                            </ul>
                                        </li>
                                        <li>
                                            <a href="###"><span class="ax-name">广西</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                            <ul>
                                                <li><a href="###"><span class="ax-name">南宁</span></a></li>
                                                <li><a href="###"><span class="ax-name">柳州</span></a></li>
                                            </ul>
                                        </li>
    
                                    </ul>
                                        

参数说明

                active: '',//初始化后显示那个菜单,'#id'或者'#id,.classname,node'
                disabled: '',//初始化后禁止那个菜单,'#id'或者'#id,.classname,node'
                toggle: true,//是否同时只显示一个菜单,默认是true
                cookie: '',//是否保存cookie,刷新页面保持之前的打开状态,填写唯一字符串,比如:'mycookie001'
                collapse: true,//初始化是否默认折叠所有ul,默认是true:折叠
                trigger: 'click',//打开菜单是click点击显示还是hover滑过显示,默认是'click';hover只适合row:true的情况
                dispose: false,//是否禁止使用,默认是false:启用
                url: '',//异步追加菜单地址,html格式,填写举例:'/a/b/ajax.html'
                row: false,//是否以水平菜单显示,默认是false:垂直菜单显示
                width: '',//设定水平菜单中一级菜单宽度,填写举例:'300px';row:true下有效
                dropWidth: '',//设定水平菜单中下拉菜单宽度,填写举例:'300px';row:true下有效
                gutter: '',//设定水平菜单中一级菜单之间的间隔,填写举例:'28px';row:true下有效
                ajaxType:'post',//异步提交的方式,默认post,可填get
  

操作方法

名称 说明 参数说明 回调函数
init() 初始化 无参数 无回调函数
update(setting, callback) 更新所有参数 setting是用户自定义参数,是一个对象;callback是回调函数,可不填 function(){}
无参数
on(type, handler) 监听实例 type是监听事件,具体可看前文的:监听方法;handler是回调函数 function(index){}
index:当前li的索引,可不填
axInstance(axMenus, name) 获取实例 axMenus是当页创建的所有实例;name是指插件元素axMenu属性的name值 无回调函数
在回调函数中this均指向实例本身,所以在回调函数中可默认使用如下变量:
  • this:实例本身
  • this.targetDom:菜单的Dom
  • this.options:实例的参数