CSS implements breadcrumbs navigation bar

This article mainly introduces two pure CSS breadcrumbs navigation bar Implementation code, the content is relatively simple, will not be friends can come in to see, where the HTML code implementation is very simple, the need for friends can refer to the next

Here are two of the pure CSS breadcrumb navigation bar Implementation code, found some methods on the internet but I feel that it is not appropriate only the two pure CSS is almost, the following a small compilation to everyone to tidy up a bit.

Method One,

Description: This method uses CSS3, no pictures, compatible with various WebKit browser, while compatible. First:

　　1. The first is the HTML code, relatively simple, only need a simple UL and Li can code as follows:

　　　　

<p id= "Crumbs" ><ul> <li><a href= "#" > Home </a></li> <li><a href= "#" > Directory </a></li> <li><a href= "#" > subdirectory </a></li></ul><p class= "fixed" ></ P></p>

　　2. Next is the CSS code, the first is to set the regular Li floating and a-label beautification:

#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;}

　　Next is the key place for breadcrumb navigation, with before and after to create arrow effects:

#crumbs ul Li a:after {content: ""; border-top:22px solid transparent;border-bottom:22px Solid Transparent;border-left:2 2px solid #f66fa2;p Osition: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;p Osition: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:

. fixed {clear:both;}

Method Two:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.php.cn/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
 above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!