LESS CSS: Меню в стиле Apple

      CSS

Здравствуйте, уважаемые читатели XoZbloga! Веб-дизайн и веб-разработка очень быстро развиваются. Мы каждый день видим все больше и больше новинок, будь то приложения или новые сервисы, которые делают нашу жизнь в сети более продуктивной и удобной. А веб-дизайн это просто безграничное пространство, ограниченное только талантом и умениями «художника» (дизайнера). Так вот, поговорим же мы сегодня о LESS — динамическом языке стилевой разметки, который упростит написание стилей CSS.

Что такое LESS?

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

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

LESS CSS logo

LESS существенно облегчает написание стилей. Например, применяя примешивания (mixins), мы создаем что-то на подобии функций, которые могут принимать аргументы. Mixins — позволяют включать все свойства класса в другой класс путем простого включения имени класса как значение одного из свойств.

1
2
3
4
5
6
7
8
9
10
11
.rounded-corners (@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}
#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}

А скомпилированный CSS будет выглядеть так:

1
2
3
4
5
6
7
8
9
10
#header {
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}
#footer {
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
}

Более подробнее о LESS Вы можете узнать на http://lesscss.ru.
Что же, давай те приступим к созданию меню, применяя LESS CSS. В конечном итоге у нас должно получится вот такое меню в стиле Apple.com:


Меню в стиле Apple

Подготовка

Прежде чем преступить к написанию кода, давайте разберемся c тем, что нам понадобится:

1. Текстовый редактор LESS

Нам понадобится текстовый редактор, чтобы кодировать меню. Однако, большинство известных текстовых редакторов, доступных в сети сегодня (например: Dreamweaver, Блокнот, InType, Sublime Text 2) до сих пор не поддерживают LESS. Конечно, открыть и редактировать исходный файл LESS в этих текстовых редакторах можно, но синтаксис подсвечиваться не будет, что не очень удобно.

Таким образом, для этого урока, мы будем использовать специальный текстовый редактор для LESS ChrunchApp. С помощью этого приложения мы сможем редактировать и компилировать исходные файлы LESS. Поскольку это приложение для платформы Adobe Air, она может быть установлена ​​на любой настольной ОС (Win, Linux, OSX и).

Текстовый редактор LESS - Crunch

HTML-редактор, Вы можете использовать любой, какой Вам больше нравится. Лично мне удобно работать на Dreamweaver.

2. Less.Js

Далее нам понадобится библиотека LESS, актуальная версия на данный момент 1.3.0 скачать ее можно с lesscss.ru, ссылка выше.

1
<script src="less-1.3.0.min.js" type="text/javascript"></script>

3. Prefix-Free

Мы также будем использовать несколько эффектов CSS3, которые включают в себя вендорные префиксы (-moz-, -o-, -webkit-) для того, чтобы сделать эффект одинаково правильным в различных браузерах.

По этой причине мы будем использовать Prefix-Free, библиотека JavaScript, автором является Lea Verou, данная библиотека будет обрабатывать вендорные префиксы в фоновом режиме для всех браузеров. Таким образом, нам остается написать только правильный синтаксис W3C.


Логотип prefix-free

Загружаем библиотеку prefix-free.js и подцепляем ее к index.html:

1
<script src="prefix-free.js" type="text/javascript"></script>

На этом с подготовкой закончим и перейдем непосредственно к созданию меню в стиле Apple.com

Разметка HTML

HTML разметка меню довольно проста. Меню сделано на основе не упорядоченного списка. Открываем HTML-редактор и вставляем такой вот код:

1
2
3
4
5
6
7
8
9
<nav>
   <ul>
      <li><a href="#">Главная</a></li>
      <li><a href="#">Новости</a></li>
      <li><a href="#">Уроки</a></li>
      <li><a href="#">Скачать</a></li>
      <li><a href="#">Контакты</a></li>
   </ul>
</nav>

LESS стили

В этом разделе мы начнем написание кода меню на LESS языке. Для тех, кто новичок в программировании, как в написание CSS стилей так и в синтаксисе LESS, не волнуйтесь, постараюсь разложить все по полочкам, чтобы было понятно. Возможно даже кому-то такой способ написания стилей для сайта понравится, ведь он действительно более продуктивный.

Давайте рассмотрим из каких составных частей будет состоять меню:

Элементы меню Apple

Как мы можем видеть на скриншоте выше, навигация Apple.com имеет следующие 6 основных частей:

  • Используется тень;
  • Граница;
  • Разделитель между пунктами меню;
  • Градиент для фона;
  • Эффект затемнения при наведении мыши;
  • Текст меню.

Использовать написанные стили можно двумя способами:

  • подключить styles.less и библиотеку less.js;
  • либо скомпилировать styles.less в программе Crunch и уже присоединить к странице обычный styles.css

Важно: при использовании первого способа чтобы подключение styles.less происходило до подключения библиотеки less.js! Также остается не забыть подключить prefix-free.
Таким образом подключение стилей выглядит так:

