• Home
  •  > 
  • Useful
  •  > 
  • How to make a dropdown menu in html javascript. CSS3 Horizontal Smooth Dropdown Menu

How to make a dropdown menu in html javascript. CSS3 Horizontal Smooth Dropdown Menu

Mikhail Sat, 09/20/2014 - 12:28

Somehow my comment is not visible - I’ll duplicate it:

===========
Thank you, but for me (under Int.Expl-8) the menu does not drop down. Those. The line "ul.nav li:hover ul (display: block;)" does not work
Tell me, what's the matter?

There are wishes for the presentation of the material:

It would be nice to explain in this line (ul.aaaaa li:hover ul (display: block;)) which part of it is responsible for the “menu drop-down”, and which part is responsible for hiding items at a deeper nesting level

It would be nice to provide each line in the examples with a comment about what it does.

In particular, it is not clear why the line "

This line is preceded by 2 lines, apparently irrelevant (Home
and View vertical menu). It takes a person unfamiliar with the new material (that is, exactly the one for which you wrote) to realize that these lines for the drop-down menu are not needed. Or are they still needed?

The header in your example has 3 lines. Of these, only one relates to the topic (sets the name of the CSS file), while the other 2 do not. This also makes it difficult to master the material. Moreover, on my computer such a header generally leads to incorrect display text, since I need to put not “utf-8”, but “Windows-...”

It is not clear in the example that the words "style.css", "block-menu" and "nav" are not keywords, and names specified by the user. I found this out experimentally

In short, I would like the examples to contain only what is relevant, and for lines that are unclear in context to be written about exactly what “relevance” they have.

  • Login to leave comments

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

The most voluminous comment!!!
Comments are processed only after moderation, which is why you did not see your comment right away.
I'll try to answer everything. Let's start by asking why this is here. Well, two links leaked from the working version.
Regarding the incorrect display of text. You were able to read and comment on this page despite the fact that its encoding is the same as the example in the post.
This post is not intended for absolute beginners and was written at the request of subscribers. If you explain absolutely everything, you will need to talk about classes and identifiers, blocks, positioning, pseudo-selectors, cascade, etc. It will be a rather long article and, most importantly, useless.
ul.nav li:hover > ul (display: block;) will show the previously hidden item. If we take it letter by letter, then (here we look at the code in parallel) when you hover over the menu item (ul.nav li), the following will work: hover and the first nested list >ul will be visible due to the fact that the display value will change from none to block.

I have long wanted to write an article on how to make a submenu using CSS. Many people do it in JQuery and it turns out quite well, however, the whole basic principle I will outline how to create submenus using CSS here. And then, starting from this base, you can further improve the submenu.

Here's the CSS code right away:

* html ulli (
float: left;
}
* html ulli a (
height: 1%;
}
ul(
border-bottom: 1px solid #000;
list-style: none;
margin: 0;
padding: 0;
width: 100px;
}
ulli (
position: relative;
}
ulli a (
display: block;
border: 1px solid #000;
border-bottom: 1px;
padding: 5px;
text-decoration: none;
}
li ul (
display: none;
left: 99px;
position: absolute;
top: 0;
}
li:hover ul (
display: block;
}

The most important thing here is the "li:hover ul" selector. In fact, it shows the contents of the menu. By default, it is "display: none", and when you hover over a menu item, the submenu becomes: "display: block", that is, visible. This is the most important thing. Also, in the first two selectors (those with * ) there is a CSS hack for IE, otherwise nothing will work in this browser without it. Everything else is appearance, which, of course, can be changed.

Here is the HTML code:



  • Home


  • Menu 1


    • Submenu 1


    • Submenu 2


    • Submenu 3




  • Menu 2


    • Submenu4


    • Submenu 5


    • Submenu 6


    • Submenu7


    • Submenu 8




If you think carefully about this structure, everything becomes very clear. The ul tag creates a menu. If the ul is inside another ul, then it is already a submenu. And the li tag is responsible for a specific menu item.

Of course, the menu is the simplest, both in terms of logic and structure, and in terms of design. Of course you can with using JQuery make a smooth opening. You can also change the design, but the whole principle will remain the same as in this submenu written in CSS and HTML.

