Navigation 导航

使用说明

用法跟axMenu一样,仅需要追加row:true属性即可。关于axMenu用法请点击这里

                                <ul class="ax-menu ax-menu-light " axMenu="row:true">
                                   <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><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>
                                       </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-center类可以使菜单列表文字居中显示。适合只有一级菜单的时候。

                                <ul class="ax-menu ax-menu-light ax-menu-center" axMenu="row:true">
                                    <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><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>
                        

自定义宽度

headerWidth属性定义一级菜单的宽度,dropWidth定义下拉菜单的宽度。

                                <ul class="ax-menu ax-menu-light " axMenu="row:true,headerWidth:'220px',dropWidth:'260px'">
                                    <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><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>
                                        </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>
                        

自由菜单

使用width:'auto'属性即可实现自由宽度的菜单。

                                <ul class="ax-menu ax-menu-light" axMenu="row:true,headerWidth:'auto'">
                                    <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><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>
                        

菜单间隔

使用gutter属性定义下拉菜单之间的间隔。

                                <ul class="ax-menu ax-menu-light" axMenu="row:true,gutter:'14px',headerWidth:'220px'">
                                    <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><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-btn类即可。可组合使用也可以单独使用。

                                <ul class="ax-menu ax-menu-light" id="menu06">
                                    <li><a href="###" class="ax-btn"><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="###" class="ax-btn"><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="###" class="ax-btn"><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>
                                <div class="ax-break"></div>
                                <ul class="ax-menu ax-menu-light" id="menu07">
                                    <li><a href="###" class="ax-btn"><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>
                                </ul>
                        

鼠标经过展开

使用trigger属性为hover即可,该属性默认是click点击展开。

                                <ul class="ax-menu ax-menu-light " axMenu="row:true,trigger:'hover'">
                                    <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><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>
                                        </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>