Ростелеком 

Написание меню css html. Горизонтальное меню на CSS

Здравствуйте уважаемые посетители моего блога! Сегодня речь пойдет о главном горизонтальном меню сайта, а именно как выровнять горизонтальное меню по центру. Да, на первый взгляд, что тут сложного — задал нужные отступы, подогнал и все. Но тут есть свои нюансы. Сайт, в первую очередь, это динамика, т.е. на сайте постоянно появляется новый контент, появляются какие то новые блоки с информацией и т.п. Так могут и появляться/исчезать некоторые пункты в главном меню. С учетом этого всего нужно добиться того, что при добавлении или удалении пункта меню, меню у нас остается все также по центру. Конечно, не всегда обязательно его центрировать, все зависит от дизайна. Но если все же у вас подразумевается ставить горизонтальное меню по центру, то применив несколько несложных трюков в css мы можем добиться нужного результата.

Структура статьи

Горизонтальное меню по центру без выпадающих пунктов

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

Html-код

Css-код

*, *::after, *::before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; } #mainmenu { background: #444; position: relative; overflow: hidden; height: 40px; margin: 30px 0 } #mainmenu ul { list-style: none; margin: 0; padding: 0; position: relative; left: 50%; float: left; font: 14px Arial, Helvetica, sans-serif; height: 40px } #mainmenu ul li { position: relative; left: -50%; float: left; margin: 0 10px; height: 40px } #mainmenu ul li a { color: #fff; display: block; text-decoration: none; padding: 0 15px; line-height: 40px; } #mainmenu ul li a:hover { background-color: #666; }

Разберем все по порядку, здесь все просто. Мы создаем контейнер «mainmenu», куда помещаем наше меню в виде неупорядоченного списка.

Теперь дело идет за стилями css. Сначала мы сбрасываем на ноль все поля и отступы для всех браузеров. Далее при помощи свойства «float:left» мы смещаем наш неупорядоченный список влево и далее относительным позиционированием смещаем его на 50% вправо. Ширина списка «ul» будет равна сумме длин всех пунктов «li», которые находятся внутри него. Таким образом, если мы мысленно поделим окно браузера пополам, то наше меню уйдет вправо от линии разделения. Чтобы выровнять мы применим к пунктам «li» также относительное позиционирование и сместим их влево на 50%, указав свойство «left:-50%». Да и еще, чуть не забыл, нашему контейнеру «mainmenu» нужно обязательно указать свойство «overflow:hidden» , иначе мы получим горизонтальную полосу прокрутки.

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

Горизонтальное меню по центру с выпадающими пунктами

Теперь разберем с выпадающими подпунктами. Здесь ситуация несколько иначе и несколько сложнее, т.к. в первом случае у нас подпункты выпадать не будут, потому что мы указали блоку «mainmenu» свойство — «overflow:hidden». Это говорит, что элементы за пределами данного блока показываться не будут. Но выход есть.

Итак, я изменил предыдущий код и удалил из него свойство «overflow:hidden».

Html-код

CSS-код

