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. C#使用var定义变量时的四个特点

    使用var定义变量时有以下四个特点: 1. 必须在定义时初始化.也就是必须是var s = “abcd”形式: 2. 一但初始化完成,就不能再给变量赋与初始化值类型不同的值了. 3.   var要求是 ...

  2. easyui 列表 条件检索

    onclick="search()" 不要使用search命名检索方法,冲突,无法调用. 通用检索function function searchData() { var objs ...

  3. Python - selenium_WebDriver 鼠标键盘事件

    from selenium import webdriver #引入ActionChains类 提供了鼠标的操作方法 from selenium.webdriver.common.action_cha ...

  4. Web标准及网站的可用性、可访问性

    学习前端的过程中到处充斥着Web标准.可用性.可访问性这些词,那么到底它们指的是什么呢? 一.什么是Web标准 简单的说,Web标准就是我们在学习前端中接触最多的HTML.CSS.JavaScript ...

  5. indexDB的使用和异步图片blob文件保存

    //调整webkit兼容性 var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || w ...

  6. 6w5:第六周程序填空题2

    描述 下面程序的输出结果是: destructor B destructor A 请完整写出 class A. 限制条件:不得为 class A 编写构造函数. #include <iostre ...

  7. percona 5.7二进制安装

    1.建立用户和组 sudo groupadd mysql sudo useradd -g mysql -s /sbin/nologin mysql 2.下载二进制包Percona-Server-5.7 ...

  8. [SinGuLaRiTy] 2017 百度之星程序设计大赛 复赛

    [SinGuLaRiTy-1038] Copyright (c) SinGuLaRiTy 2017. All Rights Reserved. Arithmetic of Bomb Problem D ...

  9. 并不能来一发50AC

    本来想来一发50AC嗨一下 然后发现只有40+ 算了放弃了..

  10. Django 项目重命名

    在日常学习工作过程中,我们难免需要复用以前的项目,这里讲下复用 Django 项目并重命名的过程. 1.修改项目名称,使用 pycharm -> refactor 重命名整个项目. 2.修改 m ...