CSS web page layout introductory tutorial 13: drop-down and multi-level pop-up menu

CSS web page layout introductory tutorial 13: drop-down and multi-level pop-up menu_Basic Tutorial

WBOY

Release： 2016-05-16 12:07:20

Original

1393 people have browsed it

Drop-down and pop-up menus are commonly used navigation forms in website design. This menu form can make full use of the current space on the page to hide and display more content, and can reasonably classify and display the content. It is a very excellent navigation form.
Early drop-down or pop-up menus used hidden layers or divs to hide content, and responded to user operations through JavaScript scripts. Currently, JavaScript divs or other elements are also used to create such navigation. The difference is that The entire navigation will be built using standard CSS layout, and tables will no longer be used to create menus. The drop-down menu is a combination of the horizontal navigation and vertical navigation mentioned above, and through CSS’s numerous support for attributes, the same menu can be Multiple divs are needed to cooperate with each other. Use css layout to create drop-down menu elements. You can even directly control ul or li elements. Now let's try to make the simplest drop-down menu. What needs to be added is that the implementation of drop-down menu I have learned a lot about JavaScript technology. I will not give too much comprehensive understanding of the syntax of JavaScript technology here. I just want to tell you through existing examples that due to the flexibility of CSS element attributes, it is easier and more convenient to use elements on web pages.Let’s first take a look at the XHTML part of the currently designed navigation code:

Article

Reference

XHTML
XML

BLOG

Web technology

UI technology

Rock

Pure music

Classical hits

Movie soundtrack

A standard menu structure using ul structure, but the difference from the previous one is that the code structure here involves nesting, and another ul structure is inserted between the li of the first level. This It is a code composition pattern for multi-level menus. XHTML code allows you to achieve the desired effect or structure through nested elements.Next, we try to write some simple css styles to make the menu horizontal as desired:

ul { padding:0; margin:0; list-style:none;}
li { float :left; width:100px;}

The first step is to make basic settings for the ul element in the navigation system. The list-style:none attribute can help us remove all dots in the ul. The list-style attribute has other richer usage methods, which will be discussed in the following list elements.
We want the navigation to be horizontal. By setting the float:left attribute on the li, float all the li to the left to form a horizontal layout, and try to use the width of each li to be 100px, and continue writing code:

li ul { display:none; top:20px;}

The definition of li ul here refers to all ul elements below li. Except for the top-level ul element, all li The ul elements defined below will be defined by this part of the style. Here, the top attribute is used to set the top margin of the entire ul, and display:none is used to hide this part. Basically, all elements in CSS can use the display attribute to control whether to show or hide.

li:hover ul,li.over ul { display:block;}

li:hover ul defines the ul element under the li element. Separated by commas, the display:block attribute can be used in both cases. The display:block attribute is just the opposite of the display:none attribute. One is hidden and the other is displayed. When set to display:block, not only its assigned The element will be displayed, and it will also be displayed in a block shape. If display:block is not used, the element will only be displayed according to the area occupied by its content on the screen. When display:block is used, the element will form a wide block by itself. As its own point marker, this setting is very convenient for making buttons larger.

In the preview code at the bottom, you can see that the and js code is added inside. It is used to control the display of the drop-down menu under the IE browser. Originally, the sentence li:hover ul is Yes, but IE's support for CSS is still incomplete, so you need to use JS to control it.
Next we try to add some styles to the drop-down menu:

ul li a { display:block; font-size:12px; border:1px solid #ccc; margin-top:2px; margin-left: 3px; padding:3px; text-decoration:none; color:#777;}
ul li a:hover { background-color:#ddd;}

The focus of the drop-down menu control of css layout is to Hide and show elements.