Воруй у Яндекса: хороший стильный расхлоп на странице — Журнал «Код» программирование без снобизма

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

Сегодня мы утащим внешний вид «расхлопа» — когда часть контента прячется внутри какой-то плашки. Хороший пример внешнего вида мы нашли на странице Практикума. Перейдите на неё, чтобы посмотреть, как это выглядит: https://practicum.yandex.ru/frontend-developer/

Логика проекта

Сначала мы накрутим логику для работы «расхлопа», а потом сходим в Практикум за его стилями. Благодаря тому, что мы точно украдём стили у Практикума, у нас получится неотличимый от них расхлоп.

Самый простой кат работает так:

Есть общий блок, внутри которого находится и короткий текст (заголовок ката), и полный текст со всем, что нужно. Или не текст, а фото, видео, код или что угодно ещё.
Короткий и полный текст тоже написаны внутри как отдельные блоки.
Короткий текст виден всегда — и когда кат закрыт, и когда открыт.
Полный текст виртуально есть в этом блоке, просто не отображается на экране. Когда кат раскрывается, блоку просто добавляется видимость, и он появляется в этой же секции.

Чтобы сделать такое, нам понадобится HTML для размещения блоков на странице и JavaScript — для программирования логики раскрытия и закрытия.

Создаём страницу

Наша задача — сделать простую страницу и разместить на ней блок с катом, внутри которого будут два других блока: видимый и скрытый.

Ещё мы сразу добавим ссылку на обработчик нажатия: как только пользователь кликнет по кату, он сработает. Самого обработчика пока не будет, его добавим чуть позже. Код может показаться большим, но это из-за содержимого ката — мы добавили туда текст из статьи про фронтедеров:

Кто такой фронтенд

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Делаем свой кат на странице</title>
</head>
<body>

  <!-- общий блок с катом -->
  <div onclick="look('div1')" class="box">
    <!-- блок с названием ката -->
    <h2>Кат: что делает фронтенд</h2>
    <!-- скрытый блок, который появится при нажатии -->
    <div id = "div1" style="display: none">
      <!-- сюда можно вставлять любое содержимое с любой сложностью вёрстки -->
      <ul>
        <li>собирает сайт по макету дизайнера;</li>
        <li>использует для этого HTML, CSS, JavaScript и несколько других языков;</li>
        <li>понимает процессы, которые происходят во время создания сайта;</li>
        <li>знает, как опубликовать сайт в Сети так, чтобы он выглядел одинаково на всех устройствах;</li>
        <li>умеет работать с Git или другим инструментом контроля версий;</li>
        <li>использует Webpack для сборки проекта и вообще оперирует препроцессорами.</li>
      </ul>
      <p> Звучит сложно, но вот основное: фронтенд берёт макет будущего сайта (картинку) и превращает его в код, который можно отправить клиенту. При необходимости он программирует интерактивные элементы и анимацию, которые будут обрабатываться на клиенте. </p>
      <p>Часто фронтендов путают с верстальщиками, но на самом деле верстальщик — это специалист узкого профиля (вёрстка по макету). А фронт кроме этого может и слайдер прикрутить, и шаблон в CMS поправить, и закодить нестандартное поведение картинки при нажатии, и написать скрипт для проверки правильности заполнения данных на сайте.</p>

    </div>
  </div>

</body>
</html>

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

Воруй у Яндекса: хороший стильный расхлоп на странице

Добавляем обработчик нажатия на кат

Чтобы кат умел раскрываться и закрываться, добавим скрипт, который будет делать так:

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

Запишем это на JavaScript и добавим в конец страницы:

<!-- скрипт, который раскрывает и закрывает кат -->
<script type= "text/javascript">

  function look(type){
  // получаем доступ к блоку, который нужно показать при нажатии
  param=document.getElementById(type);
  // если его нет на экране — показываем
  if(param.style.display == "none") param.style.display = "block";
  // иначе — скрываем
  else param.style.display = "none"
  }
</script>

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

Настраиваем стили

Сейчас наш кат — это просто текст. Оформим кат более красиво:

добавим рамку со скруглениями;
поменяем цвет фона;
изменим настройки шрифта, чтобы текст лучше читался;
настроим отступы.

Чтобы повторить такой же внешний вид, как у Практикума, делаем так:

1. Идём на страницу курса.

2. Находим там нужный кат, например «Углублённый Python»:

