Задать вопрос

fixeri

Ответы пользователя по тегу CSS

  • Как сделать, чтобы при нажатии на кнопку ещё, выпадал полный список?

    @fixeri 
    <!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		ul {
		  list-style: none;
		}
		.work-title-category-container {
		  width: 100%;
		  flex-wrap: wrap;
		  display: flex;
		}
		.work-title-category-item {
		  height: auto;
		  width: 270px;
		  margin: 20px 8px;
		}
		.work-title-category-item li {
		  padding-left: 8px;
		  line-height: 30px;
		  font-size: 17px;
		  letter-spacing: 0.4px;
		}
		.work-title-category-item ul li:last-child {
		  color: #FF2D63;
		  cursor: pointer;
		  font-weight: 600;
		}
		.work-title-category-item li a:hover {
		  color: #FF2D63;
		}

		.other_li {
			display: none;
		}
	</style>
</head>
<body>
	<div class="work-title-category-container">
	  <div class="work-title-category-item"> 
	    <h2>Тексты</h2>
	    <ul>
	      <li><a href="#" title="">Сценарии</a></li>
	      <li><a href="#" title="">Резюме</a></li>
	      <li><a href="#" title="">Статьи</a></li>
	      <li><a href="#" title="">Редактирование</a></li>
	      <li><a href="#" title="">Контент менеджер</a></li>
	      <li><a href="#" title="">Стихи, сказки, эссе</a></li>
	      <li><a href="#" title="">Помощь, мануал</a></li>
	      <span class="other_li">
	      	<li><a href="#" title="">Создание субтитров</a></li>
         	<li><a href="#" title="">Бизнес-тексты</a></li>
	      </span>
	      <li class="local-cat">Ещё..</li>
	    </ul>
	  </div>
	  <div class="work-title-category-item">
	    <h2>Разработка сайтов</h2>
	    <ul>
	      <li><a href="#" title="">Сайты «под ключ»</a></li>
	      <li><a href="#" title="">Вёрстка</a></li>
	      <li><a href="#" title="">Доработка сайта</a></li>
	      <li><a href="#" title="">Адаптивный дизайн</a></li>
	      <li><a href="#" title="">Домены и хостинги</a></li>
	      <li><a href="#" title="">Сис. админ. (CMS)</a></li>
	      <li><a href="#" title="">Тестирование (QA)</a></li>
	      <span class="other_li">
  			<li><a href="#" title="">Контент-менеджер</a></li>
		     <li><a href="#" title="">Интернет-магазины</a></li>
		     <li><a href="#" title="">Флеш-сайт</a></li>
		     <li><a href="#" title="">PDA сайты</a></li>
		     <li><a href="#" title="">Копия сайта</a></li>
		     <li><a href="#" title="">Проектирование</a></li>
	      </span>
	      <li class="local-cat">Ещё..</li>
	    </ul>
	  </div>
	</div>

	<script type="text/javascript">
		"use strict";

		let prev = null;
		document.body.addEventListener("click", (e) => {
			let el = e.target;
			if (!el.classList.contains("local-cat")) return false;
			let other = el.parentElement.querySelector(".other_li");
			if (prev === other) {
				other.style.display = "none";
				prev = null;
				return false;
			}
			
			if (prev) prev.style.display = "none";
			other.style.display = "block";
			prev = el.parentElement.querySelector(".other_li");

		});
	</script>
</body>
</html>
    Ответ написан
    Комментировать
    Комментировать

  • Как сделать что бы каждая следующая полоска была больше предыдущей?

    @fixeri 
    <!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		.block {
			width: 190px;
			height: 40px;
			background-color: red;
			border: 1px solid black;
		}
	</style>
</head>
<body>
	<div class="block"></div>
	<div class="block"></div>
	<div class="block"></div>
	<div class="block"></div>
	<div class="block"></div>
	<div class="block"></div>

	<script type="text/javascript">
		"use strict";
		
		let blocks = Array.from(document.querySelectorAll(".block"));
		let widthBlock = getComputedStyle(blocks[0]).width.slice(0, -2);
		for (let i = 0; i < blocks.length; i++) blocks[i].style.width = +widthBlock + 20 * i + "px";
	</script>
</body>
</html>
    Ответ написан
    1 комментарий
    1 комментарий

  • Как наложить сверху тега video прозрачную картинку?

    @fixeri 
    <!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		.block {
			position: absolute;
			opacity: 0;
			z-index: 999999999;
		}
	</style>
</head>
<body>
	<div class="block"></div>
	<video controls="controls" style="width: 100%;" class="video" src="1.mkv"></video>
	<script type="text/javascript">
		"use strict";
		let video = document.querySelector(".video");
		const getStyle = window.getComputedStyle;
		document.querySelector(".block").style = `
			width: ${getStyle(video).getPropertyValue("width")};
			height: ${getStyle(video).getPropertyValue("height")};
		`;
	</script>
</body>
</html>
    Ответ написан
    Комментировать
    Комментировать