Независимо от того, является ли ваше навигационное меню горизонтальной строкой в верхней или вертикальной строке вниз, это все еще просто список. При проектировании веб-навигации часто бывает легко забыть, что меню навигации - это просто прославленная группа ссылок. Но если вы программируете навигацию с помощью XHTML + CSS, вы можете создать небольшое меню, которое можно загрузить (XHTML) и легко настроить (CSS).
Начиная
Чтобы начать разработку списка для навигации, вам нужно использовать список. Это может быть стандартный неупорядоченный список, который был идентифицирован как навигация:
Если вы внимательно посмотрите на HTML, вы заметите, что ссылка «Главная» также имеет идентификатор
Вы здесь, Это позволит вам создать меню, которое идентифицирует текущее местоположение для ваших читателей. Даже если вы не планируете иметь этот вид визуальной подсказки на своем сайте прямо сейчас, вы можете включить эту информацию. Если вы решите добавить ссылку позже, у вас будет меньше кода для подготовки вашего сайта.
Без CSS стилей это меню XHTML выглядит как стандартный неупорядоченный список. Есть пули, а элементы списка слегка отступы. Поскольку я использую ссылки на компоновщики, большинство браузеров не будут отображать ссылки как интерактивные (подчеркнутые и синие). Если вы вставляете этот HTML-код в веб-страницу, ваша навигация будет выглядеть так:
- Главная
- Товары
- Сервисы
- Связаться с нами
Это довольно скучно и не похоже на меню. Но только с несколькими стилями CSS, добавленными в список, вы можете создать меню, которое сделает вас гордым.
Меню вертикальной навигации
Вертикальное меню навигации очень легко писать, потому что оно отображается так же, как обычный список: вверх и вниз. Элементы списка отображаются вертикально вниз по странице.
Когда я настраиваю меню, мне нравится начинать снаружи и работать. Под этим я подразумеваю, что сначала
уль # навигация и затем перейдите к
литий элементы, а затем ссылки и т. д. Итак, для этого меню сначала вы определяете ширину меню. Это гарантирует, что даже если элементы меню являются длинными, они не будут выталкивать остальную часть макета или вызывать горизонтальную прокрутку.
ul # навигация {ширина: 12em; }
Как только у меня установлена ширина, я могу играть с элементами списка. Это позволяет мне задавать такие вещи, как (избавиться от пуль), цвета фона, границы, выравнивание текста и поля.
ul # навигация li {list-style: none;background-color: # 039;border-top: solid 1px # 039;text-align: left;margin: 0;} После того, как вы установили основы для элементов списка, вы можете начать играть с тем, как выглядит меню в области ссылок. Первый стиль UL # навигация LI Aа затем Ссылка, A: посетил, A: Hover, а также A: активный (если вы хотите их). Для ссылок мне нравится делать ссылки блочным элементом (а не по умолчанию в строке). Это заставляет их занять все пространство LIИ они больше похожи на абзац, что упрощает их стиль в виде кнопок меню. Другая вещь, которую я всегда делаю, - это удалить подчеркивание ( text-decoration: none;), так как это делает кнопки для меня больше похожими на кнопки. Но, конечно, ваш дизайн может быть другим. ul # навигация li a {display: block;text-decoration: none;padding: .25em;border-bottom: solid 1px # 39f;border-right: solid 1px # 39f;} Обратите внимание: display: block; установленный на ссылках, все поле элемента меню доступно для клика, а не только буквы. Это также полезно для удобства использования. Не забудьте установить цвета ссылок (ссылка, посещение, наведение и активный), если вы хотите, чтобы они отличались от голубого, красного и фиолетового по умолчанию. a: link, a: visited {color: #fff; }a: hover, a: active {color: # 000; } Я также хотел бы немного направить состояние зависания, изменив цвет фона. a: hover {background-color: #fff; } Если вы хотите больше примеров вертикальных меню, обратитесь к приведенному ниже списку. Создание горизонтальных навигационных меню несколько сложнее, чем меню вертикальной навигации, потому что вы должны компенсировать тот факт, что списки HTML предпочитают отображать по вертикали. Как и в горизонтальном меню, сначала создайте свой список меню навигации:
Чтобы создать горизонтальное меню, работайте так же, как в вертикальном меню. Начните с внешней стороны и заработайте. Поскольку я хочу, чтобы моя навигация начиналась в левом углу, я установил ее с 0 левым полем и дополнением, и я плаваю влево. Вы также должны привыкнуть устанавливать ширину так, чтобы ваше меню не занимало больше или меньше места, чем вы планируете. Для горизонтальных меню это обычно полная ширина дизайна. Я также добавил цвет фона во весь список, чтобы было легче читать. ul # навигация {плыть налево;margin: 0;заполнение: 0;ширина: 100%;background-color: # 039;} Но секрет в меню горизонтальной навигации находится в элементах списка. Элементы списка обычно представляют собой элементы блока, а это означает, что они будут иметь новую строку, расположенную до и после каждого из них. Переключение дисплея из блок в в соответствии, вы вынуждаете элементы списка выравниваться рядом друг с другом по горизонтали. ul # навигация li {дисплей: inline; } Я обрабатывал ссылки точно так же, как я обращался с ними в меню вертикальной навигации с такими же цветами и украшением текста. Я добавил верхнюю границу, чтобы очертить кнопки, когда они зависли. Единственное, что было удалено, было display: block; поскольку это вернет новые строки и разрушит горизонтальное меню. ul # навигация li a {text-decoration: none;padding: .25em 1em;border-bottom: solid 1px # 39f;border-top: solid 1px # 39f;border-right: solid 1px # 39f;}a: link, a: visited {color: #fff; }ul # навигация li a: hover {background-color: #fff;цвет: # 000;} Другим аспектом HTML является идентификатор Вы здесь, Если вы хотите изменить свое меню, чтобы указать текущее местоположение ваших пользователей, просто используйте это Я БЫ для определения другого цвета фона или другого стиля. Переместить этот атрибут Я БЫ на правильный пункт меню на других страницах, чтобы текущая страница всегда была выделена. ul # навигация li # youarehere a {background-color: # 09f; } Если вы разместите эти стили на своей странице, вы можете создать горизонтальную или вертикальную панель меню, которая работает на вашем сайте, но быстро загружается и очень легко обновляется в будущем. Использование XHTML + CSS превращает ваши списки в очень мощный инструмент для проектирования. Если вы хотите больше примеров горизонтальных меню, обратитесь к следующему.
Меню горизонтальной навигации
Вы здесь Информация о местоположении
