Zoom Menu with HTML5

This HTML5 example shows you how to create a menu without javascrit, just css and 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>
Author: Christian Heilmann - Source

Sponsored Links:



Comments

Leave a comment
[Optional]
(Will not be shown on the site)
[Optional]
[Optional]

Recent Comments

SEO Training in Hyderabad said:

Bharat Go Digital Academy is a online e learning platform where we teach people the digital skills.

deekshitha said:

Informative blog <a href="https://360digitmg.com/data-analytics-certification-training-course-in-hyderabad">data ...

360DIGITMGtraining said:

I am impressed by the information that you have on this blog. It shows how well you understand this subject. https://360digitmg.com/digital-marketing-training-in-hyderabad ...

tanish velu said:

Thank you for your post, I look for such article along time, today i find it finally. this post give me lots of advise it is very ...

deekshitha said:

Informative blog <a href="https://360digitmg.com/digital-marketing-training-in-hyderabad">best ...

ssdd said:

dsddssd

360DIGITMGtraining said:

It's really nice and meaningful. it's a really cool blog.you have really helped lots of people who visit blogs and provide ...

amritabansal said:

In today's world Data Science is the most desirable course among students and professionals. When I came to know about this ...

data science course syllabus said:

Very Nice Article

princika sweety said:

I want to leave a little comment to support and wish you the best of luck we wish you the best of luck in all your blogging enedevores ...

SyntaxHighlighter.config.stripBrs=true;