Меню для сайта html горизонтальное меню: Меню для сайта html и css горизонтальное — 11 вариантов меню

Вёрстка типовых элементов веб-страницы

Глава VII

Меню

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

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

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

Число пунктов меню обычно делают не очень большим. В противном случае имеет смысл разбить меню на подменю или организовать объем информации на сайте по-другому.

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

Условно все типы меню можно отнести к следующим категориям.

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

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

Ниспадающее меню. Обычно выглядит как горизонтальное меню, но когда курсор мыши наводится на пункты, открывается дополнительное подменю.

Всплывающее меню. При наведении на ссылку курсора мыши или щелчку по ней появляется меню в виде панели с набором вариантов перехода. Как только курсор уводится прочь со ссылки или с меню, оно пропадает.

Контекстное меню. Открывается при нажатии в окне браузера правой кнопкой мыши. Подобный тип меню уже встроен в браузер по умолчанию, но его можно переназначить с помощью скриптов. Из-за того, что использование меню не является очевидным, оно применяется достаточно редко.

К разновидностям меню также можно отнести различные списки, в том числе раскрывающиеся, и вкладки.

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

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

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

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

Создание меню с помощью таблиц

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

В примере 7.1 показано создание простого меню.

Пример 7.1. Использование таблицы для создания меню

XHTML 1.0

CSS 2.1

IE 7

IE 8

IE 9

Cr 8

Op 11

Sa 5

Fx 3.6

<!DOCTYPE

html PUBLIC «-//W3C//DTD XHTML 1.0 Strict//EN»

«http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd»>

<html xmlns=»http://www. w3.org/1999/xhtml»>

<head>

<title>Меню</title>

/>

<meta

http-equiv=»Content-Type» content=»text/html; charset=utf-8″

<style

type=»text/css»>

TABLE. menu {

background: #fc0; /* Цвет фона меню */

width: 100%; /* Ширина меню */

border: 1px solid black; /* Рамка вокруг таблицы */

}text-align: center; /* Выравнивание текста по центру */

. menu

TD {

border:

1px solid white; /* Линия между ячейками */

}padding:

4px /* Поля вокруг текста */

