The small navigation bar has big secrets ., Navigation bar secret

The small navigation bar has big secrets ., Navigation bar secret

The author recently joined FreeCodeCamp, A GitHub open-source project, and is also a recognized online school. At FreeCodeCamp, the author encountered difficulties following the progress.

 

At the beginning, the navigation bar made me hard.

Of course, I have also written many web pages before, and I have done a lot of navigation bars, and almost succeeded. So why do we need to use the seemingly simple navigation bar today? The problem is, summary.

Although I have done a lot in the navigation bar in the past, every time I encounter a problem, the author spends a lot of time exploring the simple problem. This is no exception.

As you can see, this is the navigation bar for five words, but it took about three hours for the author.

The difference this time is that during these three hours, I learned a set of methods to quickly complete the navigation bar. As the first article in my short book, I will share it with you.

Completed navigation bar

First, the large gray background is a div with a height of 50 PX.

ZHOULIANG on the left is a sub-div with a p tag. No link is provided.

The point is, there are four li s in ul, which are familiar to everyone on the right. Each li contains a to save the text.

But how can we achieve the following points?

1. The four words are on the right side, not close to the right side.

2. the spacing between Home, About, Protfolio, and Contact is the same.

3. The four words are vertically centered.

Other effects: hover changes color based on the length of the text.

Protfolio
Home
About
Contact

Okay, let's answer it directly (Here we assume that the id of the parent div is lead)

In the navigation bar, css must contain

1. # lead ul 2. # lead ul li 3. # lead ul li a 4. # lead ul li a: hover

This is beyond doubt. Tips

1. # lead ul {Margin: 0; padding: 0; overflow: hidden; Width: margin PX; margin-left: margin PX; background: #505050;} This is the style I gave ul to the navigation bar. You have noticed the bold part! If there is no such part, what will happen? Let's take a look at ul under f12.

Ul under f12

Have you noticed this? Ul has no height! As a container containing four li resources, ul somehow lost its height. What will happen after we add the code in the bold section above?

Correct ul

This is our ul, isn't it? So tip 1: Add ulMargin: 0; padding: 0; overflow: hidden;In this way, ul's width, height, and background color are not problems. The first problem is solved as well:. The four words are on the right side, not close to the right side. Answer: after obtaining the correct ul, add margin-left to it.

2. # lead ul li a {font-size: 25px; text-decoration: none;Display: block; text-align: center; padding-top: 10px; height: 40px; Color: ghostwhite;} This is the style I added to Ain the navigation bar. First display, and then adjust padding-top. Center it, which solves the second problem. Then, you can set the height of the block element. Note that although the height of the parent div is 50px, do not forget to center it with padding-top, so in order to achieve the hover effect shown, the given height is equal to the height of the parent div minus the value of padding-top.

3.

Line Style

To adapt the color length of the hover to the length of the text, we define the width of each a according to the text length between lines, thus solving the third problem.