Как сделать горизонтальное меню в html css

Как сделать меню в html

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

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

  • Как сделать меню

Как сделать меню на html

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

К примеру, для создания меню мы используем список с классом class="menu" (название класса любое, только латинские буквы), и код html будет выглядеть так:

Обязательные параметры и значения CSS

  • margin: 0; — убираем все отступы списка, иначе браузер подставит значения по умолчанию 20px;
  • list-style-type: none; — убираем маркеры у пунктов меню, иначе браузер добавит точки или цифры.

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

И выглядеть это будет так:

Горизонтальное меню у нас готово, осталось придать ему красивый внешний вид.

Давайте каждому пункту в горизонтальном меню придадим рамку border и сделаем у неё скошенные края, заполним определённым цветом background-color ( добавим фон для пункта меню ), и изменим вид ссылки.

Отображаться горизонтальное меню уже будет таким образом:

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

И для наглядности сделал пункты меню по центру, применив свойство text-align: center; , которое можно удалить (выровняется автоматически по левому краю), либо задать значение text-align: right; и горизонтальное меню отобразится по правому краю.

Кстати вы можете так же воспользоваться готовое меню на css и jQuery, которые вы можете там воочию посмотреть и бесплатно скачать.

Как сделать вертикальное меню на CSS

Вертикальное меню на CSS делается и оформляется на странице практически так же как и горизонтальное, только здесь изменяется в .menu-2 li <. параметр со значением display: block; (указывает на блочный элемент), что придаёт ему вертикальное отображение пунктов меню.

И ещё одно дополнение к вертикальному меню: так как оно в большинстве случаев находится в боковой колонке сайта, которое имеет фиксированную ширину, то и мы вынуждены задать ширину width: 100%; нашему вертикальному меню, чтобы оно полностью занимало всю ширину колонки.

Давайте рассмотрим вертикальное меню CSS на примере:

Вот так вертикальное меню отобразится на странице:

Как сделать выпадающее меню на CSS

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

Обязательно запомните!
Для того, чтобы выпадающее меню строго появлялось напротив ведущей ссылки, необходимо в CSS для тега li , где находится эта ссылка, прописать position: relative; , а для выпадающего меню position: absolute;

Давайте напишем html код для выпадающего меню на CSS.

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

Точно таким же образом прописывается выпадающее меню и при горизонтальном расположение навигации. Единственное, это не забывайте менять значения у параметров top и left (отступ сверху и слева).

Посмотрите!
Как сделав всего 3 изменения в CSS, наше вертикальное расположение навигации с выпадающим меню, превратиться в горизонтальное с выпадающим меню.

Горизонтальное выпадающее меню | CSS

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

17 комментариев:

