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 ++ |
|
Snap HTML Code Editor:
Paste the source code, make changes and instantly see it in live preview.
Snap HTML Code Editor
|
|
Copied To Clipboard!
<!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>
|
