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 >> CSS3 Simple Navigation Menu


Code Snippet </> Info


Snippet Name: CSS3 Simple Navigation Menu

Description: Add a CSS3 simple navigation menu with onhover change to your web page.
Example: View Code Demo

Note:

Author: SnapBuilder <snippets@snapbuilder.com>

Last Modified: 2015-03-20 00:26:40

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 Simple Navigation Menu</title> <style> /* Begin HTML5 CSS3 Simple Navigation Menu */ /* == 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 {float:left;font-family:arial, sans-serif;margin:30px 0 0 0;width:400px;} .nav ul, .nav li {list-style:none;} .nav a, .nav:hover a.current { background:#f7f7f7; border:1px solid #f7f7f7; color:#666; float:left; margin-right:20px; padding:5px; text-decoration:none; text-shadow:0 1px 1px hsla(0,0%,100%,.75); -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; -webkit-box-shadow:inset 0px 0px 3px hsla(0,0%,0%,0); -moz-box-shadow:inset 0px 0px 3px hsla(0,0%,0%,0); box-shadow:inset 0px 0px 3px hsla(0,0%,0%,0); -webkit-transition:all .5s ease; -moz-transition:all .5s ease; -ms-transition:all .5s ease; -o-transition:all .5s ease; transition:all .5s ease; } .nav a:hover, .nav a:focus, a.current, .nav a.current:hover { background:#eee; border-color:#33a1de; color:#222; -webkit-box-shadow:inset 0px 0px 3px hsla(0,0%,0%,.5); -moz-box-shadow:inset 0px 0px 3px hsla(0,0%,0%,.5); box-shadow:inset 0px 0px 3px hsla(0,0%,0%,.5); } a.current {color:#33a1de;font-weight:bold;} .nav a:active, .nav a.current:active {background:#ddd;border-color:#666;} .group:before,.group:after {content:"\0020";display:block;height:0;overflow:hidden;} .group:after {clear:both;} .group {zoom:1;} </style> </head> <body> <div id="content"> <h3>HTML5 CSS3 Simple Navigation Menu</h3> <p>Hover your mouse over the menu buttons to view example.</p> <div align="left"> [ This code example from <a href="http://snapbuilder.com/code_snippets/copy_code_snippet_206.html">HTML5 CSS3 Simple Navigation Menu Code Snippet</a> page. ] </div> <ul class="nav group"> <li><a href="#" class="current">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Projects</a></li> <li><a href="#">Contact Us</a></li> </ul> </div> </body> </html>


[ Snippet Options ]

 

© 2002 -  Snap Builder Public Codes Library