A Day in the Life of a Web Developer: Source Code Release

Here is the video
<html>
<head>
 <style type="text/css">
  body {
   background:#9cb4b3;
  }
  div.moving_arrow {
   width:640px;
   height:25px;
   margin:50px auto;
  }
  .moving_arrow ul {
   margin:0;
   padding:10px;
   border-radius:8px;
   height:inherit;
   width:inherit;
   background:-webkit-gradient(
    linear, 
    left top, 
    left bottom, 
    color-stop(0, #fff),
    color-stop(1, #e5e5e5)
   ) #e5e5e5;
   -webkit-box-shadow:0px 0px 6px #555;
  }
  .moving_arrow ul li {
   list-style:none;
   float:left;
   margin-right:11px;
  }
  .moving_arrow ul li a {
   display:block;
   float:left;
   padding:4px 8px 8px 8px;
   font-family:helvetica;
   text-shadow:0px 1px 1px white;
   color:#666;
   font-weight:700;
   text-decoration:none;
  }
  .moving_arrow li img {
   float:left;
   padding:4px 3px 8px 8px;
  }
  #arrow {
   width:12px;
   -webkit-transition:margin-left 400ms ease-out;
   margin-left:50px;
  }
  #arrow svg, #arrow polygon {
   width:12px;
  }
  #arrow.home {margin-left:54px;}
  #arrow.apps {margin-left:150px;}
  #arrow.blog {margin-left:233px;}
  #arrow.about {margin-left:339px;}
  #arrow.support {margin-left:457px;}
  #arrow.contact {margin-left:569px;}
  #arrow polygon {
   text-shadow:0px 1px 1px black;
   -webkit-box-shadow:0px 0px 6px black;
  }
  
 </style>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
 <script type="text/javascript">
  $(function() {
   $(".moving_arrow ul li a").mouseover(function() {
    $("#arrow").removeAttr("class").addClass($(this).attr("class"));
    return false;
   });
  });
 </script>
</head>
<body>
 <div class="moving_arrow">
  <ul>
   <li>
    <img src="icon.png"/>
    <a class="home" href="">Home</a>
   </li>
   <li>
    <img src="icon.png"/>
    <a class="apps" href="">Apps</a>
   </li>
   <li>
    <img src="icon.png"/>
    <a class="blog" href="">Blog</a>
   </li>
   <li>
    <img src="icon.png"/>
    <a class="about" href="">About Us</a>
   </li>
   <li>
    <img src="icon.png"/>
    <a class="support" href="">Support</a>
   </li>
   <li>
    <img src="icon.png"/>
    <a class="contact" href="">Contact</a>
   </li> 
  </ul>
  <div id="arrow">
   <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="12px" height="7px">
    <polygon id="arrow_thumb_shadow" points="0,0 6,7 12,0" fill="#333"/>
    <polygon id="arrow_thumb" points="0,0 6,6 12,0" fill="#e5e5e5"/>
   </svg>
  </div>
 </div>
</body>
</html>
A Day in the Life of a Web Developer

Tuesday, July 5, 2011

Source Code Release - CSS3 Animation Menu

No comments:

Post a Comment
