Хабр, привет!

На Сodepen появляется много хороших решений от разных специалистов, и я считаю, что лучшие из них нужно собирать в одном месте. Поэтому 2 года назад начал сохранять у себя на компьютере интересные скрипты по разным тематикам.

Раньше я их выкладывал в группе продукта облачной IDE mr. Gefest , это были сборки из 5-8 решений. Но теперь у меня стало скапливаться по 15-30 скриптов в разных тематиках (кнопки, меню, подсказки и так далее).

Такие большие наборы следует показывать большему числу специалистов. Поэтому выкладываю их на Хабр. Надеюсь они будут Вам полезны.

В этом обзоре мы рассмотрим многоуровневые меню.

Flat Horizontal Navigation

Красивая навигационная панель с плавно появляющимся подменю. Код хорошо структурирован, используется js. Судя по использованным возможностям, работает в ie8+.
http://codepen.io/andytran/pen/kmAEy

Material Nav Header w/ Aligned Dropdowns

Адаптивная панель ссылок с двухколонным подменю. Все сделано на css и html. Применены css3 селекторы, которые не поддерживаются в ie8.
http://codepen.io/colewaldrip/pen/KpRwgQ

Smooth Accordion Dropdown Menu

Стильное вертикальное меню с плавно раскрывающимися элементами. Используется transition, transform js-код.
http://codepen.io/fainder/pen/AydHJ

Pure CSS Dark Inline Navigation Menu

Темная вертикальная навигационная панель с иконками из ionicons. Применяется javascript. В ie8 скорее всего будет работать без анимации.
http://codepen.io/3lv3n_snip3r/pen/XbddOO

Pure CSS3 Mega Dropdown Menu With Animation

Стильное меню с двумя форматами вывода: горизонтальным и вертикальным. Используются иконки и css3-анимация. В ie8 точно будет ужасно выглядеть, но зато в других браузерах все круто.
Ссылка на вертикальную: http://codepen.io/rizky_k_r/full/sqcAn/
Ссылка на горизонтальную: http://codepen.io/rizky_k_r/pen/xFjqs

CSS3 Dropdown Menu

Горизонтальное меню с большими элементами и выпадающим списком ссылок. Чистый и минималистичный код без js.
http://codepen.io/ojbravo/pen/tIacg

Simple Pure CSS Dropdown Menu

Простое, но стильное горизонтальное меню. Используется font-awesome. Все работает на css и html, без js. В ie8 будет работать.
http://codepen.io/Responsive/pen/raNrEW

Bootstrap 3 mega-dropdown menu

Отличное решение для интернет-магазинов. Отображает несколько уровней категорий и большие изображения (например, товар по акции). В его основе лежит boostrap 3.
http://codepen.io/organizedchaos/full/rwlhd/

Flat Navigation

Стильная навигационная панель с плавным подменю. В старых браузерах отобразится с проблемами.
http://codepen.io/andytran/pen/YPvQQN

3D nested navigation

Горизонтальное меню с очень крутой анимацией без js!
http://codepen.io/devilishalchemist/pen/wBGVor

Responsive Mega Menu - Navigation

Горизонтальное адаптивное меню. Выглядит неплохо, но мобильная версия немного "хромает". Используется css, html и js.
http://codepen.io/samiralley/pen/xvFdc

Pure Css3 Menu

Оригинальное меню. С простым и чистым кодом без js. Применяйте для "вау" эффектов.
http://codepen.io/Sonick/pen/xJagi

Full CSS3 Dropdown Menu

Красочное выпадающее меню с одним уровнем вложенности. Используются иконки из font-awesome, html и css.
http://codepen.io/daniesy/pen/pfxFi

Css3 only dropdown menu

Достаточно неплохое горизонтальное меню с тремя уровнями вложенности. Работает без js.
http://codepen.io/riogrande/pen/ahBrb

Dropdown Menus

Минималистичное меню с оригинальным эффектом появления вложенного списка элементов. Радует, что это решение тоже без javascript.
http://codepen.io/kkrueger/pen/qfoLa

Pure CSS DropDown Menu

Примитивное, но эффективное решение. Только css и html.
http://codepen.io/andornagy/pen/xhiJH

Pull Menu - Menu Interaction Concept

Интересный концепт меню для мобильного телефона. Я такого ещё не видел. Используется html, css и javascript.
http://codepen.io/fbrz/pen/bNdMwZ

