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. Selenium家谱

    自动化测试一词也算是整个测试行业里面比较热门的一个词儿,工资高,前景好,有实力,有态度等等,很多企业的管理者也在不断的扩大自己的队伍和职能,这也是导致自动化测试比较流行的原因之一.但是很多企业做自动化 ...

  2. Mac10.9下的libtiff编译

    libtiff介绍 libtiff下载 libtiff编译 libtiff介绍? 参考:http://en.wikipedia.org/wiki/Tiff libtiff下载 直接到官网下载:http ...

  3. Bitmap压缩到指定尺寸大小，获取圆角、圆形图片

    /** * 使用Matrix将Bitmap压缩到指定大小 * @param bitmap * @param w * @param h * @return */ public static Bitmap ...

  4. Math对象的使用

    1. Math.floor() === 向下取整 2.Math.random() === 取一个浮点随机数 3.Math.round() === 四舍五入后一个最接近的整数 4.Math.ceil() ...

  5. React + Python 七月小说网 启程（一）

    一.为啥要做这个网站 很久没有写技术相关的博客了,最近几个月忙飞,各种工作,技术根本学不完,很难受. 趁着春节期间,终于有空闲时间做自己爱做的事情了,美滋滋. 热爱技术,热爱小说,于是诞生了个这么玩意 ...

  6. T-SQL查询进阶--理解SQL Server中索引的概念，原理

    简介 在SQL Server中,索引是一种增强式的存在,这意味着,即使没有索引,sql server仍然可以实现应有的功能,但索引可以在大多数情况下提升查询性能,在OLAP(On line Trans ...

  7. KVO 的代码简洁使用

    1.类属性设置与创建 详细使用介绍 KVO 键值观察 // KvoClass.h @interface KvoClass : NSObject @property(nonatomic, copy) N ...

  8. X的平方根（二分）

    设计函数int sqrt(int x),计算 xx 的平方根. 输入格式 输入一个 整数 xx,输出它的平方根.直到碰到文件结束符(EOF)为止. 输出格式 对于每组输入,输出一行一个整数,表示输入整 ...

  9. 【spring cloud】并发测试问题

    一,问题 并发测试,对外接口测试50个并发的时候开发报错,报错信息类似如下:  {"status":"0500","message":&qu ...

  10. 条目十四《使用reserve来避免不必要的重新分配》

    条目十四<使用reserve来避免不必要的重新分配> 使用vector和string的插入元素的时候,我们是不用担心内存问题的(只要不超过容器的max_size).因为底层有分配子管理内存 ...