Подгрузка контента при прокрутке (бесконечная лента)

Пример реализации «Бесконечной ленты» с применением PHP, БД MySQL, и JQuery Ajax.

Формирование списка
Первый PHP-скрипт выводит только первые 12 записей из таблицы `prods` (записей может быть и больше, главное чтобы высота блока была больше высоты окна браузера).

Ниже, списка товаров выводится
<div id="showmore-triger">, который выполняет роль индикатора загрузки с гифкой ajax-loader.gif и того что пользователь уже доскроллил до этого элемента.

<?php
// Кол-во элементов
$limit = 12; 
 
// Подключение к БД
$dbh = new PDO('mysql:dbname=db_name;host=localhost', 'логин', 'пароль');
 
// Получение записей для первой страницы
$sth = $dbh->prepare("SELECT * FROM `prods` LIMIT {$limit}");
$sth->execute();	
$items = $sth->fetchAll(PDO::FETCH_ASSOC);	
 
// Кол-во страниц 
$sth = $dbh->prepare("SELECT COUNT(`id`) FROM `prods`");
$sth->execute();
$total = $sth->fetch(PDO::FETCH_COLUMN);
$amt = ceil($total / $limit);
?>
	
<div id="showmore-list">
	<div class="prod-list">
		<?php foreach ($items as $row): ?>
		<div class="prod-item">
			<div class="prod-item-img">
				<img src="/images/<?php echo $row['img']; ?>" alt="">	
			</div>
			<div class="prod-item-name">
				<?php echo $row['name']; ?>		
			</div>
		</div>
		<?php endforeach; ?>
	</div>
</div>
 
<div id="showmore-triger" data-page="1" data-max="<?php echo $amt; ?>">
	<img src="ajax-loader.gif" alt="">
</div>


CSS-стили:
#showmore-triger {
	text-align: center;
	padding: 10px;
	background: #ffdfdf;
}
 
/* Вывод товаров */
.prod-list {
	overflow: hidden;
	margin: 0 0 20px 0;
}
.prod-item {
	width: 174px;
	height: 230px;
	float: left;
	border: 1px solid #ddd;
	padding: 20px;
	margin: 0 20px 20px 0;
	text-align: center;
	border-radius: 6px;
}
.prod-item-img {
	width: 100%;
}
.prod-item-name {
	font-size: 13px;
	line-height: 16px;
}
 
.prod-list .prod-item:nth-child(3n) {
	margin-right: 0
}


JS-скрипт подгрузки контента
В нём отслеживается скроллинг страницы и в нужный момент отправляется AJAX-запрос на /ajax.php?page=x с номером следующей страницы, который возвращает следующую страницу записей, далее они вставляются в общий список.

При выводе всех страниц из БД, элемент с id="showmore-triger" удаляется методом JQuery remove() – он удаляет элемент из дерева DOM, а также все его JS-события.

<script src="/jquery/2.1.1/jquery.min.js"></script>
 
<script>
var block_show = false;
 
function scrollMore(){
	var $target = $('#showmore-triger');
	
	if (block_show) {
		return false;
	}
 
	var wt = $(window).scrollTop();
	var wh = $(window).height();
	var et = $target.offset().top;
	var eh = $target.outerHeight();
	var dh = $(document).height();   
 
	if (wt + wh >= et || wh + wt == dh || eh + et < wh){
		var page = $target.attr('data-page');	
		page++;
		block_show = true;
 
		$.ajax({ 
			url: '/ajax.php?page=' + page,  
			dataType: 'html',
			success: function(data){
				$('#showmore-list .prod-list').append(data);
				block_show = false;
			}
		});
 
		$target.attr('data-page', page);
		if (page ==  $target.attr('data-max')) {
			$target.remove();
		}
	}
}
 
$(window).scroll(function(){
	scrollMore();
});
	
$(document).ready(function(){ 
	scrollMore();
});
</script>

Код файла ajax.php
Скрип получает обрабатывает переменную $_GET['page'] и нужны записи из БД.

<?php
// Кол-во элементов
$limit = 12; 
 
// Подключение к БД
$dbh = new PDO('mysql:dbname=db_name;host=localhost', 'логин', 'пароль');
 
// Получение записей для текущей страницы
$page = intval(@$_GET['page']);
$page = (empty($page)) ? 1 : $page;				
$start = ($page != 1) ? $page * $limit - $limit : 0;
$sth = $dbh->prepare("SELECT * FROM `prods` LIMIT {$start}, {$limit}");
$sth->execute();	
$items = $sth->fetchAll(PDO::FETCH_ASSOC);				
 
foreach ($items as $row) {
	?>
	<div class="prod-item">
		<div class="prod-item-img">
			<img src="/images/<?php echo $row['img']; ?>" alt="">	
		</div>
		<div class="prod-item-name">
			<?php echo $row['name']; ?>		
		</div>
	</div>
	<?php
}

Добавлено: 10 Января 2022 07:34:19 Добавил: Андрей Ковальчук

Tailwind CSS: за и против

По данным опроса The State of CSS 2020, больше всего разработчиков в мире, использующих CSS-фреймворки, сейчас заинтересованы в изучении и применении Tailwind CSS. Он опережает конкурентов в этом рейтинге уже второй год подряд. Команда Tailwind предлагает альтернативный подход для поддержки и стилизации HTML-разметки, но у него есть и свои противники. Проштудировав статьи и комментарии на таких ресурсах, как Dev.to, Product Hunt и Codeburst, мы собрали наиболее популярные доводы за и против использования этого фреймворка.

Концепт Tailwind CSS
Но сначала о том, чем Tailwind отличается от других CSS-фреймворков. Главное отличие — в том, что он не содержит какой-либо концепт дизайна, а предоставляет готовые классы, утилиты и директивы для стилизации и разметки HTML-тегов. Такой подход позволяет реализовать полностью настраиваемый дизайн компонентов без написания даже строчки пользовательского CSS-кода. Авторы фреймворка предполагают, что разработчики получат от этого следующие преимущества:

