Year Selector - vertical menu - v3

by rolfsf

HTML

<div class="banner">
    <div class="hover-select-container">
        <div class="hover-select" title="Mouse over to select a different policy year"><span>2014 YTD : Totals</span></div>

        <div class="hover-select-menu">
            <h1>Select Policy Year View</h1>
            <ul>
                <li class="hover-select-group"><span>2014 YTD</span>
                    <ul>
                        <li class="hover-select-item active"><a href="javascript:void();" data-value="2014 YTD : Totals">Totals</a></li>
                        <li class="hover-select-item"><a href="javascript:void();" data-value="2014 YTD : New">New</a></li>
                        <li class="hover-select-item"><a href="javascript:void();" data-value="2014 YTD : Renewal">Renewal</a></li>
                        <li class="hover-select-item"><a href="javascript:void();" data-value="2014 YTD : Multi-Year">Multi-Year</a></li>
                    </ul>                
                </li>
                <li class="hover-select-group"><span>2013</span>
                    <ul>    
                        <li class="hover-select-item"><a href="javascript:void();" data-value="2013 : Totals">Totals</a></li>
                        <li class="hover-select-item"><a href="javascript:void();" data-value="2013 : New">New</a></li>
                        <li class="hover-select-item"><a href="javascript:void();" data-value="2013 : Renewal">Renewal</a></li>
                        <li class="hover-select-item"><a href="javascript:void();" data-value="2013 : Multi-Year">Multi-Year</a></li>
                    </ul>                
                </li>
            </ul>

        </div>
    </div>
</div>


<p><a href="http://jsfiddle.net/rolfsf/568Yp/embedded/result/" target="new">Version 1</a></p>
<p><a href="http://jsfiddle.net/rolfsf/UaApf/embedded/result/" target="new">Version 2</a></p>
<p><strong>Version 3</strong></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;
    box-shadow: 0px 0px 4px rgba(0,0,0,0.3);
    z-index: 0;
    
    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: 20em;
        overflow:auto;        
        } 
    
   .hover-select-group {    
        margin: .5em 0 .5em;
    }
    .hover-select-group > span {
      font-size: .85em;
      display: block;
      font-weight: bold;
      background: #FFF;
      padding: .25em 0;
      border-bottom: 1px solid #EEE;
    }
    .hover-select-item {
        position: relative;
        display: block;
        border-bottom: 1px solid #EEE;
        background-color: #FFF;
    }
   ...

JavaScript

$('.hover-select-menu').on('click', '.hover-select-item a', function(){
    var selection = $(this);
    var value = $(selection).data('value');
    var container = $(selection).parents('.hover-select-container');
    $(container).find(' .hover-select-item').removeClass('active');
    $(selection).parent('li').addClass('active');
    $(container).find('.hover-select span').text( value);
    $(container).find('.hover-select-menu').fadeOut('fast');
});

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

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