Как сделать навигацию html. Создание панели навигации

Горизонтальная

Панель навигации

Наличие простой в использовании навигации важно для любого веб сайта.

С помощью CSS вы можете превратить скучные HTML меню в красивые навигационные панели

Панель авигации = список ссылок

Панель навигации нуждается в стандартном HTML в качестве основы.

В наших примерах мы построим панель навигации из стандартного HTML списка.

Панель навигации - это в основном список ссылок, поэтому использование элементов

и естественно
• :

  Пример

  
  
  • Главная
  
  
  • Новости
  
  
  • Контакты
  
  
  • О Нас
  
  
  Редактор кода »

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

  Пример объяснение:

  • list-style-type: none; - Убирает маркеры. В панели навигации не нужны маркеры для списка
  • Установить margin: 0; и padding: 0; чтобы удалить настройки браузера по умолчанию

  Код в приведенном выше примере - это стандартный код, используется как на вертикальной, так и на горизонтальной панели навигации.

  Вертикальная панель навигации

  Чтобы создать вертикальную панель навигации, нужно задать стиль элемента в списке, к дополнению коду выше:

  Объяснение примера:

  • display: block; - Отображение ссылок в виде элементов блока составляет область кликабельных ссылок (не только текст), и позволяет указать ширину (и отступы, поля, высота и т. д. какие вы хотите)
  • width: 60px; - Элементы блока занимают всю ширину, доступную по умолчанию. Мы хотим задать ширину 60 пикселей

  Вы также можете установить ширину

  и удалить ширину , поскольку они будут занимать всю ширину, доступную при отображении в виде элементов блока. Это приведет к тому же результату, что и в предыдущем примере:

  Пример вертикальной панели навигации

  Создание базовой вертикальной панели навигации с серым цветом фона и изменение цвета фона ссылок при наведении курсора мыши на них:

  Пример

  ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
  }

  li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
  }

  /* Change the link color on hover */
  li a:hover {
  background-color: #555;
  color: white;
  }

  Редактор кода »

  Центральные ссылки и добавить границы

  Добавить выравнивание text-align:center в

  • или ссылки по центру.

    Добавить свойство border в

    . Добавить границы вокруг навигации. Если Вы также хотите установить границы внутри панели, нужно добавить border-bottom во все элементы
    • , за исключением последнего:

      Фиксированная вертикальная навигация

      Создать в полную в высоту, "фиксированную" боковую панель навигации:

      Пример

      ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      width: 25%;
      background-color: #f1f1f1;
      height: 100%; /* Полная высота */
      position: fixed; /* Сделайте его придерживаться, даже на прокрутки */
      overflow: auto; /* Включить прокрутку, если sidenav имеет слишком много содержимого */
      }

      Редактор кода »

      Примечание: Этот пример может работать неправильно на мобильных устройствах.

      Горизонтальная панель навигации

      Существует два способа создания горизонтальной панели навигации. Использование встроенных или плавающих элементов списка.

      Встроенные элементы списка

      Одним из способов построения горизонтальной панели навигации является указание элементов

    • как встроенные, кроме того в "стандартные" в коде выше:

      Объяснение примера:

      • display: inline; - По умолчанию, элементы
      • - это элементы блока. Здесь мы удалим разрывы строк до и после каждого элемента списка, чтобы отобразить их на одной линии

      Плавающие элементы списка

      Другой способ создания горизонтальной навигации, плавают элементы

    • им нужно указать расположение для навигационных ссылок:

      Объяснение примера:

      • float: left; - Используйте поплавок, чтобы заставить элементы блока плавать рядом друг с другом
      • display: block; - Отображение ссылок в виде элементов блока составляет всю область кликабельных ссылок (не только текст), позволяет нам указывать отступы (и высоту, ширину, поля и т.д. если вы хотите)
      • padding: 8px; - Поскольку элементы блока занимают всю доступную ширину, они не могут плавать рядом друг с другом. Поэтому, укажите некоторые дополнения, чтобы сделать их выглядеть красиво
      • background-color: #dddddd; - Добавить серый фон цвета к каждому элементу

      Совет: Добавить background-color: #dddddd; в

      для каждого элемента , чтобы цвет фона был на всю ширину:

      Примеры горизонтальной панели навигации

      Создание базовой горизонтальной панели навигации с темным цветом фона и изменение цвета фона ссылок при наведении курсора мыши на них:

      Пример

      ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #333;
      }

      li {
      float: left;
      }

      li a {
      display: block;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
      }

      Редактор кода »

      Активная и текущая ссылка навигации

      Выравнивание списка по правому краю

      Выравнивание ссылок по правому краю путем перемещения элементов списка вправо float:right; :

      Пример

      
      
      • Главная
      
      
      • Новости
      
      
      • Контакты
      
      
      • О Нас
      
      

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

      В чем отличия

      Прежде всего я хотел бы сказать, что спецификация не является уж такой и новой – она начала свое становление еще в 2009 году. Собственно, с тех пор происходит постоянное развитие – в html5 появляются новые возможности, современные браузеры все больше и больше поддерживают эти самые возможности, так что уже скоро можно будет говорить о полной поддержке этой технология, хотя она и не является чем-то единым целым, это скорее набор новых возможностей, каждая из которых является самостоятельной.

      Ну хорошо, а чем же отличается создание главной навигации (меню), раз уж вы читаете статью на эту тему, то какие-то отличия точно должны быть. Ну а как раньше создавалось меню? Обычно для этого использовали маркированный список, который помещали в дополнительный контейнер для всей навигации – обычный div.

      Так вот, с появлением новых тегов теперь можно поступить более правильно – вместо тега div обернуть меню в nav – новый семантический элемент, который создан специально для того, чтобы собирать в него самые главные ссылки, группировать их вместе.

      В nav можно поместить как список, так и просто набор ссылок. Мне кажется, это даже более простое и правильное решение, хотя во многих шаблонах по-прежнему видно реализацию меню с помощью тегов ul, li, a.

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

      Как сделать с помощью html5 горизонтальное меню

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

      Другое дело, что по оформлению они очень ограничены из-за своих строчных свойств. Вы сможете оперировать только такими свойствами как: цвет, размер шрифта, внешние отступы. Если же вы захотите задать определенный фоновый цвет, сделать разделители и добавить внутренние отступы (либо определить размер каждого пункта меню) то со строкой так сделать не получится.

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

      display : block ;

      Теперь они идут сверху вниз, то есть наша навигация стала вертикальной. Чтобы вновь превратить ее в горизонтальную, нужно добавить определенные свойства. Например, вместо блочного типа определить для них блочно-строчный, либо задать им (float: left). Читайте подробнее об этих способах .

      Вертикальная навигация

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

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

      a{ text-decoration: none; color: #fff; padding: 5px; font-size: 22px; display: block; background: linear-gradient(to right, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%); width: 200px; text-align: center }

      text - decoration : none ; color : #fff; padding : 5px ; font - size : 22px ; display : block ; background : linear - gradient (to right , rgba (96 , 108 , 136 , 1 ) 0 % , rgba (63 , 76 , 107 , 1 ) 100 % ) ; width : 200px ; text - align : center

      горизонтальный

      Навигация Бары

      Имея легкий в использовании навигации имеет важное значение для любого веб-сайта.

      С помощью CSS вы можете превратить скучные меню HTML в симпатичных панели навигации.

      Панель навигации = Список ссылок

      Панель навигации необходим стандартный HTML в качестве базы.

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

      Панель навигации в основном список ссылок, так что с помощью

      и
      • элементы имеет смысл:

        пример

        
        
        • Home
        
        
        • News
        
        
        • Contact
        
        
        • About
        
        
        Попробуй сам "

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

        Объяснение примера:

        • list-style-type: none; - Удаляет пули. Панель навигации не нужен список маркеров
        • Установить margin: 0; и padding: 0; для удаления настроек браузера по умолчанию

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

        Вертикальная панель навигации

        Чтобы построить вертикальную панель навигации, вы можете стиль элементов внутри списка, в дополнение к указанному выше коду:

        Объяснение примера:

        • display: block; - Отображение ссылок в виде блока элементов делает всю площадь ссылка кликабельным (а не только текст), и это позволяет нам указать width (и padding, margin, height и т.д. , если вы хотите)
        • width: 60px; - блочные элементы занимают всю доступную ширину по умолчанию. Мы хотим, чтобы задать ширину 60 пикселей

        Вы также можете установить ширину

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

        Вертикальная панель навигации Примеры

        Создание базовой вертикальной панели навигации с серым цветом фона и изменить цвет фона ссылки, когда пользователь перемещает курсор мыши над ними:

        пример

        Ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        width: 200px;
        background-color: #f1f1f1;
        }

        li a {
        display: block;
        color: #000;
        padding: 8px 0 8px 16px;
        text-decoration: none;
        }

        /* Change the link color on hover */
        li a:hover {
        background-color: #555;
        color: white;
        }

        Попробуй сам "

        Центр Ссылки & Добавить границы

        Добавить text-align:center для

        • или к центру ссылки.

          Добавьте border свойство

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

            Полноразмерные Фиксировать вертикально Navbar

            Создание полной высоты, "sticky" боковой навигации:

            пример

            Ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            width: 25%;
            background-color: #f1f1f1;
            height: 100%; /* Full height */
            position: fixed; /* Make it stick, even on scroll */
            overflow: auto; /* Enable scrolling if the sidenav has too much content */
            }

            Попробуй сам "

            Примечание: Этот пример может не работать должным образом на мобильных устройствах.

            Горизонтальная панель навигации

            Есть два способа создания горизонтальной панели навигации. Использованиевстроенных или плавающих элементов списка.

            Встроенные элементы списка

            Один из способов создания горизонтальной панели навигации, чтобы указать

          • элементы как встроенные, в дополнение к "standard" коду выше:

            Объяснение примера:

            • display: inline; - По умолчанию
            • элементы являются блочные элементы. Здесь мы удалить разрывы строк до и после каждого элемента списка, чтобы отобразить их на одной линии

            Плавающий элементов списка

            Другой способ создания горизонтальной панели навигации, чтобы плавать на

          • элементов, а также указать макет для навигационных ссылок:

            Объяснение примера:

            • float: left; - использование с плавающей точкой, чтобы получить блок элементов, чтобы скользить рядом друг с другом
            • display: block; - Отображение ссылок в виде блока элементов делает всю площадь ссылка кликабельным (а не только текст), и это позволяет нам указать отступы (и height, width, margins и т.д. , если вы хотите)
            • padding: 8px; - Так как блочные элементы занимают всю доступную ширину, они не могут плавать рядом друг с другом. Поэтому, указать некоторое дополнение, чтобы сделать их хорошо выглядеть
            • background-color: #dddddd; - добавить серый цвет фона для каждого элемента

            Совет: добавьте цвет фона для

            вместо каждого элемента, если вы хотите полноширинные цвет фона:

            Горизонтальная панель навигации Примеры

            Создание базовой горизонтальной панели навигации с темным цветом фона и изменить цвет фона ссылки, когда пользователь перемещает курсор мыши над ними:

            пример

            Ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #333;
            }

            li {
            float: left;
            }

            li a {
            display: block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
            }

            /* Change the link color to #111 (black) on hover */
            li a:hover {
            background-color: #111;
            }

            Попробуй сам "

            Активный / Текущая навигация Ссылка

            Добавить "active" класс к текущей ссылке, чтобы пользователь мог знать, на какой странице он / она находится на:

            Щелкните правой кнопкой Align ссылки

            В этом уроке мы поговорим о том, как создать меню с помощью переходов используя псевдоэлементы :before и :after .

            Пример меню можно увидеть здесь:

            Скачать

            К сожалению только Mozilla поддерживает переходы псевдоэлементов.

            HTML часть

            Структура меню обычная — маркированный список , и у каждого элемента списка класс effects :

            1 2 3 4 5 6 7

            <ul > <li class = "effects" > ГЛАВНАЯ</ a > <li class = "effects" > ОБ АВТОРЕ</ a > <li class = "effects" > ПОРТФОЛИО</ a > <li class = "effects" > БЛОГ</ a > <li class = "effects" > КОНТАКТЫ</ a > </ ul >

            CSS часть

            Для начала сделаем из этого списка горизонтальное меню:

            1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

            ul { list-style : none ; padding-top : 50px ; } li { position : relative ; float : left ; width : 150px ; text-align : center ; padding-top : 35px ; padding-bottom : 35px ; color : #fff ; margin-right : 20px ; border-radius : 5px ; background : #161616 ; border-bottom : 1px solid #333 ; border-left : 1px solid #000 ; border-right : 1px solid #333 ; border-top : 1px solid #000 ; cursor : pointer ; }

            А сейчас добавим эффекты:

            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

            .effects :after , .effects :before { -moz-transition : width 0.5s ease 0s; height : 0px ; width : 0px ; position : absolute ; content : " " ; display : block ; opacity : 0 ; box-shadow : 0px 0px 5px #00c6ff ; } .effects :after { background : -moz-linear-gradient(left , #0ad , #08b ) ; top : 84px ; left : 75px ; } .effects :before { background : -moz-linear-gradient(right , #0ad , #08b ) ; top : 84px ; right : 75px ; } .effects :hover :after , .effects :hover :before { width : 72px ; height : 1px ; opacity : 1 ; }

            Вывод

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

            В данном уроке мы сделаем систему навигации по сайту с использованием только CSS3. Идея заключается в организации нескольких слайдов или слоев с содержанием, которые будут выводиться и скрываться с помощью псевдо-класса:target . C помощью переходов CSS можно сделать отличные визуальные эффекты появления слайдов. Также наша навигация будет адаптивной.

            Примечание: результат урока полноценно работает в браузерах, поддерживающих CSS3.

            Разметка HTML

            Для каждого отдельного слайда, который будет содержать либо набор ссылок, либо информацию, либо подслайд, создадим элемент div с классом cn-slide . Для подслайдов, которые содержат две ссылки в строке, будем использовать другой класс cn-slide-sub . Слайд с информацией просто будет иметь класс cn-slide .

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

            Описание

            Философоия

            Назад

            Эпистемология

            Назад

            Текст...

            Держите левую клавишу, чтобы увидеть фон

            Метафизика

            . . .

            Эстетика

            . . .

            Этика

            . . .
            . . .

            Подслайды и слайды с информацией содержат ссылки на предыдущий слой.

            CSS

            Основной контейнер имеет свойства min-width и max-width , которые позволяют нам использовать для задания ширины проценты в условиях ганатии, что элемнет не станет слишком большим или маленьким:

            Cn-container{ width: 60%; min-width: 300px; max-width: 820px; margin: 10px auto 0 auto; text-align: left; position: relative; }

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

            Cn-container h2{ font-family: "PT Sans Narrow", "Arial Narrow", Arial, sans-serif; font-variant: small-caps; font-weight: 700; color: #fff; position: absolute; z-index: 1000; text-shadow: 0 0 1px rgba(255,255,255,0.8), 1px 1px 1px rgba(0,0,0,0.2); font-size: 80px; line-height: 80px; top: 0px; right: 200px; white-space: nowrap; opacity: 0; -webkit-transition: all 0.3s linear 0.4s; -moz-transition: all 0.3s linear 0.4s; -o-transition: all 0.3s linear 0.4s; -ms-transition: all 0.3s linear 0.4s; transition: all 0.3s linear 0.4s; } .cn-container .cn-slide:target h2{ right: 0px; opacity: 1; }

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

            Cn-slide{ text-align: center; position: absolute; left: -100%; padding-top: 80px; margin: 0 5%; width: 90%; opacity: 0; -webkit-transition: left 0.4s linear, opacity 0.4s linear; -moz-transition: left 0.4s linear, opacity 0.4s linear; -o-transition: left 0.4s linear, opacity 0.4s linear; -ms-transition: left 0.4s linear, opacity 0.4s linear; transition: left 0.4s linear, opacity 0.4s linear; } .cn-slide:target{ left: 0px; opacity: 1; }

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

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

            Cn-slide nav a{ text-align: left; display: block; font-family: "PT Sans Narrow", "Arial Narrow", Arial, sans-serif; font-variant: small-caps; font-weight: 700; border: 8px solid #fff; padding: 2%; font-size: 66px; letter-spacing: 7px; text-shadow: 0px 0px 10px rgba(255,255,255,0.9); color: rgba(255,255,255,0.1); line-height: 66px; margin: 0 0 10px 0; outline: none; box-shadow: 1px 1px 3px rgba(0,0,0,0.1); background: #fff url(../images/1.jpg) no-repeat center center; -webkit-background-size: 100%; -moz-background-size: 100%; -o-background-size: 100%; background-size: 100%; background-clip: padding-box; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .cn-slide nav a:hover{ box-shadow: 1px 3px 7px rgba(0,0,0,0.25); text-shadow: 1px 1px 1px rgba(0,0,0,0.1); color: rgba(255,255,255,0.9); }

            Cn-slide-sub nav a{ width: 42%; display: inline-block; font-size: 40px; }

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

            Cn-slide-sub nav a:nth-child(odd){ margin-right: 5px; }

            Слайд с информацией является конечной точкой переходов:

            Cn-content{ background: #80B8CE url(../images/1.jpg) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; text-align: left; padding: 20px 20px 5px; box-shadow: 1px 1px 3px rgba(0,0,0,0.1); border: 8px solid #fff; margin-top: 5px; cursor: pointer; }

            Каждая область с содержанием соответствует блоку ссылки. Фоновое изображение будет установлено позже:

            Параграф также будет иметь переходы. С помощью псевдо-класса :active мы даем возможность пользователю посмотреть на фон, удерживая левую клавишу мыши.

            Cn-content:active p{ opacity: 0; } .cn-content p{ line-height: 24px; text-shadow: 1px 1px 1px rgba(255,255,255,0.9); color: rgba(103,59,77,0.9); padding: 15px 20px; margin-bottom: 10px; background: rgba(255,255,255,0.96); font-style: italic; border-top: 7px solid rgba(103,59,77,0.6); -webkit-transition: opacity 0.3s linear; -moz-transition: opacity 0.3s linear; -o-transition: opacity 0.3s linear; -ms-transition: opacity 0.3s linear; transition: opacity 0.3s linear; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

            Стрелка возврата выскальзывает слева. Сначала она имеет положение -100px, а при активации слайда выдвигается в положение 3px:

            Cn-back{ outline: none; text-indent: -9000px; width: 49px; height: 42px; background: transparent url(../images/arrow.png) no-repeat center center; position: absolute; top: 22px; left: -100px; cursor: pointer; opacity: 0; -webkit-transition: all 0.4s ease-in-out 0.5s; -moz-transition: all 0.4s ease-in-out 0.5s; -o-transition: all 0.4s ease-in-out 0.5s; -ms-transition: all 0.4s ease-in-out 0.5s; transition: all 0.4s ease-in-out 0.5s; } .cn-slide:target .cn-back{ left: 3px; opacity: 1; }

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

            /* Основные пункты */ .cn-slide nav a{ background-image: url(../images/1.jpg); } .cn-slide nav a{ background-image: url(../images/2.jpg); } .cn-slide nav a{ background-image: url(../images/3.jpg); } /* Пункты и подпункты для слайда 1*/ .cn-slide nav a, #slide-1-1 .cn-content { background-image: url(../images/4.jpg); } .cn-slide nav a, #slide-1-2 .cn-content { background-image: url(../images/5.jpg); } .cn-slide nav a, #slide-1-3 .cn-content { background-image: url(../images/6.jpg); } .cn-slide nav a, #slide-1-4 .cn-content { background-image: url(../images/7.jpg); } /* Пункты и подпункты для слайда 2*/ .cn-slide nav a, #slide-2-1 .cn-content { background-image: url(../images/8.jpg); } .cn-slide nav a, #slide-2-2 .cn-content { background-image: url(../images/9.jpg); } .cn-slide nav a, #slide-2-3 .cn-content { background-image: url(../images/10.jpg); } .cn-slide nav a, #slide-2-4 .cn-content { background-image: url(../images/11.jpg); } /* Пункты и подпункты для слайда 3*/ .cn-slide nav a, #slide-3-1 .cn-content { background-image: url(../images/12.jpg); } .cn-slide nav a, #slide-3-2 .cn-content { background-image: url(../images/13.jpg); } .cn-slide nav a, #slide-3-3 .cn-content { background-image: url(../images/14.jpg); } .cn-slide nav a, #slide-3-4 .cn-content { background-image: url(../images/15.jpg); }

            В завершение определяем несколько медиа запросов для формирования шаблона на маленьких размерах экрана. Лучше всего определить точки разлома шаблона и установить для них правила изменения. В нашем случае таких точек две: 1060 px и 900 px. Изменим размер шрифта, а в подслайдах дуем использовать только один элемент в строке.

            @media screen and (max-width: 1060px){ .cn-slide-sub nav a{ font-size: 28px; } } @media screen and (max-width: 900px){ .cn-container h2{ font-size: 48px; line-height: 95px; } .cn-slide nav a{ font-size: 38px; } .cn-slide-sub nav a{ width: auto; font-size: 36px; display: block; } .cn-slide-sub nav a:nth-child(odd){ margin-right: 0px; } }