Не нужно тратить время на придумывание названий для CSS-классов.
CSS код почти не увеличивается в размерах, а все классы и утилиты используются многократно. Поэтому редко когда придется писать новый CSS-код.
Вносить изменения безопаснее. Не нужно переписывать CSS, если достаточно поменять классы в HTML.
Еще из полезных функций: тему можно настроить под свой проект, адаптивные утилиты Tailwind помогут создать полностью отзывчивый интерфейс, а наведение, фокус и другие состояния легко стилизовать с помощью служебных классов. Функция @apply при этом позволяет использовать Tailwind-классы для создания собственных переиспользуемых абстракций:

<!-- Using utilities -->
<button class="py-2 px-4 font-semibold rounded-lg shadow-md text-white bg-green-500 hover:bg-green-700">
  Click me
</button>
 
<!-- Extracting classes using @apply -->
<button class="btn btn-green">
  Button
</button>
 
<style>
  .btn {
    @apply py-2 px-4 font-semibold rounded-lg shadow-md;
  }
  .btn-green {
    @apply text-white bg-green-500 hover:bg-green-700;
  }
</style>

За Tailwind CSS
Синтаксис
Синтаксис Tailwind очень прост: к элементам HTML или JSX добавляются имена классов. Вот как это выглядит на примере уведомления, созданного с помощью этого фреймворка:

<div class="max-w-sm mx-auto flex p-6 bg-white rounded-lg shadow-xl">
  <div class="flex-shrink-0">
    <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div class="ml-6 pt-1">
    <h4 class="text-xl text-gray-900 leading-tight">ChitChat</h4>
    <p class="text-base text-gray-600 leading-normal">You have a new message!</p>
  </div>
</div>


Каждое имя класса содержит одно или несколько свойств CSS. Например, flex — это display: flex;, p-6 — padding: 1.5rem, mx-auto — margin-left: auto; margin-right: auto; и так далее. Этот подход очень прост и полезен, так как сложные компоненты строятся из ограниченного набора примитивных утилит.

Встроенная отзывчивость, псевдоклассы и стили
Отзывчивый дизайн, стилизация элементов и псевдоклассов, таких как hover, focus, active, доступны прямо в HTML-коде. Весь стиль определяется самим элементом. Это означает, что посмотрев на элемент, вы сразу поймете его стили. При этом вам не нужно открывать другой файл, чтобы редактировать CSS-правила.

По умолчанию Tailwind использует систему брейкпоинтов mobile first, аналогичную той, которая используется в других фреймворках, таких как Bootstrap.

Меньше CSS-кода
Размер CSS-кода не растет линейно. Имена классов совместно используются элементами, а это гарантирует постоянный размер пакета. Кроме того, Purge CSS удалит все неиспользуемые стили, поэтому кодовая база не будет перегружена.

Более высокая производительность
Написание классов Tailwind происходит быстрее, чем в CSS или CSS-in-JS. С использованием Tailwind верстка сводится к добавлению классов CSS к HTML-разметке.

Кроме того, у Tailwind есть префиксы, которые соответствуют определенному брейкпоинту. Их можно добавлять к классам, что будет заменой использования медиа-запросов.

Рассмотрим это на примере. В обычном CSS у нас было бы:

/* Small (sm) */
@media (min-width: 640px) { /* ... */ }
 
/* Medium (md) */
@media (min-width: 768px) { /* ... */ }
 
/* Large (lg) */
@media (min-width: 1024px) { /* ... */ }
 
/* Extra Large (xl) */
@media (min-width: 1280px) { /* ... */ }

Это может показаться легким для чтения. Однако представьте, что у вас есть сотни классов. Вскоре код может стать трудным для чтения и изменения.

Теперь посмотрим на Tailwind:

<!-- Width of 16 by default, 32 on medium screens, and 48 on large screens -->
<img class="w-16 md:w-32 lg:w-48" src="...">

Здесь мы определяем ширину для каждой точки брейкпоинта, при этом мы всего лишь поменяли стили внутри элемента. А позже будет намного проще удалить или изменить стили, поскольку они не будут связаны с сотнями правил.

Множество вариаций настройки проекта
Tailwind предоставляет разработчику рабочую тему по умолчанию, которая подойдет для множества проектов. Есть и возможность расширять или изменять настройки с помощью файла tailwind.config.js. Он также позволяет добавлять собственные плагины, что открывает целый мир возможностей для сторонних разработчиков.

Против Tailwind CSS
Создание сложных анимаций
Несмотря на то, что простые анимации включены в готовом виде, а другие можно добавить через конфигурацию, сложную анимацию в Tailwind очень сложно реализовать. Но проблему можно решить с помощью простого CSS, библиотеки анимации, такой как Framer Motion, или библиотеки CSS-in-JS, такой как Styled Components.

Уродливый HTML
Базовые классы содержат одно-два CSS-правила, поэтому может потребоваться много классов для стилизации отдельного тега. Это значит, что HTML-разметка будет выглядеть раздуто и неряшливо с эстетической точки зрения. Но не только эстетика может пострадать — во множестве классов, написанных в одну строку, будет легко запутаться.

Для наглядности посмотрите на пример ниже:

<div class="min-w-0 flex-auto space-y-0.5">
  <p class="text-lime-600 dark:text-lime-400 text-sm sm:text-base lg:text-sm xl:text-base font-semibold uppercase">
    <abbr title="Episode">Ep.</abbr> 128
  </p>
  <h2 class="text-black dark:text-white text-base sm:text-xl lg:text-base xl:text-xl font-semibold truncate">
    Scaling CSS at Heroku with Utility Classes
  </h2>
  <p class="text-gray-500 dark:text-gray-400 text-base sm:text-lg lg:text-base xl:text-lg font-medium">
    Full Stack Radio
  </p>
</div>

Для решения этой проблемы авторы фреймворка предлагают использовать @apply. Например в проектах, где большая часть HTML ориентирована на имена классов с компонентной областью видимости (что близко по концепции к методологии БЭМ), @apply широко используется. Но это подводит к следующему вопросу.

