码上快乐

相关内容   简体   繁体

html自定义垂直导航菜单

本文转载自  查看原文  2016-08-04 11:01  11095    二级导航菜单/ html5/ Html5、css3/ Javascript/ css3

html自定义垂直导航菜单（目前只支持上级+下级两级菜单）

由于工作的需要，昨天花了三个多小时的事件整理了一份关于垂直导航二级菜单，可以通过js配置的方式初始化菜单box（测试环境：chrome 49、IE 10、IE edge）。

no pic u say a j8? 好吧，先上效果图（由于下面是gif，所以一帧一帧的感觉不流畅。讲道理，事实上，切换非常流畅，自行下载看Demo）。

 

js配置方式：

配置menuBox的方式：menuBox.init(config);

这里的config有三个属性：

menuBoxId（必需，你要配置的菜单根节点所在元素的Id）

multiple（可选，是否可以同时打开多个上级菜单，默认是false，也就是最多显示一个上级菜单的子菜单）

openIndex（可选，初始化要打开上级菜单的index数组，如果你要传值，按照格式应该是数字数组）

//配置第一个手风琴的基本参数
var config01 = {
    //配置菜单的MenuBoxId
    menuBoxId: "#menuBox01", //是否可以打开多个上级菜单的子菜单 multiple: false, //初始化打开的 openIndex: [3, 4, 5] } menuBox.init(config01);

 然后看下两个菜单Box的配置：

　第一个菜单Box：可以同时打开多个上级菜单，初始化的时候打开第0、1个。

 　　　　　　//配置第一个手风琴的基本参数
            var config01 = {
                //配置菜单的MenuBoxId
                menuBoxId: "#menuBox01",
                //是否可以打开多个二级菜单
                multiple: true,
                //初始化打开的
                openIndex: [0,1]
            }
            menuBox.init(config01);

第二个菜单Box：不可以打开多个上级菜单，初始化的时候打开第1个，如果传入数组有多个值，默认打开第一个有效的index上级菜单。
            //配置第二个手风琴的基本参数
            var config02 = {
                //配置菜单的MenuBoxId
                menuBoxId: "#menuBox02",
                //是否可以打开多个二级菜单
                multiple: false,
                //初始化打开的
                openIndex: [-1, 1]
            }
            menuBox.init(config02);

 

用到的知识点：

1、flexbox（在ie9及以下布局不兼容，但是还是可以正常看到切换效果）。

2、css3 transform配合transition实现箭头的旋转切换。

3、打开菜单：$().slideDown()、关闭菜单：$().slideUp()、切换菜单：$().slideToggle()。有时间我会修改为css3动画实现切换，尽量不用jquery。

4、<i>标签引用图标font-awesome

下面是相关代码：

html：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="font-awesome/css/font-awesome.css" />
        <link rel="stylesheet" href="css/menuBox.css" />
        <script type="text/javascript" src="js/jquery-2.2.2.min.js"></script>
        <script type="text/javascript" src="js/menuBox.js"></script>
        <title>MenuBox</title>
    </head>
    <style>
        .top {
            background: lightblue;
            min-height: 55px;
        }
    </style>

    <body>
        <div id="top" class="top">
            <span>
            var config01 = {<br>
                &nbsp;&nbsp;menuBoxId: "#menuBox01",<br>
                &nbsp;&nbsp;multiple: true,<br>
                &nbsp;&nbsp;openIndex: [0,1]<br>
            }<br>
            menuBox.init(config01);<br><br>

            var config02 = {<br>
                &nbsp;&nbsp;menuBoxId: "#menuBox02",<br>
                &nbsp;&nbsp;multiple: false,<br>
                &nbsp;&nbsp;openIndex: [-1, 1]<br>
            }<br>
            menuBox.init(config02);<br>
            </span>
        </div>
        <div id="leftNav" class="left-nav">
            <!--
            作者：15934179313@163.com
            时间：2016-08-03
            描述：第一个手风琴二级菜单
        -->
            <div id="menuBox01" class="menuBox">
                <ul class="spMenuBox">
                    <li class="spMenuItem">
                        <div class="spMenu">
                            <i class="fa fa-chrome"></i>
                            <span>菜单1</span>
                            <i class="fa fa-2x fa-angle-down"></i>
                        </div>
                        <ul class="subMenuBox">
                            <li><span class="subMenu">菜单1.1</span></li>
                            <li><span class="subMenu">菜单1.2</span></li>
                            <li><span class="subMenu">菜单1.3</span></li>
                        </ul>
                    </li>
                    <li class="spMenuItem">
                        <div class="spMenu">
                            <i class="fa fa-chrome"></i>
                            <span>菜单1</span>
                            <i class="fa fa-2x fa-angle-down"></i>
                        </div>
                        <ul class="subMenuBox">
                            <li><span class="subMenu">菜单1.1</span></li>
                            <li><span class="subMenu">菜单1.2</span></li>
                            <li><span class="subMenu">菜单1.3</span></li>
                            <li><span class="subMenu">菜单1.1</span></li>
                            <li><span class="subMenu">菜单1.2</span></li>
                            <li><span class="subMenu">菜单1.3</span></li>
                        </ul>
                    </li>
                    <li class="spMenuItem">
                        <div class="spMenu">
                            <i class="fa fa-chrome"></i>
                            <span>菜单1</span>
                            <i class="fa fa-2x fa-angle-down"></i>
                        </div>
                        <ul class="subMenuBox">
                            <li><span class="subMenu">菜单1.1</span></li>
                            <li><span class="subMenu">菜单1.2</span></li>
                            <li><span class="subMenu">菜单1.3</span></li>
                            <li><span class="subMenu">菜单1.1</span></li>
                            <li><span class="subMenu">菜单1.2</span></li>
                            <li><span class="subMenu">菜单1.3</span></li>
                            <li><span class="subMenu">菜单1.1</span></li>
                            <li><span class="subMenu">菜单1.2</span></li>
                            <li><span class="subMenu">菜单1.3</span></li>
                        </ul>
                    </li>
                    <li class="spMenuItem">
                        <div class="spMenu">
                            <i class="fa fa-chrome"></i>
                            <span>菜单1</span>
                            <i class="fa fa-2x fa-angle-down"></i>
                        </div>
                        <ul class="subMenuBox">
                            <li><span class="subMenu">菜单1.1</span></li>
                            <li><span class="subMenu">菜单1.2</span></li>
                            <li><span class="subMenu">菜单1.3</span></li>
                        </ul>
                    </li>
                    <li class="spMenuItem">
                        <div class="spMenu">
                            <i class="fa fa-chrome"></i>
                            <span>菜单1</span>
                            <i class="fa fa-2x fa-angle-down"></i>
                        </div>
                        <ul class="subMenuBox">
                            <li><span class="subMenu">菜单1.1</span></li>
                            <li><span class="subMenu">菜单1.2</span></li>
                            <li><span class="subMenu">菜单1.3</span></li>
                            <li><span class="subMenu">菜单1.1</span></li>
                            <li><span class="subMenu">菜单1.2</span></li>
                            <li><span class="subMenu">菜单1.3</span></li>
                        </ul>
                    </li>
                    <li class="spMenuItem">
                        <div class="spMenu">
                            <i class="fa fa-chrome"></i>
                            <span>菜单1</span>
                            <i class="fa fa-2x fa-angle-down"></i>
                        </div>
                        <ul class="subMenuBox">
                            <li><span class="subMenu">菜单1.1</span></li>
                            <li><span class="subMenu">菜单1.2</span></li>
                            <li><span class="subMenu">菜单1.3</span></li>
                            <li><span class="subMenu">菜单1.1</span></li>
                            <li><span class="subMenu">菜单1.2</span></li>
                            <li><span class="subMenu">菜单1.3</span></li>
                            <li><span class="subMenu">菜单1.1</span></li>
                            <li><span class="subMenu">菜单1.2</span></li>
                            <li><span class="subMenu">菜单1.3</span></li>
                        </ul>
                    </li>
                    <li class="spMenuItem">
                        <div class="spMenu">
                            <i class="fa fa-chrome"></i>
                            <span>菜单1</span>
                            <i class="fa fa-2x fa-angle-down"></i>
                        </div>
                        <ul class="subMenuBox">
                            <li><span class="subMenu">菜单1.1</span></li>
                            <li><span class="subMenu">菜单1.2</span></li>
                            <li><span class="subMenu">菜单1.3</span></li>
                        </ul>
                    </li>
                    <li class="spMenuItem">
                        <div class="spMenu">
                            <i class="fa fa-chrome"></i>
                            <span>菜单1</span>
                            <i class="fa fa-2x fa-angle-down"></i>
                        </div>
                        <ul class="subMenuBox">
                            <li><span class="subMenu">菜单1.1</span></li>
                            <li><span class="subMenu">菜单1.2</span></li>
                            <li><span class="subMenu">菜单1.3</span></li>
                            <li><span class="subMenu">菜单1.1</span></li>
                            <li><span class="subMenu">菜单1.2</span></li>
                            <li><span class="subMenu">菜单1.3</span></li>
                        </ul>
                    </li>
                    <li class="spMenuItem">
                        <div class="spMenu">
                            <i class="fa fa-chrome"></i>
                            <span>菜单1</span>
                            <i class="fa fa-2x fa-angle-down"></i>
                        </div>
                        <ul class="subMenuBox">
                            <li><span class="subMenu">菜单1.1</span></li>
                            <li><span class="subMenu">菜单1.2</span></li>
                            <li><span class="subMenu">菜单1.3</span></li>
                            <li><span class="subMenu">菜单1.1</span></li>
                            <li><span class="subMenu">菜单1.2</span></li>
                            <li><span class="subMenu">菜单1.3</span></li>
                            <li><span class="subMenu">菜单1.1</span></li>
                            <li><span class="subMenu">菜单1.2</span></li>
                            <li><span class="subMenu">菜单1.3</span></li>
                        </ul>
                    </li>
                    <li class="spMenuItem">
                        <div class="spMenu">
                            <i class="fa fa-chrome"></i>
                            <span>菜单1</span>
                            <i class="fa fa-2x fa-angle-down"></i>
                        </div>
                        <ul class="subMenuBox">
                            <li><span class="subMenu">菜单1.1</span></li>
                            <li><span class="subMenu">菜单1.2</span></li>
                            <li><span class="subMenu">菜单1.3</span></li>
                        </ul>
                    </li>
                    <li class="spMenuItem">
                        <div class="spMenu">
                            <i class="fa fa-chrome"></i>
                            <span>菜单1</span>
                            <i class="fa fa-2x fa-angle-down"></i>
                        </div>
                        <ul class="subMenuBox">
                            <li><span class="subMenu">菜单1.1</span></li>
                            <li><span class="subMenu">菜单1.2</span></li>
                            <li><span class="subMenu">菜单1.3</span></li>
                            <li><span class="subMenu">菜单1.1</span></li>
                            <li><span class="subMenu">菜单1.2</span></li>
                            <li><span class="subMenu">菜单1.3</span></li>
                        </ul>
                    </li>
                    <li class="spMenuItem">
                        <div class="spMenu">
                            <i class="fa fa-chrome"></i>
                            <span>菜单1</span>
                            <i class="fa fa-2x fa-angle-down"></i>
                        </div>
                        <ul class="subMenuBox">
                            <li><span class="subMenu">菜单1.1</span></li>
                            <li><span class="subMenu">菜单1.2</span></li>
                            <li><span class="subMenu">菜单1.3</span></li>
                            <li><span class="subMenu">菜单1.1</span></li>
                            <li><span class="subMenu">菜单1.2</span></li>
                            <li><span class="subMenu">菜单1.3</span></li>
                            <li><span class="subMenu">菜单1.1</span></li>
                            <li><span class="subMenu">菜单1.2</span></li>
                            <li><span class="subMenu">菜单1.3</span></li>
                        </ul>
                    </li>
                </ul>
            </div>
            <!--
                作者：15934179313@163.com
                时间：2016-08-03
                描述：第二个手风琴菜单
            -->
            <div id="menuBox02" class="menuBox">
                <div class="spMenuBox">
                    <div class="spMenuItem">
                        <div class="spMenu">
                            <i class="fa fa-chrome"></i>
                            <span>菜单1</span>
                            <i class="fa fa-2x fa-angle-down"></i>
                        </div>
                        <div class="subMenuBox">
                            <div><span class="subMenu">菜单1.1</span></div>
                            <div><span class="subMenu">菜单1.2</span></div>
                            <div><span class="subMenu">菜单1.3</span></div>
                        </div>
                    </div>
                    <div class="spMenuItem">
                        <div class="spMenu">
                            <i class="fa fa-chrome"></i>
                            <span>菜单1</span>
                            <i class="fa fa-2x fa-angle-down"></i>
                        </div>
                        <div class="subMenuBox">
                            <div><span class="subMenu">菜单1.1</span></div>
                            <div><span class="subMenu">菜单1.2</span></div>
                            <div><span class="subMenu">菜单1.3</span></div>
                        </div>
                    </div>
                    <div class="spMenuItem">
                        <div class="spMenu">
                            <i class="fa fa-chrome"></i>
                            <span>菜单1</span>
                            <i class="fa fa-2x fa-angle-down"></i>
                        </div>
                        <div class="subMenuBox">
                            <div><span class="subMenu">菜单1.1</span></div>
                            <div><span class="subMenu">菜单1.2</span></div>
                            <div><span class="subMenu">菜单1.3</span></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
    <script>
        $().ready(function() {
            initLeftNavHeight();
            initMenu();
        })

        /**初始化左侧导航栏高度**/
        function initLeftNavHeight() {
            initHeight();

            function initHeight() {
                var total = document.documentElement.clientHeight;
                var topHeight = $("#top").height();
                $("#leftNav").height(total - topHeight);
            }

            document.body.onresize = function() {
                initHeight();
            }
        }

        /**初始化菜单选项**/
        function initMenu() {
            //配置第一个手风琴的基本参数
            var config01 = {
                //配置菜单的MenuBoxId
                menuBoxId: "#menuBox01",
                //是否可以打开多个上级菜单
                multiple: true,
                //初始化打开的
                openIndex: [0,2]
            }
            menuBox.init(config01);

            //配置第二个手风琴的基本参数
            var config02 = {
                //配置菜单的MenuBoxId
                menuBoxId: "#menuBox02",
                //是否可以打开多个上级菜单
                multiple: false,
                //初始化打开的上级菜单的index数组
                openIndex: [-1, 1]
            }
            menuBox.init(config02);
        }
    </script>

</html>

 

menuBox.css:

body {
    margin: 0;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.left-nav {
    background: lightgray;
    height: 100%;
    overflow-y: overlay;
    position: absolute;
    
    /**flexbox兼容**/
    display: -webkit-box;           /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;              /* OLD - Firefox 19- (doesn't work very well) */
    display: -ms-flexbox;           /* TWEENER - IE 10 */
    display: -webkit-flex;          /* NEW - Chrome */
    display: flex;     
    /**flexbox兼容**/
    -webkit-box-orient: horizontal;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    -o-flex-direction: row;
    flex-direction: row;
}

/**菜单box**/
.menuBox {
    width: 300px;
    margin: 5px;
}


/**默认不显示二级菜单**/
.menuBox .subMenuBox {
    display: none;
}


/**一级菜单样式**/
.spMenuBox>*>.spMenu {
    align-items: center;
    background: darkslateblue;
    border-bottom: 1px solid lightgray;
    cursor: pointer;
    color: white;
    
    /**flexbox兼容**/
    display: -webkit-box;           /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;              /* OLD - Firefox 19- (doesn't work very well) */
    display: -ms-flexbox;           /* TWEENER - IE 10 */
    display: -webkit-flex;          /* NEW - Chrome */
    display: flex;     
    /**flexbox兼容**/
    -webkit-box-orient: horizontal;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    -o-flex-direction: row;
    flex-direction: row;
    /**flexbox兼容**/
    -webkit-justify-content: space-around;
    -webkit-box-pack: space-around;
    -moz-box-pack: space-around;
    -ms-flex-pack: space-around;
    justify-content: space-around;
    /**user-select兼容**/
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}


/**最后一个一级菜单样式**/
.spMenuBox>*:last-child>.spMenu {
    align-items: center;
    background: darkslateblue;
    border-bottom: 0px;
    color: white;
    cursor: pointer;
    
    /**flexbox兼容**/
    display: -webkit-box;           /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;              /* OLD - Firefox 19- (doesn't work very well) */
    display: -ms-flexbox;           /* TWEENER - IE 10 */
    display: -webkit-flex;          /* NEW - Chrome */
    display: flex;     
    
    /**flexbox兼容**/
    -webkit-box-orient: horizontal;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    -o-flex-direction: row;
    flex-direction: row;
    /**flexbox兼容**/
    webkit-justify-content: space-around;
    -webkit-box-pack: space-around;
    -moz-box-pack: space-around;
    -ms-flex-pack: space-around;
    justify-content: space-around;
    /**user-select兼容**/
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}


/**箭头切换用动画实现**/
.fa-angle-down {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.spMenuItem.active>.spMenu>.fa-angle-down {
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    transform: rotate(-180deg);
}


/**二级菜单样式*/
.subMenuBox>*>.subMenu {
    align-items: center;
    background: #ccc;
    border-bottom: 1px solid lightyellow;
    cursor: pointer;
    padding: 5px 10px;
    
    /**flexbox兼容**/
    display: -webkit-box;           /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;              /* OLD - Firefox 19- (doesn't work very well) */
    display: -ms-flexbox;           /* TWEENER - IE 10 */
    display: -webkit-flex;          /* NEW - Chrome */
    display: flex;     
    /**flexbox兼容**/
    -webkit-box-orient: horizontal;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    -o-flex-direction: row;
    flex-direction: row;
    /**user-select兼容**/
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    
}

/**最后一个二级菜单样式**/
.subMenuBox>*:last-child>.subMenu {
    align-items: center;
    background: #ccc;
    border-bottom: 0px;
    cursor: pointer;
    padding: 5px 10px;
    
    /**flexbox兼容**/
    display: -webkit-box;           /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;              /* OLD - Firefox 19- (doesn't work very well) */
    display: -ms-flexbox;           /* TWEENER - IE 10 */
    display: -webkit-flex;          /* NEW - Chrome */
    display: flex;
    /**flexbox兼容**/
    -webkit-box-orient: horizontal;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    -o-flex-direction: row;
    flex-direction: row;
    /**user-select兼容**/
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none; 
}

 menuBox.js:

/**
 * 配置菜单
 *     示例：
 *    配置基本参数
 *    var config = {
 *        //配置菜单的MenuBoxId
 *        menuBoxId: "#menuBox01",
 *        //是否可以打开多个上级菜单
 *        multiple: true,
 *        //初始化打开的菜单数组
 *        openIndex: [1, 3, 5]
 *    }
 *    menuBox.init(config);
 * 
 * @author DarkRanger
 * http: //www.cnblogs.com/wrcold520/
 */

! function($) {
    if($ == undefined) {
        throw new Error("please put your jquery.js top of menuBox.js!")
    }
    var menuBox = function() {};
    //要配置的menuBox的菜单id
    menuBox.menuBoxId = undefined;
    //是否可以显示多个上级菜单的子菜单
    menuBox.multiple = false;
    //默认关闭所有一级菜单
    menuBox.openIndex = [];

    //menuBox初始化方法
    menuBox.init = function(config) {
        
        var cntMenuBox = new menuBox();
        
        //定义上级菜单spMenu数组
        var spMenus;

        if(config.menuBoxId == undefined) {
            throw new Error("your config has not 'menuBoxId', please make sure your menuBox is existed!");
        } else {
            cntMenuBox.menuBoxId = $(config.menuBoxId) ? config.menuBoxId : undefined;
        }

        if(config.multiple == undefined) {
            console.warn("your config has not 'multiple', default value is false which means you can open only one spMenu at the same time!");
        } else {
            cntMenuBox.multiple = config.multiple;
        }

        if(config.openIndex == undefined) {
            console.warn("your config has not 'openIndex', default value is a Array which's length is 0!");
        } else if(!config.openIndex instanceof Array) {
            throw new Error("your config 'openIndex' should be a number Array");
        } else {
            cntMenuBox.openIndex = unique(config.openIndex, false);
        }

        //确定对应的menuBox
        cntMenuBox.menuBoxId = config.menuBoxId;
        //是否打开其他某一个的时候关闭其他选项
        var closeOthers = !cntMenuBox.multiple;
        //初始化点击事件
        initClickEvent(cntMenuBox, closeOthers);
        //确定上级菜单数组
        spMenus = $(cntMenuBox.menuBoxId + " .spMenu");
        //打开传入的数组
        for(var i in cntMenuBox.openIndex) {
            var index = cntMenuBox.openIndex[i];
            var spMenu = spMenus[index];
            if(spMenu) {
                openSpMenu(cntMenuBox.menuBoxId, index);
                if(!cntMenuBox.multiple) {
                    break;
                }
            }
        }
    }

    function unique(arr) {
        var result = [],
            hash = {};
        for(var i = 0, elem;
            (elem = arr[i]) != null; i++) {
            if(!hash[elem]) {
                result.push(elem);
                hash[elem] = true;
            }
        }
        return result;
    }

    //初始化点击事件
    function initClickEvent(menuBox, closeOthers) {
        $(menuBox.menuBoxId + " .spMenu").on("click", function() {
            var cntSpMenu$ = $(this);
            //要切换的元素
            cntSpMenu$.next().slideToggle();
            cntSpMenu$.parent().toggleClass("active")

            var cntSpMenu = cntSpMenu$['context'];
            if(closeOthers == true) {
                var spMenus = $(menuBox.menuBoxId + " .spMenu");
                $.each(spMenus, function(index, spMenu) {
                    if(cntSpMenu != spMenu) {
                        closeSpMenu(menuBox.menuBoxId, index);
                    }
                });
            }
        });
    }

    //打开某一个item
    function openSpMenu(menuBoxId, index) {
        //要切换的元素
        var spItem = $(menuBoxId + " .spMenu:eq(" + index + ")");
        spItem.next().slideDown();
        spItem.parent().addClass("active")
    }
    //关闭某一个item
    function closeSpMenu(menuBoxId, index) {
        //要切换的元素
        var spItem = $(menuBoxId + " .spMenu:eq(" + index + ")");
        spItem.next().slideUp();
        spItem.parent().removeClass("active")
    }
    //切换某一个item
    function toggleSpMenu(menuBoxId, index) {
        //要切换的元素
        var spItem = $(menuBoxId + " .spMenu:eq(" + index + ")");
        spItem.next().slideToggle();
        spItem.parent().toggleClass("active")
    }

    window.menuBox = menuBox;
}($);

 

 附上源码：

MenuBox

 


免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。



猜您在找 html自定义垂直导航菜单（多级导航菜单，去掉font-awesome图标，添加自己的箭头图标） html自定义垂直导航菜单（加强版--自定义传入menu参数，支持JSONArray、JSArray、JSONObject、JSObject） Android开发之自定义局部导航菜单 如何在博客园中自定义导航菜单 C#--自定义控件-导航菜单(自定义事件，属性） electron-vue 隐藏顶部菜单 隐藏导航 、自定义导航 （八十四）c#Winform自定义控件-导航菜单（Ribbon菜单）-HZHControls HTML5事件-自定义右键菜单 JavaScript 自定义html元素鼠标右键菜单 html鼠标自定义右键菜单：css+js实现自定义html右键菜单
 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM