@media и уметь трансформировать отображение элементов. Ничего сложно тут нет.<nav>
<button>==</button>
<ul>
<li><a href="#">menu item 1</a></li>
<li><a href="#">menu item 2</a></li>
<li><a href="#">menu item 3</a></li>
<li><a href="#">menu item 4</a></li>
</ul>
</nav>nav {
display: flex;
background: #f5f5f5;
border-bottom: 1px solid #e2e2e2;
button {
padding: 10px;
border: 0;
}
ul {
list-style: none;
margin-left: auto;
display: flex;
li a {
padding: 10px;
display: inline-block;
&:hover {
background: #e2e2e2;
}
}
}
}
@media screen and (min-width: 768px) {
nav {
button {
display: none;
}
}
}
@media screen and (max-width: 767.98px) {
nav {
position: relative;
button:not(:hover) {
~ ul {
display: none;
}
}
ul {
position: absolute;
top: 100%;
left: 0;
flex-direction: column;
background: #f5f5f5;
border: 1px solid #e2e2e2;
}
}
}position: absolute.
let images = ["image1.jpg", "image2.jpg"];
let promises = [];
images.forEach(function(src) {
promises.push(new Promise((resolve, reject) => {
let proxyImage = new Image();
proxyImage.addEventListener("load", function () {
resolve();
});
proxyImage.src = src ;
}));
});
Promise.all(promises).then(function () {
// загрузились
});img элементам на странице, либо пробежавшись по всем элементам на странице и выбрав значение css свойства background-image.
mousedown, mouseup, mousemove). При нажатии кнопки мыши записываешь координаты курсора, это и есть стартовая точка. Далее при движении мыши ты тоже получаешь координаты курсора, это и есть точка, куда рисовать. Остается только нарисовать. Чтоб это было динамически, придется рисовать на каждом кадре, очистил - нарисовал, очистил - нарисовал и тд. let canvas = document.createElement("canvas")
let ctx = canvas.getContext("2d")
document.body.appendChild(canvas);
let x1 = 0, y1 = 0, x2 = 0, y2 = 0;
let canDrawSelection = false;
canvas.addEventListener("mousedown", function(e) {
canDrawSelection = true;
x1 = e.clientX;
y1 = e.clientY;
x2 = e.clientX;
y2 = e.clientY;
});
canvas.addEventListener("mouseup", function(e) {
canDrawSelection = false;
});
canvas.addEventListener("mousemove", function(e) {
x2 = e.clientX;
y2 = e.clientY;
});
function drawSelection() {
if (canDrawSelection === true) {
ctx.beginPath();
ctx.lineWidth="2";
ctx.strokeStyle="white";
ctx.rect(x1, y1, x2 - x1, y2 - y1);
ctx.stroke();
}
}
function render() {
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;
ctx.fillStyle = "#2B2E35";
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
drawSelection();
}
function animate() {
requestAnimationFrame(animate);
render();
}
animate();$json = file_get_contents($filename);
$array = json_decode($json);
$array[$emailr] = $passwordr;
file_put_contents($filename, json_encode($array));date("m"); // номер месяца от 01 до 12
date("F"); // номер месяца от January до December
date("d:m:Y"); // 06:10:2018input удали, он ненужен, без js ты ему галочку не снимешь. Стили связанные с input тоже удали. Свой .dd-button сделай не div, а button. Далее отталкивайся от самой кнопки, у нее может быть состояние :focus, вот это то что тебе нужно. Если фокус на кнопке, то показывай список, если нет фокуса, то не показывай. Фокус с кнопки снимается при клике на любой посторонний элемент.<button class="dd-button">Dropdown</button>.dd-button:not(:focus) + .dd-menu {
display: none;
}
.dd-button:focus + .dd-menu {
display: block;
}[id^="berocket_aapf_group"] {
width: 10px;
height: 10px;
background: red;
}