@apply принципиально несовместим и нестандартен
Проблемы возникнут, если попробовать отказаться от Tailwind. Везде, где классы были созданы с помощью @apply, они просто перестанут работать. Особенно это будет болезненно для проектов, использующих компонентный подход.

Избыточная сложность настроек
Токены дизайна Tailwind настраиваются с помощью сложной системы на JavaScript. Настройки темы Tailwind можно заменить настраиваемыми CSS-переменными (CSS Custom Properties), которые поддерживаются всеми браузерами, кроме Internet Explorer.

Tailwind CSS плохо работает через CDN
Минусы подключения через CDN:

Нельзя настроить тему
Нельзя использовать директивы: @apply, @variants и т.д.
Нельзя включить дополнительные варианты, такие как group-focus
Нельзя устанавливать сторонние плагины
Нельзя избавиться от неиспользуемых стилей
Это будет минусом для тех, кто привык не хранить у себя стандартный код. Единственный приемлемый вариант использования CDN — для прототипирования.

Tailwind забывает о существовании веб-компонентов
Tailwind полностью непригоден для использования в Shadow DOM. Некоторые предприимчивые разработчики придумали решения, в которых отдельные элементы стиля Tailwind можно внедрить в компоненты в процессе сборки, но это определенно “костыль”.

Вместо этого Tailwind поощряет суп с тегами div/span. Использование тегов <div> и <span> повсюду в разметке — это анти-шаблон. Пользовательские элементы полностью поддерживаются современными браузерами, и нет причин этим пренебрегать. Например вместо <div class = “card”> </div> можно написать <ui-card> </ui-card>.

Заключение
Tailwind как низкоуровневый фреймворк CSS — подходящее решение для стилизации. Он лишен множества недостатков, которые возникают в других решениях CSS. Tailwind повышает продуктивность, уменьшает размер файлов, ускоряет разработку.

Но хотя Tailwind очень хорошо подошел многим разработчикам, это не значит, что это идеальное решение для каждого проекта. Стоит взвесить его преимущества для кодовой базы и потенциальное влияние на команду, прежде чем рассматривать его применение.

Добавлено: 29 Июня 2021 07:37:08 Добавил: Андрей Ковальчук

Как показать скрыть часть пунктов из списка

Такой функционал можно использовать везде. Мне в моей практике несколько раз пригодился данный метод. Один из вариантов был вывод пунктов на посадочной странице. Список имел много пунктов, которые содержали ключевые слова. Отображать все сразу не имело смысла, но все же они могли быть интересны посетителю, поэтому было принято решение скрыть часть из них. Таким же образом можно сделать галерею со скрывающимися изображениями. В общим, вариантов множество, перечислять их не имеет смысла.

Если это то что вам нужно, то давайте приступим к изучению того, как повторить такое у себя на сайте.

Первым шагом в создании такого свернутого списка, будет добавление HTML кода со списком на страницу, если у вас ее нет, если у вас уже есть свой список, то адаптируйте его согласно этому.

<ul class="list">
<li>Пункт номер раз</li>
<li>Пункт номер два</li>
<li>Пункт номер три</li>
<li>Пункт номер четыре</li>
<li>Пункт номер пять</li>
<li>Пункт номер шесть</li>
<li>Пункт номер семь</li>
<li>Пункт номер восемь</li>
<li>Пункт номер девять</li>
<li>Пункт номер десять</li>
</ul>
<div class="show_hide_list">Смотреть все</div>

Тут все просто. Задаем список и присваиваем ему класс list. Можете указать свой, только в скрипте тоже надо будет указать свой новый класс. Так же, обязательно. нужно добавить кнопку, в нашем случаи это просто блок, с классом show_hide_list.

