Follow links inside Switcher

back to documentation

HTML


        <div class="switcher-container">
          <div class="filter-widget">
            <span class="filter-active">Other links</span>
            <div class="switcher">
              <ul>
              	<li><a href="http://www.giovannibuffa.it/" target="_blank">Personal portfolio</a></li>
                <li><a href="http://shakemap.giovannibuffa.it/" target="_blank">ShakeMap</a></li>
                <li><a href="https://drupal.org/user/272123" target="_blank">Drupal profile</a></li>
                <li><a href="http://www.google.it/" target="_blank">Google</a></li>
              </ul>
            </div>
          </div>
        </div>
        

CSS


        .switcher{display:none;}
                
        .switcher-container{
        width:250px;
        margin:0 auto;
        }
        
        .filter-widget{
        position:relative;
        }
        
        .filter-active{
        display:block;
        width:230px;
        height:35px;
        background:#9FE9BD;
        border-radius:5px;
        cursor:pointer;
        padding:15px 0 0 20px;
        font:1.3em 'Bariol Regular', Arial, sans-serif;
        position:relative;
        }
        
        .filter-active:after{
        content:"ยป";
        font:1.8em/1 'Bariol Light', Arial, sans-serif;
        position:absolute;
        right:20px;
        top:9px;
        -ms-transform:rotate(90deg);
        -webkit-transform:rotate(90deg);
        transform:rotate(90deg);
        }
        
        .switcher{
        background:#9FE9BD;
        width:250px;
        position:absolute;
        left:0;
        top:47px;
        border-radius:0 0 5px 5px;
        }
        
        .switcher ul{
        padding:0 20px;
        }
        
        .switcher li{
        list-style:none;
        padding:6px 0;
        border-bottom:1px solid #fff;
        }
        
        .switcher li:last-child{
        border:none;
        }
        
        .switcher a{
        font:1.1em 'Bariol Regular', Arial, sans-serif;
        text-decoration:none;
        }
        
        .switcher a.selected{
        color:#000;
        }
        

jQuery


        jQuery('.switcher-container').switcher({follow:true});