Year Selector - vertical menu - v2

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="group-start active"><a href="#" datavalue="2014 YTD : Totals"><span>2014 YTD:</span> Totals</a></li>
                <li><a href="#" data-value="2014 YTD : New"><span>2014 YTD:</span> New</a></li>
                <li><a href="#" data-value="2014 YTD : Renewal"><span>2014 YTD:</span> Renewal</a></li>
                <li><a href="#" data-value="2014 YTD : Multi-Year"><span>2014 YTD:</span> Multi-Year</a></li>
                
                <li class="group-start"><a href="#" data-value="2013 : Totals"><span>2013:</span> Totals</a></li>
                <li><a href="#" data-value="2013 : New"><span>2013:</span> New</a></li>
                <li><a href="#" data-value="2013 : Renewal"><span>2013:</span> Renewal</a></li>
                <li><a href="#" data-value="2013 : Multi-Year"><span>2013:</span> Multi-Year</a></li>
                
                <li class="group-start"><a href="#" data-value="2012 : Totals"><span>2012:</span> Totals</a></li>
                <li><a href="#" data-value="2012 : Renewal"><span>2012:</span> Renewal</a></li>
                <li><a href="#" data-value="2012 : Multi-Year"><span>2012:</span> Multi-Year</a></li>
            </ul>
        </div>
    </div>
</div>

<p><a href="http://jsfiddle.net/rolfsf/568Yp/embedded/result/" target="new">Version 1</a>
<p>Version 2</p>
<p><a href="http://jsfiddle.net/rolfsf/3UZqD/embedded/result/" target="new">Version 3</a></p>

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: 12em;
}
.hover-select {
    position: absolute;
    left: 50%;
    bottom: .5em;
    margin-left: -7em;
    width: 12em;
    z-index: 5;
    background: $current;
    color: #FFF;
    border-radius: 3em;
    padding: .3em 1em;
    font-size: 0.75em;
    text-transform: uppercase;
    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: 12em;
    background: #EEE;
    border: 1px solid #DDD;
    border-radius: .25em;
    margin: 0 auto;
    padding-bottom: .5em;
    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: .6em;
        text-transform: uppercase;
        color: #999;
        font-weight: normal;
        margin-top: 1em;
            border-bottom: 1px solid #CCC;
        }
    ul {    
        position: relative;
        margin: 0 auto;
        padding: 0 .5em 0;
        list-style: none;
        max-height: 18em;
        overflow:auto;
    }
    >ul>li {
        position: relative;
        display: block;
        border-bottom: 1px solid #EEE;
        background-color: #FFF:
    }
    >ul >li:hover {
       //border-color: $link-color;
       cursor: pointer;
    }
     li.group-start {
        margin-top: .5em;
     ...

JavaScript

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

$('.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 a', function(){
    var value = $(this).data('value');
    $('.hover-select-menu li').removeClass('active');
    $(this).parents('li').addClass('active');
    $('.hover-select span').text( value);
    $('.hover-select-menu').fadeOut('fast');
});