Второй шаг, добавляем стили для нашего списка и кнопки:
ul.list li:nth-child(n+6){display:none;}
.show_hide_list{cursor:pointer;display:inline-block;text-align:center;padding:10px;background:#fc0;}

Главная строка первая, она обязательна, потому как скрывает все пункты, начиная с шестого. Если вы хотите скрывать с седьмого или со второго и тд, то измените на свой. Так же надо будет изменить и в скрипте. Вторая строка - это стили для кнопки Смотреть все. Ей можете задавать свои стили, которые вам нравятся больше.

Теперь мы должны убедится что к сайту уже подключена библиотека jQuery. Если нет, то это нужно сделать.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

Следующий шаг, подключение уже самого скрипта, который будет осуществлять показ, скрытие пунктов из списка. Его нужно подключить после библиотеки, которую мы подключали выше. Можете воспользоваться той же инструкцией с подсказками как это сделать правильно.
jQuery(document).ready(function($){
if($('ul.list').find('li').length > 5){
$('.show_hide_list').click(function(){
$('ul.list li:nth-child(n+6)').slideToggle('');
$(this).toggleClass('opnd_g');
if($(this).hasClass('opnd_g')){
$(this).html('Скрыть');}
else {$(this).html('Смотреть все');}
});
}else{$('.show_hide_list').hide();}
});

Давайте разберем скрипт построчно, что бы понять как он работает. Начнем со второй строки, потому как в первой просто объявляем, что скрипт будет выполняться только тогда, когда загружен весь HTML и построен DOM, а в последней, просто закрываем функцию.

if($('ul.list').find('li').length > 5){ - Задаем условие. Если у нашего списка, что имеет класс - .list имеются пункты li и их количество больше пяти.
$('.show_hide_list').click(function(){ - Запускаем функцию, которая сработает, если мы нажмем на элемент страницы с классом show_hide_list, то бишь на нашу кнопку, что расположена после списка.
$('ul.list li:nth-child(n+6)').slideToggle(''); - После нажатия показываем пункты с шестого и до последнего. Если вы поменяли количество в стилях, то меняйте и здесь соответственно.
$(this).toggleClass('opnd_g'); - Добавляем нашей кнопке после нажатия класс opnd_g.
if($(this).hasClass('opnd_g')){ - Создаем условие, что если наша кнопка имеет класс opnd_g, то...
$(this).html('Скрыть');} - То меняем текст в кнопке - Смотреть все на Скрыть.
else {$(this).html('Смотреть все');} - Или, если после нажатия на кнопку класса opnd_g нет, то меняем текст на кнопке снова на Смотреть все.
}); - Просто заканчиваем наше условие по нажатию на кнопку.
}else{$('.show_hide_list').hide();} - а это противоположное действие изначальному условию со второй строки, которое задавало действие если пунктов больше 5. То бишь, если пунктов меньше пяти, кнопка Смотреть все - будет скрыта полностью, чтобы не вводить в заблуждение посетителей сайта.

UPD: 11.12.2019

Если у вас несколько списков на одной странице и нужно, чтобы открывался только тот на кнопку под которым нажали, замените 4 строку в скрипте.

Кнопка должна быть сразу под списком! Иначе способ не сработает.

// ЗАМЕНИТЬ ЭТО
$('ul.list li:nth-child(n+6)').slideToggle('');
// НА ЭТО
$(this).prev().children('li:nth-child(n+6)').slideToggle('');

Вот и весь скрипт. Он простенький и справляется с задачей. Теперь вы сможете его если захотите на странице вашего сайта скрыть несколько пунктов вашего списка.

Добавлено: 06 Июня 2021 04:35:41 Добавил: Андрей Ковальчук

Кнопки прокрутки страницы вверх и вниз jQuery

В этом уроке будем делать все на jQuery. Вам надо будет сделать три шага. Для начала добавить сами кнопки на страницы сайта. Добавлять можно куда угодно. Для удобства можете добавить в подвал сайта.

Это просто html код блока с двумя ссылками

<div class="scroll_panel">
    <a href="#" id="scroll_top"><span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 16.67l2.829 2.83 9.175-9.339 9.167 9.339 2.829-2.83-11.996-12.17z"/></svg></span></a>
    <a href="#" id="scroll_bottom"><span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 7.33l2.829-2.83 9.175 9.339 9.167-9.339 2.829 2.83-11.996 12.17z"/></svg></span></a>
</div>

Далее можете добавить стили. Они могут быть любыми, как вам удобно и вы хотите видеть на своем сайте. В моем примере кнопки плавают поверх сайта. Вы можете разместить кнопки по отдельности одну вверху и вторую внизу. Тогда вам не надо родительский блок, а просто используйте ссылки.

Вот готовые стили, как в примере:
.scroll_panel {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 90px;
    transition: background 0.2s ease;
}
.scroll_panel:hover {
    background: #eee; 
}
 
  
.scroll_panel svg {
fill:#f00;
}
 
#scroll_top {
    display: block;
    width: 100%;
    height: 50%;    
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    transition: background 0.2s ease;
}
#scroll_top span {
    display: block;
    width: 100%;    
    position: absolute;
    left: 0;    
    top: 50px;
}
#scroll_top:hover {
    background: #ddd;   
}
 
#scroll_bottom {
    display: block;
    width: 100%;
    height: 50%;    
    position: absolute;
    top: 50%;
    left: 0;
    text-align: center;
    transition: background 0.2s ease;
}
 
#scroll_bottom span {
    display: block;
    width: 100%;    
    position: absolute;
    left: 0;    
    bottom: 20px;
}
#scroll_bottom:hover {
    background: #ddd; 
}

Последнее что нужно сделать - добавить скрипт jQuery, который и будет переносить нас в начало или конец страницы.
<script>
$(function(){
    $('#scroll_top').click(function(){
        $('html, body').animate({scrollTop: 0}, 600);
        return false;
    });
     
    $('#scroll_bottom').click(function(){
        $('html, body').animate({scrollTop: $(document).height() - $(window).height()}, 600);
        return false;
    });
});
</script>

Данный скрипт нужно добавлять только после библиотеки - jQuery. Она должна быть подключена у вас, если вы используете CMS, например WordPress. Если у вас самописный сайт, то вы должны были ее добавлять, если нет, то добавьте.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>


Если все правильно сделано, то результат будет как в примере. Думаю, данный урок не из сложных и проблем у вас не возникло, если что не так, спрашивайте в комментариях или связывайтесь со мной.

Добавлено: 24 Марта 2021 06:21:05 Добавил: Андрей Ковальчук

Как создать бургер меню с выезжающей панелью на чистом CSS

Я использовал данный вариант несколько рази и вот недавно мне попался схожий, но он был сложнее и с большим количеством кода, поэтому я решил опубликовать статью о своем варианте и поделится этим 100% рабочим методом с вами. Пример того как работает все это можно посмотреть нажав на кнопку ниже. Если это то что нужно вам и вы хотите сделать выезжающее меню с левой или правой стороны без использования скриптов у себя на сайте, то давайте перейдем к коду.

Первое что понадобится - добавить html разметку. Это обычное меню сделанное списком, но его особенность это checkbox. Обычный чекбокс с label, которые мы и превратим в кнопку, то есть бургер меню. Бургер меню - это обычно три полоски расположены друг под другом, напоминая бургер. Поэтому меню и носит такое название. Для посетителей сайтов и пользователей мобильных устройств данный вид кнопки привычный и люди интуитивно понимают что это кнопка меню. Как раз нажимая на наш чекбокс в виде бургера и будет происходить появление панели с пунктами меню.

В нужное вам место на сайте добавьте html следующий код:

<div class="burger-menu">
    <input id="menu-toggle" type="checkbox" />
    <label class="menu-btn" for="menu-toggle">
      <span></span>
    </label>
 
    <ul class="menubox">
            <li><a class="menu-item" href="#">Home</a></li>
            <li><a class="menu-item" href="#">About us</a></li>
            <li><a class="menu-item" href="#">Blog</a></li>
            <li><a class="menu-item" href="#">Articles</a></li>
            <li><a class="menu-item" href="#">Contacts</a></li>
    </ul>
  </div>

Давайте я подробно распишу что и как тут устроено и для чего каждый элемент