Make Simple Dropdown Menu

Чистый и простой код, без js. В ie8 точно работать будет.
http://codepen.io/nyekrip/pen/pJoYgb

Pure CSS dropdown

Решение неплохое, но слишком уж много используется классов. Радует, что нет js.
http://codepen.io/jonathlee/pen/mJMzgR

Dropdown Menu

Симпатичное вертикальное меню с минимальным javascript-кодом. JQuery не используется!
http://codepen.io/MeredithU/pen/GAinq

CSS 3 Dropdown Menu

Горизонтальное меню с дополнительными подписями может хорошо украсить Ваш сайт. Код простой и понятный. Javascript не применяется.
http://codepen.io/ibeeback/pen/qdEZjR

Красивое решение с большим количеством кода (html, css и js). Придумано 3 формата подменю. Для интернет-магазинов решение хорошо подходит.
http://codepen.io/martinridgway/pen/KVdKQJ

CSS3 Menu Dropdowns (особенное решение)!

Темное горизонтальное меню с тринадцатью (13) вариантами анимации! Обязательно советую ознакомиться, пригодится в быту.
http://codepen.io/cmcg/pen/ofFiz

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

Михаил сб, 09/20/2014 - 12:28

Что-то мой комментарий не виден - дублирую:

===========
Спасибо, но у меня (под Инт.Экспл-8) меню не выпадает. Т.е. не работает строка "ul.nav li:hover ul {display: block;}"
Подскажите, в чем дело?

Есть пожедания по изложению материала:

Хорошо бы в этой строке (ul.aaaaa li:hover ul {display: block;}) растолковать, какая ее часть отвечает за "выпадение меню", а какая - за скрывание пунктов более глубокого уровня вложенности

Хорошо бы в примерах каждую строку снабжать комментарием, что она делает.

В частности, неясно, зачем нужна строка "

Перед этой строкой стоят 2 строки, видимо, не относящиеся к делу (Домой
и Посмотреть вертикальное меню). У человека, незнакомого с новым материалом (то есть, как раз для того, для которого вы писали), уходит время на осознание того, что эти строки для выпадающего меню не нужны. Или все-таки нужны?

В хеддере в вашем примере имеются 3 строки. Из них только одна относится к теме (задает имя ЦСС-файла), а 2 другие - нет. Это также осложняет освоение материала. Тем более, что на моем компьютере такой хеддер вообще приводит к некорректному отображению текста, поскольку мне нужно ставить не "utf-8", а "Windows-..."

В примере неясно, что слова "style.css", "block-menu" и "nav" - это не ключевые слова, а названия, задающиеся пользователем. Я выяснял это экспериментально

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

  • Войдите , чтобы оставлять комментарии

Oleg сб, 09/20/2014 - 23:50

Самый объёмный коммент!!!
Коментарии проходят только после модерации поэтому вы и не увидели свой коммент сразу.
Постараюсь ответить на всё. Начнём с вопросов зачем здесь это. Таки да две ссылки просочились с рабочего варианта.
Насчёт не корректного отображения текста. Вы смогли прочитать и откоментить эту страницу при том что кодировка у неё такая же как и у примера в посте.
Данный пост не предназначен для абсолютных новичков и был написан по желанию подписчиков. Если объяснять абсолютно всё то нужно будет рассказать про классы и идентификаторы, блоки, позиционирование, псевдоселекторы, каскад и прочее. Довольно большая статья получиться и что самое главное бесполезная.
ul.nav li:hover > ul {display: block;} будет показывать ранее скрытый пункт. Если разбирать по буквам то(здесь параллельно смотрим на код) при наведении на пункт меню(ul.nav li) сработает:hover и первый вложенный список >ul будет виден за счёт того что значение display сменит значение с none на block.

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

План урока и разметка нашего меню

В общем-то, сначала определимся с тем, как будем создавать само меню. В html5 стандартным способом считается создавать его в контейнере nav с помощью маркированного списка. Давайте именно так и сделаем. Маркеры мы позже уберем с помощью css, в меню они нам совершенно не нужны.

Собственно, я сразу напишу в html разметку с вложенными списками. То есть наши список будет двухуровневым – в нем будут другие списки. А именно, на каждый пункт 1 список, который и будет формировать выпадающее меню.

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

Собственно, вот она, вся разметка:

< nav id = "nav" >

