CSS3 Flexbox Fluid Horizontal Navigation - Add a flexbox fluid horizontal navigation bar to your web page. Example: View Code Demo |
<!DOCTYPE html>
<html>
<head>
<title>HTML5 CSS3 Flexbox Fluid Horizontal Navigation</title>
<style>
/* Begin HTML5 CSS3 Flexbox Fluid Horizontal Navigation */n
/* == 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;}
#wrapper {margin:0; padding:15px 15px 15px 15px;}
.container {
display:block;
float:left;
min-width:500px;
resize:both;
overflow:auto;
height:300px;
border:1px solid #000000;
background:rgba(0,0,0,.1);
}
nav {
display:-webkit-box;
display:-moz-box;
display:box;
-webkit-box-orient:horizontal;
-moz-box-orient:horizontal;
box-orient:horizontal;
border:2px solid #333;
-webkit-border-radius:6px;
-moz-border-radius:6px;
-o-border-radius:6px;
border-radius:6px;
width:95%;
margin:20px auto;
background:#ffffff;
}
nav a {
display:block;
color:#333;
padding:10px;
-webkit-box-flex:1;
-moz-box-flex:1;
box-flex:1;
text-align:center;
text-decoration:none;
-webkit-transition:all .4s linear;
-moz-transition:all .4s linear;
-o-transition:all .4s linear;
transition:all .4s linear;
}
a:hover {
background-color:rgba(0,0,0,.2);
}
a:active {
background-color:#333;
-webkit-box-shadow:inset 0 2px 8px hsla( 0, 0%, 0%, 0.6 );
-moz-box-shadow:inset 0 2px 8px hsla( 0, 0%, 0%, 0.6 );
-o-box-shadow:inset 0 2px 8px hsla( 0, 0%, 0%, 0.6 );
box-shadow:inset 0 2px 8px hsla( 0, 0%, 0%, 0.6 );
color:#ffffff;
}
p {margin:20px;}
#link {position:absolute; top:420px; left:20px;}
</style>
</head>
<body>
<div id="wrapper">
<h3>HTML5 CSS3 Flexbox Fluid Horizontal Navigation</h3>
<div class="container">
<nav>
<a href="#">Home</a>
<a href="#">About Us</a>
<a href="#">Projects</a>
<a href="#">Ramblings</a>
<a href="#">Contact</a>
</nav>
<p>Resize the Window</p>
</div>
<div id="link">
[ This code example from <a href="http://snapbuilder.com/code_snippets/snippet.php?sid=211">HTML5 CSS3 Flexbox Fluid Horizontal Navigation Code Snippet</a> page. ]
</div>
</div>
</body>
</html>
|
Scroll