Сначала идет главный блок-контейнер с классомburger-menu, внутри которого и располагается наше меню и кнопка бургер. Можете задавать любой класс или вообще изъять все меню и кнопку из контейнера. Он не обязателен. Он сделан для удобства. Возможно вам он будет мешать. Например, вы решите разместить меню в виде UL списка в одном месте, а кнопку-чекбокс бургер меню в другом.
Далее идет чекбокс с ID - menu-toggle, которое менять нельзя (можно, если вы понимаете что делает и аналогично смените в стилях CSS все подвязки к этому айди). Чекбокс будет скрываться но он и будет кнопкой, его мы модифицируем.
Далее идет label с классом -menu-btn, менять тоже не нужно, если для вас это не критично. Внутри label расположен span элемент, который в будущем будет полосками бургер меню. Сделаем это благодаря псевдоэлементам before и after.
После идет наше основное меню в виде ul списка с классом - menubox. Наш чекбокс, будет использовать данный класс, чтобы открыть панель. Тут как вам удобно, располагаете пункты вашего меню со ссылками. Классы, порядок, структуру - делаете как вам нравится, у меня просто сделано для примера пять простых пунктов в виде ссылок.
Как вы поняли, суть способа в том, что у нас есть скрытое меню за пределами страницы и обычный чекбокс, стилизованный под бургер меню. Когда мы нажимаем на чекбокс, мы задаем новые параметры для нашей скрытой панели/блока который появляется сбоку. В примере он выезжает слева, можете поменять и сделать справа.

Для начала, давайте добавим сами CSS стили, чтобы заработало, а уже потом сможете их менять. Открывайте свой файл стилей и добавьте в него следующий кусок кода:

Задаем стили нашему label и span внутри него, чтобы он стал кнопкой в виде бургера.
.menu-btn{
  display: flex;
  align-items: center;
  position: absolute;
  top: 0;
  right:0;
  width: 26px;
  height: 26px;
  cursor: pointer;
  z-index: 1;
}
 
.menu-btn > span,
.menu-btn > span::before,
.menu-btn > span::after {
  display: block;
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #616161;
  transition-duration: .25s;
}
.menu-btn > span::before {
  content: '';
  top: -8px;
}
.menu-btn > span::after {
  content: '';
  top: 8px;
}

Далее задаем стили для нашего меню, то бишь ul списку.
.menubox{
  display: block;
  position: fixed;
  visibility: hidden;
  top: 0;
  left: -100%;
  width: 300px;
  height: 100%;
  margin: 0;
  padding: 80px 0;
  list-style: none;
  background-color: #ECEFF1;
  box-shadow: 1px 0px 6px rgba(0, 0, 0, .2);
  transition-duration: .25s;
}

left: -100%; - в шестой строке это и есть расположение панели меню слева за пределами страницы. Если надо справа, смените на right: -100%;.

Ну и мои стили для пунктов меню. Тут можете задавать что хотите, свои, эти стили не обязательны
.menu-item {
  display: block;
  padding: 12px 24px;
  color: #333;
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  font-weight: 600;
  text-decoration: none;
  transition-duration: .25s;
}
.menu-item:hover {
  background-color: #CFD8DC;
}

Теперь скрываем стандартный чекбокс в виде галочки
#menu-toggle{
  opacity: 0;
}

Задаем правила, что делать с нашим бургер меню, и самим меню, когда происходит активирование чекбокса, то есть когда вы жмете по нему и по label. Одну полоску мы поворачиваем, а две нижние поднимаем вверх и тоже поворачиваем и в результате из трех полосок получаем крестик. Так же делаем видимым наш скрытый блок с пунктами меню.
#menu-toggle:checked ~ .menu-btn > span{
  transform: rotate(45deg);
}
#menu-toggle:checked ~ .menu-btn > span::before{
  top: 0;
  transform: rotate(0);
}
#menu-toggle:checked ~ .menu-btn > span::after{
  top: 0;
  transform: rotate(90deg);
}
#menu-toggle:checked ~ .menubox{
  visibility: visible;
  left: 0;
}

В предпоследнем рядке, мы указываем, что панель появится слева в самом начале страницы - left: 0;. Если хотите справа, то просто смените на right: 0;.

Ну и весь код целиком, если вы не копировали по порядку, предыдущие отрезки.
.menu-btn{
  display: flex;
  align-items: center;
  position: absolute;
  top: 0;
  right:0;
  width: 26px;
  height: 26px;
  cursor: pointer;
  z-index: 1;
}
 
.menu-btn > span,
.menu-btn > span::before,
.menu-btn > span::after {
  display: block;
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #616161;
  transition-duration: .25s;
}
.menu-btn > span::before {
  content: '';
  top: -8px;
}
.menu-btn > span::after {
  content: '';
  top: 8px;
}
 
.menubox{
  display: block;
  position: fixed;
  visibility: hidden;
  top: 0;
  left: -100%;
  width: 300px;
  height: 100%;
  margin: 0;
  padding: 80px 0;
  list-style: none;
  background-color: #ECEFF1;
  box-shadow: 1px 0px 6px rgba(0, 0, 0, .2);
  transition-duration: .25s;
}
 
.menu-item {
  display: block;
  padding: 12px 24px;
  color: #333;
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  font-weight: 600;
  text-decoration: none;
  transition-duration: .25s;
}
.menu-item:hover {
  background-color: #CFD8DC;
}
 
 
#menu-toggle{
  opacity: 0;
}
 
#menu-toggle:checked ~ .menu-btn > span{
  transform: rotate(45deg);
}
#menu-toggle:checked ~ .menu-btn > span::before{
  top: 0;
  transform: rotate(0);
}
#menu-toggle:checked ~ .menu-btn > span::after{
  top: 0;
  transform: rotate(90deg);
}
#menu-toggle:checked ~ .menubox{
  visibility: visible;
  left: 0;
}

Если вы все сделали правильно и нигде не допустили ошибку, то все должно работать так как в примере. Очень надеюсь, что вам понравилась статья и вы воспользовались ней. Если у вас возникли вопросы или проблемы, можете обратиться ко мне или заказать услугу по доработке вашего сайта. Контакты можете найти в шапке или подвале сайта.

На этом все, спасибо за внимание.

Добавлено: 11 Марта 2021 21:31:50 Добавил: Андрей Ковальчук