3. Щёлкаем правой кнопкой мыши на блоке и выбираем «Проверить элемент» (Inspect Element):

4. В инспекторе находим основные стили оформления этого блока:

5. Копируем себе стили и значения:

отступов (padding);
радиуса скругления (border-radius);
цвет фона (background-color);
выравнивания текста (text-align).

Можно также скопировать настройки шрифта, но мы этого сейчас делать не будем — возьмём только стили самой плашки. При желании текстовые стили тоже можно украсть.

Ещё установим другой цвет фона страницы, чтобы белый кат выделялся на ней. Для этого в тот же HTML-файл в шапку добавим блок со стилями и заполним его всеми значениями.

<style type="text/css">
  /*  общие стили для страницы  */
	body {
    text-align: left;
    margin: 10;
    background: #e0e0e0;
  }
  h2{
    font-weight: 100;
    font-size: 30px;
    margin-bottom: 30px;
  }
  /*  настройки внешнего вида блока с катом  */
  .box{
    font-family: Verdana, Arial, sans-serif;
    line-height: 24px;
    font-size: 16px;
    font-weight: 200;
    border-radius: 24px;
    padding: 24px;
    margin: 20px;
    cursor: pointer;
    background: white;
  }

</style>

Результат

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Делаем свой кат на странице</title>
	<style type="text/css">
    /*  общие стили для страницы  */
	body {
    text-align: left;
    margin: 10;
    background: #e0e0e0;
  }
  h2{
    font-weight: 100;
    font-size: 30px;
    margin-bottom: 30px;
  }
  /*  настройки внешнего вида блока с катом  */
  .box{
    font-family: Verdana, Arial, sans-serif;
    line-height: 24px;
    font-size: 16px;
    font-weight: 200;
    border-radius: 24px;
    padding: 24px;
    margin: 20px;
    cursor: pointer;
    background: white;
  }

	</style>
</head>
<body>

  <!-- общий блок с катом -->
  <div onclick="look('div1')" class="box">
    <!-- название ката -->
    <h2>Кат: что делает фронтенд</h2>
    <!-- скрытый блок, который появится при нажатии -->
    <div id = "div1" style="display: none">
      <!-- сюда можно вставлять любое содержимое с любой сложностью вёрстки -->
      <ul>
        <li>собирает сайт по макету дизайнера;</li>
        <li>использует для этого HTML, CSS, JavaScript и несколько других языков;</li>
        <li>понимает процессы, которые происходят во время создания сайта;</li>
        <li>знает, как опубликовать сайт в Сети так, чтобы он выглядел одинаково на всех устройствах;</li>
        <li>умеет работать с Git или другим инструментом контроля версий;</li>
        <li>использует Webpack для сборки проекта и вообще оперирует препроцессорами.</li>
      </ul>
      <p> Звучит сложно, но вот основное: фронтенд берёт макет будущего сайта (картинку) и превращает его в код, который можно отправить клиенту. При необходимости он программирует интерактивные элементы и анимацию, которые будут обрабатываться на клиенте. </p>
      <p>Часто фронтендов путают с верстальщиками, но на самом деле верстальщик — это специалист узкого профиля (вёрстка по макету). А фронт кроме этого может и слайдер прикрутить, и шаблон в CMS поправить, и закодить нестандартное поведение картинки при нажатии, и написать скрипт для проверки правильности заполнения данных на сайте.</p>

    </div>
  </div>

  <!-- скрипт, который раскрывает и закрывает кат -->
  <script type= "text/javascript">

    function look(type){
    // получаем доступ к блоку, который нужно показать при нажатии
    param=document.getElementById(type);
    // если его нет на экране — показываем
    if(param.style.display == "none") param.style.display = "block";
    // иначе — скрываем
    else param.style.display = "none"
    }
  </script>

</body>
</html>

Текст:

Михаил Полянин

Редактор:

Максим Ильяхов

Художник:

Алексей Сухов

Корректор:

Ирина Михеева

Вёрстка:

Кирилл Климентьев

Соцсети:

Виталий Вебер

Фронтенд-разработка — востребованная профессия

На новом курсе «Практикума» о фронтенде вас обучат самым востребованным технологиям: JS и TypeScript, Flexbox и Grid, React, Git, Bash и др. Это то, что нужно работодателям сегодня. Старт — бесплатно.

Попробовать бесплатно

Фронтенд-разработка — востребованная профессия