1
2
3
4
5
<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less-1.3.0.min.js" type="text/javascript"></script>
<!-- Закомментируем этот фрагмент
<link rel="stylesheet" type="text/css" href="styles.css"> -->
<script src="prefix-free.js" type="text/javascript"></script>

Определение переменной базового цвета

Будем использовать 2 файла: config.less в нем определим все переменные, примешивания и тд., после чего импортируем его во второй (styles.less) в котором уже сформируем стили для элементов меню.

Сейчас разберем код в config.less. Определим базовый цвет меню с помощью переменных. Переменная в LESS объявляется с помощью символа @.

1
@theme: #555;

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

Определим тень для меню с помощью примешивания (mixins)

Одной из особенностей LESS является — примешивание (mixins). Позволяют включать все свойства одного класса в другой класс.

1
2
3
.shadow {
   box-shadow: 0 1px 2px 0 @theme;
}

В приведенном выше коде я не включил префикс для box-shadow, библиотека prefix-free автоматически добавит его. Кроме того, цвет тени наследуется от цвета переменной @theme.

Определим стиль для границ меню используя mixins с параметром

Для нашего меню понадобится граница с закругленными углами. Mixins с параметром — на самом деле имеет такую ​​же функциональность как и простое примешивание, единственным отличием является то, что он также имеет изменяемый параметр.

1
2
3
4
.border(@radius:3px) {
   border-radius: @radius;
   border: 1px solid @theme - #050505;
}

В приведенном выше примере, мы установили закругление по умолчанию @radius в 3 пикселя и, как мы уже говорили, это значение может быть изменено.

Определим градиент, разделитель и стиль при наведении мыши с помощью операций

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

1
2
3
4
5
.divider {
   border-style: solid;
   border-width: 0 1px 0 1px;
   border-color: transparent @theme - #111 transparent @theme + #333;
}

В приведенном выше примере мы вычитаем из переменной @theme цвет #111, таким образом, левая часть разделителя будет немного темнее чем базовый цвет, а правая светлее. Вот такие манипуляции мы можем делать с HEX-цветом.

Для большей понятности манипуляций с цветом, давайте рассмотрим цветовую схему:

Цветовая схема

Максимальная темный цвет #000 (черный), а максимальный светлый цвет #FFF (белый) и базовый цвет #555. Таким образом, если мы хотим получить цвет на три уровня темнее, то вычитаем #333.

Теперь стили градиента:

