BE Motorsport, Navigation

A quick test, using a single arrow image, animation and position to visually identify current active page, and hover.

by beneverard

HTML

<ul>
    <li><a href="#" class="active">Home</a></li>
    <li><a href="#">Proflie</a></li>
    <li><a href="#">Gallery</a></li>
    <li><a href="#">Contact</a></li>
</ul>

CSS

body {
    font-family: sans-serif;
    color: white;
  background: #191919 url('http://dl.dropbox.com/u/813705/background.png') repeat;  
    padding: 0;
}

ul {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d83901), color-stop(100%,#9c2602));
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0, 0, 0, .5);
}

li {
    float: left;   
}

a {
    color: white;
    text-decoration: none;
    padding: 20px; 
    display: block;  
    
    -webkit-transition: all 0.2s ease-in-out;
    padding-bottom: 35px;
    margin-bottom: -15px;
    background: url('http://dl.dropbox.com/u/813705/nav_arrow.png') no-repeat 50% bottom;
}

a.active {
    padding-bottom: 25px;
    margin-bottom: -5px;
    
}

a:hover, a.active:hover {
    padding-bottom: 20px;
    margin-bottom: 0; 
}

JavaScript

//
// A quick test to see how usign a single arrow image, position
// and animation could identify the current page, and highlight
// on the hover action
//

$(document).ready(function() {
   
    $('ul a').click(function(event) {
        
        event.preventDefault();
       
        $('ul a').removeClass('active');
        
        $(this).addClass('active');
        
    }); 
    
});