The horizontal dropdown menu is written in HTML and CSS. The HTML code and CSS styles are concise, simple and clear. Total CSS lines styles, not counting whitespace, are less than 50. It is convenient to add new paragraphs and subparagraphs in HTML. By slightly changing the CSS styles, you can make several themes and change the appearance or way of appearance of sub-items (themes orange, lilac, brown).
The main difference with my solution is that I don't use lists - tags

    And
  • , replacing them with simple ones, and the use of CSS3 flexbox - a new CSS3 element - significantly simplified the writing and readability of HTML code and CSS styles, while reducing their volume.

    Below is a working example of a horizontal dropdown menu in CSS.

    The idea is this: a horizontal drop-down menu is created as a set of columns. A column is a stack of sub-items.
    The horizontal menu itself is composed of the top elements of the stack. Schematically it looks like this:

    The first (top) points form top level horizontal menu; the rest are hidden until the cursor is hovered over the column. When you hover the cursor, the hidden part smoothly turns down.
    How does this work:

    Joomla-3 is a great engine for your website! Basic extensions Modules, components, plugins, templates Joomla-3 directory structure CSS3 layout replacement method - advanced design features Smooth change of images. Part 1 Smooth change of images. Part 2 Smooth background change Changing the background by mouse over JavaScript pseudo-classes and pseudo-elements - Active elements of WEB pages HTML5 image smooth change script - use new tags, elements and attributes Using the HTML5 player

    The wrapper contains 4 columns –
    blocks. In turn, each of them contains items that make up the horizontal menu itself (there is a space before the top!) and nested sub-items.
    So that when vertical sub-items drop out, the content located next does not jump down, the length of the wrapper should slightly exceed the full drop-out of the columns.

    @import url("https://fonts.googleapis.com/css?family=Roboto"); #dd-menu__wrapper ( display: flex; justify-content: space-between; width: 640px; min-height: 120px; margin: 1px auto; overflow: auto; ) .dd-menu__column ( display: flex; flex-direction: column; width: 159px; overflow: 1.2s; z-index: 1000; .dd-menu__column:hover (max-height: 600px; ) .dd-menu__item ; font-family: "Roboto", sans-size: 11px; background-color: #1e90ff; border-bottom: 4px 6px; .top ( min-height: 30px; max-height: 38px; ) .dd-menu__item:hover ( cursor: pointer; background-color: #0062c1; ) .dd-menu__item a ( display: block; height: 100%; width: 100%; vertical-align: middle; text-decoration: none; #ffffff)

    The horizontal menu wrapper (3) is defined as a flex container (4). It also indicates that all container elements will be evenly distributed horizontally in the parent block (5).
    The following nested blocks (12) will also be flex containers (13), and the elements they contain (26) will be block (27) and lined up in a column (14), forming vertical sub-items. Initially, the maximum stack height is equal to the height of the top items (16). All other elements of the stack will be hidden (17). That is, until the cursor is hovered, only the top items will be displayed.
    When you hover the cursor over a column, the height restriction is removed (22) and the entire contents of the stack drop down. When the cursor moves to another area, all items will be pulled up.
    All sweeps will proceed smoothly within the specified time (18). To prevent the content from showing through from under the expanded stack, set the z-index (19).
    Since, unlike expanding sub-items, which can have different heights depending on the content, the first (top) items must always have the height of the horizontal menu bar, a strict minimum and max height limit is set (37,38).
    Please note that in my case the min-height is 8 pixels less than the max-height. This is due to the fact that all elements have a bottom and a top padding 4 pixels each (33). It is the sum of these indents that complements the minimum height of horizontal menu items. If there are no indents, the min-height and max-height values ​​will be the same.
    Note: In line (36).dd-menu__item.top top is written separated by a dot, without a space!

    All styles are written in ( CSS preprocessor) LESS and translated to CSS program WinLess. Very convenient, labor intensity is reduced significantly, I recommend it.
    I hope you found the article useful. Good luck!

    Everyone who decides to create their own website is faced with the need to create a nice menu for your website. In this article I will tell you how, using regular HTML code and simple CSS rules, you can create an excellent drop-down menu that is easy to change and expand. And we don't need any JavaScript code for this!

    The first and most an important stage When creating a drop-down menu, the first step is to create its structure. This is best done using unnumbered lists. Let's create a simple menu like this:

    • Home
    • Articles
      • HTML
      • CSS
      • PHP
      • MySQL
    • Books
      • Promotion and promotion
      • E-Business
      • Web Design
      • Payment systems
    • About Us

    The html code turned out to be quite simple and not complicated. This list will look like this.

    In the next step we will bring our menu to more beautiful view. This can be easily done using CSS.
    First of all, let's remove markers in the unnumbered 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 elements. Since our menu will be vertical, this makes our work easier. However, we need to set a value for the property "position", How "relative". This is necessary in order to absolutely position the submenu relative to the main menu. We will also set underscore for menu items.

    #nav ul li ( position: relative; border-bottom:1px solid #ccc; )

    Now we need to correct our submenu. Since we want our menu to appear to the right of the main menu at the moment when the cursor is over this item, we need a nested list property "position" set value "absolute". We also need to set its position. This is done as follows

    #nav li ul ( position: absolute; left: 200px; top: 0; display: none; )

    Using Attributes left And top we ask absolute positioning our submenu relative to the parent menu item. I also assigned the attribute "display" meaning "none", since we don't want to see the submenu when opening the page.

    So now our menu looks like this.

    Now let's give our links a look. First of all, in order for each link to occupy all the space allocated for it inside the list element containing it, we assign the attribute "display" meaning "block". We will also remove the underline and set the background color and text color of the links.

    #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.

    All that remains is to give it a more attractive look.

    First, let's make sure that when you hover over our menu items, the background and text color change. 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, but you can use the fill with any other color (for example: background-color:#0000ff; ).

    #nav li:hover ul a:hover ( background-color:#cccccc; background-image:none; color:#FFFFFF; )

    Well that's all! Our dropdown menu in html and css ready. You can see what we came up with.

    It would seem that this could be the end, but no. Unfortunately early versions Internet Explorer understand pseudo-class :hover only for tag - So li:hover, which is responsible for the appearance of submenus and changing the background color, does not tell him anything.

    To fix this problem, let's add a little JavaScript code:

    Now let’s make sure that when you hover over a submenu item, it will also change the color of its background. To do this we use the following code:

    jsHover = function() ( var hEls = document.getElementById("nav").getElementsByTagName("LI"); for (var i=0, len=hEls.length; i li:hover > ul ( display: block; )

    What does this whole bunch of selectors tell us? We read from the end. We set styles (visibility) for the second-level list, which lies inside the first-level list element, but these styles will only work if we hover over the element “li" which contains our second level list.

    I hope I made myself clear. If not, try reading it a few times. Better yet, just understand it by looking at the code. Let's see what we got:

    Yes, we seem to have achieved what we wanted - we made a drop-down menu, a real drop-down menu, motherfucker! But he's missing something. Do you know what? Smoothness! After all, everything looks as if the menu does not drop out, but simply appears. And very sharply, even instantly, I would say.

    Well, let's work some more magic on him.

    Smooth Dropdown Menu Made Easy

    So let's make a smooth dropdown menu on pure CSS. Why do this? Because people love it when everything is smooth and soft... and it looks beautiful. It will be a plus for the usability of your site. Let's go!

    Remember, you can only animate precise 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 the two states of our dropdown 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 appear from a transparent state. Yes, it will indeed work, but it's not quite the effect you might have expected. So let's make it a little more complicated. But it's worth it, believe me.

    To make the animation smoother and more predictable, we had to set a fixed height to the drop-down menu items, although we could have done without this. There are a lot of methods, just come up with combinations and solve problems.

    As you can see from the code, we animated the height of the dropdown list elements and their transparency. This was enough to make a beautiful smooth animation drop-down menu.

    What did we need for animation? Two states of our menu items, as well as the transition property, which interpolated these states, that is, filled everything intermediate values for the allotted period of time. That's it!

    It could be even easier to do this using jQuery, but we first stated that we would be working with pure CSS today. You could make it even more beautiful by adding Bezier curves to the animations, but this topic is a little beyond the scope of today. But we will definitely return to it later.

    Conclusion:

    Now you can show off to your friends and family that you know how to make a dropdown menu in pure CSS. This is a really useful skill that will come in handy more than once. Well, judge for yourself, how many sites have you seen with a static menu? No, most sites have a drop-down menu.

    By the way, this was my first CSS lesson. Describe how do you like it? Did you explain everything clearly or do you need to explain it in more detail? And is it even worth continuing to write articles on the topic of life hacks in CSS?

    Thank you for your attention and see you soon!

    Did you read to the very end?

    Was this article helpful?

    Not really

    What exactly did you not like? Was the article incomplete or false?
    Write in comments and we promise to improve!