Панель навигации важный элемент сайта. Он обеспечиват переходы между страницами или внешними ресурсами.
По сути панель навигации - это набор ссылок, не редко в виде ненумерованного списка, и бывают самыми различными: вертикальными ,горизонтальными, одноуровневыми, многоуровневыми, но всегда в центре каждой навигации находится элемент <a>.
Популярный метод, это сделать ссылку блочным элементом.
То есть после установки свойства display: block , мы получаем вертикальное расположение ссылк. И остаётся только определить у блока ссылки ширину, отступы и т.д.
ul.navG a {
display: block;
}
Для создания горизонтального меню есть два метода. Первый заключается в применении свойства float и создании из ссылок плавающих элементов, которые обтекают друг друга с слева.
.nav li {
float: left;
}
ul.nav a {
display: block;
}
И второй способ состоит в создании строки ссылок с помощью установки свойства display: inline-block.
.navi li {
display: inline;
}
ul.navi a {
display: inline-block;
}
Для создания горизонтальной панели навигации нам надо сделать каждый элемент li строчным, то есть установить для него display: inline. После этого для элемента ссылки, которая располагается в элементе li, мы можем установить display: inline-block:
Есть ещё один популярный метод позиционирования. Это фиксированная панель навигации, которая не изменяет своего положения вне зависимости от прокрутки.
Для фиксированного позиционирования у элементов нужно установить значение fixed для свойства position. После этого с помощью стандартных свойств left, right, top и bottom можно определить конкретную позицию фиксированного элемента.
.toolbar{
position: fixed;
top: 30px;
left: 10;
right: 10;
background-color: #222;
border-bottom: 1px solid #ccc;
z-index:100;
}
Например чтобы растянуть фиксированный блок от левой до правой границы страницы, устанавливаются три свойства:
top: 0;
left: 0;
right: 0;
блок с фиксированным и абсолютным позиционированием не учавствуют в стандартном потоке html. Поэтому по умолчанию нижеидущий блок контента и панель будут размещаться в одной точке. По этому необходимо для нижнего блока установить нужный отступ: margin-top: 50px; Фактически отступ идет от границ области просмотра браузера, поэтому высота отступа должна быть больше высоты фиксированного элемента. Данный тип панели применяется на этой странице. По этому будет крайне полезно изучить её код через меню разработчика.
Не забудьте установить своймтво z-index: с высшим значением, дабы избежать наездов эдементов страницы на панель при прокрутке.