.menu A { color: #BE1E2D; }

</style>

</head>

<body>

<table cellspacing=»0″>

<tr>

<td><a href=»link1. html»>Чебурашка</a></td>

<td><a

href=»link2.html»>Крокодил Гена</a></td>

<td><a

href=»link3.html»>Шапокляк</a></td>

<td><a

href=»link4.html»>Крыса Лариса</a></td>

</tr>

</table>

</body>

</html>

Результат данного примера показан на рис. 7.1.

Рис. 7.1. Горизонтальное меню

При создании горизонтального меню не обойтись без подсвечивания фона ячейки таблицы при наведении на нее курсора мыши. Подобный эффект повышает привлекательность меню и удобство работы с ним (рис. 7.2).

Рис. 7.2. Подсветка ячеек в таблице

Для создания подсветки текста воспользуемся псевдоклассом :hover, который управляет стилем ссылки при наведении на неё курсора мыши. Остаётся только указать желаемый цвет фона с помощью свойства background. Также можно изменить и другие параметры, например цвет текста. Чтобы в качестве ссылки выступала вся ячейка целиком, а не только текст в ней, следует добавить для селектора A свойство display со значением block. В данном случае оно превращает ссылку в блочный элемент, заставляя ее занимать все свободное пространство. На виде текста это никак не отражается, но зато вся ячейка будет ссылкой, что увеличивает её полезную площадь (пример 7.2).

Пример 7.2. Создание подсветки XHTML 1.0 CSS 2. 1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<style type=»text/css»> TABLE.menu {

background: #fc0; /* Цвет фона меню */ width: 100%; /* Ширина меню */

border: 1px solid black; /* Рамка вокруг таблицы */

}text-align: center; /* Выравнивание текста по центру */

.menu TD {

border: 1px solid white; /* Линия между ячейками */

}padding: 4px /* Поля вокруг текста */

.menu A {

color: #BE1E2D; /* Цвет ссылок */ }display: block; /* Блочный элемент */

.menu TD:hover {

}background: #29B473; /* Цвет фона при наведении */

.menu TD:hover A {

color: #FFE; /* Цвет ссылок при наведении */

}text-decoration: none; /* Убираем подчеркивание */

</style>

Код HTML будет таким же, как и в примере 7.1.

Применение маркированного списка

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

список, основанный на комбинации тегов <ul> и <li>. Хотя по умолчанию это скорее вертикальное, а не горизонтальное меню, с помощью стилей ему можно задать желаемый вид.

Начнём с совмещения пунктов меню по горизонтали. Тег <li> блочный, поэтому и начинается всегда с новой строки, поэтому превратим его в строчный элемент через свойство display со значением inline.

.menu LI {

background: #fc0; /* Цвет фона меню */ list-style: none; /* Убираем маркеры */ padding: 4px 10px; /* Поля вокруг текста */

} display: inline; /* Строчный элемент */

На тег <ul> изначально действуют отступы, поэтому их необходимо убрать, чтобы они не влияли на вид отображения меню.

UL.menu {

} margin: 0; padding: 0; /* Отключаем отступы и поля */

Код для создания меню показан в примере 7.3.

Пример 7.3. Использование inline

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Strict//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd»>

<html xmlns=»http://www.w3.org/1999/xhtml»>

<head> <title>Меню</title>

<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″ /> <style type=»text/css»>

UL. menu {

}margin: 0; padding: 0; /* Отключаем отступы и поля */

.menu LI {

background: #fc0; /* Цвет фона меню */ list-style: none; /* Убираем маркеры */ padding: 4px 10px; /* Поля вокруг текста */

}display: inline; /* Строчный элемент */

.menu A {

}color: #BE1E2D; /* Цвет ссылок */

</style>

</head>

<body>

<ul>

<li><a href=»link1.html»>Чебурашка</a></li> <li><a href=»link2.html»>Крокодил Гена</a></li> <li><a href=»link3.html»>Шапокляк</a></li> <li><a href=»link4.html»>Крыса Лариса</a></li>

</ul>

</body>

</html>

Для строчных элементов характерна одна особенность — перевод строки воспринимается в качестве пробела, поэтому между пунктами меню наблюдается небольшой промежуток (рис. 7.3).

Рис. 7.3. Вид меню

Прежде чем решить, избавляться от этого промежутка или оставить его, необходимо решить более важные проблемы. В IE6–7 не действуют вертикальные поля, и нет самого промежутка. Получается, что

меню по своему виду различается от других браузеров (рис. 7.4).

Рис. 7.4. Вид меню в IE6–7

Как бороться с подобными явлениями нам уже известно — добавляем zoom и явно устанавливаем отступ справа. Ну, а чтобы стиль работал только для нужного браузера, используем условные комментарии.

<!—[if lte IE 7]> <style type=»text/css»>

.menu LI {

zoom: 1;

}margin-right: 4px;

</style> <![endif]—>

Со строчными элементами есть ещё один нюанс — при переносе текста на другую строку также переносится фоновый цвет (рис. 7.5).

Рис. 7.5. Перенос текста в меню

Обойти это можно разными путями, например, установить для <li> запрет на перенос текста через white-space: nowrap или включив ограничение ширины всего меню с помощью min-width. Впрочем, ничего не мешает использовать оба метода сразу (пример 7.4).

Пример 7.4. Запрет переноса текста

UL {

}min-width: 400px; /* Ограничиваем ширину меню*/

LI {

}white-space: nowrap; /* Отменяем перенос текста */

Вернёмся к промежутку между строчными элементами. Он появляется от переноса строки, который считается за пробел. Так что если мы запишем всё в одну строку, это сразу же уберёт все пробелы.

<li><a href=»link1.html»>Чебурашка</a></li><li><a href=»link2.html»>Крокодил Гена</a></li>

Если пунктов меню много, то такую строку становится неудобно редактировать, но можно пойти на хитрость и убрать пробелы с помощью комментариев HTML.

<li><a href=»link1.html»>Чебурашка</a></li><!— —><li><a href=»link2.html»>Крокодил Гена</a></li><!— —><li><a href=»link3.html»>Шапокляк</a></li><!— —><li><a href=»link4.html»>Крыса Лариса</a></li>

Также допустимо воспользоваться стилями и сдвинуть пункты меню за счёт отрицательного значения margin-right.

.menu LI {

} margin-right: -4px;

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

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

свойство float.

.menu LI {

float: left; /* Выстраиваем по горизонтали */ width: 25%; /* Ширина пунктов */

} text-align: center; /* Выравниваем по центру */

Ширина всех пунктов будет равной и получается деление 100% на количество пунктов (4). Добавлять padding к пунктам нельзя, это превысит их ширину и разрушит всё меню, поэтому используем margin для вложенных селекторов A. Подсветка пунктов при наведении на них курсора аналогична примеру 7.2. Окончательный код меню приведён в примере 7.5.

Пример 7.5. Использование float

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Strict//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict. dtd»>

<html xmlns=»http://www.w3.org/1999/xhtml»>

<head> <title>Меню</title>

<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″ /> <style type=»text/css»>

UL.menu {

margin: 0; padding: 0; /* Отключаем отступы и поля */ overflow: hidden; /* Отменяем обтекание после меню */ }min-width: 450px; /* Ограничиваем ширину */

.menu LI {

list-style: none; /* Убираем маркеры */ float: left; /* Выстраиваем по горизонтали */ width: 25%; /* Ширина пунктов */

text-align: center; /* Выравниваем по центру */

}background: #fc0; /* Цвет фона меню */

.menu A {

color: #BE1E2D; /* Цвет ссылок */ display: block; /* Блочный элемент */

}margin: 5px; /* Отступы вокруг текста */

.menu LI:hover {

}background: #29B473; /* Цвет фона при наведении */

.menu LI:hover A {

color: #FFE; /* Цвет ссылок при наведении */

}text-decoration: none; /* Убираем подчеркивание */

</style>

</head>

<body>

<ul>

<li><a href=»link1. html»>Чебурашка</a></li> <li><a href=»link2.html»>Крокодил Гена</a></li> <li><a href=»link3.html»>Шапокляк</a></li> <li><a href=»link4.html»>Крыса Лариса</a></li>

</ul>

</body>

</html>

Результат данного примера показан на рис. 7.6.

Рис. 7.6. Меню, созданное с помощью float

Как и в случае применения строчных элементов, перенос текста в данном случае приведёт к некрасивым эффектам (рис. 7.7). Способы борьбы показаны в примере 7.4.

Рис. 7.7. Перенос текста в меню

Как сделать горизонтальное меню на HTML?

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

Меню: привычное и комфортное

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

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

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

Ориентация в пространстве — не главное, но привычнее горизонтальная систематизация предлагаемого функционала. Читать слева направо и сверху вниз общепринято не только на русскоязычных сайтах.

Однозначно правильные сайты и их меню

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

В качестве образца можно рассматривать сайты:

• международной биржи Forex;
• Всемирной организации здравоохранения;
• финансовой системы России;
• нефтегазовой компании.

Но количество денег или социальная значимость — не критерии качества веб-разработки.

Всякое меню — дело рук конкретного разработчика и мнение коллектива разработчиков популярной системы управления сайтами (CMS), использованной при разработке веб-ресурса.

В шаблоны самых лучших CMS никогда не загнать реальную жизнь. Применение интернет-технологий всегда обуславливает в каждом конкретном случае необходимость выполнить теоретико-практические работы по созданию комфортного меню.

Классический многофункциональный пример

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

Самое верхнее меню (1.1) относится к посетителю (частное или юридическое лицо, финансовая организация или инвестор). Самое нижнее (1.4) — зависит от всех остальных, и здесь властвует не HTML, а JavaScript и AJAX, которые динамично формируют нужный вариант тегов HTML.

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

Простая динамичная навигация

Пример с Google (на фото под цифрой 2) — классика простоты переключающегося меню. В начале поиска оно одно, в процессе поиска совсем другое. Здесь нет горизонтального выпадающего меню HTML, и CSS отведена минимальная роль. Здесь важен момент переключения варианта конечной выборки и меню подстроено под эту задачу.

Конкурент Google — Yandex (цифра 3) строит свое меню сразу. Более того, страница поиска здесь сразу наполнена дополнительным функционалом и предлагает посетителю не только функцию поиска.

Yandex предлагает сразу:

• поиск;
• деньги;
• почту и др.

Все функции в чистом HTML. Горизонтальные меню по каждой функциональности. Характерная особенность Google и Yandex — настройки, которые выполняются автоматически, но могут быть изменены посетителем через горизонтально ориентированные функции.

Реальная статичная и общая практика

Последний пример (под цифрой 4) — для разработчиков на платформе Office XML. Документы формата «*.*x» востребованы, популярны, и сайт, предлагающий описание стандарта, использует чистый HTML. Горизонтальное меню содержит ссылки на основные разделы:

• docx;
• xlsx;
• pptx.

В Интернете можно найти много других, менее популярных, сайтов. Всегда можно обнаружить современное уверенное стремление к максимальной простоте и функциональности.

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

Сегодня красивое горизонтальное меню: HTML и CSS или JavaScript — это простота, комфорт и функциональность для посетителя.

Меню: слева направо и сверху вниз или …

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

Традиционный документ HTML: меню горизонтальное с выпадающими подпунктами по каждому пункту. Выпадать может не только список ссылок (пунктов), но списки списков. Когда сайт предоставляет десятки услуг (товаров), и в каждой позиции может быть более десятка строк, становится проблемой как само меню, так и его подпункты.

Обычно проблема большого количество пунктов и подпунктов в меню решается путем скроллинга. Однако каждая область применения допускает систематизацию информации. Сомнительно, что существует такая задача на веб-программирование, которая бы не допускала ограничение от трех-четырех до семи — девяти пунктов.

Такое количество вмещается в страницу HTML, горизонтальное меню получается компактным и удобным.

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

Фактически сайт — это систематизированное представление информации, а структура этого представления — есть категории, то есть меню.

Организация меню: списки, таблицы и дивы

HTML под горизонтальное меню не отводит никакого специального синтаксиса. Можно использовать обычные дивы (div, span), таблицы (table, tr, td) и списки (ul, li). Последнее считается самым правильным, но часто встречаются конструкции, в которых все смешано в одно целое: один пункт меню может представлять собой таблицу, в каждой ячейке по нескольку дивов и список для описания подразделов.

Синтаксис HTML/CSS при создании пункта меню, если он основан на нескольких дивах (т. е. картинках оформления), становится жестким. Использовать вектор в меню или его пункте невозможно: нет связи между смыслом меню и логикой вектора (растягивания, сжатия, или иного пропорционального изменения размера). Остается использовать растр, а это несколько HTML. Горизонтальное меню (основное), а также:

• для смартфона — свое;
• увеличенное — для большого экрана;
• контрастное — когда монитор уже старенький;
• для слабовидящих и прочие варианты.

В этом пояснении существенно то, что не столь важна ориентация в пространстве конструкций HTML посредством правил CSS, сколько выражение смысла пункта меню через функциональность JavaScript.

Идея: содержание меню и его пунктов определяют, как сделать горизонтальное меню в HTML, а не жесткую конструкцию самого оптимального сочетания ul, li, div, table и т.д.

Всегда важен смысл, а не жесткая конструкция. Смысл всегда можно делегировать от сервера через AJAX браузеру, где функция JavaScript оформит его в нужный HTML-тег и приставит к нему правило CSS, которое определит место, размер и цветовое решение меню (пункта меню).

Виртуальное горизонтальное меню (HTML, CSS, JS)

Google — бесспорный лидер в поиске и не только. Идея динамичного изменения меню появилась давно, но реализация Google — самая простая в наглядной интерпретации.

Здесь нет никакого емкого CSS, не выражено участие JavaScript, но поиск через классическое «погуглить» обусловлен не только лаврами лидера, но и фактическим исполнением.

Переход горизонтального меню на HTML тегах из одного смысла в смысл, обусловленный результатами поиска, — хорошее решение.

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

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

Если разработчик HTML/CSS/JS сменит технику создания меню горизонтального на логику меню осмысленного, наделенного элементами реальности, возможно, его сайт получит иную аудиторию посетителей и совершенно иной рейтинг среди подобных.

Добавление и редактирование горизонтальной панели навигации

Чтобы добавить горизонтальную панель навигации на свой сайт, вам нужно включить панель, а затем выбрать, какие страницы вы хотите там отображать. При желании вы можете превратить панель навигации в раскрывающееся меню, добавив страницы в меню и вложив одни страницы под другие. Включить панель навигации Чтобы начать редактирование макета сайта, нажмите кнопку  Еще  в правом верхнем углу окна браузера. Выберите  Изменить макет сайта . Нажмите кнопку «Горизонтальная навигация» на панели инструментов, чтобы включить или отключить ее. Любые внесенные вами изменения сохраняются мгновенно. Добавление, изменение или удаление элементов навигации Вы можете добавить любую страницу своего сайта на горизонтальную панель навигации в качестве раздела меню или пункта меню. Перейдя в режим «Редактировать макет сайта», щелкните область с надписью «Нажмите, чтобы изменить горизонтальную навигацию». Это вызовет диалоговое окно для добавления, изменения и удаления элементов на панели навигации. Добавление пунктов меню Чтобы добавить страницу с вашего сайта в качестве пункта меню на горизонтальную панель навигации, нажмите  Добавить страницу , затем найдите свою страницу во всплывающем окне и нажмите «ОК». Чтобы добавить страницу с другого сайта или адрес электронной почты в качестве пункта меню, нажмите Добавить URL . Во всплывающем окне введите URL-адрес страницы и название пункта меню, который вы хотите отобразить, затем нажмите «ОК». Удаление пунктов меню Чтобы удалить страницу как элемент меню на горизонтальной панели навигации, выберите страницу в поле  Выберите страницы для отображения  , затем нажмите значок удалить. Добавление элементов раскрывающегося меню Чтобы создать раскрывающееся меню, страница должна иметь другие страницы, перечисленные под ней в поле Выберите страницы для отображения  . Чтобы сделать страницу элементом раскрывающегося меню, выберите страницу в поле Выберите страницы для отображения  , затем нажмите стрелку вправо. (Затем он появится с отступом в  Выберите страницы для отображения  поле.) Чтобы изменить страницу из раскрывающегося меню в элемент верхнего меню, выберите ее и нажмите стрелку влево. Организация элементов меню Чтобы изменить порядок отображения элементов меню, выберите страницу в поле Выберите страницы для отображения , затем нажмите стрелку вверх или стрелку вниз. Верхние элементы в поле Выберите страницы для отображения  будут самыми левыми элементами горизонтального меню. Эта организационная структура применима и к выпадающим меню. Изменение стиля панели навигации Перейдя в режим «Редактировать макет сайта», щелкните область с горизонтальной навигацией. Вы можете изменить стиль горизонтальной панели навигации, выбрав один из переключателей в разделе Style . Вот как выглядят разные стили: Блоки:   Вкладки: 9 9005 5   Ссылки:

Стилизация меню навигации с помощью CSS

WebD2: Стилизация меню навигации с помощью CSS

Обзор

На предыдущем уроке вы узнали об управлении макетом веб-страницы с помощью CSS. Одним из методов, которым вы научились, было плавающее содержимое, чтобы элементы отображались рядом друг с другом. В текущем уроке вы будете применять эти приемы для стилизации меню навигации.

Результаты учащегося

По завершении этого упражнения:

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

Действия

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

     /* стили меню навигации */
    

   Тогда все стили, связанные с меню навигации, будут идти после этого комментария. ПРИМЕЧАНИЕ. Каждое из следующих определений стиля уникально. Селекторы похожи, но если вы внимательно посмотрите на них, то увидите, что на самом деле они относятся к разным элементам. Поэтому не забудьте включить каждое из этих определений в свою таблицу стилей.
3. Меню навигации содержится в элементе nav, но это всего лишь контейнер. Большинство элементов, которые нам нужно стилизовать, на самом деле содержатся внутри элемента навигации. Чтобы стилизовать их, мы можем использовать селекторы потомков, которые были определены в уроке по id и classу. Для начала мы можем удалить маркеры из ненумерованного списка, например:

   нав ул {
     тип стиля списка: нет;
   }
    

4. Затем переместите все элементы списка влево, точно так же, как вы делали это с разделами .info в предыдущем уроке. Пока вы это делаете, вы можете добавить поле справа от каждого элемента списка, чтобы они не были сжаты вместе:

   нав уль ли {
     плыть налево;
     поле справа: 0,5em;
   }
    

5. Затем стилизуйте якоря (ссылки), вложенные в элементы списка. Добавленный здесь стиль делает элементы списка похожими на кнопки меню. Следующие стили являются примерами, но не стесняйтесь настраивать эти стили и придумывать свой собственный уникальный стиль меню:

   нав уль ли а {
     отступы: 0,25 см 1 см;
     текстовое оформление: нет; /* без подчеркивания */
     цвет фона: #EBF5FF; /* бледно-голубовато-белый */
     цвет: #4312AE; /* темно-синий */
     граница: 2px сплошной черный;
     граница-верхний-левый-радиус: 1em 1em; /* закругленный угол! */
     граница-верхний-правый-радиус: 1em 1em; /* еще один закругленный угол! */
   }
    

6. Теперь добавьте псевдоклассы :hover и :focus, чтобы элементы меню меняли цвет, когда пользователи наводят на них курсор или таб:

   nav ul li a: hover, nav ul li a: focus {
     черный цвет;
     цвет фона: белый;
     вес шрифта: полужирный;
   }
    

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