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

html自定义垂直导航菜单的更多相关文章

  1. html自定义垂直导航菜单（多级导航菜单，去掉font-awesome图标，添加自己的箭头图标）

    这次在原先html自定义垂直导航菜单的基础上做了比较大的改动: 1.去掉了font-awesome图标,上级菜单右边的箭头是自己用css写的,具体参考<css三角箭头>. 2.去掉了初始化 ...

  2. html自定义垂直导航菜单（加强版--自定义传入menu参数，支持JSONArray、JSArray、JSONObject、JSObject）

    在上一篇中我简单写了个html自定义垂直导航菜单,缺点很明显,里面的数据是固定死的,不能动态更改数据. 这里我重写了一个修改版的垂直二级导航菜单,将原先的menuBox.init(config);修改 ...

  3. jQuery漂亮图标的垂直导航菜单

    效果展示 http://hovertree.com/texiao/nav/3/ jQuery漂亮图标的垂直导航菜单 是一款当鼠标滑过菜单项时,会有一个背景遮罩层跟着鼠标移动,效果非常炫酷,图标还是矢量 ...

  4. Android开发之自定义局部导航菜单

    如今,要实现导航功能方案有很多.比如: 1.用3.0+自带的Toolbar + Fragment导航. 2.用Tabhost实现导航.小弟学浅,就只用过这两种方案实现导航. 但是这两种方案都有一个很明 ...

  5. h5+css 垂直导航菜单

    http://blog.csdn.net/baidu_32731497/article/details/51814427

  6. 为SharePoint网站创建自定义导航菜单

    转:http://kaneboy.blog.51cto.com/1308893/397779 相信不少人都希望把SharePoint网站内置的那个顶部导航菜单,换成自己希望的样式.由于SharePoi ...

  7. 使用CSS创建有图标的网站导航菜单

    在我创建的每一个互联网应用中,我都试图避免创建完全由图片组成的菜单.在我看来,网页菜单系统中应该使用文字.这样做也会让菜单变得更干净利落.清晰和易读,不用考虑应用程序如何读取它,以及页面放大的时候也不 ...

  8. ABP之展现层（导航菜单）

    基本的增删改查已经粗糙的结束了,接下来就是要方便的展示了,也就是导航菜单.在Abp中已经对导航栏的设置进行了相应的封装(Abp.Application.Navigation),可以方便我们快速的将自己 ...

  9. WEB入门.九 导航菜单

    学习内容 水平导航菜单 垂直导航菜单 下拉式导航菜单 能力目标 制作tab标签导航菜单 制作带箭头的导航菜单 制作带信息提示的导航菜单 制作垂直下拉导航菜单 制作水平下拉导航菜单 本章简介 上一章节中 ...

随机推荐

  1. h5存储的优点

    1.解决4k大小问题2.解决请求头常带存储信息的问题3.解决关系型存储问题4.可以跨浏览器

  2. Web API集成Azure AD认证

    1.声明的介绍 基于角色的授权管理,适用于角色变化不大,并且用户权限不会频繁更改的场景. 在更复杂的环境下,仅仅通过给用户分配角色并不能有效地控制用户访问权限. 基于声明的授权有许多好处,它使认证和授 ...

  3. MySQL性能调优与架构设计——第4章 MySQL安全管理

    第4章 MySQL安全管理 前言 对于任何一个企业来说,其数据库系统中所保存数据的安全性无疑是非常重要的,尤其是公司的有些商业数据,可能数据就是公司的根本,失去了数据的安全性,可能就是失去了公司的一切 ...

  4. HackNine 避免在EditText中验证日期

    1.概要:    为什么不直接为EditTText设置一个点击监听器,而非要使用Button呢?     答案是:使用Button更安全,因为用户无法修改Button的文本内容.如果使用EditTex ...

  5. 使用 typescript ，提升 vue 项目的开发体验（1）

    此文已由作者张汉锐授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 前言:对于我们而言,typescript 更像一个工具 官方指南 从 vue2.5 之后,vue 对 ts ...

  6. 「HEOI2016/TJOI2016」序列

    题目链接 戳这 Solution 首先考虑最暴力的dp 我们设: \(f[i]\)表示选择\(i\)以后所能形成的满足条件的子序列的最大值 \(minx[i]\)表示\(i\)能转换为的最小值 \(m ...

  7. 如何从Spring官网下载Spring的jar包

    Spring官网:https://spring.io/ 进入官网点击PRODECTS 然后点击Spring Framework 进入下面的页面点击小猫图标: 之后再下面的页面持续向下滚动,找到下图我标 ...

  8. 钩子(hook)编程

    一.钩子介绍 1.1钩子的实现机制 钩子英文名叫Hook,是一种截获windows系统中某应用程序或者所有进程的消息的一种技术.下图是windows应用程序传递消息的过程: 如在键盘中按下一键,操作系 ...

  9. 第十篇 requests模块

    1.安装requests 要安装requests,在终端中输入以下命令即可安装: pip3 install requests 2.发送请求 使用requests发送请求首先需要导入requests模块 ...

  10. myeclipse2014 安装maven3.3.9和maven配置本地仓库 及错误修改

    结合网上的知识梳理以及自己安装的经验 myeclipse2014 安装maven3.3.9和maven配置本地仓库  及犯的错误修改  成功搞定maven 1,安装 Maven 之前要求先确定你的 J ...