< ul >

< li > < a href = "#" > Пункт1 < / a >

< ul class = "second" >

< li > < a href = "#" > Подпункт< / a > < / li >

< li > < a href = "#" > Подпункт< / a > < / li >

< li > < a href = "#" > Подпункт< / a > < / li >

< / ul >

< / li >

< li > < a href = "#" > Пункт2 < / a >

< ul class = "second" >

< li > < a href = "#" > Подпункт< / a > < / li >

< li > < a href = "#" > Подпункт< / a > < / li >

< li > < a href = "#" > Подпункт< / a > < / li >

< / ul >

< / li >

< li > < a href = "#" > Пункт3 < / a >

< ul class = "second" >

< li > < a href = "#" > Подпункт< / a > < / li >

< li > < a href = "#" > Подпункт< / a > < / li >

< li > < a href = "#" > Подпункт< / a > < / li >

< / ul >

< / li >

< li > < a href = "#" > Пункт4 < / a >

< ul class = "second" >

< li > < a href = "#" > Подпункт< / a > < / li >

< li > < a href = "#" > Подпункт< / a > < / li >

< li > < a href = "#" > Подпункт< / a > < / li >

< / ul >

< / li >

< / ul >

< / nav >

Я понимаю, что она огромна. В этом-то и проблема вложенных списков, что требуется писать много кода. Но учитывайте тот факт, что мы делаем 4 основных пункта и для каждого будет выпадающее меню.

Собственно, я задал всей навигации идентификатор nav, а всем вложенным спискам – стилевой класс second, чтобы понимать, что они являются вложенными.

Отлично, разметка у нас готова, можно посмотреть на результат:

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

Пишем css-стили

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

*{ margin: 0; padding: 0; }

margin : 0 ;

padding : 0 ;

#nav{ height: 70px; } #nav ul{ list-style: none; }

#nav{

height : 70px ;

#nav ul{

list - style : none ;

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

#nav > ul > li{ float: left; width: 180px; position: relative; }

#nav > ul > li{

float : left ;

width : 180px ;

position : relative ;

Заметьте, что с помощью знака > мы обращаемся к пунктам списка, который непосредственно вложены в ul, а тот непосредственно вложен в nav. Это очень важно, так как позволяет не применить стиль к пунктам вложенных списков. Дело в том, что по моей задумке в главном списке пункты будут располагаться горизонтально, а во вложенных – вертикально.

Но вы, конечно, можете делать по-другому, в согласии со своей задумкой. Вы можете сделать так, чтобы все пункты были в одну строчку.

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

Для чего позиционирование? Оно необходимо для того, чтобы потом абсолютно позиционировать вложенные списки. Если вы изучали позиционирование в css, то наверняка знаете, что если задать блоку относительное позиционирование, то все элементы в нем можно будет позиционировать абсолютно внутри именно этого блока, а не всего окна браузера.

Тем временем, вот что у нас уже получилось:

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

#nav li a{ display: block; background: #90DA93; border: 1px solid #060A13; color: #060A13; padding: 8px; text-align: center; text-decoration: none; } #nav li a:hover{ background: #2F718E; }

#nav li a{

display : block ;

background : #90DA93;

border : 1px solid #060A13;

color : #060A13;

padding : 8px ;

text - align : center ;

text - decoration : none ;

#nav li a:hover{

background : #2F718E;

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

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

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

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

#nav li .second{ display: none; position: absolute; top: 100%; }

#nav li .second{

display : none ;

position : absolute ;

top : 100 % ;

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

Теперь мы видим на веб-странице только основное меню, что нам и нужно.

Реализуем выпадение

Нам осталось сделать самое главное – реализовать само выпадение. В этом нет ничего сложного, смотрите на этот код:

#nav li:hover .second{ display: block; }

#nav li:hover .second{

display : block ;

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

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

#nav li li{ width: 180px; }

#nav li li{

width : 180px ;

Все, проблема решена:

Все работает отлично. При наведении на основной пункт появляется соответствующее ему выпадающее меню. Если убрать курсор в сторону – оно пропадает. Если перевести курсор на сами вложенные пункты, то можно будет по ним кликнуть и перейти в нужный раздел сайта. Таким образом, мы сделали с вами очень простое и легкое выпадающее меню абсолютно без скриптов.

Переделываем меню в вертикальное

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

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

