Vertical Nav Menu

Vanilla JavaScript menu from JSON

by jewelsjacobs

HTML

<div id="container">
    <ul id="menu" class="menu"></ul>
</div>

CSS

body{
    font-size: 12px;
    font-family:"Arial", Arial, sans-serif;
}

#container {
    width: 150px;
}

#container ul {
    margin: 0px;
    padding: 0px;
}

#container li {
    list-style: none;
    position: relative;
}

li {
    border: 1px solid #292827;
    background-color: black;
    width: 120px;
    height: 20px;
    padding: 0 9px 0 9px;
}

#container a {
    color: #A36220;
    cursor: pointer;
    display: block;
    height: 25px;
    line-height: 20px;
    text-indent: 3px;
    text-decoration: none;
    width: 100%;
}

div {
    vertical-align: middle;
}

.arrow {
    float:right;
}

.title {
    float:left;
}

ul.subMenu li {
    float:left;
}

li .subMenu {
    display: block;
    position: absolute;
    left: 139px;
    top: -1px;
}

JavaScript

(function () {

    var menuData = {
        "menu":[
            {
                "title" : "Game",
                "submenu" : [
                    {
                        "title":"Cool Games",
                        "uri": "#"
                    },
                    {
                        "title":"More Cool Games",
                        "uri":"#"
                    }
                ],
                "uri" : "#"
            },
            {
                "title" : "Community",
                "uri" : "#"
            },
            {
                "title" : "Media",
                "submenu" : [
                    {
                        "title":"Cool Media",
                        "uri": "#"
                    },
                    {
                        "title":"More Cool Media",
                        "uri":"#"
                    }
                ],
                "uri" : "#"
            },
            {
                "title" : "Forums",
                "submenu" : [
                    {
                        "title":"Gameplay",
                        "submenu" : [
                            {
                                "title":"Cool Gameplay",
                                "uri": "#"
                            },
                            {
                                "title":"More Cool Gameplay",
                                "uri":"#"
                            }
                        ],
                        "uri": "#"
                    },
                    {
                        "title":"Classes",
                        "submenu" : [
                            {
                                "title":"Barbarian",
                                "uri": "#"
                            },
                            {
                                "title":"Demon Hunter",
                                "uri":"#"
                            },
                            {
             ...