1
2
3
4
5
6
.gradient {
   background: linear-gradient(to bottom, @theme + #252525 0%, @theme + #171717 50%, @theme - #010101 51%, @theme + #151515 100%);
}
.hovereffect {
   background: linear-gradient(to bottom, @theme - #010101 0%, @theme - #121212 50%, @theme - #222222 51%, @theme - #050505 100%);
}

Определения стиля текста меню на примесях (mixins) с предохранителями

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

Во-первых, если цвет текста на имеет яркость равную или больше чем 50%, то тень должна потемнеть, в данном случае принять цвет #000000.

1
2
3
4
.textcolor(@txtcolor) when (lightness(@txtcolor) >= 50%) {
   color: @txtcolor;
   text-shadow: 1px 1px 0px #000000;
}

И второй вариант, когда яркость цвета текста составляет менее 50%, то тень станет белой.

1
2
3
4
.textcolor(@txtcolor) when (lightness(@txtcolor) < 50%) {
   color: @txtcolor;
   text-shadow: 1px 1px 0px #ffffff;
}

На этом этапе заканчиваем создание файла config.less и переходим к созданию файла styles.less

Импорт config.less

Давайте создадим файл с названием styles.less и первым делом прицепим к нему уже созданный config.less, следующим способом:

1
@import "config.less";

Стиль для тела станицы

Теперь мы зададим цвет фона страницы (который должен быть светлее, чем базовый цвет), а также указать семейство шрифтов и размера шрифта. С помощью функции сделаем цвет фона страницы светлее чем базовый цвет на 30%:

1
2
3
4
5
body {
   background: lighten(@theme, 30%);
   font-family: AsapRegular, sans-serif;
   font-size: 11pt;
}

На данный момент результат нашей работы выглядит так.

Результат работы - 1 проверка

Пока не очень привлекательно. Но все еще впереди.

Основной стиль для меню с вложенными правилами

В LESS мы можем вкладывать стили какого-либо элемента, непосредственно в стиль родителя.Навигационные тег nav спецификация HTML5, который содержит все необходимые элементы для навигации. Вот его стили:

1
2
3
4
5
6
7
nav {
   margin: 50px auto 0;
   width: 788px;
   height: 45px;
   .border;
   .shadow;
}

Обратите внимание, что вместо того, чтобы писать кучу правил CSS, определили только высоту, ширину и отступы. В то время как границу и ее стиль, а также тень мы подцепляем с помощью примешивания (mixins), указываем имя класса .border и .shadow и к классу nav добавляются правила этих классов, которые мы писали в файле config.less.

Результат работы - 2 проверка

Далее, мы добавим стиль для списка ul внутри nav. В простом CSS это выглядело бы так:

1
2
3
4
5
6
nav {  
    ...  
}  
nav ul {  
    ...  
}

Однако в LESS наследование происходит иначе, пойму проще и логичней:

1
2
3
4
5
6
7
8
9
10
11
nav {
   margin: 50px auto 0;
   width: 788px;
   height: 45px;
   .border;
   .shadow;
   ul {
      padding: 0;
      margin: 0;
   }
}

Результат работы - 3 проверка

Как видно на картинке, элементы списка li расположены вертикально, а нам надо чтобы они располагались горизонтально. Для этого зададим свойство display:inline;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
nav {
   margin: 50px auto 0;
   width: 788px;
   height: 45px;
   .border;
   .shadow;
   ul {
      padding: 0;
      margin: 0;
      li {
         display: inline;
      }
   }
}

Результат работы - 4 проверка

Теперь опишем стили для ссылки в элементе списка, и добавим готовые стили: .textcolor, .divider, .gradient.

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
nav {
   margin: 50px auto 0;
   width: 788px;
   height: 45px;
   .border;
   .shadow;
   ul {
      padding: 0;
      margin: 0;
      li {
         display: inline;
         a {
            text-decoration: none;
            display: inline-block;
            float: left;
            width: 156px;
            height: 45px;
            text-align: center;
            line-height: 300%;
            .textcolor(#f2f2f2);
            .divider;
            .gradient;
         }
      }
   }
}

В приведенном выше примере мы применяем шестнадцатеричный цвет #f2f2f2, этот цвет имеет яркость более 50%, поэтому тень будет установлена автоматически черным цветом. Остальная часть кода я уверен, вполне очевидна.

Результат работы - 5 проверка

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

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
nav {
   margin: 50px auto 0;
   width: 788px;
   height: 45px;
   .border;
   .shadow;
   ul {
      padding: 0;
      margin: 0;
      li {
         display: inline;
         a {
            text-decoration: none;
            display: inline-block;
            float: left;
            width: 156px;
            height: 45px;
            text-align: center;
            line-height: 300%;
            .textcolor(#f2f2f2); // You can change this line
            .divider;
            .gradient;
         }
      }
      li:first-child a {
         border-left: none;
      }
      li:last-child a {
         border-right: none;
      }
   }
}

Финальный результат

Стиль для эффекта при наведении

В последнем шаге мы добавим эффект при наведении курсора. В LESS мы можем добавить pseudo-element такой как :hover с помощью символа &.

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
nav {
   margin: 50px auto 0;
   width: 788px;
   height: 45px;
   .border;
   .shadow;
      ul {
         padding: 0;
         margin: 0;
         li {
            display: inline;
            a {
               text-decoration: none;
               display: inline-block;
               float: left;
               width: 156px;
               height: 45px;
               text-align: center;
               line-height: 300%;
               .textcolor(#f2f2f2); // You can change this line
               .divider;
               .gradient;
               &:hover {
                  .hovereffect;
               }
            }
         }
         li:first-child a {
            border-left: none;
         }
         li:last-child a {
            border-right: none;
         }
      }
   }

Эффект при наведении курсора мыши

Компилируем LESS в CSS

Ну вот и все, написание меню apple.com на этом можно завершить. Остается решить каким способом мы будем присоединять написанные стили к веб-странице. Как я уже упоминал выше, использовать написанные стили можно двумя способами:

  • подключить styles.less и библиотеку less.js;
  • либо скомпилировать styles.less в программе Crunch и уже присоединить к странице обычный styles.css

Конечно более второй вариант лучше, зачем присоединять 2 файла и выполнять двойную работу на стороне клиента, поэтому скомпилируем написанные стили LESS в обычный статический CSS.

Для этого надо нажать на большую кнопку Crunch It! И сохранить обычный styles.css

Crunchit it

На этом, урок завершаю.

P.S.: Такое простое меню сможет сделать каждый, но если вам нужен по настоящему крутой сайт с красивыми эффектами, то могу порекомендовать вам одну из лучших веб студий Украины. Ребята смогут сделать вам действительно уникальный дизайн, выполнить поисковую оптимизацию и раскрутить ваш сайт!

Источник статьи/урока: https://xozblog.ru

По материалам: http://www.hongkiat.com/blog/less-css-tutorial-design-slick-menu-nav-bar/

Правила перепечатки

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на еженедельную почтовую рассылку или на новостную ленту RSS. Спасибо!

Похожие статьи:

  1. Простые стили для горизонтальных линий, тег <hr />
  2. Вся правда о псевдоэлементах :before и :after
  3. Галерея изображений в стиле Google Images
  4. Вертикальное металлическое меню на CSS3
  5. Создаем адаптивное меню для сайта