Доброго времени суток всем, кто сейчас читает данную публикацию. Сегодня я хочу рассказать вам об одном из инструментов сайтостроения, без которого ни один веб-ресурс не может обойтись. Это меню сайта, или как еще говорят карта сайта. На сегодняшний день существует безграничное множество видов и подвидов меню.
Разработчики интернет-магазинов, блогов, обучающих сервисов и других ресурсов экспериментируют и создают все более новые и необычные карты. После прочтения статьи вы узнаете, на какие основные группы делятся все виды панелей навигации, сможете опробовать каждую из них, а также научиться писать код меню для сайта html. А теперь перейдем непосредственно к делу!
Инструменты для создания панели навигации
В языке разметки существует несколько способов создания меню. Основная их концепция заключается в использовании ненумерованного списка. Таким образом, в привычном для нас html 4 разработчики прописывают на станице теги <ul> и <li>.
Как оговаривалось в предыдущих публикациях, парный элемент <ul> создает маркированный список, а <li> — один элемент списка. Для наглядности давайте напишем код простого меню:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Навигация</title> </head> <body> <p><strong>Навигация сайта</strong></p> <ul> <li>Главная</li> <li>Новости недели</li> <li>Технологические достижения</li> <li>Чат</li> </ul> </body> </html> |
Однако с появлением платформы html5 язык разметки пополнился дополнительными тегами. Именно поэтому меню современных веб-сайтов создается при помощи специального тега <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 | <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Горизонтальная панель</title>
<style>
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;
}
</style>
</head>
<body>
<menu>
<li>Главная</li>
<li>О компании</li>
<li><a href="3.html">Продукция</a></li>
<li><a href="4.html">Контакты</a></li>
</menu>
</body>
</html> |
А теперь вертикально. Я сказал вертикально!
Для второй программы используем за основу предыдущий код. Я захотел, чтобы пункты моего вертикального меню были не скошены, а с округленными углами.
Для этого я воспользовался еще одним свойством css border-radius.
В предыдущих статьях я уже работал с данным параметром, так что сложностей с пониманием его функционирования, думаю, не возникнет.
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 | <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Вертикальная панель</title>
<style>
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;
}
</style>
</head>
<body>
<menu>
<li>Главная</li>
<li>О компании</li>
<li><a href="3.html">Продукция</a></li>
<li><a href="4.html">Контакты</a></li>
</menu>
</body>
</html> |
Как вы уже заметили, главное изменение в этом коде – это отсутствие объявления 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 | <!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Выпадающий список</title>
<style>
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;
}
</style>
</head>
<body>
<ul class="m-menu">
<li><a href="#index">Главная</a></li>
<li>
<a href="#product">Продукция</a>
<ul class="s-menu">
<li><a href="#1">Конфеты</a></li>
<li><a href="#2">Торты</a></li>
<li><a href="#3">Печенье</a></li>
</ul>
</li>
<li><a href="#adress">Контакты</a></li>
</ul>
</body>
</html> |
В данном примере я разделил единицы меню на два класса:
- m-menu
- s-menu
Первый класс отвечает за основное меню, а s-menu – за подменю.
В коде можно встретить такой прием, как .m-menu > li:hover или .m-menu > li.
Так, при помощи :hover указывается, как будет вести себя элемент при наведении на него курсора.
При этом знак «>» видоизменяет селектор так, чтобы блочно-строчными были только объекты, относящиеся к верхнему уровню.
Изначально подменю было задано display: none, что оповещает обработчик скрывать данный объект. После наведения на элемент навигации с указанием hover, значение свойства display меняется на block и поэтому открывается выпадающий список.
Как видите, реализация такого приема очень простая.
Теперь вы освоили основные виды навигационных панелей и можете самостоятельно их видоизменять, дополнять и модернизировать. Если вам понравилась моя статья, то подписывайтесь на обновления блога и делитесь источником знаний с друзьями и коллегами. Пока-пока!
С уважением, Роман Чуешов
Здравствуйте. Скажите пожалуйста, на чём можно моделировать сайт применяя коды html, то есть, допустим в одном окне вносить код html, а в другом окне видеть результат, как он будет отображен на сайте. Может, есть какая нибудь программа?
программа Brackets, она работает в паре с Chrome, ставите два окна рядом и моделируете!