Архив месяца: Февраль 2019

Делаем мобильное меню для сайта на CSS и jQuery

Мобильное меню для сайта

Привет, друзья. Сейчас будем разбираться с тем, как сделать мобильное меню на сайте. Использовать будем такие технологии, как HTML, CSS и jQuery. Прошу обратить внимание, что меню для мобильный устройств мы будем делать с нуля. Так что если вы хотите получить информацию про адаптацию, то она появится здесь немного позже.

Демо

Будем делать выезжающее (боковое) мобильное меню и появляться оно будет справа по клику на иконку гамбургер и вместе с тем весь контент будет смещаться влево на ширину нашего меню. Итак, давайте набросаем шаблон.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<span class="span"></span>
  <div class="menu">
    <span class="close">+</span>
      <ul>
	<li>Пункт меню1</li>
	<li>Пункт меню2</li>
	<li>Пункт меню3</li>
	<li>Пункт меню4</li>
	<li>Пункт меню5</li>
       </ul>
  </div>
<div class="content">
  <p>Lorem ipsum dolor sit amet</p>	
</div>

Заготовка для нашего выдвижного мобильного меню готова. Давайте сделаем иконку (она же кнопка) гамбургер. У нее класс span.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.span {
    position: absolute;
    display: inline-block;
    width: 2.25em;
    height: 0.8em;
    border-top: 0.2em solid #fff;
    border-bottom: 0.2em solid #fff;
    top: 0px;
    right: 10px;
    cursor: pointer;
    transition: .5s
}
 
.span:before {
    content: "";
    position: absolute;
    top: 0.3em;
    left: 0px;
    width: 100%;
    border-top: 0.2em solid #fff;
}

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.menu{
  width: 200px;
  height: auto;
  background: #756755;
  position: fixed;
  top: 0;
  right: -200px;
}
span.close{
  font-size: 30px;
  color: #ccc;
  position: absolute;
  right: 10px;
  top: 5px;
  cursor: pointer;
}

По умолчанию его не видно, оно смещено вправо за пределы видимости на 200px. Теперь самое интересное — скрипт мобильного меню, который позволяет волшебству случиться.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$(function(){			
 $('.span').click(function(){
  $(this).css('opacity', '0');
  $('.menu').animate({
   right: 0
});
  $('body').animate({
   right: 200
 });
});
$('span.close').click(function(){
 $('.span').css('opacity', '1');
 $('.menu').animate({
  right: '-200px'
});
 $('body').animate({
   right: 0
 });
});
});

Теперь по порядку. По нажатию на иконку происходит следующее:

Иконка становится полностью прозрачной -> меню выезжает справа -> тело сайта смещается влево. По нажатию на крестик — все то же самое, только наоборот. Надеюсь у вас получилось. Если не работает, пишите в комментариях, попробуем разобраться вместе.

Таким образом можно самостоятельно реализовать подобное меню на сайте WordPress, Joomla, Битрикс и любых других систем управления. В принципе, ничего сложного, если у вас есть минимальные навыки JS. Во всяком случае попробуйте, для практики будет полезно.

Калькулятор процентов онлайн

Калькулятор процентов онлайн

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

Калькулятор процентов

Высчитать процент от суммы калькулятор онлайн

Рассчитать процент от суммы можно быстро и без заморочек. Вычесть или прибавить процент. Всего 4 варианта.

  • Найти процент от числа
  • Сколько процентов составляет число X от числа Y
  • Прибавить процент к числу
  • Вычесть процент от числа

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

Полет товара в корзину на jQuery

Полет товара в корзину на jQuery

Привет всем! Сегодня у нас на разборе очень классный эффект на jQuery, который очень эффектно смотрится на интернет-магазинах. Не знаю как правильно он называется, но назовем его — анимированный полет товара в корзину. Много раз видел такую штуку на различных сайтах и думал, что для реализации такой фичи нужна специальная библиотека и что все очень сложно. Но на самом деле не очень. Средний уровень JS. У меня получилось совершенно случайно. На досуге изучал jQuery анимацию и вышло нечто похожее, осталось только немного допилить. И вот, что в итоге получилось:

Демо

Так выглядит разметка на странице примера:

1
2
3
4
5
6
<div class="image_block">
 <img src="sell.png" alt="Покупка" class="block" width="100"/>
</div>
<input type="button" value="Добавить в корзину"/>
<img src="trash.png" alt="trash" class="img"/>
<div class="block-2">Товар добавлен! <span>+</span></div>

