Y
Let's start over.How the button works.It's based on checkbox status. The checkbox is hidden, but I see his writing. Checkbox is switched on and off by feedback via: label for="ID переключателя" (when the sign is marked with a switch click) and the styles are further tied to [ID переключателя]:checked♪Position of the buttonThe button is standing. position: fixed; I don't want her laughing at the door.
But more importantly, it makes a button purchase. display: block; (if he's cleaned up, she'll have style display: inline; and all the internal side elements will go beyond it, and since they have no width, they will take 100 per cent of the available place. Why is the inclusion of a fixed influence on the nature of the display I can't say if anyone can specify, welcome.Why does span have to be position: relative;Installation of this value makes use of top, left, right, bottom ( https://webref.ru/css/position ) to move the element.Why do you have to: There are several conditions. One of them:.hidden-menu-ticker:checked ~ .btn-menu span.first {
-webkit-transform: rotate(45deg);
top: 10px;
}
In which the top shift is used. This shift puts the top black strip down the center of label. Since span is not established transform-originhe turns to his centre by default. As a result, it is reverted to the centre of the inscription (the general height of 25px, the height of each span 5px and 2 and 3 have a margin of 5px. The centre of the inscription is similar to that of 10px.)Status established position: fixed; The hidden menu.You've already figured that out. It makes a menu independent of the page, but it also allows it to be placed outside the screen so that it can not be seen (covering). Also, there's no horizontal lane in the browser.Excuse me for the first comment. It's been a while. I mean, if you don't, tell me what's missing.Added to 1The animation works at the top and on the corner. Span moves downwards at a point, because the top is not mainly stylized (this is the speciality of the transition. Like add it. top: 0; in style .btn-menu span.first And you will see a simultaneous shift with a top black rectangle. The procedure for listing is irrelevant.Added to 2 companiesAnd how do I get...hidden-menu-ticker:checked ~ .btn-menu { left: 180px; } Moving the button to the right at 180 picels in a cheque? Yeah.So left this retreat on the left? In the case of a fixed retreat, is it from the left edge of the screen?Yeah..hidden-menu-ticker:checked ~ .hidden-menu { left: 0; How do I know when a chequetted menu becomes zero, that's how it gets to the left end?Initially, the menu is outside the screen. by weight left: 0; His left edge matches the left side of the window.Added to 3 companiesThe whole animation is happening simultaneously. The animation of the button is simply delayed, so it loses after the menu travels (with a menu of 0.2 seconds of animation and a delay of 0.23 seconds). You can change the order.
