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. 异步串行通信的XON与XOFF

    在单片机的异步串行通信中,putchar函数中的实现中反复用到了XON和XOFF,定义原型如下: #define XON 0x11#define XOFF 0x13 查找ASCII码表,这两个对应的是 ...

  2. HTML & CSS设计与构建网站 ([美]达科特) PDF原版​

    HTML & CSS 设计与构建网站采用有别于许多传统编程书籍的新颖编排方式,将使您收到事半功倍的学习效果.每一页都在短小精悍的示例代码的引导下,简明直观.直截了当地阐述一个新主题. < ...

  3. 并发编程学习笔记之Java存储模型(十三)

    概述 Java存储模型(JMM),安全发布.规约,同步策略等等的安全性得益于JMM,在你理解了为什么这些机制会如此工作后,可以更容易有效地使用它们. 1. 什么是存储模型,要它何用. 如果缺少同步,就 ...

  4. 构建空Datatable

    方法一 DT = new DataTable(); DataRow DR = DT.NewRow(); //构建列(名称,数据类型) DT.Columns.Add("代码", Ty ...

  5. XXX培训机构Python自动化教程目录

  6. [Essay]看《Re:从零开始的异世界生活》的一些感想

    人生不能重来,但动漫可以. -- 故事背景 <介绍背景> 男主486通过不断重来,而改变了剧情的发展.整个动漫就像RPG游戏一般,只看了一遍没有完全理解,但后来再看萌娘百科才把整个剧情里所 ...

  7. 201621123012 《Java程序设计》第1周学习总结

    1. 本章学习总结 学习了java的理论知识和它与C语言的差别,什么是JVM,区分JRE与JDK并学习JAVA环境的安装.熟悉控制台下的常用命令,java函数的编写.熟练使用编写JAVA所需要的工具( ...

  8. 在一个java类里，private int a; 什么时候要使用integer

    private Integer index; if(index == null) index = 0; else this.index = index; Integer有一个明显的好处,就是它能比in ...

  9. php 写入csv时 双引号，逗号及特殊字符

    1.双引号 <?php function new_csv($string) { $filename = date('Ymd').'.csv'; //设置文件名 header("Cont ...

  10. Jquery each ajax 赋值

    <script type="text/javascript"> $(document).ready(function () { $("#mylist li s ...