Smoothly open menu using CSS. Vertical drop-down menu on CSS: how to make it

Before this line, there are 2 lines, apparently not related to the case (home
and see the vertical menu). A person who is unfamiliar with the new material (that is, just for the one for which you wrote), takes time to aware that these lines are not needed for the drop-down menu. Or still need?

In Hedder, there are 3 lines in your example. Of these, only one refers to the topic (sets the name of the TSS file), and 2 others - no. It also complicates the development of the material. Moreover, on my computer, such a heder generally leads to an incorrect display of text, since I need to install not "UTF-8", but "Windows -..."

In the example, it is unclear that the words "style.css", "block-menu" and "nav" is not keywords, and the names specified by the user. I figured out it experimentally

In short, I would like that in the examples there was only what is relevant to the case, and so that it would be written about unclear in the context of the line, which "attitude to the case" they have.

• Log in to post comments

Oleg Sat, 09/20/2014 - 23:50

The most voluminous comment !!!
Comments are only after moderation so you have not seen your comment immediately.
I will try to answer everything. Let's start with questions why this is here. Taki yes two links leaked from the working version.
What about not correct text display. You were able to read and check out this page despite the fact that it is the same encoding as an example in a post.
This post is not intended for absolute beginners and was written at the request of subscribers. If you explain absolutely everything, it will be necessary to tell about classes and identifiers, blocks, positioning, pseudo-selectors, cascade and so on. Pretty big article turn out and most importantly useless.
UL.NAV Li: Hover\u003e UL (Display: Block;) will show the previously hidden item. If you disassemble something (hereby looking at the code) when you hover on the menu item (UL.NAV Li), it will work: Hover and the first attached list\u003e UL will be visible due to the fact that the value of the Display will change the value with the None on Block.

Greetings! If you are a novice brandrator, then sooner or later you will face that you want to somehow revive your pages, make them at least a little interactive. It is impossible to avoid CSS animation. But you need to know where and how to apply them.

Today I will tell how to make a drop-down menu on cleanCSS. and how to add him smoothness from using CSS. Animation. If you do not know, it's time to get acquainted with Aza.

Melts Menu HTML + CSS

To begin with, to work with what to work with, let's chase a simple single-level menu. We will not be very bothering with the design, for clarity enough of this:

What we have? The most ordinary non-measured list with the "TOP_MENU" identifier and with references wrapped in the items of this list. All trite and simple. When you hover the menu items change the color ... It's all you already know and understand how to do it (I hope).

Add a second-level menu

To make a multi-level menu, we need to add a second non-measured list inside the first. I think it was you somewhere in the initial lessons. And also to insert it is not just inside our list, namely inside the list item, that is, the tag " lI", Immediately after the closing tag" A ".

Positioning the invested lists absolutely in relation to " lI"In which they are invested. And all " lI» top level Position relatively ( relative.). So that the drop-down menu is immediately after our top-level menu, it (falling out - " inner_menu.") Need to ask

Position: Absolute; Top: 100%;

That is, an indentation from the upper boundary of the parent will be equal to the height of the parent. Very logical, in my opinion.

In addition to positioning, you need to give the style drop-down menu as the top-level menu. Apple from the apple tree, as they say ...

As you can see, our drop-down menu looks like not dropping, but fell and hanging. But nothing, we will soon be corrected.

How to make the drop-down menu really dropping

There is nothing easier! To make our invested list to make a drop-down menu, you just need to hide it! And then open only when the mouse cursor will sweep over the top-level menu item that contains the drop-down menu. It sounds, maybe a bit difficult, but in fact it is solved just a few line of code.

Add a drop-down menu:

Display: None;

And to display it, you need to register:

#Top_Menu\u003e Li: Hover\u003e UL (Display: Block;)

What does this whole creation of selectors tell us? We read from the end. We set styles (vision) for a second level list that lies inside the element of the first level list, but these styles will work only if we bring the mouse (hover) to the element "li "in which our second level is invested.

I hope I expressed it clear. If not, try to read several times. And even better just understand this, looking at the code. We look at us:

Yes, we seem to achieve what they wanted - we made a drop-down menu, the most real drop-down menu, my mother! But he is missing something. Do you know what? Smoothness! After all, everything looks like the menu does not fall, but just appears. And very sharply, instantly even, I would say.

Well, let's put a little over him.

Smooth drop-down menu is easy

So let's make a smooth drop-down menu on pure CSS. Why do it? Because people love when everything is smooth and mongongo ... and it looks beautiful. It will be plus to the usability of your site. Hit!

Remember, you can animate only accurate mathematical values, such as 50px and 300px, 0 and 100%, 0.5 and 1.0 and so on. In our case, we will not be able to animate two states of our drop-down menu ( display: None; and display: Block;).

