| Pure CSS3 Dynamic Navigation Menu With Transitions - Add a cool CSS3 dynamic navigation menu with transition effects that are sure to get your visitors attention. Example: View Code Demo |
<!DOCTYPE html>
<html>
<head>
<title>HTML5 CSS3 Dynamic Navigation Menu With Transitions</title>
<style>
/* Begin HTML5 CSS3 Dynamic Navigation Menu With Transitions */
/* == 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 == */
BODY {font-family:verdana,arial,ms sans serif; font-size:90%; background-color:#ffffff; color:#000000;}
#content {margin:0; padding:15px 15px 15px 15px;}
.nav {list-style:none;}
.nav li a {
background-color:#eee;
width:100px;
padding:5px 15px;
margin-top:7px;
display:block;
text-decoration:none;
color:#333;
font-family:verdana, arial, helvetica, sans-serif;
font-size:12px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
-ms-border-radius:10px;
border-radius:10px;
-webkit-box-shadow:3px 3px 3px rgba(0,0,0,.3);
-moz-box-shadow:3px 3px 3px rgba(0,0,0,.3);
-o-box-shadow:3px 3px 3px rgba(0,0,0,.3);
-ms-box-shadow:3px 3px 3px rgba(0,0,0,.3);
box-shadow:3px 3px 3px rgba(0,0,0,.3);
-webkit-transition:all 0.25s ease;
-moz-transition:all 0.25s ease;
-o-transition:all 0.25s ease;
-ms-transition:all 0.25s ease;
transition:all 0.25s ease;
}
.nav li a:hover {
background-color:#666;
color:#eee;
-webkit-transform:scale(1.2);
-moz-transform:scale(1.2);
-o-transform:scale(1.2);
-ms-transform:scale(1.2);
transform:scale(1.2);
z-index:2;
margin-left:25px;
}
</style>
</head>
<body>
<div id="content">
<h3>HTML5 CSS3 Dynamic Navigation Menu With Transitions</h3>
<p>Hover your mouse over navigation buttons to see the transition effect.</p>
<ol class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Contact Us</a></li>
</ol>
<br /><br />
<div align="left">
[ This code example from <a href="http://snapbuilder.com/code_snippets/copy_code_snippet_208.html">HTML5 CSS3 Dynamic Navigation Menu With Transitions Code Snippet</a> page. ]
</div>
</div>
</body>
</html>
|
Scroll