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 Triangle Menu Navigation


Code Snippet </> Info


Snippet Name: CSS3 Triangle Menu Navigation

Description: Add a CSS3 triangle navigation to your web page.
Compatible Browsers:
Chrome BrowserFirefox BrowserInternet Explorer BrowserOpera BrowserSafari Browser

Example: View Code Demo

Note: Add as many LI menu links as you need.

Author: SnapBuilder <snippets@snapbuilder.com>

Last Modified: 2015-03-20 00:25:51

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> <head> <title>CSS3 Triangle Menu Navigation</title> <style type="text/css"> /* Begin CSS3 Triangle Menu Navigation */ /* == 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, button, input, textarea, select {text-rendering: optimizeLegibility;margin:0 auto; width:auto; font-family:verdana,arial,ms sans serif; font-size:100%; text-shadow:0px 1px 1px rgba(0,0,0,0.2);} body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {margin:0;padding:0;} table {border-collapse:collapse;border-spacing:0;} fieldset,img {border:0;} address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal;} ol,ul {list-style:none;} caption,th {text-align:left;} h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;} q:before,q:after {content:'';} abbr,acronym { border:0;} li {background:#007730;float:left;padding:5px;margin-right:2px;position:relative;} li:hover {background:#0000ff;} li:hover:after {border-left:15px solid #0000ff;} li a {padding-left:15px;display:block;color:#ffffff;text-decoration:none;} li:after {width:0;height:0;border-top:14px solid transparent;border-bottom:15px solid transparent;border-left:15px solid #007730;content:"";right:-15px;top:0;position:absolute;z-index:9;} li:before {content:"";z-index:8;width:0;height:0;border-top:14px solid transparent;border-bottom:15px solid transparent;border-left:15px solid #ffffff;right:-17px;top:0;position:absolute;} #content {position:absolute; top:100px; left:0px; margin:0 0 0 15px;} </style> </head> <body> <ul> <li><a href="#">Home</a></li> <li><a href="#">Ramblings</a></li> <li><a href="#">Contact Us</a></li> </ul> <div id="content"> <h3>CSS3 Triangle Menu Navigation</h3> <p><br />Roll your cursor over the navigation bar for an example.</p> <br /><br /> <p>[ This code example from <a href="http://snapbuilder.com/code_snippets/copy_code_snippet_229.html">CSS3 Triangle Menu Navigation Code Snippet</a> page. ]</p> </div> </body> </html>


[ Snippet Options ]

 

© 2002 -  Snap Builder Public Codes Library