.image_block — Обертка для блока с товаром
.block — Сам товар
button — Кнопка добавления товара в корзину
.img — Корзина магазина
.block-2 — Всплывающий блок, появляющийся после добавления товара в корзину

CSS код:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
.block{
    position: absolute;
    top: 50%;
    left: 0;
}
.img{
    position: absolute;
    right: 0;
    top: 0;
}
.block-2 {
    width: 400px;
    height: 100px;
    padding: 10px;
    background: #f5f5f5;
    border-radius: 5px;
    display: none;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 12px 12px -9px #333;
    text-align: center;
    font-family: sans-serif;
    opacity: 0;
}
.block-2 span{
	position: absolute;
	right: 5px;
	top: 0px;
	cursor: pointer;
	transform: rotate(45deg);
	font-size: 20px;
}	
 
input[type="button"] {
    padding: 5px;
    border-radius: 5px;
    border: none;
    background: #2196F3;
    color: #fff;
    box-shadow: 0 4px 5px -2px #363636;
    cursor: pointer;
    outline: none;
}

И самое интересное в jQuery коде, который магическим образом делает красивый полет товара в корзину:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$(function(){
  $('input:button').click(function(){
    $('.block').clone()  
       .css({'position' : 'absolute', 'z-index' : '100'})  
           .appendTo(".image_block").animate({
		top: $(".img").offset()['top'],
		left: $(".img").offset()['left'],
		opacity: 0,
		width: 40
	},1500, function(){
	  $(this).remove();
	  $('.block-2').show().animate({
	     top: 200,
	     opacity: 1
	});
setTimeout(function(){
  $('.block-2').fadeOut(500)
}, 2000);
});
$('.block-2 span').click(function(){
 $('.block-2').fadeOut(300);
});			
});			
});

2 строка — Запускаем функцию по клику на кнопке
3 строка — клонируем товар
4 — задаем начальные css свойства для нашего клона
5 — вставляем клон в блок .image_block
6, 7 — перемещение товара в корзину, предварительно получив ее координаты
8 — убавляем прозрачность до нуля в конце полета
9 — убавляем ширину
10 — время анимации 1.5 секунды

Дальше идет call back функция, которая запускает появление всплывающего окна, его закрытие через 2 секунды, а так же закрытие по клику на крестик в правом верхнем углу. Эти функции необязательные, их можно не применять. Вот таким образом делается полет товара в корзину. Надеюсь вам было понятно. Если остались вопросы, готов ответить на них в комментариях.
Скачайте пример для более подробного исследования.

СКАЧАТЬ

jQuery событие при прокрутке до определенного элемента (футера)

событие прокрутки страницы jquery

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

Демо

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

1
2
3
4
5
6
7
8
9
10
<html>
 <body>
 Здесь много контента...
  <div id="block">
    Какой-то текст.
    <input type="button" class="but" value="Закрыть"/>
  </div>
  <div id="footer">Footer</div>
 </body>
</html>

Теперь займемся оформлением нашего скрытого блока и его кнопки:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
#block{
	display: none;
	position: fixed;
	top: 15px;
	right: 15px;
	color: #fff;
	background: #4CAF50;
	padding: 10px;
	border-radius: 5px;
	width: 200px;
	box-shadow: 0 13px 20px -5px #3a3a3a;
	font-family: Arial;
	text-align: center;
}
.btn{
    background: #FF9800;
    border: 2px solid #795548;
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
    padding: 5px 10px;
    margin-top: 10px;
    font-weight: bold;
}

Теперь займемся непосредственно, что называется jQuery scroll to element. Все-таки английский язык для разработчика необходим. Стандартно подключаем jQuery. Я сделаю это через CDN, так как это будет самая актуальная версия.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

А затем сам код скрипта, который и будет творить магию на странице:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$(document).ready(function(){   
    var $element = $('.footer');
    let counter = 0;
$(window).scroll(function() {
  var scroll = $(window).scrollTop() + $(window).height();
  //Если скролл до конца елемента
  //var offset = $element.offset().top + $element.height();
  //Если скролл до начала елемента
  var offset = $element.offset().top
 
  if (scroll > offset && counter == 0) {
    $('#block').fadeIn(500);
    counter = 1;
  }
});
$('.btn').click(function(){
	$('#block').slideUp();
});
 
   });

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

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