Vertical navigation for author box

Christian Heilmann tarafından Html5 ve Css3 Kullanılarak hazırlanmış olan animasyonlu bir menü  örneği. Sayfa  açılır  açılmaz menü  açıklaması yukarıdan aşağı iniyor ve  menü penceresi büyüyüp tekrar küçülüyor. Daha sonra  menü  çerçevesi mouse ile her karşılaştığında aynı şekilde büyüme işlemini gerçekleştiriyor.

Kullanım

• Head  etiketleri arasına eklenmesi gereken bölüm.

Css : 

<style type="text/css">
    *{margin:0;padding:0;font-size:14px;}
    body{font-family:arial,sans-serif;background:#6CC1EA;padding:1em}
    .character{
      background:url(codepo8.png) no-repeat center top #fff;
      padding:250px 0 0 0;
      text-align:center;
      position:absolute;
      top:0;
      left:0;
      width:320px;
      height:70px;
      -moz-border-radius:160px;
      -moz-box-shadow:5px 5px 5px rgba(0,0,0,.4); 
      -webkit-border-radius:160px;
      -webkit-box-shadow:5px 5px 5px rgba(0,0,0,.4); 
      border-radius:160px;
      box-shadow:5px 5px 5px rgba(0,0,0,.4); 
      font-size:20px;
      color:#333;
    }
    .character a{
      display:block;
      color:#369;
      text-decoration:none;
    }
    #whonav{margin-left:290px}
    #booknav{margin-left:315px}
    #blognav{margin-left:330px}
    #videonav{margin-left:345px}
    #audionav{margin-left:330px}
    #meetnav{margin-left:310px}
    #container{
      position:relative;
      height:200px;
      width:600px;
      margin:0 auto;
      -moz-transform:scale(.3);
      -moz-transition:all .5s;
      -webkit-transform:scale(.3);
      -webkit-transition:all .5s;
      -o-transform:scale(.3);
      -o-transition:all .5s;
      transform:scale(.3);
      transition:all .5s;
    }
    #container:hover{
      -moz-transform:scale(1);
      -webkit-transform:scale(1);
      -o-transform:scale(1);
      transform:scale(1);
    }
    .mainnav li{
      list-style:none;
      display:block;
    }
    .mainnav a,section h1{
      text-decoration:none;
      font-family:calibri,arial,sans-serif;
      font-weight:bold;
      font-size:40px;
      color:#fff;
      text-shadow:1px 2px 1px rgba(0,0,0,.9);
      -moz-transition:all .5s;
      -webkit-transition:all .5s;
      -o-transition:all .5s;
      transition:all .5s;
    }
    .mainnav a:hover{
      color:#F8931D;
      -moz-transform:scale(1.1);
      -webkit-transform:scale(1.1);
      -o-transform:scale(1.1);
      transform:scale(1.1);
    }
    section{
      display:block;
      margin:150px auto 0 auto;
      width:600px;
    }
    section h1{font-size:30px;margin-bottom:10px}
    #container {
      -moz-animation-delay:.5s;
      -moz-animation-duration: 1s;
      -moz-animation-name: slidein;
      -webkit-animation-delay:.5s;
      -webkit-animation-duration: 1s;
      -webkit-animation-name: slidein;
      -o-animation-delay:.5s;
      -o-animation-duration: 1s;
      -o-animation-name: slidein;
    }
    @-o-keyframes slidein {
      0% {-o-transform:scale(.3);}
      50% {-o-transform:scale(1);}
      100% {-o-transform:scale(.3);}
    }
    @-moz-keyframes slidein {
      0% {-moz-transform:scale(.3);}
      50% {-moz-transform:scale(1);}
      100% {-moz-transform:scale(.3);}
    }
    @-webkit-keyframes slidein {
      0% {-webkit-transform:scale(.3);}
      50% {-webkit-transform:scale(1);}
      100% {-webkit-transform:scale(.3);}
    }
    section{
      -moz-animation-duration: 1s;
      -moz-animation-name: movein;
      -webkit-animation-duration: 1s;
      -webkit-animation-name: movein;
      -o-animation-duration: 1s;
      -o-animation-name: movein;
      animation-duration: 1s;
      animation-name: movein;
    }
    @-webkit-keyframes movein {
      from {margin-top:-200px;}
      to {margin-top:150px;}
    }
    @-o-keyframes movein {
      from {margin-top:-200px;}
      to {margin-top:150px;}
    }
    @-moz-keyframes movein {
      from {margin-top:-200px;}
      to {margin-top:150px;}
    }
  </style>

•  Body etiketleri arasına eklenmesi gereken bölüm.

Html : 

  <div id="container">
  <header>
    <h1 class="character">Christian Heilmann <a href="#">@codepo8</a></h1>
  </header>
  <nav>
    <ul class="mainnav">
      <li id="whonav"><a href="#about">Who am I?</a></li>
      <li id="booknav"><a href="#books">Things I wrote</a></li>
      <li id="blognav"><a href="#blogs">Where I write</a></li>
      <li id="videonav"><a href="#video">See me talk</a></li>
      <li id="audionav"><a href="#audio">Hear me talk</a></li>
      <li id="meetnav"><a href="#meet">Meet me</a></li>
    </ul>
  </nav>
  </div>
  <section>
    <h1>Just a demo for a small zooming menu</h1>
    <p>This is bells and whistles, and was probably done several times in Flash in the past. But I thought I give it a go to do it in CSS3 :). Roll over the menu above to use it.</p>
  </section>

License : BSD