Menu Zoom con HTML5

Este ejemplo HTML5 le muestra como crear un menu sin javascript solo css y html5


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Zooming menu demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<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>
</head>
<body>
<div id="container">

<header>
<h1 class="character">Christian Heilmann <a href="http://twitter.com/codepo8">@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>
</body>
</html>
Autor: Christian Heilmann - Fuente

Enlaces patrocinados:



Comentarios

miguel:
2013-11-25 17:11:38

NO funciona en Internet Explorer!!! por favor ayuda

Deje un Comentario
[Opcional]
(No se mostrará en el sitio)
[Opcional]
[Opcional]
SyntaxHighlighter.config.stripBrs=true;