CSS Arrow Nav 3

This really doesn't need a description. Open your eyes fool! Version 1 here: http://jsfiddle.net/allusis/Qj46y/

HTML

<script src="http://fonts.googleapis.com/css?family=PT+Sans+Narrow&amp;v1"></script>
<script src="http://fonts.googleapis.com/css?family=Volkhov:400italic,700"></script>
<script src="http://dl.dropbox.com/u/1621719/development/JSFiddle/js/jquery.easing.1.3.js"></script>
<script src="http://dl.dropbox.com/u/1621719/development/JSFiddle/js/jquery.slicebox.min.js"></script>
<script src="http://dl.dropbox.com/u/1621719/development/JSFiddle/js/modernizr.custom.13303.js"></script>
<div class="wrapper"><!-- Wrapper begin -->
  <div class="header"><!-- Header begin -->
      
    <div class="container"><!-- Header Container begin -->

      <nav>
        <ul class="primary-nav">
          <li><a href="#">Forty-Nine</a></li>
          <li><a href="#">Three Times</a></li>
          <li><a href="#">About Us</a></li>
          <li><a class="selected" href="#">Home</a></li>
        </ul>
        <br class="clear">
      </nav>
    </div><!-- Header Container end -->
  </div><!-- Header end -->

  <div class="content"><!-- Content begin -->
      
    <div class="container"><!-- Content Container begin -->
        
        <div class="left"><!-- Container / Left begin -->
          <ul class="secondary-nav box">
            <li><a href="#">Mission Statement</a></li>
            <li><a href="#">Staff and Board</a></li>
            <li><a href="#">Membership Program</a></li>
            <li><a href="#">Services</a></li>
          </ul>
          <div class="box02">
              <h3>Photographs</h3>
          </div>
        </div><!-- Container / Left end -->
      
        <div class="right"><!-- Container / Right begin -->
    <div id="sb-slider" class="sb-slider">
        <img src="http://dl.dropbox.com/u/1621719/development/JSFiddle/images/1.jpg" title="Creative Lifesaver"/>
        <img src="http://dl.dropbox.com/u/1621719/development/JSFiddle/images/2.jpg" title="Honest Entertainer"/>
        <img src="http://dl.dropbox.com/u/1621719/development/JSFiddle/images/3.jpg"...

CSS

@media screen {
@font-face {
  font-family: 'Yanone Kaffeesatz';
  font-style: normal;
  font-weight: 300;
  src: local('Yanone Kaffeesatz Light'), local('YanoneKaffeesatz-Light'), url('http://themes.googleusercontent.com/static/fonts/yanonekaffeesatz/v2/We_iSDqttE3etzfdfhuPRVMR8FhBa8rkfAKaPBwAU3s.woff') format('woff');
}
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
html, body {height:100%;background:url('http://dl.dropbox.com/u/1621719/development/JSFiddle/images/backgrounds/tanney.png');background-repeat:repeat;font:16px/1.4 "myriad-pro-1","myriad-pro-2", "Lucida Grande", Sans-Serif;}
.clear {clear:both;height:0;line-height:0;}
.wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
  width:940px;
  background:#fff;
  
  -moz-box-shadow:0 0 15px rgba(100,100,100,0.4);
  -webkit-box-shadow:0 0 15px rgba(100,100,100,0.4);
  box-shadow:0 0 15px rgba(100,100,100,0.4);
}

.header {
 ...

JavaScript

$(function() {               
    $('#sb-slider').slicebox({
        slicesCount          : 5,
        disperseFactor       : 30,
        sequentialRotation   : true,
        sequentialFactor     : 100
    });
                
    if( !Modernizr.csstransforms3d ) {
        $('#sb-note').show();
        $('#sb-examples > li:gt(2)').remove();
        $('body').append(
        $('script').attr('type','text/javascript').attr( 'src', 'js/jquery.easing.1.3.js'));
    }    
});

// Windows renders custom fonts very badly, so we disable them.
if (/win/i.test(navigator.platform)) {
  $(window).load(function() {
    if (!document.styleSheets) { return; }

    for (var i = 0; i < document.styleSheets.length; i++) {
      var sheet = document.styleSheets[i];
      var rules = sheet.cssRules || sheet.rules;
      var fontRules = [];
      for (var j = 0; j < rules.length; j++) {
        var rule = rules[j];
        if (rule.type == 5) {  // @font-face rule
          fontRules.push(j);
        }
      }
      for (var j = fontRules.length - 1; j >= 0; j--) {
        if (sheet.deleteRule) {
          sheet.deleteRule(fontRules[j]);
        } else if (sheet.removeRule) {
          sheet.removeRule(fontRules[j]);
        }
      }
    }  
  });  
}