Татьяна Алексеевна Кулешова А как и куда вставить этот код? NMitra На сайт. Если у вас блог на Blogger, то советую обратиться к статье http://shpargalkablog.ru/2011/10/gorizontalnoye-vypadayushcheye-menyu.html @web_xaser NMitra, в Internet Explorer же есть режим эмуляции для проверки вёрстки вплоть до IE5. NMitra А у меня что-то ничего нет http://1.bp.blogspot.com/-n5EmO2MOXos/U0Pq0wf6CaI/AAAAAAAAETk/9LiRtSiI_SI/s1600/ie-f12.png (( @web_xaser Ого, даже так. В 11.0.9600.16428 всё есть и работает. NMitra Предполагаю, что версия тут ни при чём 11.0.9600.16521. Мне, по-видимому, нужно что-то загрузить (( Как там выглядит то? @web_xaser В IE8 и выше всё нормально. В 7 уже поехало (http://lh6.googleusercontent.com/-O40piYL4xQI/U0aeiY6i8mI/AAAAAAAAINQ/Ot7jfmpg78o/s992/111.jpg).
Используйте browserstack.com/screenshots тогда. NMitra А нижнее с таблицей? Я не пойму почему z-index игнорируется. @web_xaser Там уже лучше (ничего не съезжает), но если навести курсор на пункт подменю, оно тут же убирается (http://lh4.googleusercontent.com/-JIV7dnkY8qU/U0bFuQwQ5TI/AAAAAAAAINk/sh3s0KWfYb4/s845/1.gif). NMitra Почитала про IE6-7. :hover работает только для тега a. Нужно обязательно применять JS. Сейчас техника быстро устаревает, особенно телефоны и ноутбуки. Сомневаюсь что кто-то кроме вебмастеров будет упорно загружать 6-7 версию, которые когда-то стояли на устройствах по умолчанию. Поэтому забудем про эти прекрасные версии браузеров. @web_xaser >> Поэтому забудем про эти прекрасные версии браузеров.
Полностью солидарен. Анонимный выпадающее меню супер! для отображения алфавита прекрасно подходит Анонимный почему то при наведении на выскочившее подменю оно выделяется не полностью цветом, а лишь его левый край. NMitra Пример в студию, лучше на http://jsfiddle.net/ Анонимный jkgkjg Анонимный Почему вы не закрываете тег li? NMitra См. спецификация http://www.w3.org/TR/2014/REC-html5-20141028/grouping-content.html#the-li-element

"An li element&#39;s end tag may be omitted if the li element is immediately followed by another li element or if there is no more content in the parent element."

Другими словами закрывающий тег необязателен, если после li идёт другой li или закрывающий /ol или /ul

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

На этой странице находятся примеры для создания горизонтальных меню сайта с помощью HTML и CSS. Кроме того, что ссылки в этих меню располагаются по горизонтали, их объединяет еще одна особенность&#160;— текст внутри ссылок&#160;— это действительно текст, заключенный в тег <A>, а не изображения, где текст является частью картинки.

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

И еще один момент. Во всех примерах вам будет попадаться пункт меню с class= "current" (текущий), который не содержит ссылку. Он является демонстрационным и обозначает то, как должен выглядеть пункт меню, который соответствует той странице, на которой находится пользователь. Дело в том, что в интернете хорошим тоном считается отсутствие ссылок на странице, которые ссылаются на нее саму и, кстати, об этом же говорят представители поисковиков (Яндекс, Google и т.д.).

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

Самое простое горизонтальное меню без каких-либо изысков.

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

Пример HTML и CSS: простое горизонтальное меню

Описание примера

  1. Создаем маркированный список (тег <UL>), в который помещаем HTML-ссылки (тег <A>). Убираем у этого списка и у его пунктов маркеры (CSS list-style), а также внешние поля (CSS margin) и внутренние отступы (CSS padding).
  2. Чтобы теги <LI> выстроились по горизонтали&#160;— делаем их встроенными (inline) с помощью свойства CSS display:inline.
  3. Так как элементы списка у нас теперь уровня строки, то мы легко их можем выравнивать по левому или правому краю блока, используя CSS text-align.

Расположить элементы меню в одну строку и выровнять их можно и другим способом&#160;— заменив последние два пункта описания на свойство CSS float со значением left или right . Но здесь надо понимать, что при значении left элементы примут правильный порядок, а вот при right (как надо в нашем примере) они примут обратный порядок и придется менять местами ссылки.

Блочное горизонтальное меню (float)

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

Блочное горизонтальное меню (float)

Пример HTML и CSS: блочное горизонтальное меню с float

Описание примера

  1. С помощью свойства CSS float:left выстраиваем элементы списка по горизонтали и добавляем каждому из них правое поле (CSS margin-right), чтобы они не прилегали друг к другу.
  2. Делаем из ссылок встроенные блоки (CSS display:inline-block), чтобы при необходимости у них можно было изменять размеры. В конце задаем всем элементам горизонтального меню необходимое оформление.

Так как пункты меню у нас всплывают влево, то HTML-элементы, которые будут находиться ниже навигации, смогут также ее обтечь. Чтобы этого не произошло, можно сделать прерывание обтекания с помощью свойства CSS clear или установить у блока с class= "menu" такую высоту, которая гарантированно будет больше высоты ссылок.

Блочное горизонтальное меню (display)

Сделаем еще одно блочное меню, но немного другим способом.

Блочное горизонтальное меню (display)

Пример HTML и CSS: блочное горизонтальное меню с display

Описание примера

  1. Для выстраивания пунктов меню в горизонтальную строку снова применяем display:inline. Это впоследствии позволяет нам выровнять элементы списка по центру.
  2. Ну а ссылки и тег с class= "current" преобразуем во встроенные блоки, чтобы у них можно было явно указывать и изменять ширину (CSS width) и высоту (CSS height), если потребуется.
  3. Задаем всем элементам необходимое оформление в виде рамок, цвета текста, фона и т.д.

И все бы хорошо, но IE6 и IE7 нам как всегда доставляют проблемы, так как не понимают значение inline-block для тегов <LI>. Поэтому будем их лечить с помощью условных комментариев и expression.

  1. Да, старички IE не признают inline-block для блочных и подобных им элементов, но зато они прекрасно понимают это значение для встроенных тегов, к которым, например, относится тег <SPAN>. Поэтому интегрируем внутрь элемента с <li&#160; class= "current" > один такой тег, которому и задаем нужные стили. Но перед этим обнуляем все стили у самого "current" , чтобы не было дублирования. Обнуление делаем до значений, которые используются по умолчанию либо просто нейтрализуем их (например, делаем нулевой размер рамки). То есть получается, что мы от "current" перенесли все стили в <SPAN> .
  2. Немного о том, как работает этот expression. Он интегрирует внутрь заданного HTML-элемента любой код или текст, при этом часть, которая указывается после первого innerHTML , добавляется сразу после открывающего тега, а часть после второго innerHTML &#160;— в самый конец элемента. Вот и получается, что в нашем случае, мы добавили тег <SPAN> таким образом, что внутри него оказался текст «Ссылка 2».

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *