Handcrafted split sliding door navigation menu

Introduction: This article will teach you step by step how to create a very cool three-layer separated standard sliding door navigation menu. From the ideas, principles, steps, and methods, it can be said that "everything is possible". Even if you are, I believe you will after reading this article , you can also create your own super beautiful standard navigation menu. This menu has no redundant structure and is conducive to dynamic data output. It is very suitable for use in ordinary projects. This tutorial talks about the basic principles of sliding doors. I believe it will be helpful to those friends who are still groping on this road! Of course, if there are any errors or problems, you are welcome to discuss them.

The ideal goals this navigation menu wants to achieve are:

1. Beautiful and personal.

2. The structure is clear, the semantics are clear, and there are no redundant tags.

3. Performance, structure, and behavior are separated at three levels, without any intrusion.

4. Conducive to data output of background programs.

5. The menu has three-state effect changes.

6. Can highlight and record the menu items clicked.

7. Adaptable text width. When the text content changes in length, the button can change in time.

8. Compatible with all major browsers.

Let’s implement this ideal menu step by step!
I often see many friends making menus in forums, but to be honest, they are either structurally redundant, or they have form but no spirit, or they have spirit but no appearance. And what we want to create now is the best menu. Whether you're a newbie or a veteran, you should find something useful in this tutorial.
The structure of an ideal menu should be clean, free of redundancy, and separated. However, for various reasons, a lot of meaningless things will be added to it, and in the end, it will be farther and farther away from "clean". Therefore, before making a menu, there are certain principles that must be kept in mind throughout the entire production process and cannot be hindered by any external force.

Structure

In my mind, the ideal standard menu should have the following structure:

The original structure of the menu is now available. You can see that there are no meaningless labels in it. Each label has its own semantics. Let's take a look in the browser. Oh, it's really simple. It's just original text, like, um, just like the menu we use to order food in a restaurant. It may be simpler than that, and there is A little dot! Oh my gosh, we are so far away from our beautiful menu!

Style

Okay, it's just a skeleton now, let's beautify it a little, add some simple styles, at least remove the small dots, and arrange it horizontally!

Okay, let’s add some style!

Well, look now, we have achieved our small goal.
Now that the skeleton is in place, the next step is to put beautiful clothes on each menu item.
To meet the first requirement, you must first have a beautiful button and draw one yourself. Oh, I am not an artist, it is difficult! However, don’t be too impatient. The Internet is so vast that there are many wonders. Maybe someone has already done something good. I just googled it and found one. Thank you! (The tears are coming...) Button source code: http://bbs.blueidea.com/thread-2860891-1-1.html

With the designed button source code, it is great to save the design part. But to make it a three-state button, we need to modify this button. Did you see the seventh goal? We are making an adaptive button, so we need to do some processing on this button.

We show these three buttons as three states: when the mouse is moved away, after clicking, and when the mouse is moved up. To make a sliding door menu, you need to cut a button from the middle. The picture on the left is placed on the left, and the picture on the right is Place it on the right side. To adapt to the lengthening of the text, the width of this layer needs to be stretched a bit. However, this image has a very complex shadow effect and cannot be stretched casually, otherwise the effect will not be the same. Let's cut it open in the middle and stretch the left side of the picture on the right forward. So we first cut it into six pieces as shown in the picture, and then merge these six pictures together. Why is this so? Take a look at the principle of css sprites! I won’t go into details here. You can read my other article "Making a Poker Card Series 1---CSS Sprites Image Background Optimization Technology"

In the above picture, the first and second pictures form the normal menu style (default style), the third and fourth pictures form the scrolling style, and the fifth and sixth pictures form the clicked menu item style.
We specifically extracted the shadow image and made a small background image.

The required graphics are ready. Next, let's add this image to the menu item. A button requires two images to be displayed. Everyone on earth knows that an html tag can only hold one picture (if you find that a tag can hold two pictures, please tell me in time and I will treat you to dinner!). oh! Each item in my menu structure has exactly two tags, one is li, and there is an A tag in it, which can be used to hold the left and right pictures. Li is used to hold the picture on the left, and A is used to hold the picture on the right. I really admire myself, I can come up with such good ideas, and I am so complacent with myself...

