The bread navigation bar with arrows and the arrow bread navigation bar

The bread navigation bar with arrows and the arrow bread navigation bar
Create Beautiful and beautiful breadcrumb navigation bar

 

Before getting started, I 'd like to give you an example of what is the breadcrumb navigation bar

Similar to the following

Homepage> topic page> Article Page

Homepage/topic page/Article Page

They can tell visitors where they are currently on the website and how the returned DOM is called the breadcrumb navigation bar

But ......

Don't you think this is not a good idea?

If one day, your company's UI will give you a picture. The breadcrumb navigation bar is like this.

Such

Or other crumb navigation bar with a pattern. What should I do at this time?

Some friends may say this is simple, so easy. Just find a pattern and add background to the navigation bar.

But is it so simple? Well, let's talk a little bit about it. Let's start to practice it and see how to complete this highly-colored bread navigation bar.

 

1. Use the unordered list as a navigation bar. The Code is as follows:

<Ul> <li> <a href = "#"> homepage </a> </li> <a href = "#"> homepage 2 </a> </li> <a href = "#"> homepage 3 </a> </li> <a href = "#"> homepage 4 </ a> </li> <a href = "#"> homepage 5 </a> </li> </ul>

The following is the css code.

body{
　　　　　　　　　　　　　　　　background:#000
　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　ul{list-style: none;}li{width: 60px;height: 50px;line-height: 50px;float: left;background: #6cf;text-align: center;}a{color: #000;text-decoration: none;}            

　　

Css code is nothing special, just like nav. Next we will start to put the selected background image, which is the following figure.

Add a background image to li in the navigation bar

body{                background: #000;            }            ul{                list-style: none;                margin: 100px 100px;            }            li{                width: 60px;                height: 30px;                line-height: 30px;                float: left;                background: #6cf;                text-align: center;                background: url(img/bg.png) no-repeat 100% 0;                            }            a{                color: #000;                text-decoration: none;            }

At this time, the page effect is like this

Nana? This is a bit wrong? Director, this script has a problem!

Yes, but where is the problem?

 

 

In the previous comparison, the problem occurs immediately. Each navigation bar (except the last one) is stacked on the next navigation bar. At this time, we only need to add a margin-left:-15px; to the li tag. The specific code is as follows:

li{                width: 80px;                height: 30px;                line-height: 30px;                float: left;                background: #6cf;                text-align: center;                background: url(img/bg.png) no-repeat 100% 0;                margin-left: -15px;            }

Because the width of the opening is not enough, I add the li width slightly here. After adding it, our breadcrumb navigation bar will become like this.

Why? What about our arrows?

What about the Arrow?

Where did the arrow go from 1 to 4?

Let's go back to the previous step again. In the previous step, we add margin-left:-15px to the li tag;

The front-end has a feature. The attributes written later usually overwrite the previous one. Although the dom structure does not overwrite, when the two locations overlap, when the z-index attribute is not added or the attribute value is equal, the subsequent dom structure will be

This is also the case here, so we only need to add different z-indexes on the li tag (to apply the z-index attribute, you must first add positioning, position: relative)

Here there is no limit on the value of z-index, but there is only one point, that is, the last li label is the smallest, and so on, gradually increasing, the first is the largest.

The final code is like this.

<! DOCTYPE html> 

 
Here, the navigation bar of the second prototype is similar. I will paste the URL
Http://codepen.io/anon/pen/mWYJdR