Кнопки для сайта DLE

Кнопки для сайта DLE

От автора: приветствую вас, друзья. В этой статье мы поговорим о добавлении кнопок для сайта на DLE. В частности, в качестве примера мы добавим кнопку вверх для нашего сайта. Ну а по аналогии вы можете добавлять и любые другие кнопки. Приступим?

Итак, мы решили в качестве примера добавить кнопку вверх для нашего сайта на движке DLE. Это достаточно удобная для пользователей возможность, поскольку кнопка вверх позволяет быстро подняться в самое начало сайта (вверх) из любой точки сайта. Особенно эта возможность актуальна для мобильных версий сайта, где экран достаточно узкий и контент страницы может занимать несколько экранов. В этом случае пользователь будет избавлен от лихорадочного пролистывания экрана с целью добраться до меню или любого другого элемента, который находится вверху страницы. За него это сделает функционал, заложенный в кнопку.

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

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

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

Как видим, кнопка имеет идентификатор upper, для которого описаны соответствующие стили. Для того, чтобы кнопка показывалась не только в конце страницы, нам необходимо прописать для нее фиксированное позиционирование и указать соответствующий отступ снизу. Сделаем это в файле style.css.

Теперь кнопка доступна из любой позиции страницы, поскольку мы задали для нее фиксированное позиционирование и отступ снизу и справа по 50 пикселей.

Следующим шагом будет показать кнопку только начиная с определенной позиции, скажем начиная с 200 пикселей прокрутки от верха страницы. То есть, изначально кнопка будет не видна, но после 200 пикселей прокрутки мы ее покажем. Для этого в тех же стилях сначала скроем кнопку, добавив простое правило display: none;

Теперь напишем несложный скрипт, который покажет кнопку при скролле страницы. Сделать это можно в отдельном файле js, который можно подключить к странице. Также можно использовать существующий файл или прописать нужный код в шаблоне. Я остановлюсь на последнем варианте, тем более что в шаблоне main.tpl уже есть js код. Допишем наш код:

$(window).scroll(function () {
	if ($(this).scrollTop() > 200) $('#upper').fadeIn();
	else $('#upper').fadeOut();
});
$('#upper').click(function () {
	$('body, html').animate({
	  scrollTop: 0
	}, 700);
});

Суть кода достаточно проста. При событии скролла мы проверяем отступ сверху и, если он больше 200 пикселей, тогда мы показываем кнопку, в противном случае — скрываем ее. Ну а при клике по самой кнопке анимируется скролл вверх за 700 миллисекунд.

Осталось сделать доступной кнопку и для мобильных устройств. На самом деле скрывается не кнопка, а блок, в котором эта кнопка находится. Это блок с классом rightside. Самым простым вариантом решить задачу будет простое удаление класса у этого блока. Находится блок в шаблоне modules/footmenu.tpl. Откроем его и внесем необходимые правки.

Ну вот и все. Теперь кнопка работает как на десктопах, так и на мобильных устройствах. На этом у меня сегодня все. Напоминаю, что если вы хотите больше узнать о DLE, тогда познакомьтесь с нашим курсом Создание сайта на CMS DLE. Удачи!

Хотите научиться создавать сайты на CMS DLE?

Прямо сейчас посмотрите курс по созданию сайта на CMS DLE с нуля!

Смотреть курс

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree