Home > Developer > Web Develop
Xin Xing and you beautify the breadcrumb navigation with pure CSS, and Xin Xing css beautify the breadcrumb
First, let's talk about why bread navigation is called bread navigation. It comes from a fairy tale. The name of this fairy tale is also very distinctive. It is called "Hansel and Gret". One day they went to the forest to play, but as I walked along and found my way lost, everyone knew that there were numbers in the forest, no matter which side I went, or a vast tree, so they all planted bread chips in the places along the way, they used the bread chips to help them out of the forest. Therefore, the bread navigation means where we went and how we went back to our previous position.
Sometimes we need to navigate through the breadcrumb. For example, when we are hanging out in a forum or online mall, we are easily overwhelmed by numerous posts and commodities, when we want to go back, we need to use bread. Therefore, we need to master the structure of a website and use our website better. For example, we can use the bread to return to the Forum from the post, then return to the home page through the Forum. This is the classic use of breadcrumb. For example, we can return to the product list page from the product page in an online store and return to the product category page, view other categories again.
Next let's take a look at the bread navigation I just made:
Of course, there are many kinds of bread navigation styles. Here we will only introduce this kind of style, and it is relatively simple. It took less than five minutes for me to do it. However, before we do it, first, I want to learn basic knowledge about how to create a triangle for children's shoes so that you can quickly make your own triangles. Although I have pointed out in my blog that uses css to write bubbles, but we need to rewrite this process to create an html file with the following content:
The interface we get is as follows:
But in fact we don't need that much. We only need one triangle, so we can change the color of this boundary. The Code is as follows:
The interface we see is as follows:
Now that we have learned how to make triangles, we will start to make our breadcrumb. In fact, at this time, the readers can think about making it by themselves, because the most important knowledge has been completed, of course, reading my tutorials is also good.
The first step is to create an html file and write the main content into it. We do not need to modify the file until the end. If you are unsure, do not modify the file yourself, enter the following content:
<Html> Step 2: Create a New my.css file. What do we need to do? First, remove the dots in front of the list and set the margin and padding. The Code is as follows:*{margin: 0px;padding: 0px;}.nav ul{list-style-type: none;}Step 3, but now we find that our list is vertically arranged. Let them move to the left to horizontally arrange the list. Then we add the Code as follows:*{margin: 0px;padding: 0px;}.nav ul{list-style-type: none;}.nav ul li{float: left;}Step 4: we find that all the lists are crowded together. Why? Because we didn't set the size of these lists, we will set its width below, we also set the font layout to center them:
*{margin: 0px;padding: 0px;}.nav ul{list-style-type: none;}.nav ul li{float: left; width: 200px;text-align: center;}Step 5: Set the nav background, because we need a brown background color and set its width, height, and font size. Let's add some code, it becomes the following style:*{margin: 0px;padding: 0px;}.nav{background-color: #933;width: 600px;height: 32px;line-height: 32px;}.nav ul{list-style-type: none;}.nav ul li{float: left; width: 200px;text-align: center;}
Step 6: in fact, after we finish the above style, we will find it a little uncomfortable. Why, because our text is too dazzling, so let's modify the font and style of the text, in fact, the main thing we do is to remove the underline Of the hyperlink and change the color of the text to black. Add the Code as follows:*{margin: 0px;padding: 0px;}.nav{background-color: #933;width: 600px;height: 32px;line-height: 32px;}.nav ul{list-style-type: none;}.nav ul li{float: left; width: 200px;text-align: center;}.nav ul li a{color:black;text-decoration:none;}Step 7, we started to build our arrows. Till now, we didn't use our new knowledge. Below, we constructed a blank triangle first, it requires absolute positioning. We know that if a child element uses absolute positioning, the parent element must use positioning. Therefore, we add a position in all the li elements: relative, which is nothing else, is to show the child element, the Code is as follows:*{margin: 0px;padding: 0px;}.nav{background-color: #933;width: 600px;height: 32px;line-height: 32px;}.nav ul{list-style-type: none;}.nav ul li{float: left; position: relative;width: 200px;text-align: center;}.nav ul li a{color:black;text-decoration:none;}Step 8: First add a blank triangle. We already know how to create a triangle, so here we can make a white triangle. However, it should be noted that we need to offset it by 24 pixels to the right in positioning. Why, because we need to set the border of this triangle to 24 pixels, the Code is as follows:*{margin: 0px;padding: 0px;}.nav{background-color: #933;width: 600px;height: 32px;line-height: 32px;}.nav ul{list-style-type: none;}.nav ul li{float: left; position: relative;width: 200px;text-align: center;}.nav ul li a{color:black;text-decoration:none;}.nav ul li em{width: 0px;height: 0px;border-color: transparent transparent transparent #FFF;border-style: solid;border-width: 24px;position: absolute;right: -24px;top: -8px;}Step 9: In the previous step, we added a white triangle, which is as follows:In step 10, we start to add a brown triangle. It is worth noting that it needs to move 8 pixels to the left. Here we set its size to 16 PX, so the code is as follows;
*{margin: 0px;padding: 0px;}.nav{background-color: #933;width: 600px;height: 32px;line-height: 32px;}.nav ul{list-style-type: none;}.nav ul li{float: left; position: relative;width: 200px;text-align: center;}.nav ul li a{color:black;text-decoration:none;}.nav ul li em{width: 0px;height: 0px;border-color: transparent transparent transparent #FFF;border-style: solid;border-width: 24px;position: absolute;right: -24px;top: -8px;}.nav ul li i{width: 0px;height: 0px;border-color: transparent transparent transparent #933;border-width: 16px;border-style: solid;position: absolute;right:-8px;top: 0px;}
Now let's take a look at our finished product, which is as follows:
Well, a simple bread is ready. If we work with Javascript, it will be better. We will not introduce it here. Do you like it ?? Please leave a message if you have any questions. I will explain them with patience.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
