Независимо от того, является ли меню навигации вашего веб-сайта горизонтальной строкой вверху или вертикальной строкой вниз, это просто список. При проектировании веб-навигация, меню навигации - это группа ссылок. Когда вы программируете свою навигацию с помощью XHTML + CSS, вы можете создать меню, которое будет небольшим для загрузки (XHTML) и простым в настройке (CSS).
Начиная
Чтобы создать список для навигации, вам нужно использовать список. Это может быть стандартный неупорядоченный список, который был идентифицирован как навигация. Например:
- Дом
- Продукты
- Услуги
- Свяжитесь с нами
При просмотре HTML ссылка на главную имеет идентификатор.
Вы здесь
Это позволяет вам создать меню, которое определяет текущее местоположение для ваших читателей. Даже если вы не планируете использовать этот тип визуальной подсказки на своем сайте прямо сейчас, вы можете включить эту информацию. Если вы решите добавить реплику позже, у вас будет меньше кода для подготовки вашего сайта.
Без всяких CSS стили, это меню XHTML выглядит как стандартный неупорядоченный список. Есть маркеры, а элементы списка имеют небольшой отступ. Когда используешь ссылки-заполнители, большинство браузеров не отображают ссылки как интерактивные (подчеркнутые и синие). Когда вы вставляете HTML-код на веб-страницу, ваша навигация выглядит так:
- Дом
- Продукты
- Услуги
- Свяжитесь с нами
Это не очень похоже на меню. Однако, добавив в список несколько стилей CSS, вы можете создать меню, которым вы будете гордиться.
Если вам нужно больше примеров вертикальных меню, поищите в Интернете следующее:
- Стильное вертикальное меню
- Базовый шаблон вертикального меню
- Стильное вертикальное меню с надписью You Are Here
- Базовый шаблон вертикального меню с You Are Here
Вертикальное меню навигации
Вертикальное меню навигации легко написать, потому что оно отображается так же, как и обычный список: вверх и вниз. Элементы списка отображаются вертикально вниз по странице.
При оформлении меню начните снаружи и работайте внутри. Во-первых, стилизуйте навигацию:
ul # навигация
Затем перейдите к элементам и ссылкам. Сначала определите ширину меню. Это гарантирует, что, если пункты меню длинные, они не будут выталкивать остальную часть макета и не вызовут горизонтальную прокрутку.
ul # navigation {width: 12em; }
После того, как вы установили ширину, работайте с элементами списка. Это позволяет вам установить такие вещи, как цвет фона, границы, выравнивание текста и поля.
ul # navigation li {
стиль списка: нет;
цвет фона: # 039;
граница-верх: сплошной 1px # 039;
выравнивание текста: слева;
маржа: 0;
}
После того, как вы установили основы для элементов списка, поработайте над тем, как выглядит меню в области ссылок. Сначала задайте стиль навигации:
UL # навигация LI A
Затем стилизуйте следующее:
Ссылка
A: посетил
A: парение
A: активный
Для ссылок сделайте ссылки блочным элементом (а не встроенным по умолчанию). Это заставляет ссылки занимать все пространство LI и действовать как абзац, что упрощает стилизацию ссылок как кнопок меню. Затем удалите следующее:
подчеркивание, оформление текста: нет; в виде
Это делает кнопки больше похожими на кнопки. Ваш дизайн может отличаться.
ul # navigation li a {
дисплей: блок;
текстовое оформление: нет;
набивка: .25em;
нижняя граница: сплошной 1px # 39f;
граница справа: сплошной 1px # 39f;
}
С дисплей: блок; Если установить ссылки, можно щелкнуть не только по буквам, но и по всему окну пункта меню. Это также хорошо для удобства использования. Установите цвета ссылок (ссылка, посещенная, наведенная и активная), если вы хотите, чтобы ссылки отличались от синего, красного и фиолетового по умолчанию.
a: ссылка, a: посетил {color: #fff; }
a: hover, a: active {цвет: # 000; }
Вы также можете уделить немного внимания состоянию наведения, изменив цвет фона.
а: наведите указатель мыши {цвет фона: #fff; }
Горизонтальное меню навигации
Создание горизонтальных меню навигации немного сложнее, чем меню вертикальной навигации, потому что вы должны компенсировать тот факт, что списки HTML предпочитают отображаться вертикально. Как и в случае с горизонтальным меню, создайте список меню навигации:
- Дом
- Продукты
- Услуги
- Свяжитесь с нами
Чтобы создать горизонтальное меню, действуйте так же, как и с вертикальным меню. Начни с внешнего и работай внутри. Чтобы начать навигацию в левом углу, установите для него значение 0 для левого поля и отступа и переместите его влево.
Возьмите за привычку устанавливать ширину так, чтобы ваше меню не занимало больше или меньше места, чем вы предполагаете. Для горизонтальных меню это обычно полная ширина дизайна. Вы также можете добавить цвет фона в список, чтобы его было легче читать.
ul # navigation {
плыть налево;
маржа: 0;
отступ: 0;
ширина: 100%;
цвет фона: # 039;
}
Секрет горизонтального меню навигации кроется в элементах списка. Элементы списка обычно являются блочными, что означает, что перед и после каждого из них помещается новая строка. Переключая отображение с блочного на встроенный, вы заставляете элементы списка выстраиваться горизонтально рядом друг с другом.
ul # навигация li {display: inline; }
Обращайтесь со ссылками точно так же, как с вертикальным меню навигации, с такими же цветами и оформлением текста. Добавьте верхнюю границу, чтобы очертить кнопки, когда пользователь наводит курсор на кнопку. Затем удалите дисплей: блок; поскольку это возвращает символы новой строки и уничтожает горизонтальное меню.
Вы здесь Информация о местоположении
Другой аспект HTML - это идентификатор:
Вы здесь
Если вы хотите изменить свое меню, чтобы указать текущее местоположение ваших пользователей, используйте этот идентификатор, чтобы определить другой цвет фона или другой стиль. Переместите этот идентификатор атрибута в соответствующий пункт меню на других страницах, чтобы текущая страница всегда выделялась.
Если вы разместите эти стили вместе на своей странице, вы можете создать горизонтальную или вертикальную строку меню, которая будет работать с вашим сайтом, быстро загружается и легко обновляется. Использование XHTML + CSS превращает ваши списки в мощный инструмент для дизайна.
Если вам нужно больше примеров горизонтальных меню, поищите в Интернете следующее:
- Стильное горизонтальное меню
- Базовый шаблон горизонтального меню
- Стильное горизонтальное меню с надписью You Are Here
- Базовый шаблон горизонтального меню с You Are Here