Как сделать адаптивное видео YouTube на сайте

Если вы размещали код YouTube у себя на сайте то заметили что видео выводится с помощью тега iframe. Обычно код видео имеет примерно такой вид:

<iframe width="560" height="315" src="https://www.youtube.com/embed/TdRllKvKi9k" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

Даже по коду видно что по-умолчанию для видео уже заданы размеры плеера. Изначально размеры такие - 560 пикселей ширина и 315 пикселей высота. На большом экране и при нормальной ширине вашего сайта, такой размер вполне допустимый, но если ширина экрана устройства 420 пикселей? Результат - плеер вылазит за границы видимой части и сайт выглядит криво и неправильно. Как же решить данную задачу?

Не раз я встречал простейшее решение. когда убирали с кода iframe значения размеров, а потом просто через стили CSS задавать размеры плеера для определенных разрешений. Вариант допустимый, но трудозатратный и не всегда ровно отображающийся на сайте. Тем неимение, вполне рабочий.

Я предлагаю более простой, как по мне, способ. При его использовании плеер будет четко подстраиваться под размер окна браузера и корректно отображаться при любом разрешении. Давайте посмотрим, как это осуществить.

Для начала. вам нужно будет разместить код внутри блока. Также блоку присвоим любой класс, например - frame_blc.
<div class="frame_blc">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/Y421bWMelqE" frameborder="0" allowfullscreen></iframe>
</div>

Теперь, нужно добавить универсальные стили, которые и будут адаптировать размер плеера YouTube.
.frame_blc{
  overflow:hidden;
  position:relative;
  padding-bottom:56.25%;
  padding-top:30px;
  height:0;
}
.frame_blc iframe {
  position:absolute;
  width:100%;
  height:100%;
  left:0;
  top:0;
}

По сути мы делаем адаптивным наш родительский блок, а сам плеер делаем с абсолютным позиционированием и растягиваем на всю ширину и высоту относительно родителя. Для блока основным параметром, на который следует обратить внимание, является - padding-bottom:56.25%. Он задает высоту родительского блока для плеера у которого видеоролик имеет соотношения сторон 16:9. Если Ваш видеоролик имеет соотношения 4:3, то параметр будет - padding-bottom:75%.

После проделанной работы, вы можете проверить результат. Теперь видео с YouTube, адаптируется под ширину блока в котором оно находится.

Добавлено: 10 Марта 2021 10:51:52 Добавил: Андрей Ковальчук

Прижать футер к низу страницы

Наверное самый распространённый способ прижатия футера к низу страницы:

Необходимая разметка:

<body>
    <div class="wrapper">
        Шапка
        Контент
        Колонки
        <div class="footer-push"></div>
    </div>
    <div class="footer">
        Подвал
    </div>
</body>

CSS:
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 0 -100px 0; /* отрицательный нижний отступ на высоту футера */
    padding: 0;
}
.footer-push, .footer {
    height: 100px;
    margin: 0;
    padding: 0;
}

Работает во всех браузерах.

Единственное момент — у body, врапера и футера нельзя указывать положительные верхний или нижний margin/padding. Сделать это можно для вложенных элементов.

Добавлено: 29 Июля 2018 20:18:00 Добавил: Андрей Ковальчук

Позиционирование звука

CSS

Когда говорит только один человек, звук исходит из одной точки пространства, если только, конечно, человек не перемещается. Когда говорят несколько человек, звук каждого голоса будет исходить из своей точки. Раз есть высококачественные аудиосистемы и объемный звук, должна быть и возможность создания пространственного звука. CSS2.x предлагает для этого два свойства, одно из которых определяет угол расположения источника звука в горизонтальной плоскости, а второе – угол источника в вертикальной плоскости. За размещение звуков в горизонтальной плоскости отвечает свойство azimuth.

Значения углов могут выражаться в трех единицах измерения: deg (в градусах), grad (в градах) и rad (в радианах). Допустимые диапазоны этих трех типов единиц измерений: от 0 до 360deg, от 0 до 400grad и от 0 до 6.2831853rad. Допускаются отрицательные значения, но они пересчитываются в положительные. Так, –45deg эквивалентно 315deg (360– 45) и –50grad – это то же самое, что и 350grad. Большинство ключевых слов представляют собой эквиваленты угловых значений. Они приведены в табл. 14.1, где углы заданы в градусах, и проиллюстрированы на рис. 14.11. Последний столбец табл. 14.1 содержит эквиваленты ключевых слов первого столбца, используемых в сочетании со значением behind.

Обратите внимание, что ключевое слово behind может сочетаться только с ключевыми словами. Есть два дополнительных ключевых слова: leftwards и rightwards. В результате применения первого из них из текущего значения угла свойства azimuth вычитается 20deg, а если указать второе, то значение угла увеличивается на 20deg. Например:

body {azimuth: right-side;} /* эквивалентно 90deg */
h1 {azimuth: leftwards;}


Вычисляемое значение угла azimuth для элемента h1 составляет 70deg. Теперь рассмотрим следующую ситуацию:

body {azimuth: behind;} /* эквивалентно 180deg */
h1 {azimuth: leftwards;} /* вычисляемое значение – 160deg */


Результатом применения leftwards исходя из данных правил является перемещение звука вправо, а не влево. Это странно, но таков CSS2. Аналогично rightwards в предыдущем примере обусловливает перемещение источника звука элемента h1 на 20 градусов влево. Свойство elevation, отвечающее за размещение звуков в вертикальной плоскости, во многом аналогично azimuth, но несколько проще. Как и azimuth, свойство elevation допускает измерение углов в градусах, градах и радианах. Три ключевых слова являются эквивалентами углов: above (90 градусов), level (0) и below (–90 градусов). Ключевые слова относительного позиционирования, higher и lower, добавляют по 10 градусов к текущему значению угла возвышения или вычитают их из него. Таким образом, в следующем примере элементы h1, являющиеся дочерними элементами body, будут подняты на 10 градусов над горизонтальной плоскостью.

body {elevation: level;} /* эквивалентно 0 */
body > h1 {elevation: higher;}

