Eine animierte CSS-Navigation erstellen

Um eine animierte Navigation für seine Website zu erstellen braucht man nicht unbedingt JavaScript oder gar Flash.
Es geht auch ganz einfach mit ein paar Zeilen CSS.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>CSS3-Menu</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<style type="text/css">
*
{
  margin:0;
  padding:0;
}

html
{
  height: 100%;
}

body
{
  position: relative;
  height: 100%;
}

.navbox
{
  position: relative;
  float: left;
}

ul.nav
{
  list-style: none;
  display: block;
  width: 200px;
  position: relative;
  top: 100px;
  left: 100px;
  padding: 60px 0 60px 0;
  -webkit-background-size: 50% 100%;
}

li
{
  margin: 5px 0 0 0;
}

ul.nav li a
{
  -webkit-transition: all 0.3s ease-out;
  background-color: #eee;
  color: #174867;
  padding: 7px 15px 7px 15px;
  -webkit-border-top-right-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;
  width: 100px;
  display: block;
  text-decoration: none;
  -webkit-box-shadow: 2px 2px 4px #888;
}

ul.nav li a:hover
{
  background-color: #ccc;
  color: #67a5cd;
  padding: 7px 15px 7px 30px;
}
</style>

</head>

<body>

<div class="navbox">
  <ul class="nav">
    <li><a href="#">PHP</a></li>
    <li><a href="#">MySQL</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">HTML</a></li>
    <li><a href="#">Ajax</a></li>
    <li><a href="#">CSS</a></li>
  </ul>
</div>

</body>
</html>

Über Enrico S.

Programmierer, Webdesigner, Grafiker, Blogger, Screencaster, Arduino- und eMobility Enthusiast. nefilim3006 ist auch bei Google+ vertreten

Kommentare geschlossen.