The menu is that element with which the user meets at an entrance to a site and sees it, moving on pages. The main menu is located in the header of the site, and the additional one is in the bottom block of the page. It contains useful or secondary information, which for convenience is often formatted as a menu. Often on all pages of the site the same design of the navigation element is used.
When some items contain additional sections, several levels are created. It works like this: when you hover over one of the sections, an additional list appears with subsections. During development, care must be taken that when viewing a page on small screens an adaptive menu appears instead of the usual one.
HTML markup
Before you make up the responsive CSS drop-down menu, you need to create a skeleton. It is set using the HTML markup language and is located in a file with the extension .html. It starts with <! DOCTYPE>, then the beginning and end of the document are marked with <html> and </html> tags, respectively. The head tag is set inside the document , where meta-information about the site is indicated:
- document title
- short description;
- encoding;
- files with styles and scripts.
After the closing </head> tag follows the body of the document, decorated as <body>. Here are the logical blocks of the site, they are interpreted by the browser and displayed on the screen in the form of visual elements.
Basic markup usually consists of ul and li tags. This is a semantically correct design, which is due to the fact that when viewed in browsers that do not support CSS, the content analyzer correctly recognizes this block. Although the use of standard divs is also widespread.
A simple menu layout without hidden elements and a CSS drop-down menu looks like this:
<ul>
<li> <a> Home </a> </li>
<li> <a> History </a> </li>
<li> <a> About us 3 </a> </li>
<li> <a> Contacts 3 </a> </li>
</ul>
The <a> tag indicates the links to the pages, and all the others indicate the selectors used.
Base styles
The next step in creating a drop-down menu in HTML and CSS is to create a cascading style sheet. They are stored in a file with the extension .css, which describes the appearance of the document and various visual effects. Here you can specify colors, fonts, block layout, and other aspects of the appearance of a web page.
What will be here depends solely on the design. There are a few key points to consider. As the menu is created, list markers should not be displayed. They are removed using the list-style: none attribute. An important part is the elimination of underlining links. To do this, the selectors that are responsible for the design of the <a> tag must contain text-decoration: none.
You need to assign actions when you mouse over the buttons. What is the: hover pseudo-class used for? Using it, the user sees how the color of the items changes or a menu drop-down list appears in HTML CSS. Display: none is used to hide some elements , and display: block or display: inline is used for appearance.
Horizontal placement via float
After basic design, the user will notice that the resulting structure is a vertical menu with a drop-down list in HTML CSS. For some sites, the layout of the vertical menu is acceptable, but usually the horizontal one is used.
Now you need to place all the elements in a row. In this case, the float property, which is responsible for the flow, will be used. At first it was used solely to control the position of the text relative to the image. Thus, you can specify left-side or right-side alignment, cancel text flow, or assign inheritance to the value of the parent.
Horizontal placement via inline-block
By default, the blocks specified by the div tag are vertically aligned. The width of each occupies the entire page, and when creating a sister element, it will follow downward, starting from the previous one.
When you need to hide, display: none is used. This is needed for the appearance of hidden parts of the menu when you hover over the mouse. It is important to note that the block does not just become transparent - the visible parts of the site take its place.
To place divas horizontally one after another, you must use the inline or inline-block property. As for the latter, its use has more advantages, because it contains the properties of both a line element and a block element.
The display property is used for divs and li tags of the ul list.
Thus, to create a horizontal drop-down menu in HTML CSS in the stylesheet in the li or div selectors, the display attribute is specified with the value inline-block.
Creating Dropdowns
Dropdown elements are not initially visible on the page; they have the display: none property. Later none changes to block or inline-block. This happens when you click on one of the menu items or during mouse hover. CSS is used to create this effect and related animated transitions.
It should look something like this:
#menu ul li {
position: absolute;
display: none;
}
#menu li: hover ul {
display: inline-block;
}
Attention should be paid to the position attribute, with which the positioning of the element is set. A div block with a given absolute value is displayed above other blocks. And the coordinate count starts from the upper left edge of the parent element. In this case, the parent is considered document. This needs to be changed and made parent #menu, set position: relative. Now in #menu ul you need to specify the left and top coordinates so that the drop-down list appears directly below the main point and does not overlap it.
If there are several absolute blocks nearby, you must use the z-index property. When considering two divas with absolute positioning, when one is on top of the other, the z-index of the first should have a value higher than that of the second.
Adaptability
No site can be considered good if it does not display correctly on mobile devices and tablets. The point of creating responsive pages is to change the appearance when reaching a certain screen size. The keyword @media is used for this. The values indicate the type of media, the maximum or minimum screen size.
To work with this attribute, you need to set the initial width of the block on the big screen with the max-width: 100% property. Reducing the screen, changes occur with the block:
@media (min-width: 768px) {
.container-small {
// change the width of the menu items, display the hamburger icon
}
This menu icon plays an important role in creating an adaptive multi-level CSS horizontal drop-down menu. Represents three horizontal lines parallel to each other. When the user clicks on them, the hidden parts of the alternative menu appear.
Using Bootstrap
With the advent of the Bootstrap framework, it became much easier for coders to create responsive elements and build a website. It allows you to prototype ideas using ready-made components and powerful plug-ins. To use the basic features, you need to include the compiled Bootstrap styles from the CDN in the head of the site. It should look like this:
<link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity = "sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIwFwOfOhWgfOgOgOfOgOfOgOfOgOgOgOfOgOfOgOgOgOgOgOgOgOgOgOgOgOgOgOgOfOgOgOfOgOgOfOg5
To create a horizontal menu with a drop-down list in CSS, the Navbar component is used. It must be copied from the official site. By default, it has two display modes: desktop and mobile.
Now it remains to add design to look like the design requires.
Another way to create adaptive elements is to use a grid system. Its difference from Bootstrap is that you can specify any number of columns and make them of different widths.
Ubermenu
Today, a huge number of plugins have been developed that exempt from writing code yourself. The layout designer needs to connect the appropriate files, make changes to the functionality.
UberMenu is a horizontal menu with a drop-down list of HTML CSS, developed for the WordPress engine. Its features:
- adaptability;
- drop-down menu;
- sensor support;
- work out of the box;
- flexible settings;
- a large list of animated transitions;
- the presence of sorting filters;
- automatic integration into any WordPress theme.
There is a free and paid version with full functionality for $ 19.
The convenience of using ready-made plug-ins for creating drop-down menus in CSS is that all browsers will display the contents of a web page in the same way. There is one unpleasant feature - UberMenu is not able to work with IE6 browser. But this is not scary, because today the distribution environment of Internet Explorer is less than 1%.
Max Mega Menu
“Max Mega Menu” is a great solution for creating CSS drop-down menus. It supports the ability to arrange menus in a header and footer. It is easy to work with, it supports drag-and-drop. All that needs to be done to place the menu buttons is to drag the corresponding elements to the selected location with the mouse.
You can assign any methods so that a hidden submenu appears: move the mouse cursor over an element or by clicking on it. There are many animated effects: fading, appearing, moving out.
This plugin is quite lightweight, the javascript file weighs less than 2 kilobytes. When creating, you can use the built-in fonts, icons. If there are problems with use, you can familiarize yourself with the relevant manuals.
To get started, just add it to the list of WP plugins.
JQuery Accordion Menu Widget
You can use the JQuery Accordion Menu Widget plugin to create CSS dropdown menus. It is available for download from the WordPress repository or from the official website. Works with the latest versions of CMS, compatible with other plugins.
With it, you can create a vertical menu. It supports the standard functions of similar tools, but there are special additions. For example, when deploying a submenu, if no actions have been completed in 1 second, it will automatically return to its original state. Another interesting feature is to disable parent links when child links are active. This means that when the submenu appears, there is no way to click on the main items.
When creating a menu on their own, the user was faced with a situation where the elements immediately react even with an accidental mouse hover or click. To avoid this inconvenience, a hover delay is built in. Another useful feature is controlling the speed at which a submenu appears and hides.
Conclusion
It is important to create a CSS drop-down menu for simple and convenient interaction between the user and the web page interface. To solve the problem, it is necessary to competently develop the design, lay out the basic elements, design styles, finalize the animation effects.
You can use ready-made options if some unique design solutions are not provided. Plugins are easily connected to the page, they are very easy to edit in accordance with the requirements.
If it makes sense to develop a menu from scratch, of course, you need to do this yourself. When working with frameworks, ready-made components are used, they are immediately adaptive. No need to adjust layout for small screens saves time.