<!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>Animált menü</title>
      <meta name="author" content="Tóth Péter" />
      <meta name="copyright" content="© 2012, NYME SEK" />
      <meta http-equiv="date" content="2012-11-15" />
      <meta name="revised" content="Tóth Péter, 15/11/2012" />
      <meta name="description" content="CSS3 - Animált menü" />
      <meta http-equiv="content-language" content="hu" />
      <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
      <style type="text/css">
         *{
            margin:0;
            padding:0;
            }
         /* Általános háttér beállítása */
         body{
            font-size:14px;
            color:#666;
            background:#111 no-repeat;
            background-image:-moz-radial-gradient(center -100px 45deg, circle farthest-corner, #444 150px, #111 300px);
            background-image:-webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111));
            }
         /* Felső felirat */
         h1{
            color:#fff;
            font-size:30px;
            font-weight:normal;
            padding:60px 0 20px;
            text-align:center;
            }
         /* Navigációs menü általános megjelenése */
         #navigationMenu li{
            list-style:none;
            height:39px;
            padding:2px;
            width:40px;
            }
         /* Gombok elhelyezése */
         #main{
            margin:80px auto;
            position:relative;
            width:40px;
            }
         /*
            Általánosan beállítjuk a gombok méretét, hátterét
            Minden egyes gomb ugyanazt a képet jeleníti meg, csak abból egy kis terület látható ténylegesen!
            Minden egyes gomb tényleges megjelenését külön-külön kell definiálni
         */
         #navigationMenu a{
            background:url('menukep.jpg') no-repeat;
            height:39px;
            width:38px;
            display:block;
            position:relative;
            }
         /* Egér megjelenésekor árnyékolt keretet adunk a gombnak */
         #navigationMenu a:hover{
            text-decoration:none;
            -moz-box-shadow:0 0 10px #9ddff5;
            -webkit-box-shadow:0 0 10px #9ddff5;
            box-shadow:0 0 10px #9ddff5;
            }
         /* Zöld gomb */
         #navigationMenu .kezdo {
            background-position:0 0;
            }
         #navigationMenu .kezdo:hover {
            background-position:0 -39px;
            }
         #navigationMenu .kezdo span{
            background-color:#7da315;
            color:#3d4f0c;
            text-shadow:1px 1px 0 #99bf31;
            }
         /* Kék gomb */
         #navigationMenu .info {
            background-position:-38px 0;
            }
         #navigationMenu .info:hover {
            background-position:-38px -39px;
            }
         #navigationMenu .info span{
            background-color:#1e8bb4;
            color:#223a44;
            text-shadow:1px 1px 0 #44a8d0;
            }
         /* Narancs gomb */
         #navigationMenu .szerviz {
            background-position:-76px 0;
            }
         #navigationMenu .szerviz:hover {
            background-position:-76px -39px;
            }
         #navigationMenu .szerviz span{
            background-color:#c86c1f;
            color:#5a3517;
            text-shadow:1px 1px 0 #d28344;
            }
         /* Sárga gomb */
         #navigationMenu .dokumentum {
            background-position:-114px 0;
            }
         #navigationMenu .dokumentum:hover{
            background-position:-114px -39px;
            }
         #navigationMenu .dokumentum span{
            background-color:#d0a525;
            color:#604e18;
            text-shadow:1px 1px 0 #d8b54b;
            }
         /* Lila gomb */
         #navigationMenu .kapcsolat {
            background-position:-152px 0;
            }
         #navigationMenu .kapcsolat:hover {
            background-position:-152px -39px;
            }
         #navigationMenu .kapcsolat span{
            background-color:#af1e83;
            color:#460f35;
            text-shadow:1px 1px 0 #d244a6;
            }
         /* Szöveges menü megjelenése alap esetben (animálás beállítása) */
         #navigationMenu span{
            width:0;
            left:38px;
            padding:0;
            position:absolute;
            overflow:hidden;
            font-size:18px;
            font-weight:bold;
            letter-spacing:0.6px;
            white-space:nowrap;
            line-height:39px;
            -webkit-transition: 0.25s;
            -moz-transition: 0.25s;
            transition: 0.25s;
            }
         /* Szöveges menü megjelenésének bekapcsolása ha a menüre kerül az egér */
         #navigationMenu a:hover span{
            width:auto;
            padding:0 20px;
            overflow:visible;
            }
      </style>
   </head>
   <body>
      <h1>Egyszerű kialakítású CSS3 menü</h1>
      <div id="main">
         <ul id="navigationMenu">
            <li>
               <a class="kezdo" href="#"><span>Kezdőlap</span></a>
            </li>
            <li>
               <a class="info" href="#"><span>Információ</span></a>
            </li>
            <li>
               <a class="szerviz" href="#"><span>Szervíz</span></a>
            </li>
            <li>
               <a class="dokumentum" href="#"><span>Dokumentumok</span></a>
            </li>
            <li>
               <a class="kapcsolat" href="#"><span>Kapcsolat</span></a>
            </li>
         </ul>
      </div>
   </body>
</html>