Layout adaptive menu
Adaptive menus collapsing into a hamburger on mobile devices can now be seen on almost any site. In this lesson we will learn to make up such menus. In the…

Continue reading →

SOLID principles in JavaScript. The substitution principle of Barbara Liskov
The substitution principle is most often used in the context of inheritance, however, the essence of the principle is more connected not with inheritance, but with the behavioral compatibility of…

Continue reading →

Blog Design: Layout Workshop
The topic of today's post is blog design. We will have a practical lesson, so get ready for independent work, there is no planned vacation :) Why is the master…

Continue reading →

Layout adaptive menu

Adaptive menus collapsing into a hamburger on mobile devices can now be seen on almost any site. In this lesson we will learn to make up such menus. In the end, we should get the result shown below:
Menu for large screens
First, we make up the usual menu for the “large” resolution (in our case, this will be a screen resolution of 1000px or more). To do this, create the following HTML structure:

Markup
<div class = “menu”>
<div class = “menu__links”>
<a class=”menu__links-item” href=”/”> Item 1 </a>
<a class=”menu__links-item” href=”/”> Item 2 </a>
</div>
</div>
And add the necessary styles:

CSS
.menu {
text-align: right;
}

.menu__links-item {
display: inline-block;
color: # 333333;
font-family: Arial;
font-size: 14px;
line-height: 30px;
padding: 0 10px;
text-transform: uppercase;
text-decoration: none;
}

.menu__links-item: hover {
text-decoration: underline;
}
So far, everything is simple. We added two menu items and styled them as we needed.

Adaptation for mobile devices
In the second step, we need to add a hamburger icon and make the menu on mobile devices open by clicking on this icon. Screens larger than 1000px should display a regular menu.

In the HTML structure, add the icon:

Markup
<div class = “menu__icon”>
<span> </span>
<span> </span>
<span> </span>
<span> </span>
</div>
And write styles for her:

CSS
.menu__icon {
display: none;
width: 45px;
height: 35px;
position: relative;
cursor: pointer;
}

.menu__icon span {
display: block;
position: absolute;
height: 9px;
width: 100%;
background: # 333333;
border-radius: 9px;
opacity: 1;
left: 0;
transform: rotate (0deg);
transition: .25s ease-in-out;
}

.menu__icon span: nth-child (1) {
top: 0px;
}

.menu__icon span: nth-child (2), .menu__icon span: nth-child (3) {
top: 13px;
}

.menu__icon span: nth-child (4) {
top: 26px;
}
Pay attention to the rule display: none; for the .menu__icon class – by default the icon should not be visible.

For small screens, we’ll add additional rules: firstly, we need to show the icon, secondly, to refine the styles and hide the menu, and thirdly, add styles for menu items:

CSS
@media screen and (max-width: 999px) {
.menu__icon {
display: inline-block;
}

.menu__links {
position: fixed;
display: block;
top: 0;
right: 0;
left: 0;
margin-top: 52px;
background-color: rgba (0, 0, 0, 0.8);
z-index: 1000;
overflow: auto;
}

.menu__links-item {
display: block;
padding: 10px 0;
text-align: center;
color: #ffffff;
}
}
Now the layout of the menu works as it should, the last step remains – to show the menu when you click on the icon.

Menu logic implementation
To show the menu when you click on the icon, add some JavaScript’s.

Javascript
(function ($) {
$ (function () {
$ (‘. menu__icon’). on (‘click’, function () {
$ (this) .closest (‘. menu’). toggleClass (‘menu_state_open’);
});
});
}) (jQuery);
For simplicity, we used jQuery, but if you want, you can implement the same logic in your framework or in pure JavaScript. In the code above, we just switch the .menu_state_open class of the .menu element when we click on the icon.

Finally, add styles for the open state of the menu:

CSS
.menu.menu_state_open .menu__icon span: nth-child (1) {
top: 18px;
width: 0%;
left: 50%;
}

.menu.menu_state_open .menu__icon span: nth-child (2) {
transform: rotate (45deg);
}

.menu.menu_state_open .menu__icon span: nth-child (3) {
transform: rotate (-45deg);
}

.menu.menu_state_open .menu__icon span: nth-child (4) {
top: 18px;
width: 0%;
left: 50%;
}

.menu.menu_state_open .menu__links {
display: block;
}
For the menu to be open, we set the width of the upper and lower hamburger strip to zero, and rotate the two middle ones 45 degrees so that they form a cross (which is why the central strip is formed by two span elements located one above the other).

In the current version, links in the menu have the href attribute and lead to a new page. But such a menu can work without reloading the page, for this you need to add a click handler on the link, perform some action in this handler and remove the .menu_state_open class from the .menu element:

Conclusion
In this lesson we made up an adaptive menu that collapses into a hamburger on small screens. Depending on the design requirements, you can style it as you wish, but the general principle will remain the same.

What is web hosting?
This article clarifies the concept of hosting. It can be useful to those who are going to or have recently organized their representation on the Internet. The provision of hosting…

...

The psychology of web design: playing in a new way
Psychological aspects of design The connection between psychology and web design is not necessary to prove. This is obvious, if only because the transmission of information by means of Internet…

...

SOLID principles in JavaScript. Open-closed principle
The essence of the principle The principle of openness-closeness is as follows: "Software entities (classes, modules, functions, etc.) must be open for expansion, but closed for change." That is, the…

...

Basic web design elements. How to create an effective website thanks to them?
For the construction of any building requires certain building materials. As a rule, for each type of structure they constantly remain the same, only the shape and general design of…

...