Website design in Photoshope: getting to know the editor and its features
Photoshop and web design 98% of web design projects begin with the creation of functional layouts for future sites, and almost all of them are now drawn in Photoshop. What…

Continue reading →

What is a selling design?
Design is the most important component of any website. This is especially true for selling sites, because in this case it is necessary to interest the visitor and encourage him…

Continue reading →

Web Designer - Creative Internet Profession
From the author: in this article we will talk about the profession of web designer. Consider who it is, what knowledge and skills it should own, what tasks it solves,…

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.

Changing the site design: quick restart of your project
I wrote many times that the web design master must be creative, must look for new solutions to everyday situations, keep an eye on fashion ... But unfortunately, fashion is…

...

Landing design: how to make a capture page
What is a landing page? The concept of landing page, as, in principle, the landing design, came to us relatively recently, according to the official version from the USA, 10-12…

...

Changing the site design: quick restart of your project
I wrote many times that the web design master must be creative, must look for new solutions to everyday situations, keep an eye on fashion ... But unfortunately, fashion is…

...

Web Design Rules Every Professional Should Know
The basic principles are the same for each representative of this field of activity. They are followed by both experienced professionals and even green beginners. Do you think that, having…

...