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 Flexbox Fluid Horizontal Navigation


Code Snippet </> Info


Snippet Name: CSS3 Flexbox Fluid Horizontal Navigation

Description: Add a flexbox fluid horizontal navigation bar to your web page.
Example: View Code Demo

Note:

Author: SnapBuilder <snippets@snapbuilder.com>

Last Modified: 2014-05-27 21:16:29

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


[ Snippet Options ]

 

© 2002 -  Snap Builder Public Codes Library