Добавлено: 19 Июля 2018 08:09:35 Добавил: Андрей Ковальчук

Звуковое сопровождение

CSS

У визуальных элементов может быть фон, и вполне справедливо, что у звуковых элементов тоже есть возможность иметь фон (звуковое сопровождение). В звуковых устройствах роль фона выполняет некий звук, воспроизводимый одновременно с воспроизведением элементом. Для этого предназначено свойство play-during. Самый простой пример – звук воспроизводится в начале звукового элемента:

h1 {play-during: url(trumpets.mp3);}


В соответствии с этим правилом воспроизведение любого элемента h1 сопровождалось бы проигрыванием звукового файла trumpets.mp3. Звуковой файл проигрывается один раз. Если он короче, чем звуковой эквивалент содержимого элемента, его воспроизведение заканчивается раньше, чем воспроизведение элемента. Если его длительность больше, его воспроизведение завершается одновременно с окончанием воспроизведения содержимого элемента. Для того чтобы звук повторялся в течение всего воспроизведения элемента, добавьте ключевое слово repeat. Это звуковой эквивалент back-ground-repeat: repeat:

div.ocean {play-during: url(wave.wav) repeat;}


Как и фоновые изображения, фоновые звуки по умолчанию не комбинируются. Рассмотрим следующую ситуацию:

