Горизонтальное меню css. Сдвигаем положение всех элементов меню

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

Итак начнем. Создадим список с названиями нашего меню. В качестве названий пунктов пусть будут такие: "Главная", "Новости", "Продукция", "Услуги", "Партнеры", "Контакты". Создаем новый файл под названием menu.html , например, с помощью программы Dreamweawer или используя обычный блокнот. В нем между тегами body размещаем наше меню. Это обычный маркированный список ul с элементами li . Разумеется, каждый пункт меню делаем ссылкой, где вместо URL вставляем решетку #. Используя программу Photoshop создадим изображение размером 3х30 px, с градиентной заливкой как показано на рисунке ниже. Файл сохраним в формате GIF. Назовем его bg.gif . Данный рисунок будет выступать в качестве фонового изображения нашего меню.

Вот содержимое файла menu.html :

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

Главная
Новости
Продукция
Услуги
Партнеры
Контакты

Теперь отдельно создадим файл стилей под названием main.css . Его листинг приведен полностью ниже.

Ul { margin:0; /*обнуляем отступы*/ padding:0; /*обнуляем отступы*/ float:left; /*выравниваем список по левому краю*/ width:auto;/*задаем ширину авто исходя из типа и содержимого списка*/ background-image: url(bg.gif); /*устанавливаем фоновое изображение*/ background-repeat:repeat-x; /*повторяем наше изображение по горизонтали*/ list-style:none; /*удаляем маркеры списка*/ background-color:#4778c3; /*задаем цвет фона под изображение*/ font-size:13px; /*задаем размер шрифта*/ font-family:Arial, Helvetica, sans-serif; /*устанавливаем шрифт*/ } ul li { float:left; /*выравниваем элементы списка по левому краю*/ } ul a { display:block; /*представляем ссылки меню как блочные элементы*/ width:100px; /*задаем размер блока*/ height:30px; /*и высоту блока*/ text-align:center; /*надпись по центру*/ line-height: 2.1em; /*межстрочный интервал*/ text-decoration:none; /*убираем подчеркивание у ссылок*/ color:#fff; /*цвет текста ссылок - белый*/ border-right:#fff solid 1px; /*бордюр правой стороны блока (белая линия в 1px)*/ } ul a:hover { color:#ccc; /*ссылка меняет цвет при наведении указателя*/ }

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

Подведем итог. В результате мы получили полностью кросбраузерное горизонтальное меню, которое выглядит одинаково не только во всех современных браузерах, но и в таких раритетах, как IE 5.5 и IE 6.0. Все элементы меню представлены как блочные элементы и имеют одинаковые размеры по ширине 100 px и высоте 30px. В качестве разделителя пунктов меню используется оформление блокового элемента с помощью правого бордера белого цвета толщиной в 1px. Это практически самый простой способ реализации горизонтального меню. Разумеется, при желании его можно модифицировать, сделать более красивым и функциональным используя фантазию, свойства css и дополнительные графические элементы. Ну а наше горизонтальное меню выглядит примерно так:

Плюсы этого решения:
Простота выполнения
Простой код
Нет никаких таблиц и javascript
Кроссбраузерность: меню во всех браузерах выглядит одинаково
Используются всего один рисунок
Минимум кода на странице menu.html
Минимум кода для реализации стилей в main.css

Файлы, используемые в данном примере, можно скачать в архиве

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

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

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

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

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

Разработчики интернет-магазинов, блогов, обучающих сервисов и других ресурсов экспериментируют и создают все более новые и необычные карты. После прочтения статьи вы узнаете, на какие основные группы делятся все виды панелей навигации, сможете опробовать каждую из них, а также научиться писать код меню для сайта 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 >

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

m-menu
s-menu

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

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

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

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

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

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

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

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

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