CSS breadcrumbs Navigation bar 2 examples

Method One,

Note: This method uses CSS3, no pictures, compatible with a variety of WebKit browser, while compatible with ie8+. First figure:

1. First is the HTML code, relatively simple, only need a simple UL and Li can

The code is as follows	Copy Code
<div id= "Crumbs" > <ul> <li><a href= "#" > Home </a></li> <li><a href= "#" > Directory </a></li> <li><a href= "#" > subdirectory </a></li> </ul> <div class= "fixed" ></div> </div>

2. Next is the CSS code, the first is to set the general Li Floating and a label beautification:

The code is as follows	Copy Code
#crumbs ul Li { Float:left; List-style:none; } #crumbs ul Li a { Display:block; Float:left; height:34px; Background: #f66fa2; Text-align:center; padding:10px 20px 0 45px; position:relative; margin:0 10px 0 0; font-size:20px; Text-decoration:none; Color: #fff; }

The next step is the key to breadcrumbs, creating arrow effects through before and after:

The code is as follows

Copy Code

#crumbs ul Li A:after { Content: ""; border-top:22px solid Transparent; border-bottom:22px solid Transparent; border-left:22px solid #f66fa2; Position:absolute; Right: -22px; top:0; Z-index:1; } #crumbs ul Li A:before { Content: ""; border-top:22px solid Transparent; border-bottom:22px solid Transparent; border-left:22px solid #fff; Position:absolute; left:0; top:0; } #crumbs ul Li:first-child a { border-top-left-radius:5px; border-bottom-left-radius:5px; padding-left:40px; } #crumbs ul Li:first-child A:before { Display:none; } #crumbs ul Li:last-child a { padding-right:30px; border-top-right-radius:5px; border-bottom-right-radius:5px; } #crumbs ul Li:last-child A:after { Display:none; } #crumbs ul Li A:hover { Background: #e56592; Transition:all 0.2s Ease; } #crumbs ul Li A:hover:after { Border-left-color: #e56592; Transition:all 0.2s Ease; }

Finally clear float:

The code is as follows	Copy Code
. Fixed { Clear:both; }

Method Two

The code is as follows

Copy Code

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <meta http-equiv= "Content-type" content= "text/html; Charset= "utf-8″/> <title> pure css to make bread crumbs, compatible ie6</title> <style type= "Text/css" > *{margin:0;padding:0;list-style-type:none;} a,img{border:0;} body{font:12px/180% Arial, Helvetica, Sans-serif, "new song Body";} /* Demo * * . demo{width:600px;margin:100px auto;background: #f0f0f0;p osition:relative;} . demo Ul{height:32px;overflow:hidden;} . demo li{float:left;width:200px;text-align:center;position:relative;z-index:2;font-weight:bold;font-size:14px; line-height:32px;} . demo Li em{position:absolute;right:-24px;top:-8px;width:0;height:0;line-height:0;border-width:24px 0 24px 24px; Border-color:transparent Transparent transparent #fff border-style:dashed dashed dashed; . demo Li i{position:absolute;right:-16px;top:0;width:0;height:0;line-height:0;border-width:16px 0 16px 16px; Border-color:transparent Transparent transparent #f0f0f0 border-style:dashed dashed dashed; . Demo Li.current{background: #f60; color: #fff; z-index:1;} . demo Li.current i{border-color:transparent transparent transparent #f60;} </style> <body> <div class= "Demo" > <ul class= "Clearfix" > <li> Crumb One <em></em><i></i></li> <li class= "Current" > breadcrumbs two <em></em><i></i></li> <li> bread crumbs Two <em></em><i></i></li> </ul> </div> </body>