Year Selector - vertical menu - v1

by rolfsf

HTML

<div class="banner">
    <div class="hover-select-container">
        <div class="hover-select"><span>2014 YTD : Totals</span></div>

        <div class="hover-select-menu">
            <h1>Select Policy Year View</h1>
            <ul>
                <li class="year current"><span class="label">2014 YTD</span>
                    <ul>
                        <li class="segment active"><a href="#" data-year="2014 YTD" data-segment="Totals">Totals</a></li>
                        <li class="segment"><a href="#" data-year="2014 YTD" data-segment="New">New</a></li>
                        <li class="segment"><a href="#" data-year="2014 YTD" data-segment="Renewal">Renewal</a></li>
                        <li class="segment"><a href="#" data-year="2014 YTD" data-segment="Multi-Year">Multi-Year</a></li>
                    </ul>
                </li>
                <li class="year"><span class="label">2013</span>
                    <ul>
                        <li class="segment"><a href="#" data-year="2013" data-segment="Totals">Totals</a></li>
                        <li class="segment"><a href="#" data-year="2013" data-segment="New">New</a></li>
                        <li class="segment"><a href="#" data-year="2013" data-segment="Renewal">Renewal</a></li>
                        <li class="segment"><a href="#" data-year="2013" data-segment="Multi-Year">Multi-Year</a></li>
                    </ul>
                </li>    
                <li class="year"><span class="label">2012</span>
                    <ul>
                        <li class="segment"><a href="#" data-year="2012" data-segment="Totals">Totals</a></li>
                        <li class="segment"><a href="#" data-year="2012" data-segment="New">New</a></li>
                        <li class="segment"><a href="#" data-year="2012" data-segment="Renewal">Renewal</a></li>
                        <li class="segment"><a href="#" data-year="2012" data-segment="Multi-Year">Multi-Year</a></li>
            ...

SCSS

$current: #F15727;
$link-color: #46b0b9;

body {    font-family: "helvetica neue", helvetica, arial, sans-serif;}
.banner {
    position: relative;
    border-bottom: 1px solid #CCC;
    height: 4em;
}
.hover-select-container{
    position: absolute;
    right: 2em;
    bottom: 0;
    height: 1.5em;
    width: 9em;
}
.hover-select {
    position: absolute;
    left: 0;
    bottom: .5em;
    width: 10em;
    z-index: 5;
    background: $current;
    color: #FFF;
    border-radius: 3em;
    padding: .2em 1em;
    font-size: 0.75em;
    cursor: pointer;
    text-align: center;
    &:after {
        content: "";
        position: absolute;
        border: 0.625em solid transparent;
        border-top-color: $current;
        bottom: -1.2em;
        left: 50%;
        margin-left: -0.625em;    
     }
}

.hover-select-menu {
    display:none;
    position: absolute;
    top: 1em;
    width: 8.5em;
    padding: .25em .25em .5em;
    background: #EEE;
    border: 1px solid #DDD;
    border-radius: .25em;
    margin: 0 auto;
    text-align: center;
    z-index: 0;
    &:before {
        content: "";
        position: absolute;
        border: 0.625em solid transparent;
        border-bottom-color: #DDD;
        top: -1.25em;
        left: 50%;
        margin-left: -0.625em;
    }
    h1 {
        font-size: .5em;
        text-transform: uppercase;
        color: #999;
        font-weight: normal;
        }
    ul {    
        position: relative;
        margin: 0 auto;
        padding: 0;
        list-style: none;
    }
    >ul {
        width: 7.5em;
    }
    >ul>li {
        display: block;
        padding: .25em;
        margin-bottom: 1px;
        background: #F9F9F9;
        border-radius: .25em;
        border: 1px solid #CCC;
    }
    >ul >li:hover {
       border-color: $link-color;
       cursor: pointer;
    }
    > ul ul {
        height: 0; 
        margin-top: 0;
        transition: height 0.2s .15s ease, margin 0.2s .15s ease; /* Mouse enter: delay */
  ...

JavaScript

$('.hover-select-menu').on('click', 'a', function(){
    $('.hover-select-menu li, .hover-select-menu li').removeClass('current').removeClass('active');
    $(this).parents('.segment').addClass('active');
    $(this).parents('.year').addClass('current');
});

$('.hover-select-container').on('mouseenter', function(){
    $('.hover-select-menu').fadeIn('fast');
});

$('.hover-select-container').on('mouseleave', function(){
    $('.hover-select-menu').fadeOut('fast');
});

$('.hover-select-container').on('click', 'li.segment a', function(){
    var segment = $(this).data('segment');
    var year = $(this).data('year');
    $('.hover-select-menu li').removeClass('current').removeClass('active');
    $(this).parents('li.segment').addClass('active').parents('li.year').addClass('current');
    $('.hover-select span').text( year + ' : ' + segment);
    $('.hover-select-menu').fadeOut('fast');
});