a:link {play-during: url(chains.mp3) repeat;}
em {play-during: url(bass.mp3) repeat;}
(a href="http://www.example.com/">Это <em>действительно замечательный</em>
сайт!(/a)


Здесь весь текст ссылки, кроме текста элемента, будет воспроизводиться на фоне повторяющегося файла chains.mp3. Для элемента em вместо chains.mp3 будет воспроизводиться файл bass.mp3. Фоновый звук родительского элемента не слышен, так же как его фон не просматривался бы под элементом em, если бы фон обоих элементов был видимым. Для комбинирования фоновых звуков используется ключевое слово mix:

a:link {play-during: url(chains.mp3) repeat;}
em {play-during: url(bass.mp3) repeat mix;}


Теперь chains.mp3 будет сопровождать чтение текста всей ссылки, включая текст. А во время воспроизведения элемента em одновременно будут воспроизводиться и chains.mp3, и bass.mp3. Аналогия с визуальными фонами нарушается, если задать значение none. Это ключевое слово отменяет все фоновые звуки, включая все те, которые могут принадлежать ссылкам. Таким образом, исходя из следующих правил текст em вообще не будет иметь звукового сопровождения – не будет слышно ни файла bass.mp3, ни chains.mp3:

a:link {play-during: url(chains.mp3) repeat;}
em {play-during: none;}
(a href="http://www.example.com/">Это <em>действительно замечательный</em>
сайт!(/a)

Добавлено: 19 Июля 2018 08:09:03 Добавил: Андрей Ковальчук

Паузы, предупредительные сигналы и генерируемое содержимое

CSS

И паузы, и предупредительные сигналы воспроизводятся «вне» генерируемого содержимого. Рассмотрим следующий пример:

h1 {cue: url(trumpet.mp3);}
h1:before {content: "Внемлите! ";}
h1:after {content: ". Воистину!";}
(h1)Начало(/h1)


Этот элемент был бы воспроизведен примерно так: «(звук трубы) Внемлите! Начало. Воистину! (звук трубы)». CSS не определяет, идут ли паузы «вне» сигналов или наоборот, так что поведение звуковых агентов пользователя в этом отношении предсказать невозможно.

Добавлено: 19 Июля 2018 08:07:53 Добавил: Андрей Ковальчук

Предупредительные сигналы

CSS

Если для привлечения внимания к элементу одних пауз недостаточно, можно добавить перед ним и после него звуковые предупредительные сигналы – звуковой эквивалент рамки. Как и в случае с паузами, для задания звуковых сигналов есть три свойства: cue-before, cue-after и cue. Если указан URI аудиоресурса, агент пользователя загружает этот ресурс и воспроизводит его перед элементом или после него. Предположим, надо предварять каждую непосещенную гиперссылку документа звонком, а каждую посещенную ссылку – гудком. Правила были бы такими:

a:link {cue-before: url(chime.mp3);}
a:visited {cue-before: url(beep.wav);}


Принцип работы сокращенной формы, cue, вполне ожидаем. Как и в свойстве pause, если задано одно значение для свойства cue, то это значение используется как перед элементом, так и после него. Если заданы два значения, первое соответствует сигналу перед элементом. Таким образом, следующие правила эквивалентны:

a[href] {cue: url(ping.mp3);}
a[href] {cue: url(ping.mp3) url(ping.mp3);}
a[href] {cue-before: url(ping.mp3); cue-after: url(ping.mp3);}

Добавлено: 19 Июля 2018 08:07:29 Добавил: Андрей Ковальчук

Паузы

CSS

Все разговорные языки основаны на различных паузах. Короткие промежутки между словами, фразами и предложениями настолько же важны для понимания значения, как и сами слова. Паузы представляют собой звуковые эквиваленты полей в том смысле, что и те и другие служат для отделения элемента от окружающего его содержимого. В CSS для введения пауз в документ могут применяться три свойства:

pause-before, pause-after и pause.


Формат <время> позволяет задать длительность паузы в секундах или миллисекундах. Допустим, требуется вставить полную двухсекундную паузу после элемента h1. Это можно обеспечить любым из двух следующих правил:

h1 {pause-after: 2s;}
h1 {pause-after: 2000ms;} /* продолжительность, аналогичная '2s' */


С процентными значениями все немного сложнее, поскольку они вычисляются относительно заданного значения speech-rate. Давайте посмотрим, как это происходит. Во-первых, рассмотрим следующее:

h1 {speech-rate: 180;}


Это значит, что любой элемент h1 будет воспроизводиться со скоростью примерно три слова в секунду. Теперь рассмотрим:

h1 {speech-rate: 180; pause-before: 200%;}


Это процентное значение вычисляется на основании средней длины слова. В данном случае произнесение одного слова занимает 333,33 миллисекунды, так что 200% от этого значения составляет 666,66 миллисекунды. Скажем по-другому: каждому h1 будут предшествовать паузы продолжительностью в две трети секунды. Если изменить правило так, что значение speech-rate будет равно 120, пауза будет длиться целую секунду.
Свойство pause – это сокращенная форма записи, которая объединяет pause-before и pause-after.

Если задается только одно значение, оно определяет продолжительность паузы и перед элементом, и после него. Если указывается два значения, тогда первое определяет паузу перед элементом, а второе – паузу после него. Таким образом, следующие правила эквивалентны:

pre {pause: 1s;}
pre {pause: 1s 1s;}
pre {pause-before: 1s; pause-after: 1s;}

Добавлено: 19 Июля 2018 08:06:54 Добавил: Андрей Ковальчук

Ударение и насыщенность

CSS

Похоже на pitch-range свойство stress, призванное помочь авторам сузить или расширить схемы распределения ударений в языке. Каждый язык, на котором разговаривают люди, имеет, если можно так выразиться, схемы распределения ударений. В английском, например, предложения состоят из разных частей, которые требуют разных ударений (или акцентирования). Предыдущее предложение1 могло бы выглядеть примерно так:

<sentence>
<primary>In English,</primary>
<tertiary>for example,</tertiary>
<secondary>sentences have different parts that call for
different stress.</secondary>
</sentence>


Таблица стилей, определяющая уровни акцентирования каждой части предложения, могла бы быть следующей:

primary {stress: 65;}
secondary {stress: 50;}
tertiary {stress: 33;}


Это приводит к снижению интонирования менее важных частей предложения и усилению акцентирования частей, которые считаются более важными. Значения свойства stress зависят от языка: одно и то же значение в разных языках может обозначать разные уровни и схемы акцентирования. CSS не определяет такие отличия (что, вероятно, уже вас не удивляет). Во многом похожим на stress является свойство richness Чем выше значение richness голоса, тем он «ярче» и тем большую аудиторию может охватить. Меньшие значения приведут к мягкому, более «сладкозвучному» («mellifluous») голосу (цитирую спецификацию CSS2). Таким образом, голосу артиста, читающего монолог, можно задать значение richness: 80;, а шепот можно получить, задав richness: 25;.

Добавлено: 19 Июля 2018 08:06:21 Добавил: Андрей Ковальчук

Изменение высоты

CSS

Очевидно, что разные голоса обладают разной высотой. Обычный пример – мужские голоса в среднем имеют частоту 120 Гц, тогда как средняя высота женского голоса приблизительно равна 210 Гц. Таким образом, каждое семейство голосов будет иметь собственную стандартную высоту. CSS позволяет авторам изменять высоту голоса при помощи свойства pitch. Для ключевых слов от x-low до x-high явного определения нет, так что о них можно сказать только то, что каждое последующее будет означать более высокий тон, чем предыдущее. Можно провести аналогию с ключевыми словами определения размеров шрифта от xx-small до xx-large, которые тоже не заданы точно, но каждое последующее обозначает больший размер, чем предыдущее.

Значения частоты – совсем другое дело. Если частота определяется явно, голос будет изменен так, что его средняя высота будет соответствовать указанному значению. Например:

h1 {pitch: 150Hz;}


В случае применения непредусмотренного голоса результат может быть непредсказуемым. Рассмотрим пример, в котором для элемента определены два семейства голосов на выбор и частота основного тона:

h1 {voice-family: Jethro, Susie; pitch: 100Hz;}


Для данного примера предположим, что стандартная частота голоса Jethro составляет 110 Гц, а стандартная частота голоса Susie – 200 Гц. Если выбрать Jethro, то элементы h1 будут прочитываться голосом, несколько более низким, чем обычный. Если голос Jethro недоступен и вместо него выбран Susie, голос будет сильно изменен по сравнению с применяемыми по умолчанию настройками и, скорее всего, будет звучать неестественно. Независимо от того, какая высота тона устанавливается при воспроизведении элемента, автор может влиять на динамический диапазон частот с помощью свойства pitch-range. Назначение свойства pitch-range – расширить или сузить модуляцию данного голоса. Чем меньше диапазон высот, тем ближе все высоты будут к средней, что в результате обеспечивает монотонный голос. Применяемое по умолчанию значение, 50, обеспечивает «нормальные» модуляции. Чем больше значение, тем выше степень «оживленности» в голосе.

Добавлено: 19 Июля 2018 08:05:51 Добавил: Андрей Ковальчук

Озвучивание

CSS

До настоящего момента мы говорили о способах воздействия на звуковое представление, но упустили вопрос о том, как выбрать голос для звукового генерирования содержимого. CSS определяет свойство, похожее на font-family, под названием voice-family. Как и свойство font-family, voice-family позволяет автору предоставить разделяемый запятыми список голосов для формирования содержимого элемента. Если первый голос из списка доступен, то агент пользователя выбирает его. Если нет, агент выбирает следующий по списку голос – и так до тех пор, пока не будет найден один из заданных голосов или пока не закончится список. Способ объявления синтаксиса значения позволяет указывать последовательность конкретных или базовых семейств в любом порядке. Следовательно, список можно завершить конкретным семейством, а не обязательно базовым. Например:

h1 {voice-family: Mark, male, Joe;}


CSS2.x не определяет значения базовых семейств, но упоминает, что значения male (мужской), female (женский) и child (детский) допустимы. Следовательно, элементы документа XML можно было бы оформить так:

rosen {voice-family: Gary, Scott, male;}
guild {voice-family: Tim, Jim, male;}
claud {voice-family: Donald, Ian, male;}
gertr {voice-family: Joanna, Susan, female;}
albert {voice-family: Bobby, Paulie, child;}


Фактический голос, выбираемый для генерирования данного элемента, определяет восприятие пользователем этого элемента, поскольку некоторые голоса будут выше или ниже других или будут более или менее монотонными. CSS предоставляет способы воздействия и на эти аспекты голоса.

Добавлено: 19 Июля 2018 08:05:19 Добавил: Андрей Ковальчук