|
|
Copied To Clipboard!
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>BreadCrumb Navigation Bar Menu</title>
<style>
body {padding-top:100px;text-align:center;font-family:'noto serif',verdana,Arial;}
/* == Begin BreadCrumb Navigation Bar 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 == */
.snapmenu {display:inline-block;box-shadow:0 0 10px 1px rgba(0,0,0,0.6);border-radius:6px;overflow:hidden;}
.snapmenu a {padding:0 20px 0 30px;position:relative;text-decoration:none;line-height:36px;background:-webkit-linear-gradient(#5DA6E1, #185282);background:-moz-linear-gradient(#5DA6E1, #185282);background:-o-linear-gradient(#5DA6E1, #185282);background:linear-gradient(#5DA6E1, #185282);color:white;display:block;float:left;}
.snapmenu a#active, .snapmenu a:hover {background:-webkit-linear-gradient(#64D86A, #1D7521);background:-moz-linear-gradient(#64D86A, #1D7521);background:-o-linear-gradient(#64D86A, #1D7521);background:linear-gradient(#64D86A, #1D7521);}
.snapmenu a#active:after, .snapmenu a:hover:after {background:linear-gradient(135deg,#64D86A, #1D7521);}
.snapmenu a:after {content:'';width:36px;height:36px;background:linear-gradient(135deg,#5DA6E1, #185282);position:absolute;top:0px;z-index:1;right:-18px;transform:scale(0.707) rotate(45deg);border-radius:0 0 0 30px;box-shadow:2px -2px 1px 1px rgba(0,0,0,0.5),3px -2px 1px 1px rgba(255,255,255,0.6);}
.snapmenu a:last-child:after {content:none;}
.snapmenu a:last-child {padding-right:20px;}
</style>
</head>
<body>
<div class="snapmenu">
<a href="#" id="active">Menu 1</a>
<a href="#">Menu 2</a>
<a href="#">Menu 3</a>
<a href="#">Menu 4</a>
</div>
<br /><br /><br />
[ This code example from <a href="http://snapbuilder.com/code_snippets/copy_code_snippet_249.html">BreadCrumb Navigation Bar Menu Code Snippet</a> page. ]
</body>
</html>
|
