add topic_4
This commit is contained in:
parent
1a822a4169
commit
fe554065bc
|
|
@ -0,0 +1,36 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="ru">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Всплывающее меню</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div id="nav">
|
||||||
|
<div class="menu-item">
|
||||||
|
Меню 1
|
||||||
|
<div class="submenu">
|
||||||
|
Подменю
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="menu-item">
|
||||||
|
Меню 2
|
||||||
|
<div class="submenu">
|
||||||
|
Подменю
|
||||||
|
Подменю
|
||||||
|
Подменю
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="menu-item">
|
||||||
|
Меню 3
|
||||||
|
<div class="submenu">
|
||||||
|
Подменю
|
||||||
|
Подменю
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,23 @@
|
||||||
|
window.onload = function() {
|
||||||
|
let nav = document.getElementById("nav")
|
||||||
|
let items = nav.getElementsByClassName("menu-item");
|
||||||
|
for (let i = 0; i < items.length; i++) {
|
||||||
|
let item = items[i]
|
||||||
|
item.onclick = function () {
|
||||||
|
for (let j = 0; j < items.length; j++) {
|
||||||
|
if (i === j) {
|
||||||
|
continue
|
||||||
|
}
|
||||||
|
let oldItem = items[j]
|
||||||
|
oldItem.getElementsByClassName("submenu")[0].classList.remove('show')
|
||||||
|
}
|
||||||
|
|
||||||
|
let submenu = item.getElementsByClassName("submenu")[0];
|
||||||
|
if (submenu.classList.contains('show')) {
|
||||||
|
submenu.classList.remove('show')
|
||||||
|
} else {
|
||||||
|
submenu.classList.add('show')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
.menu-item {
|
||||||
|
font-size: 20px;
|
||||||
|
border: 2px solid #66CDAA;
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-item .submenu {
|
||||||
|
width: 100px;
|
||||||
|
background: rgb(134, 173, 134);
|
||||||
|
position: absolute;
|
||||||
|
cursor: pointer;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-item .submenu.show {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 152 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
|
|
@ -0,0 +1,25 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="ru">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Слайдер</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div class="slider">
|
||||||
|
<div class="slider-line">
|
||||||
|
<img src="img/pic1.webp" width="256" height="256" alt="">
|
||||||
|
<img src="img/pic2.png" width="256" height="256" alt="">
|
||||||
|
<img src="img/pic3.webp" width="256" height="256" alt="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button class="slider-prev" onclick="nextSlide()">Назад</button>
|
||||||
|
<button class="slider-next" onclick="previousSlide()">Дальше</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="script.js"></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,27 @@
|
||||||
|
let slideIndex = 1;
|
||||||
|
|
||||||
|
showSlides(slideIndex);
|
||||||
|
|
||||||
|
function nextSlide() {
|
||||||
|
showSlides(slideIndex += 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
function previousSlide() {
|
||||||
|
showSlides(slideIndex -= 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
function showSlides(n) {
|
||||||
|
let slides = document.getElementsByClassName("slider-line")[0].getElementsByTagName("img");
|
||||||
|
|
||||||
|
if (n > slides.length) {
|
||||||
|
slideIndex = 1
|
||||||
|
}
|
||||||
|
if (n < 1) {
|
||||||
|
slideIndex = slides.length
|
||||||
|
}
|
||||||
|
|
||||||
|
for (let slide of slides) {
|
||||||
|
slide.style.display = "none";
|
||||||
|
}
|
||||||
|
slides[slideIndex - 1].style.display = "block";
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,55 @@
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
html, body {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 30px auto;
|
||||||
|
background: #f1f1f1;
|
||||||
|
padding: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
background: none;
|
||||||
|
border: 1px solid black;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 10px 20px;
|
||||||
|
font-size: .9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:hover {
|
||||||
|
background: orangered;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:active {
|
||||||
|
background: black;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider {
|
||||||
|
width: 256px;
|
||||||
|
height: 256px;
|
||||||
|
border: 2px solid black;
|
||||||
|
margin: 30px auto;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider-line {
|
||||||
|
height: 256px;
|
||||||
|
width: 1024px;
|
||||||
|
background: orangered;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
left: 0;
|
||||||
|
transition: all ease 1s;
|
||||||
|
}
|
||||||
|
|
||||||
Loading…
Reference in New Issue