Snap Builder HTML5 CSS3 Free Public Codes Library


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Pure CSS Accordion Menu Navigation</title>

<style>
/* Begin Pure CSS Accordion Menu Navigation */
/* == This Script Free To Use Providing This Notice Remains == */
/* == This Script Has Been Found In The http://snapbuilder.com Free Public Codes Library == */
/* == NOTICE:Though This Material May Have Been In A Public Depository, Certain Author Copyright Restrictions May Apply == */
/* == Created by: Aniket Pant : http://aniketpant.com/ : Creative Commons License == */
body {
font-family:'Cabin Sketch', 'Calibri';
}
#main {
margin-top:70px;
margin-left:300px;
}
footer {
margin-top:50px;
float:left;
width:100%;
text-align:center;
}
footer a {
text-decoration:none;
color:#488AC7;
-webkit-animation:move infinite 2s linear;
-moz-animation:move infinite 2s linear;
}
@-webkit-keyframes move {
0% { -moz-transform:rotate(0deg); }
25% { -moz-transform:rotate(10deg); }
75% { -moz-transform:rotate(-10deg); }
100% { -moz-transform:rotate(0deg); }
}
@-moz-keyframes move {
0% { -moz-transform:rotate(0deg); }
25% { -moz-transform:rotate(10deg); }
75% { -moz-transform:rotate(-10deg); }
100% { -moz-transform:rotate(0deg); }
}
@-webkit-keyframes float {
0% { margin-left:-1000px; }
25% { margin-left:500px; }
75% { margin-left:400px; }
100% { margin-left:300px; }
}
@-moz-keyframes float {
0% { margin-left:-1000px; }
25% { margin-left:500px; }
75% { margin-left:400px; }
100% { margin-left:300px; }
}
/* Accordion */
#main {
-webkit-animation:float 1 1.5s ease-in-out;
-moz-animation:float 1 1.5s ease-in-out;
}
.accordion {
list-style:none;
max-width:800px;
text-rendering:geometricPrecision;
font-family:'Calibri';
}
.accordion li {
float:left;
padding:20px;
width:100px;
height:175px;
max-height:200px;
background:#659EC7;
overflow:hidden;
box-shadow:inset 0px 0px 10px #ccc, 0px 0px 10px #659EC7;
-webkit-transition:all 0.5s ease-in-out;
-moz-transition:all 0.5s ease-in-out;
transition:all 0.5s ease-in-out;
}
.accordion li:hover {
width:300px;
background:#488AC7;
box-shadow:0px 0px 10px #488AC7;
-webkit-transform:scale(1.2);
-moz-transform:scale(1.2);
transform:scale(1.2);
-webkit-transition:all 0.6s ease-in-out;
-moz-transition:all 0.6s ease-in-out;
transition:all 0.6s ease-in-out;
}
.accordion li:first-child {
-webkit-border-radius:10px 0px 0px 10px;
-moz-border-radius:10px 0px 0px 10px;
border-radius:10px 0px 0px 10px;
}
.accordion li:last-child {
-webkit-border-radius:0px 10px 10px 0px;
-moz-border-radius:0px 10px 10px 0px;
border-radius:0px 10px 10px 0px;
}
.accordion li:first-child:hover {
-webkit-border-radius:0px;
-moz-border-radius:0px;
border-radius:0px;
-webkit-transform:scale(1.2) rotate(-2deg);
-moz-transform:scale(1.2) rotate(-2deg);
transform:scale(1.2) rotate(-2deg);
}
.accordion li:last-child:hover {
-webkit-border-radius:0px;
-moz-border-radius:0px;
border-radius:0px;
-webkit-transform:scale(1.2) rotate(2deg);
-moz-transform:scale(1.2) rotate(2deg);
transform:scale(1.2) rotate(2deg);
}
.accordion li a {
display:inline-block;
color:#fefefe;
text-decoration:none;
text-shadow:0px 0px 1px #000, 0px 0px 1px #333;
font-size:20px;
cursor:default;
}
.accordion .info {
display:none;
color:#FFF8C6;
line-height:22px;
}
.accordion li:hover > .info {
display:block;
}
</style>

<link href="http://fonts.googleapis.com/css?family=Cabin+Sketch:bold&v1" rel="stylesheet" type="text/css">

</head>
<body>

<div id="main">
<ul class="accordion">
<li><a href="#">Link#1</a>
<span class="info">This is just some rambling text placed here to provide enough text for this codes demonstration purpose. This is just some rambling text placed here to provide enough text for this codes demonstration purpose.</span></li>
<li><a href="#">Link#2</a>
<span class="info">This is just some rambling text placed here to provide enough text for this codes demonstration purpose. This is just some rambling text placed here to provide enough text for this codes demonstration purpose.</span></li>
<li><a href="#">Link#3</a>
<span class="info">This is just some rambling text placed here to provide enough text for this codes demonstration purpose. This is just some rambling text placed here to provide enough text for this codes demonstration purpose.</span></li>
<li><a href="#">Link#4</a>
<span class="info">This is just some rambling text placed here to provide enough text for this codes demonstration purpose. This is just some rambling text placed here to provide enough text for this codes demonstration purpose.</span></li>
</ul>
</div>

<footer>
<h3 align="center">Pure CSS Accordion Menu Navigation</h3>
<div align="center">Roll your cursor over the accordion blocks for an example.
<br />
[ This code example from <a href="http://snapbuilder.com/code_snippets/copy_code_snippet_223.html">Pure CSS Accordion Menu Navigation Code Snippet</a> page. ]
<br />
The floating entry is viewable in<br/>Mozilla Firefox 5, Webkit Browsers and Chrome<br />
Created by <a href="http://aniketpant.com" target="_new">Aniket Pant</a>
</footer>

</body>
</html>