Как выровнять горизонтальное меню по центру? Простое кроссбраузерное горизонтальное меню.

Задача

Отобразить маркированый список горизонтально без маркеров.

Решение

Тег маркированного списка

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

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

  Так вот, тег

• также является блочным элементом.

  Чтобы тег

• не вёл себя как блочный элемент, можно при помощи CSS сделать его строчным.

  За то, как элемент будет отображён в документе отвечает CSS свойство display . Рассмотрим три его значения (хотя их больше):

  • block - элемент отображается как блочный.
  • inline - элемент отображается как строчный.
  • inline-block - блочно-строчный элемент, подробнее про этот тип элементов читайте ниже, мы будем его использовать.

  Сначала сделаем горизонтальный список превратив его пунткы в строчные элементы. В стиле CSS пропишем правило, в котором селектору li установлено свойство display со значением inline .

  Список горизонтально ul.menu-top > li { display: inline; /* Располагаем элементы по горизонтали */ list-style: none; /* Убираем маркеры списка */ padding: 5px; /* Поля вокруг текста */ border: solid 1px #000000; background-color: #fffff0; }

  • Пункт 1
  • Пункт 2
  • Пункт 3

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

  Рисунок 1. Работа примера №1.

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

  Например нам нужно чтобы элемент создаваемого нами меню имел ширину 150px и высоту 40px . Попробуем изменить стиль на следующий, то есть добавим два правила устанавливающих размер пункта меню:

  ul.menu-top > li { display: inline; /* Располагаем элементы по горизонтали */ list-style: none; /* Убираем маркеры списка */ padding: 5px; /* Поля вокруг текста */ border: solid 1px #000000; background-color: #fffff0; width: 150px; height: 40px; }

  Эти правки не приведут ни к каким изменениям. Чтобы элементы меню располагались горизонтально и можно было устанавливать их ширину и высоту им нужно установить тип inline-block . Изменим код нашего примера:

  Список горизонтально ul.menu-top > li { display: inline-block; /* Располагаем элементы по горизонтали */ list-style: none; /* Убираем маркеры списка */ padding: 5px; /* Поля вокруг текста */ border: solid 1px #000000; background-color: #fffff0; width: 150px; height: 40px; }

  • Пункт 1
  • Пункт 2
  • Пункт 3

  Этот код работает и изменения видны:

  
  Рисунок 2. Работа примера №2.

  Но могут быть разные варианты, например нам нужно отобразить в меню вложенные списки:

  Вложенный список. ul.menu > li { display: inline-block; /* Располагаем элементы по горизонтали */ list-style: none; /* Убираем маркеры списка */ padding: 5px; /* Поля вокруг текста */ background-color: #fffff0; border: 1px solid #000000; }

  • Правка
    • Отменить
    • Вырезать
    • Копировать
    • Вставить
  • Начертание
    • Жирное
    • Курсивное
    • Подчеркнутое
  • Размер
    • Маленький
    • Нормальный
    • Средний
    • Большой

  Вот результат работы этого кода:

  
  Рисунок 3. Работа примера №3.

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

  А собственно, почему так происходит?

  Наши блоки имеют свойство display со значением inline-block . Это значит что у них есть качества как блочных элементов (возможность указать ширину и высоту), так и строчных элементов. То что мы наблюдаем - это качество строчных элементов.

  Давайте рассмотрим строку с символами "А" разной величины:

  А А А А А А А

  Мы видим что все буквы по вертикали выравнены по нижней линии. Точнее по базовой линии, но сейчас не будем влазить в дебри. Так вот, с нашими блоками произошло то же самое.

  Для выравния текста по вертикали служит свойство vertical-align . В нашем примере №3 нужно использовать значение top , которое выравняет верхнюю границу элемента по верху самого высокого элемента строки.

  Пока применим его к строке с символами "А" разной величины:

  А А А А А А А

  Кажется, что буквы немного "скачут". Я установил CSS границу border самой высокой букве, чтобы было видно, что скачков на самом деле нет, есть пустое пространство между верхней границей (по которой происходит выравнивание) и верхней точкой символа "А".

  Свойство vertical-align нужно применять к каждому строчному элементу, оно не наследуется. Вы можете прочитать подробней про это свойство: vertical-align .

  После этого отступления продолжим размещать элементы списка горизонтально.

  Второй способ

  Разместить элементы списка горизонтально можно используя свойство float . Это свойство указывает по какой стороне выравнивается элемент, имеет две позиции: left и right .

  Вот пример с использованием этого кода:

  Список горизонтально ul.menu-top > li { float: left; /* разещаем список горизонтально */ list-style: none; /* Убираем маркеры списка */ padding: 5px; margin: 2px; border: 1px solid #000000; background-color: #fffff0; }

  • Пункт 1
  • Пункт 2
  • Пункт 3

  Вот результат работы кода:

  Рисунок 4. Работа примера.

  Вроде пример работает. Но в использовании этого свойства есть один нюанс. Сейчас мы его рассмотрим. Для примера возьмём код, в котором есть два горизонтальных списка с разным способом расположения элементов горизонтально: display и float :

  Список горизонтально ul{ border: 1px solid red; } ul.menu-1 > li, ul.menu-2 > li { list-style: none; /* Убираем маркеры списка */ padding: 5px; margin: 2px; border: 1px solid #000000; background-color: #fffff0; } /* разещаем списки горизонтально */ ul.menu-1 > li { float: left; } ul.menu-2 > li { display: inline-block; }

  • Пункт 1
  • Пункт 2
  • Пункт 3
  • Пункт 1
  • Пункт 2
  • Пункт 3

  Вот результат работы кода:

  Рисунок 5. Работа примера.

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

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

  При этом на первый взгляд всё работает. Но давайте поменяем местами наши списки. Поставим список с классом menu-1 в коде перед списком с классом menu-2 (сейчас он ниже).

  Вот что мы получим в результате:

  Рисунок 6. Работа примера.

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

  Как решить эту проблему?

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

  Вот изменённый пример с использованием свойства clear :

  Список горизонтально ul{ border: 1px solid red; } ul.menu-1 > li, ul.menu-2 > li { list-style: none; /* Убираем маркеры списка */ padding: 5px; margin: 2px; border: 1px solid #000000; background-color: #fffff0; } /* разещаем списки горизонтально */ ul.menu-1 > li { float: left; } ul.menu-2 > li { display: inline-block; } /* отменяем обтекание */ .menu-2{ clear: both; }

  • Пункт 1
  • Пункт 2
  • Пункт 3
  • Пункт 1
  • Пункт 2
  • Пункт 3

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

  • всё ещё располагаются вне контейнера
    .
    Рисунок 7. Работа примера.

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

    Это делается при помощи псевдоэлемента. Вот код:

    Список горизонтально ul{ border: 1px solid red; } ul.menu-1 > li, ul.menu-2 > li { list-style: none; /* Убираем маркеры списка */ padding: 5px; margin: 2px; border: 1px solid #000000; background-color: #fffff0; } /* разещаем списки горизонтально */ ul.menu-1 > li { float: left; } /* создаём псевдоэлемент для clear: both; */ ul.menu-1::after{ content: "."; /* обязательно контент */ display: block; /* обязательно блок */ clear: both; height: 0; /* чтобы не растягивал контейнер */ } ul.menu-2 > li { display: inline-block; }

    • Пункт 1
    • Пункт 2
    • Пункт 3
    • Пункт 1
    • Пункт 2
    • Пункт 3

    Теперь у нас 100% рабочий код.

    Рисунок 8. Работа примера.

    Этот приём со свойством float обычно используют при вёрстке сайтов для выравнивания столбцов, которые создаются тегами . Таким способом мы получаем нормальное построение столбцов с требуемым выравниванием по высоте. Когда мы создаём меню, то нам, в большенстве случаев, не важна высота блоков, она практически всегда одинакова. Поэтому использование правила {display : inline-block } в этих случаях вполне оправдано.

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

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

    Разработчики интернет-магазинов, блогов, обучающих сервисов и других ресурсов экспериментируют и создают все более новые и необычные карты. После прочтения статьи вы узнаете, на какие основные группы делятся все виды панелей навигации, сможете опробовать каждую из них, а также научиться писать код меню для сайта html. А теперь перейдем непосредственно к делу!

    Инструменты для создания панели навигации

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

    и
    • .

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

      создает маркированный список, а
      • — один элемент списка. Для наглядности давайте напишем код простого меню:

        Навигация

        Навигация сайта

        • Главная
        • Новости недели
        • Технологические достижения
        • Чат

        Однако с появлением платформы язык разметки пополнился дополнительными тегами. Именно поэтому меню современных веб-сайтов создается при помощи специального тега < menu> . В использовании этот элемент ничем не отличается от маркированных списков.

        Вместо единицы < ul> прописывается < menu> . Однако существенные различия появляются если судить со стороны работы . Так, второй пример ускоряет работу поисковых программ и роботов в . При анализе структуры сайта они сразу понимают, что данный кусок кода отвечает за карту сайта.

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

        Создадим-ка горизонтальную навигационную модель

        Такой вид навигации наиболее популярен. При горизонтальном оформлении панели все пункты меню расположены в шапке страницы или в «подвале» (иногда навигационные элементы дублируются, отображаясь одновременно и сверху, и снизу).

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

        Для трансформации мы используем свойство css под названием transform . Чтобы указать трансформацию, используется встроенная функция skewX , в которой угол наклона указывается в градусах.

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

        • -ms- (Internet Explorer)
        • -o- (Opera)
        • -webkit- (Chrome, Safari)
        • -moz- (Firefox)

        А теперь полученные знания применим к написанию примера.

        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 36 37 38 39 40

        Горизонтальная панель Главная О компании Продукция Контакты

        Горизонтальная панель li { display: inline-block; margin-right: 6px; background: #FF8C00; transform: skewX(-45deg); -webkit-transform: skewX(-45deg); -o-transform: skewX(-45deg); -ms-transform: skewX(-45deg); -moz-transform: skewX(-45deg); } a { display: block; padding: 18px 35px; color: #fff; transform: skewX(40deg); -webkit-transform: skewX(40deg); -o-transform: skewX(40deg); -ms-transform: skewX(40deg); -moz-transform: skewX(40deg); } li:hover { background: #1C1C1C; }

      • Главная
      • О компании
      • Продукция
      • Контакты
      А теперь вертикально. Я сказал вертикально!

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

      Для этого я воспользовался еще одним свойством css border-radius .

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

      Вертикальная панель li{ display: block; margin: 13px; padding: 13px; background: #FF8C00; width:20%; text-align:center; font-size:20px; border-radius:10px; } a { color: #fff; } li:hover { background: #1C1C1C; }

      • Главная
      • О компании
      • Продукция
      • Контакты

      Как вы уже заметили, главное изменение в этом коде – это отсутствие объявления display: inline-block , который собственно и отвечал за горизонтальное расположение пунктов навигации.

      Подпункты в меню: выпадающий список

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

      

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

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

      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 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65

      Выпадающий список body { padding-left: 30%; font-size: 18px; } .m-menu { margin: 0; padding: 9px; width:50%; text-align:center; border: 3px solid #000; background: #FF8C00; } .m-menu > li { position: relative; display: inline-block; } .m-menu a { display: block; margin-left: -2px; padding: 13px; color: #fff; border-left: 3px solid #fff; } .m-menu a:hover { background: #1C1C1C; } .m-menu .s-menu { left: 10px; position: absolute; display: none; width: 155px; margin: 0; padding: 0; list-style: none; background: #FF8C00; } .m-menu .s-menu a { border: 1px solid #000; } .m-menu > Главная Продукция Конфеты Торты Печенье Контакты

      Выпадающий список body { padding-left: 30%; font-size: 18px; } .m-menu { margin: 0; padding: 9px; width:50%; text-align:center; border: 3px solid #000; background: #FF8C00; } .m-menu > li { position: relative; display: inline-block; } .m-menu a { display: block; margin-left: -2px; padding: 13px; color: #fff; border-left: 3px solid #fff; } .m-menu a:hover { background: #1C1C1C; } .m-menu .s-menu { left: 10px; position: absolute; display: none; width: 155px; margin: 0; padding: 0; list-style: none; background: #FF8C00; } .m-menu .s-menu a { border: 1px solid #000; } .m-menu > li:hover .s-menu { display: block; }

      • Главная
      • Продукция
        • Конфеты
        • Торты
        • Печенье
      • Контакты

      В данном примере я разделил единицы меню на два класса:

      • m-menu
      • s-menu

      Первый класс отвечает за основное меню, а s-menu – за подменю.

      В коде можно встретить такой прием, как .m-menu > li:hover или .m-menu > li.

      Так, при помощи:hover указывается, как будет вести себя элемент при наведении на него курсора.

      При этом знак «>» видоизменяет селектор так, чтобы блочно-строчными были только объекты, относящиеся к верхнему уровню.

      Изначально подменю было задано display: none , что оповещает обработчик скрывать данный объект. После наведения на элемент навигации с указанием hover , значение свойства display меняется на block и поэтому открывается выпадающий список.

      Как видите, реализация такого приема очень простая.

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

      С уважением, Роман Чуешов

      Прочитано: 1010 раз

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

      На С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 решений. Если хотите и дальше их читать, то пройдите снизу опрос.
      Всем приятной работы.

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

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

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

      Как вы наверняка догадываетесь первым делом нам нужно создать 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 .