*, *::after, *::before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; } #mainmenu { position: relative; background: #444444; height: 40px; margin: 30px 0; padding: 0; float: left; width: 100%; z-index: 10 } #mainmenu ul { clear: left; position: relative; right: 50%; height: 40px; float: right; text-align: center; font: 15px Arial, Helvetica, sans-serif; list-style: none; padding: 0; margin: 0 } /** Основные пункты **/ #mainmenu > ul > li { position: relative; left: 50%; float: left; height: 40px; padding: 0; margin: 0 } #mainmenu > ul > li > a { border-left: 1px solid #666; display: block; color: #fff; text-decoration: none; padding: 0 20px; line-height: 40px; } #mainmenu > ul > li:first-child > a { border: none } #mainmenu > ul > li:hover > a, #mainmenu > ul > li.hover > a, #mainmenu > ul > li.active > a { color: #fff } #mainmenu > ul > li:hover, #mainmenu > ul > li.hover, #mainmenu > ul > li.active { background: #666 } /* Выпадающие подпункты */ #mainmenu ul li ul { position: absolute; left: 0; top: 40px; display: none; list-style: none; visibility: hidden; padding: 0; margin: 0; width: 200px } #mainmenu > ul > li ul li { background-color: #666; position: relative; left: 0; display: list-item; float: none; height: auto; margin: 0; text-align: left; } #mainmenu ul li ul li a { border-bottom: 1px solid #999; display: block; color: #fff; padding: 10px 15px; text-decoration: none; } #mainmenu ul li ul li.parent a { position: relative; } #mainmenu ul li ul > li.parent > a::before { border-top: 1px solid #fff; border-right: 1px solid #fff; content: ""; display: block; position: absolute; right: 15px; top: 50%; transform: translateY(-50%) rotate(45deg); height: 6px; width: 6px; } #mainmenu ul li ul li:hover, #mainmenu ul li ul li.hover { background-color: #444 } #mainmenu ul li:hover ul, #mainmenu ul li.hover ul { display: block } /* Выпадающие пункты второго уровня */ #mainmenu ul li:hover > ul { opacity: 1; visibility: visible; margin: 0; } #mainmenu ul li ul li ul { top: 0; left: 200px; margin: 0 0 0 20px; width: 180px }

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

Выравнивание меню по центру с помощью flexbox

Выровнять меню по центру можно также, применив новое правило в css - flexbox. Вообще трюкам с flexbox я хочу посвятить отдельный пост, оно того стоит, очень упрощает жизнь верстальщику. В общем, здесь не будем углубляться… Я приведу здесь только код css для меню с выпадающими пунктами. HTML код тот же, что и выше.

Код CSS

*, *::after, *::before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; } #mainmenu { position: relative; background: #444444; height: 40px; margin: 30px 0; padding: 0; width: 100%; z-index: 10 } #mainmenu ul { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; height: 40px; text-align: center; font: 15px Arial, Helvetica, sans-serif; list-style: none; padding: 0; margin: 0; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } /** Основные пункты **/ #mainmenu > ul > li { position: relative; height: 40px; padding: 0; margin: 0 } #mainmenu > ul > li > a { border-left: 1px solid #666; display: block; color: #fff; text-decoration: none; padding: 0 20px; line-height: 40px; } #mainmenu > ul > li:first-child > a { border: none } #mainmenu > ul > li:hover > a, #mainmenu > ul > li.hover > a, #mainmenu > ul > li.active > a { color: #fff } #mainmenu > ul > li:hover, #mainmenu > ul > li.hover, #mainmenu > ul > li.active { background: #666 } /* Выпадающие подпункты */ #mainmenu ul li ul { position: absolute; left: 0; top: 40px; display: none; list-style: none; visibility: hidden; padding: 0; margin: 0; width: 200px } #mainmenu > ul > li ul li { background-color: #666; position: relative; left: 0; display: list-item; float: none; height: auto; margin: 0; text-align: left; } #mainmenu ul li ul li a { border-bottom: 1px solid #999; display: block; color: #fff; padding: 10px 15px; text-decoration: none; } #mainmenu ul li ul li.parent a { position: relative; } #mainmenu ul li ul > li.parent > a::before { border-top: 1px solid #fff; border-right: 1px solid #fff; content: ""; display: block; position: absolute; right: 15px; top: 50%; transform: translateY(-50%) rotate(45deg); height: 6px; width: 6px; } #mainmenu ul li ul li:hover, #mainmenu ul li ul li.hover { background-color: #444 } #mainmenu ul li:hover ul, #mainmenu ul li.hover ul { display: block } /* Выпадающие пункты второго уровня */ #mainmenu ul li:hover > ul { opacity: 1; visibility: visible; margin: 0; } #mainmenu ul li ul li ul { top: 0; left: 200px; margin: 0 0 0 20px; width: 180px }

Как видим, изменились правила только для родительского списка - #mainmenu ul. Единственное, пришлось добавить префиксы для предыдущих версий браузеров. Отмечу, что правило flexbox корректно понимают только современные браузеры. Если вы ориентируетесь на более старые браузеры, то вариант с flex’ом придется отложить. Какие именно браузеры хорошо понимают flexbox можете посмотреть

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

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

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

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

Есть вопросы?

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам:

Отправить