Использование ссылок для создания меню вертикальной навигации

Краткое руководство по созданию навигационных меню с помощью HTML+CSS

• Делиться
• флипборд
• Эл. адрес

• Калифорнийский университет
• Вашингтонский университет

Дженнифер Кирнин — профессиональный веб-разработчик, помогающий другим в изучении веб-дизайна, HTML, CSS и XML.

Независимо от того, представляет ли меню навигации вашего веб-сайта горизонтальную строку сверху или вертикальную строку сбоку, это просто список. При разработке веб-навигации меню навигации представляет собой группу ссылок. Когда вы программируете свою навигацию с помощью XHTML+CSS, вы можете создать меню, которое будет небольшим для загрузки (XHTML) и простым в настройке (CSS).

Начиная

Чтобы создать список для навигации, вам нужно использовать список. Это может быть стандартный неупорядоченный список, идентифицированный как навигация. Например:

• Дом
• Товары
• Услуги
• Свяжитесь с нами

При просмотре HTML главная ссылка имеет идентификатор

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

Без каких-либо стилей CSS это XHTML-меню выглядит как стандартный неупорядоченный список. Есть маркеры, а элементы списка имеют небольшой отступ. При использовании ссылок-заполнителей большинство браузеров не отображают ссылки как интерактивные (подчеркнутые и синие). Когда вы вставляете HTML-код на веб-страницу, ваша навигация выглядит следующим образом:

• Дом
• Товары
• Услуги
• Свяжитесь с нами

Это не очень похоже на меню.Однако, добавив в список несколько стилей CSS, вы можете создать меню, которым будете гордиться.

Если вам нужны другие примеры вертикальных меню, выполните поиск в Интернете по следующим запросам:

• Стилизованное вертикальное меню
• Базовый шаблон вертикального меню
• Стилизованное вертикальное меню с надписью «Вы здесь»
• Базовый шаблон вертикального меню с You Are Here

Вертикальное меню навигации

Вертикальное навигационное меню легко написать, потому что оно отображается так же, как и обычный список: вверх и вниз. Элементы списка отображаются вертикально вниз по странице.

При стилизации меню начинайте снаружи и работайте внутри. Во-первых, стилизуйте навигацию:

Затем перейдите к элементам и ссылкам. Во-первых, определите ширину меню. Это гарантирует, что если элементы меню длинные, они не будут смещать остальную часть макета или вызывать горизонтальную прокрутку.

После того, как вы установите ширину, работайте над элементами списка. Это позволяет вам устанавливать такие вещи, как цвета фона, границы, выравнивание текста и поля.

После того, как вы зададите основы для элементов списка, поработайте над тем, как меню будет выглядеть в области ссылок. Первый стиль навигации:

Затем стилизуйте следующее:

Для ссылок сделайте ссылки блочными элементами (а не встроенными по умолчанию). Это заставляет ссылки занимать все пространство LI и вести себя как абзац, что упрощает оформление ссылок в виде кнопок меню. Затем удалите следующее:

Это делает кнопки более похожими на кнопки. Ваш дизайн может отличаться.

С дисплей: блок; ставил по ссылкам, кликабельно все поле пункта меню, а не только буквы. Это также хорошо для удобства использования. Установите цвета ссылок (ссылка, посещенная, наведенная и активная), если вы хотите, чтобы ссылки отличались от стандартных синего, красного и фиолетового.

Вы также можете уделить немного внимания состоянию наведения, изменив цвет фона.

Горизонтальное меню навигации

Создание горизонтальных навигационных меню немного сложнее, чем вертикальных навигационных меню, потому что вы должны компенсировать тот факт, что HTML-списки предпочитают отображаться вертикально.Как и в случае с горизонтальным меню, создайте список меню навигации:

• Дом
• Товары
• Услуги
• Свяжитесь с нами

Чтобы создать горизонтальное меню, работайте так же, как и с вертикальным меню. Начните с внешней стороны и работайте внутри. Чтобы начать навигацию в левом углу, установите его с 0 левым полем и отступом и сдвиньте его влево.

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

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

Относитесь к ссылкам точно так же, как к вертикальному навигационному меню, с теми же цветами и оформлением текста. Добавьте верхнюю границу, чтобы очертить кнопки, когда пользователь наводит на них курсор. Затем удалите дисплей: блок; так как это возвращает новые строки и уничтожает горизонтальное меню.

Вы здесь Информация о местоположении

Еще одним аспектом HTML является этот идентификатор:

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

Если вы объедините эти стили на своей странице, вы сможете создать горизонтальную или вертикальную строку меню, которая будет работать с вашим сайтом, быстро загружаться и легко обновляться. Использование XHTML+CSS превращает ваши списки в мощный инструмент для дизайна.

Если вам нужны другие примеры горизонтальных меню, поищите в Интернете следующее: