FICOM navigation

by John Allan

HTML

<div class="wrapper">
<ul class="navigation"></ul>
<div class="chart"></div>
</div>

CSS

ul, li {
    list-style:none;
    margin:0;
    padding:0;
}
.navigation {
    float:left;
    width:200px;
}
.navigation ul {
    background:#eee;
    display:none;
}
.navigation .active ul {
    display:block;
}
.navigation a {
    display:block;
    text-decoration:none;
}
.navigation > li > a {
    background:blue;
    border-bottom:1px solid white;
    color:white;
    padding:10px 15px;
    position:relative;
}
.navigation > li > a:after {
    content: " ";
    display:block;
    border:6px solid transparent;
    border-left-color:white;
    height:0;
    margin-top:-6px;
    position:absolute;
    right:5px;
    top:50%;
    width:0;
}

.navigation > li.active > a {
    border-bottom:0;
}
.navigation > li.active > a:after {
    border-left-color:transparent;
    border-top-color:white;
    margin-top:-3px;
    right:10px;
}

.navigation > li ul a {
    border-top:1px solid black;
    color:black;
    padding:10px 15px 10px 25px;
}

.navigation > li ul li.active a {
    background:#ccc;
}

.navigation > li ul li:first-child a {
    border-top:none;
}
.chart {
    border:1px solid black;
    margin-left:250px;
    min-height:100px;
}

JavaScript

var data = [
    {
        'label': 'Province',
        'items': [
            {
                'label': 'All',
                'id': '00'
            }
        ]
    },
    {
        'label': 'Economic Regions',
        'items': [
            {
                'label': 'Lower Mainland',
                'id': '01'
            },
            {
                'label': 'Cariboo',
                'id': '02'
            },
            {
                'label': 'North Coast',
                'id': '03'
            }
        ]
    },
    {
        'label': 'Municipalities',
        'items': [
            {
                'label': 'Vancouver',
                'id': '01'
            },
            {
                'label': 'Prince George',
                'id': '02'
            },
            {
                'label': 'Clearwater',
                'id': '03'
            }
        ]
    }
];

var elements = {
    'navigation': $('.navigation'),
    'chart': $('.chart'),
    'accordionTopLevel': null,
    'accordionSecondLevel': null
};

handleAccordionClick = function (e) {
    var $this = $(this)
        $parent = $this.parent();
    
    e.preventDefault();
    
    if ($parent.hasClass('active')) {
        $parent.removeClass('active');
        return;
    }
    
    elements.accordionTopLevel.removeClass('active');
    $parent.addClass('active');
};

handleGetChartClick = function (e) {
    e.preventDefault();
    elements.accordionSecondLevel.removeClass('active');
    $(this).parent().addClass('active');
    
    getChart(e);
};

getChart = function (e) {
    var $this = $(e.currentTarget),
        id, label;
    
    id = $this.attr('data-id');
    label = $this.text();
    
    //$.getJSON('/home/chartwebservice', function (data) { 
        //instantiate chart here
        elements.chart.text(id + ' | ' + label);
    //});
};

buildNavigation = function (data) {

    $.each(data, function(index, value) {
        var $li = $('<li>'),
            $a =...