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


Category: Javascript Codes Library >> Navigation / Menus >> CSS Ribbon Navigation Menu

Code Snippet </> Info

Snippet Name: CSS Ribbon Navigation Menu

Description: A really cool looking CSS Ribbon Navigation Menu.

Compatible Browsers:
Chrome BrowserFirefox BrowserInternet Explorer BrowserOpera BrowserSafari Browser

Example: View Code Demo


Author: Jack Moore

Last Modified: 2015-08-26 23:36:33

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
Copied To Clipboard!

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS Ribbon Navigation Menu</title> <style> /* Begin CSS Ribbon Navigation Menu */ /* == This Script Free To Use Providing This Notice Remains == */ /* == This Script Has Been Found In The Free Public Codes Library == */ /* == NOTICE: Though This Material May Have Been In A Public Depository, Certain Author Copyright Restrictions May Apply == */ * { /* Basic CSS reset */ margin:0px; padding:0px; } body { font-family:verdana,arial,ms sans serif; font-size:100%; padding:35px 0px 0px; margin:auto; text-align:center; background:#e6e6e6; } .ribbon { display:inline-block; } .ribbon:after, .ribbon:before { margin-top:0.5em; content: ""; float:left; border:1.5em solid #ffffff; /* ribbon end colors */ } .ribbon:after { border-right-color:transparent; } .ribbon:before { border-left-color:transparent; } .ribbon a:link, .ribbon a:visited { color:#000000; /* ribbon link colors */ text-decoration:none; float:left; height:3.5em; overflow:hidden; } .ribbon span { background:#ffffff; /* main ribbon color */ display:inline-block; line-height:3em; padding:0 1em; margin-top:0.5em; position:relative; -webkit-transition: background-color 0.2s, margin-top 0.2s; /* Saf3.2+, Chrome */ -moz-transition: background-color 0.2s, margin-top 0.2s; /* FF4+ */ -ms-transition: background-color 0.2s, margin-top 0.2s; /* IE10 */ -o-transition: background-color 0.2s, margin-top 0.2s; /* Opera 10.5+ */ transition: background-color 0.2s, margin-top 0.2s; } .ribbon a:hover span { background:#FFD204; /* ribbon onhover color */ margin-top:0px; } .ribbon span:before { content: ""; position:absolute; top:3em; left:0px; border-right:0.5em solid #9B8651; border-bottom:0.5em solid #ffffff; } .ribbon span:after { content: ""; position:absolute; top:3em; right:0px; border-left:0.5em solid #9B8651; border-bottom:0.5em solid #ffffff; } </style> </head> <body> <div class="ribbon"> <a href=""><span>Home</span></a> <a href=""><span>About</span></a> <a href=""><span>Services</span></a> <a href=""><span>Contact</span></a> </div> You can add as many links as you need. <br /><br /> <div id="snippet"> [ This code example from <a href="">CSS Ribbon Navigation Menu</a> page. ] </div> </body> </html>

[ Snippet Options ]


© 2002 -  Snap Builder Public Codes Library