Ответы пользователя Андрей по тегу «HTML»

Заявка с формы приходит дважды. как исправить?

Андрей @AndreyMyagkov

А зачем маска телефона и обработка формы у Вас в цикле? В этом и проблема

$('.phonemasked').mask('+7 (999) 999-99-99');

$(".user_request").submit(function() {
......

Ответ написан более трёх лет назад

Комментировать

Как скопировать все CSS стили блока и дочерних нод?

Андрей @AndreyMyagkov

У вас проблема в организации работы. Если вы сталкиваетесь с такой задачей постоянно, то нужно каждый блок лендинга делать верстку, стили, js в отдельной папке и отельными файлами, а потом все это дело автоматом собирать при помощи gulp. В следующий раз вы просто берете и копируете папку с нужными блоками в новый проект, допиливаете стили и одним кликом собираете новый проект.

Сейчас можете подключить все стили со старого лендинга и вычистить неиспользуемые стили, инструменты нагуглите

Ответ написан более трёх лет назад

Комментировать

Дайте пару ссылок на популярные сборники ui компонентов?

Андрей @AndreyMyagkov

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

Ответ написан более трёх лет назад

Комментировать

Адаптированное меню как правильно селать?

Андрей @AndreyMyagkov

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Меню</title>
</head>
<body>

	<nav class="b-topnav">
		<button class="b-menu-toggle js-menu-toggle"><span class="menu-toggle__line"></span></button>
		<ul class="b-topmenu__list js-topmenu__list">
			<li class="topmenu__item">
				<a href="" class="topmenu__link">Пункт меню 1</a>
				<ul class="topmenu__sublist">
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 1</a></li>
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 2</a></li>
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 3</a></li>
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 4</a></li>
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 5</a></li>
				</ul>
			</li>
			<li class="topmenu__item active">
				<a href="" class="topmenu__link">Пункт меню 2</a>
				<ul class="topmenu__sublist">
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 1</a></li>
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 2</a></li>
					<li class="topmenu__subitem active"><a href="" class="topmenu__sublink">Пункт меню второго уровня 3</a></li>
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 4</a></li>
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 5</a></li>
				</ul>
			</li>
			<li class="topmenu__item">
				<a href="" class="topmenu__link">Пункт меню 3</a>
				<ul class="topmenu__sublist">
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 1</a></li>
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 2</a></li>
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 3</a></li>
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 4</a></li>
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 5</a></li>
				</ul>
			</li>
			<li class="topmenu__item">
				<a href="" class="topmenu__link">Пункт меню 4</a>
				<ul class="topmenu__sublist">
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 1</a></li>
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 2</a></li>
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 3</a></li>
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 4</a></li>
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 5</a></li>
				</ul>
			</li>
			<li class="topmenu__item">
				<a href="" class="topmenu__link">Пункт меню 5</a>
				<ul class="topmenu__sublist">
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 1</a></li>
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 2</a></li>
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 3</a></li>
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 4</a></li>
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 5</a></li>
				</ul>
			</li>
		</ul>
	</nav>



	<div class="same-block">
		<code>
			Emmet: nav.b-topnav>button.b-menu-toggle>span.menu-toggle__line^+ul.b-topmenu__list.js-topmenu__list>li.topmenu__item*5>a.topmenu__link*4{Пункт меню $}+ul.topmenu__sublist>li.topmenu__subitem*5>a.topmenu__sublink*4{Пункт меню второго уровня $}
		</code>
	</div>

<style>
*{
	margin:0;
	padding: 0;
	line-height: 1;
}
li {
	list-style-type: none;
}
html{
	font-size: 16px;
	font-family: Arial, sans-serif;
}
.same-block{
	background-color: lightblue;
	height: 500px;
	padding: 3em;
}
/* NAVBAR */
.b-menu-toggle {
	width: 34px;
	height: 34px;
	margin: 3px;
	background: none;
	border: solid 1px #666;
	padding: 4px;
	border-radius: 3px;
	cursor: pointer;
	outline: none;
}
.menu-toggle__line:after,
.menu-toggle__line:before {
    content: "";
    position: absolute;
    left: 0;
    top: -9px;
}
.menu-toggle__line:after {
    top: 9px;
}
.menu-toggle__line {
    position: relative;
    display: block;
}
.menu-toggle__line,
.menu-toggle__line:after,
.menu-toggle__line:before{
    width: 100%;
    height: 2px;
    background-color: #333;
    transition: all 0.3s;
    backface-visibility: hidden;
    border-radius: 2px;
}
.b-menu-toggle.on .menu-toggle__line {
    background-color: transparent;
}
.b-menu-toggle.on .menu-toggle__line:before {
    transform: rotate(45deg) translate(6px, 7px);
}
.b-menu-toggle.on .menu-toggle__line:after {
    transform: rotate(-45deg) translate(6px, -7px);
}
@media (min-width: 240px){
	.b-topnav {
		position: fixed;
    	top: 0;
    	left: 0;
    	right: 0;
    	background-color: #fff;
    	z-index: 99999999;
    	overflow-y: auto;
    	box-shadow: 0 1px 3px rgba(100,100,100,0.9);
    	max-height: 400px;
    	max-height: 90vh;
	}
	.b-topmenu__list {
		margin: 0 0 0.5em 3px;
		max-height: 0;
		overflow:hidden;
    	transition: max-height ease-out .3s;
	}
	.b-topmenu__list.on {
		max-height: 1000px;
		
	}
	.topmenu__item {
		display: block;
		padding: 0.5em 0;
	}
	.topmenu__link {
		color: #333;
		text-transform: uppercase;
	}
	/* level 2 */
	.topmenu__sublist{
		margin: 0.5em 0 0.5em 1em;
	}
	.topmenu__sublink {
		color: #333;
	}
	.topmenu__item.active .topmenu__link,
	.topmenu__link:hover,
	.topmenu__subitem.active .topmenu__sublink,
	.topmenu__sublink:hover {
		color: #007eff;
	}
}
@media (min-width: 768px){
	.b-menu-toggle {
		display: none;
	}
	.b-topnav {
		position: relative;
    	top: 0;
    	left: 0;
    	right: 0;
    	background-color: #007eff;
    	z-index: 0;
    	overflow-y: initial;
    	box-shadow: none;
    	max-height: none;
    	margin-bottom: 20px;
	}
	.b-topmenu__list {
		margin-left: 0;
		display: table;
		width: 100%;
		background-color: #007eff;
		overflow: visible;
	}
	.topmenu__item {
		display: table-cell;
		padding: 0.5em 0;
		text-align: left;
		position: relative;
	}
	.topmenu__link{
		padding: 0 1em;
		color: #fff;
	}
	.topmenu__link:hover,
	.topmenu__item.active .topmenu__link{
		color: #333;
	}
	/*level 2 */
	.topmenu__sublist{
		margin:0;
		display: none;
		background-color: #007eff;
	}
	.topmenu__item:hover>.topmenu__sublist,
	.topmenu__item>.topmenu__sublist:hover {
		display: block;
		position: absolute;
		top:25px;
		left:0;
		right: 0;
	}	
	.topmenu__subitem {
		display: block;
		padding: 0.5em 1em;
		text-align: left;
	}
	.topmenu__sublink {
		color: #fff;
		line-height: 1.3;	
	}
	.topmenu__subitem.active>.topmenu__sublink,
	.topmenu__subitem:hover>.topmenu__sublink  {
		color: #333;
	}
}
/* /NAVBAR */
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
	/*Мобильное меню*/
	$(".js-menu-toggle").on('click', function() {
	  $(this).toggleClass('on');
	 
	   $(".js-topmenu__list").toggleClass('on');
	  return false;
	});
</script>
</body>
</html>

Ответ написан более трёх лет назад

Комментировать

Как задать правильные и пропорциональные размеры заголовков (h1-h5)?

Андрей @AndreyMyagkov

Можете использовать мой мини CSS фреймворк для работы с типографикой https://github.com/AndreyMyagkov/Typography

Ответ написан более трёх лет назад

Комментировать

Html 5 video как делать видео на весь блок?

Андрей @AndreyMyagkov

<div class="b-video">
	<video class="viedeo__file"preload="auto" autoplay="true" loop="loop" muted="muted" volume="0" poster="img/slide.png" id="video">
        <source src="http://site.ru/video/1.mp4" type="video/mp4" id="source-video">
    </video>
</div>


<style>
	.b-video {
	    width: 100%;
	    min-height: 600px;
	    height: 100vh;
	    position: relative;
	    overflow: hidden;
	    z-index: 1;
}
.viedeo__file{
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
</style>

Ответ написан более трёх лет назад

1 комментарий

Почему скролл бар на малленьком разрешении находить не прижатым к краю, а лежит на контенте?

Андрей @AndreyMyagkov

У вас что то с браузером. У меня скроллбар прижат к краю

Ответ написан более трёх лет назад

1 комментарий

Как передать начальные данные клиентской стороне?

Андрей @AndreyMyagkov

Вы правильно поступаете

Ответ написан более трёх лет назад

Комментировать

Какую готовую библиотеку использовать для шаринга в соц сети?

Андрей @AndreyMyagkov

share42.com использую

Ответ написан более трёх лет назад

Комментировать

Box-shadow perspective, как реализовать?

Андрей @AndreyMyagkov

Вот решение с поворотом блока https://jsfiddle.net/c4yc8L8d/1/

Ответ написан более трёх лет назад

3 комментария

Как в верстке вы оформляете правила с адаптивом?

Андрей @AndreyMyagkov

Делаете блок стилей с медиазапросами под конкретное разрешение, в нем от общего к частному правила - лейаут, шапка, футер, комментарии. И так 3-5 блоков медиазапросов будут идти

Ответ написан более трёх лет назад

Комментировать

Как сверстать эту секцию?

Андрей @AndreyMyagkov

Дизайнер ушлёпок! Если начал рисовать под сетку, так что ему мешало сдвинуть 1-й и 3-й блок по центру?)

Ответ написан более трёх лет назад

1 комментарий

Bootstrap 4 vs Foundation 6 vs FlexBox?

Андрей @AndreyMyagkov

Делема в том что шаблон будет постепенно дорабатываться, улучшаться, модернизироваться, поэтому больше всего интересует вопрос масштабирования.

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

Ответ написан более трёх лет назад

Комментировать

Как найти выход из тупиковой ситуации с отображением шрифтов google fonts?

Андрей @AndreyMyagkov

Что за изврат с подключением шрифта через JQ? Шрифты нужно подключать как можно раньше, тогда проблем не будет. У клиента могут быть уже установлены эти шрифты и они могут быть битые, был такой случай 1 раз

Ответ написан более трёх лет назад

2 комментария

Есть ли готовый каркас логики для калькулятора расчёта цен на javascript?

Андрей @AndreyMyagkov

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

Пишите сами. Берите данные из полей, удаляйте лишние пробелы, числа преобразовывайте в числа функцией parseInt(), считайте, выводите результат.

Ответ написан более трёх лет назад

1 комментарий

Не могу в одну секцию из 12 колонок вложить 5 картинок с промежутком. Bootstrap?

Андрей @AndreyMyagkov

У вас 12 колоночная сетка. Чисто логически засунуть 5 картинок с промежутком не получится).
Вывод:
1) либо использовать 5, 10 или 15 колоночную сетку. Но это плохой путь.
2) либо сделать так, как написал Срегей или аналогичным способом, вобщем не используя сетку

Ответ написан более трёх лет назад

1 комментарий

Как сделать переключалку отображения контента типа grid и типа list?

Андрей @AndreyMyagkov

обернуть вывод в блок и в зависимости от выбранного типа вывода добавлять ему класс-модификатор results--grid или results--item и как вы написали - в стилях скрывать ненужные элементы:

.results--grid .list-item {
display:none;
}

.results--list .grid-item {
display:none;
}

Ответ написан более трёх лет назад

Комментировать