VLADIMIR
/
interfaces
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add topic_4

This commit is contained in:
Владимир Фёдоров 2023-04-07 12:21:44 +07:00
parent 1a822a4169
commit fe554065bc
9 changed files with 185 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
topic_4/example1/index.html Normal file
View File

@ -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>

23
topic_4/example1/script.js Normal file
View File

@ -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')
}
}
}
}

19
topic_4/example1/style.css Normal file
View File

@ -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;
}

BIN
topic_4/example2/img/pic1.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
topic_4/example2/img/pic2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 152 KiB

BIN
topic_4/example2/img/pic3.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

25
topic_4/example2/index.html Normal file
View File

@ -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>

27
topic_4/example2/script.js Normal file
View File

@ -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";
}

55
topic_4/example2/style.css Normal file
View File

@ -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;
}