Don't be busy, oh, my God, if I install pictures in this way, how can I achieve the three mouse scrolling states? We all should know that except for the damn IE6, other browsers currently support the li:hover pseudo-class. However, to be compatible with all major browsers (this is our 8th goal, don’t forget it!), this method does not work. IE6 can only apply the hover pseudo-class on the A tag, and it ignores other tags!

Since IE6 can only apply the hover pseudo-class on the A tag, then if we want to make an adaptive sliding door menu, we need to make some structural changes. It seems that we can only add another tag to the A tag, so the structure of the menu It will look like this. (Note: This is where the structure begins to change. Although I have always wanted to avoid this happening, it seems that to meet the requirements, this label must be added.)

We added a span container to the A tag, which includes the text content. Now there are two labels, which can hold two pictures. We place the right image in the background of the A tag and align it to the right, and place the left image in the SPAN tag and align it to the left. This will show a complete button shape.
Fortunately, although an extra tag is added, it is not completely semanticless.

Okay, our preparations are almost done, it’s time to give the menu new clothes.

If we want to make a menu with adaptive width, we cannot set the width value of the menu, so we cannot set the width and then float it to the left like we usually do when making a horizontal menu with a fixed width. If this is the case, when the width of each menu item is different, you need to define the width of each item separately, then you must define an ID or CLASS for each menu item, and this method is not conducive to the dynamic loop output of the background program.

What we need is to automatically arrange each menu item in a row from left to right like an inline element. Then we need the menu to be displayed inline. OK, let's use display:inline. This is a very useful Attributes: Its parsed arrangement can meet our basic requirements: automatically arrange label elements from left to right in a row, and the width of each item can be different.

If using the above attributes can really meet our needs, there will be no text content like the following.
Although this attribute can meet the basic needs of our project, it has a very fatal weakness: it cannot set the width and height values. If you don't believe it, you can try it. It only appears as the default height and width of the text. It will be automatically hidden after exceeding this width and height value. In this way, I have a background image here. To show the effect of this image, we need to give a width and height. This means we can’t achieve our effect, which is frustrating! Fortunately, there is another attribute: display:inline-block; its performance is what we need.

But...this attribute also has a fatal weakness, it can only be recognized by advanced browsers such as FF3. Other browsers can only take a detour. Uh-oh! Therefore, how important it is to unify browser standards! It seems that HACK is also a way of relief that we have to deal with.

Fortunately, some experts have already found a solution. Please read these two articles first.

Related tutorials:
"Two examples of application of display:inline-block" (Qin Ge)
"Inline-block attribute for simulation compatibility" (Yi Fei)

We all understand the principle, and we can make an adaptive menu based on the techniques provided in the two articles above.

Let's first write the style of the image on the right, which is applied to the child node A tag of the li element.

li a{display:inline-block; padding-right:30px; padding-top:10px; *padding-top:0; padding-bottom:13px; *padding-bottom:0; height:36px; background:url(images /button.gif) no-repeat right -36px; text-decoration:none; font-size:12px; color:#fff;}

We first set display:inline-block, and then we use padding to expand its margins so that it has a certain amount of space to fill the image. Note that the image path here is replaced with your own path. Then set other styles, such as removing underlines, font color, font size, etc. Set the image to be aligned to the right.

The image on the left side of the button is placed in the SPAN element, align its image to the left, and set padding to expand its width and height.

Then set them back to inline mode, triggering IE's haslayout feature.
In the above code, we also see a HACK application, *padding-bottom: 0; and *padding-top: 0;, which are used to solve the different effects of browsers such as IE and FF. If you don’t believe me, you can delete it and see what effect it will have. There is a problem with the height extension under IE.
Okay, now it’s time to write the effect when the mouse is moved over.

li a:hover{padding-right:30px;background:url(images/button.gif) no-repeat right -108px;}
li a:hover span{padding-left:30px;background:url(images/button.gif) no-repeat left -72px;font-weight:bold;}

Next is the effect after the mouse click.

li a:active{padding-right:30px;background:url(images/button.gif) no-repeat right -180px;}
li a:active span{padding-left:30px;background:url(images/button.gif) no-repeat left -144px;font-weight:bold;}

ok, it seems that you are done. If you look at it in different browsers, it seems that you can achieve satisfactory results.

Now the pure CSS version of the sliding door menu is basically ready.