But we can replace them with transparency - OPACITY: 0 and OPACITY: 1. And set the time during which our menu will manifest itself from a transparent state. Yes, it really will work, but it is not exactly the effect that you may have expected. So let's do a little more difficult. But it is worth it, believe me.

In order for the animation to get more smooth and predictable, I had to set a fixed height of the points of the drop-down menu, although it was possible to do without it. Weight methods, just invent combinations and solve the task.

As can be seen from the code, we animated the height of the elements of the drop-down list and their transparency. This turned out to be sufficient to make the beautiful smooth animation of the drop-down menu.

What did we need for the animation? Two states of the points of our menu, as well as the TRANSITION property, which interpores these states, that is, all intermediate values \u200b\u200bfill out for the allotted period of time. That's all!

It would be even easier to do with the use of jQuery, but we also stated first that we will work with clean CSS today. And even more beautiful, it was possible to do, adding curves of Beziers to the animations, however, this topic goes beyond today. But we will definitely return to it later.

Output:

Now you can boast your friends and close to know how to make a drop-down menu on pure CSS. This is a really useful skill that you have more useful. Well, do you know, have you seen sites with a static menu? No, most sites have exactly the drop-down menu.

By the way, it was my first CSS lesson. Describe how you? I understand everything explained or need to still chew? And is it worth it to continue to write articles on the topic of Lifehakov in CSS?

Thank you for your attention to fast meetings!

Have you read until the very end?

Was this useful?

Well no

What exactly did you not like? The article was incomplete or untruthful?
Write in climmenia and we promise to correct!

Everyone who decided to create a website faces the need to create a cute menu for your site. In this article, I will tell you how with the help of the usual HTML code and simple CSS rules, you can create a great drop-down menuwhich is easy to change and supplement. And for this we will not need any JavaScript code!

The first and most important stage, when creating a drop-down menu, is to create its structure. It is best to do this using non-measured lists. Let's create a simple menu:

Pretty simple and not difficult turned out to be HTML code. It will look like this list so.

At the next stage, we give our menu to more beautiful sight. It can be easily done through the use of CSS.
The first thing to remove the Mercres in the non-measured list, indents, and also set the width of our menu.

#Nav UL (Margin: 0px; padding: 0px; List-Style: None; width: 200px;)

Now we need to set the position of the list items. Since our menu It will be vertical, it facilitates our work. However, we need to set the value for the property. "Position" , as "Relative" . It is necessary in order to relatively position the submenu relative to the main menu. We will also set the lower underscore for menu items.

#Nav UL Li (Position: relative; Border-Bottom: 1px Solid #CCC;)

Now you need to correct our submeni. Since we want our menu to the right of the main menu at the moment when the cursor is above this item, then we need to enter the list, property "Position" Set value "Absolute" . We also need to ask his position. This is done as follows.

#Nav Li UL (Position: Absolute; Left: 200px; top: 0; display: none;)

Using attributes Left. and top. We ask the absolute positioning of our submenu on the parent menu item. I also assigned an attribute "DISPLAY" value "NONE" Since we do not want to see the submenu when opening the page.

So, now our menu looks like this.

Now let us give the appearance of our links. First of all, in order for each link to occupy all the place allowed for it inside the list item containing it, assign an attribute "DISPLAY" value "Block" . Also remove the lower underscore and set the color of the background and the color of the text of the link.

#Nav UL Li A (Display: Block; text-decoration: none; color: # 777; background: #fff; padding: 5px;)

#Nav Li: Hover UL (Display: Block;)

Now our menu is already working and looks like this.

It remains to give him a more attractive view.

To begin with, let's make it so that when you hover on the items of our menu changed the background and color of the text. To do this, add the following code.

#NAV Li: Hover A (Color: #FFFFFF; Background: URL (img / fone-tr.png);)

Here I use this picture as a background here, but you can use and fill in any other color (for example: background-Color: # 0000FF; ).

#NAV Li: Hover UL A: Hover (Background-color: #cccccc; background-image: none; color: #ffffff;)

That's it! Our Drop-down menu on HTML and CSS Ready. You can see what happened.

It would seem that it would be possible to finish, but no. Unfortunately early versions Internet Explorer. Understand pseudo-class : hover Only for tag - so that li: Hover. To which we have tied the appearance of the submenu and change the background color, he does not say anything.

In order to eliminate this problem, add a small JavaScript code:

Now let's make it so that when you have a submenu, he also changed the color of his background. To do this, use the following code:

This allows you to "attach" class jShover. To any element

over which the cursor passes. This feature works only in Internet Explorer - for other browsers, it is simply not needed.

Now that the menu has earned in IE, add to the three already existing rules on the additional selector li.jshover.:

#Nav Li: Hover UL, #Nav Li.jshover UL ( … } #Nav Li: Hover A, #Nav Li.JShover A ( … } #Nav Li: Hover UL A: Hover, #Nav Li.JShover UL A: Hover ( … }