Теперь остается изменить правила для селектора #nav li .second, то есть для вложенных списков, а именно, их нужно немного по-другому позиционировать. Вот так:

#nav li .second{ display: none; position: absolute; left: 100%; top: 0; }

#nav li .second{

display : none ;

position : absolute ;

left : 100 % ;

top : 0 ;

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

Поэтому изменяем top: 100% на left: 100%. Кроме этого, координата top нам тоже нужна. Задаем ей 0, чтобы вложенное меню находилось на одном уровне с пунктом, которому соответствуют.

Все, теперь все работает так, как надо. Можете протестировать. Как видите, я не врал, когда говорил, что придется переписать всего несколько строк кода.

Горизонтальное меню с несколькими уровнями

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

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

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

Начинаем верстку нашего горизонтального меню!

Как вы наверняка догадываетесь первым делом нам нужно создать html стараницу со стандартной разметкой и подключить к ней файл стилей. Не буду подробно останавливаться на данном шаге, так как все-таки надеюсь, что вы не настолько начинающие, чтобы подробно разсказывать вам, что такое body и head и как подключаются стили. Скажу лишь, что помимо стилей для нашего меню в файл css я напишу самый простой reset, чтобы обнулить стили и добиться одинакового отображения отступов во всех браузерах. Вот собственно так выглядит мой простейший ресет:

Про обнуление стилей тоже пока ничего подробно говорить не буде, так как по сути это тема для еще одной статьи, единственное, что вам нужно знать о вышеописанном коде, это то что благодаря данному коду у всех элементах страницы которые мы будем писать обнулятся отступы margin и padding, это нужно делать, для того чтобы наша страница одинаково выглядела во всех браузерах.

Итак что в нас есть на данном этапе? У нас есть html страница со стандартной разметкой:

Горизональное меню

И у нас есть подключенный к данной странице файл стилей (у меня это style.css), со следующем содержимым:

Следующим этапом будет создания html разметки для нашего меню.

Создаем разметку для меню

В нашей разметке мы будем использовать новый тег , который появился в HTML5, я решил вас сразу приучать к новым тегам, чтобы так сказать следовать тренду и стандарту.Несмотря на то, что новые теги HTML 5 не поддерживаются старыми браузерами я все же настоятельно рекомендую использовать их в своей верстка, так как рано или позно вам всеравно нужно будет перейти на них, как в свое время верстальщики перешли от с табличной верстке к блочной, такова реальность, лучше следовать тренду!

И раз мы уже заговорили о поддержке новых тегов html 5, чтобы у нас не возникало проблем с этим в старых браузерах, в наш документ нужно подключить специальную библиотеку — html5shiv. Делается это вставкой в
раздел head вашей страницы следующего кода:

Все после этого тег (и другие теги оносящиеся к HTML5) будут нормально восприниматься старыми браузерами.

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

  • Главная
  • О нас
  • Портфолио
  • Блог
  • Контакты

Итак с разметкой мы вроде закончили пора приступать непосредственно к написанию стилей, так как сейчас наше меню выглядит мягко говоря не очень:

Пишем стили нашего горизонтального меню

И так первым делом при верстке меню нам нужно убрать маркеры списка, они нам явно не нужны, делается это так:

Ul{ list-style:none; }

После этого наше меню станет таким:

Мне не очень нравится, что наше меню прилеплено к краям браузера, давайте исправим это:

Данным кодом мы задали ширину нашему меню, дали ему отступы сверху и низу по 50px и расположили по центру. Кто не знает если в блочного элемента есть ширина то для того чтобы расположить данный элемент строго по центру нам нужно всего лишь задать ему внешний отступ (margin) справа и слева со значением auto.

