Snap Builder Public Codes Library
Snap | Generators | Login | Browse | Search | Enter Code | Export Snap Builder Public Codes Library

 

Category: Cascading Style Sheets (HTML5 - SCSS - CSS3 & CSS) >> Menus & Navigation >> Pure CSS3 Dynamic Navigation Menu With Transitions


Code Snippet </> Info


Snippet Name: Pure CSS3 Dynamic Navigation Menu With Transitions

Description: Add a cool CSS3 dynamic navigation menu with transition effects that are sure to get your visitors attention.
Example: View Code Demo

Note:

Author: SnapBuilder <snippets@snapbuilder.com>

Last Modified: 2015-03-20 00:21:32

Language: css

Highlight Mode: css

Copy Codes: Use Free Notepad ++
Bookmark and Share

Snap HTML Code Editor:
Paste the source code, make changes and instantly see it in live preview.
Snap HTML Code Editor


  About Copying

<!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>


[ Snippet Options ]

 

© 2002 -  Snap Builder Public Codes Library