Следующим этапом нам нужно уже наконец-то сделать наше меню горизонтальным, делается это заданием элементам

  • float: left

    Menu li{ float:left; }

    Все теперь наше меню стало горизонтальным.

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

    Menu li а{ display:block;/* Делаем ссылку блочным элементом*/ padding:12px 20px;/* Задаем внутрение отступы */ text-decoration: none; /* убираем нижнее подчеркивание */ color:#fff;/* делаем цвет ссылки белым */ background:#444;/* делаем цвет фона темным */ font:14px Verdana, sans-serif;/* задаем размер и название шрифта */ }

    Здесь одно из самых важных правил — display:block;. Дело в том, что по умолчанию ссылки являются строчными элементами, а к строчным элементам отступы в разных браузерах применяются по разному, поэтому желательно ссылку сделать блочным элементом и только тогда применять к ней свойства связанные с внешним или внутренним отступами. Сейчас не хочется нагружать вас лишней информацией со временем на реальных примерах вы сами поймете зачем здесь делается такой акцент.

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

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

    Начнем с разделителей:

    Menu li{ border-left:1px solid #666; } .menu li:first-child{ border-left:none; }

    Что мы здесь сделали? Да все очень просто мы задали для наших пунктов (

  • ) границу слева размером в 1px и цветом #666;. Что касается селектора.menu li:first-child , то здесь мы используем специальный псевдо- класс, который позволяет выбрать первый дочерний элемент списка. Про псевдоклассы тоже рекомендую более подробно почитать в интернете, узнаете много полезного.

    Опять смотрим, что у нас получилось:

    По моему с разделителями намного лучше.

    Menu li a:hover{ background:#888; }

    Опять используя специальный псевдокласс, в это раз — hover, мы задаем цвет ссылке при наведении на неё курсора, смотрим:

    По моему крутяк 🙂 , надеюсь у вас вышло такое же меню как у меня.

    На этом буду заканчивать данный урок, очень надеюсь, что он вам был полезен и теперь вы знаете, как верстать простое горизонтальное меню на чистом html и css . Конечно, мы сверстали одноуровневое меню, немного сложней будет с двухуровневым мену (с вложенным списком), но это уже тема для другого урока, на этом у меня все. Заходите еще, буду рад!!!

    Задача

    Сделать горизонтальное меню, пункты которого имеют произвольный наклон (рис. 1).

    Рис. 1. Вид меню с наклонными пунктами

    Решение

    За трансформацию элемента отвечает стилевое свойство transform , в качестве его значения используется функция skewX , которая и задаёт нужный наклон. Угол наклона проще устанавливать в градусах, к примеру, 30deg - это 30º от вертикали. Трансформация действует и на все дочерние элементы, поэтому текст внутри элемента также будет наклонён, что не лучшим образом отражается на его читабельности и красоте. Поэтому к тексту важно ещё раз применить наклон, но уже в другую сторону, для этого достаточно просто поменять знак перед значением градусов.

    Браузеры поддерживают свойство transform преимущественно со своими префиксами, так что для универсальности в стилях следует повторить его несколько раз с одним и тем же значением, добавляя -moz- для Firefox, -webkit- для Safari и Chrome, -o- для Opera и -ms- для браузера Internet Explorer как показано в примере 1.

    Пример 1. Наклон пункта меню

    HTML5 CSS3 IE Cr Op Sa Fx

    Меню li { display: inline-block; /* Строчно-блочные элементы */ background: #CA181A; /* Цвет фона */ margin-right: 3px; /* Расстояние между пунктами меню */ -webkit-transform: skewX(-30deg); /* Для Safari и Chrome */ -moz-transform: skewX(-30deg); /* Для Firefox */ -o-transform: skewX(-30deg); /* Для Opera */ -ms-transform: skewX(-30deg); /* Для IE */ transform: skewX(-30deg); /* CSS3 */ } a { color: #fff; /* Цвет ссылок */ display: block; /* Блочный элемент */ padding: 5px 15px; /* Поля вокруг текста */ text-decoration: none; /* Убираем подчёркивание */ -webkit-transform: skewX(30deg); /* Для Safari и Chrome */ -moz-transform: skewX(30deg); /* Для Firefox */ -o-transform: skewX(30deg); /* Для Opera */ -ms-transform: skewX(30deg); /* Для IE */ transform: skewX(30deg); /* CSS3 */ } li:hover { background: #333; /* Цвет фона при наведении курсора мыши */ }

    • Джокер
    • Пазузу
    • Палпатин
    • Доктор Дум

    В данном примере горизонтальное меню создаётся с помощью маркированного списка. Чтобы список был именно горизонтальным, в стилях к элементу li добавляется свойство display со значением inline-block . Для наклона применяется свойство transform с функцией skewX и значением -30º. К ссылкам внутри списка также применяется это свойство, но уже с положительным значением 30º, это обеспечивает правильное, а не наклонное отображение букв.

    Браузеры Chrome, Safari и Firefox используют свойство transform для блочных или строчно-блочных элементов, поэтому для ссылок задано свойство display со значением block .