Разработка сайтов для СРО

SEO-копирайтинг — текст для поисковой оптимизации. Продвижение сайта в поисковых системах. Оптимизация сайта для поисковых машин. Раскрутка сайта в ведущих поисковиках

Создание и раскрутка сайтов в Интернете

Что нужно для SEO?

Текст & Всемирная Паутина

Инструмент веб-строителя

HTML - язык гипертекста

CSS - каскадные таблицы стилей

Поисковая оптимизация

Что такое раскрутка сайта?

Контекстная реклама

Что такое обмен ссылками?

Почтовые рассылки

Соблюдайте правила

Что препятствует рейтингу?

Что такое CMS?

Краткий словарь терминов

Полезные книги

Карта сайта

Этапы создания сайта

Десять важных шагов

Разработка семантического ядра

Обновление информации

Заголовки

Проверка ссылок

Проверка ошибок в коде

Шрифтовое оформление

Навигация по сайту

Метаданные

Выбор кодировки

Ключевые слова

 
Разработка сайтов под ключ

Ссылки по теме

Blogger: Создайте блог БЕСПЛАТНО

WordPress: Платформа для ведения блога

Online-переводчик :: Компания ПРОМТ

Поисковая оптимизация – все дело в написании текстов

Стратегия продвижения сайтов

Новые исследования поискового поведения пользователей

Орфографические словари

Словарь русских синонимов Абрамова

Орфографический словарь Лопатина

Современный словарь иностранных слов

Толковый словарь русского языка Ожегова

Архивы форума "Говорим по-русски"

FAR — программа управления файлами и архивами

FCKEditor - текстовый редактор для браузера

NotPad++ - текстовый редактор

PSPad — текстовый редактор

UltraEdit-32 - текстовый редактор

Nvu - HTML редактор

CoffeeCup - HTML редактор

 

Создаем CSS-меню

Главная « Уроки Web-мастерства « Создаем CSS-меню

версия для печати

Горизонтальные компоненты навигации на базе списков

Горизонтальные компоненты навигации на базе списков…

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

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

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

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

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

Для создания этого компонента нам потребовался простой список внутри <div>:

Код:
<div id="menunav">
   <ul>
      <li><a href="#">раздел №1</a></li>
      <li><a href="#">раздел №2</a></li>
      <li><a href="#">раздел №3</a></li>
      <li><a href="#">раздел №4</a></li>
   </ul>
</div>

Но для получения горизонтального меню (рис. 1), мы использовали простой вертикальный список (рис. 2).

 
(рис. 2) Вот скромное начало горизонтального меню.
 

Начнем с добавления простых стилей для <div> - линий по верхней и нижней границе, зададим размер шрифта и цвет фона, применим top-margin чтобы сместить его от верхней границы окна браузера.

Код:
div#menunav {
   width: 100%; /* задаем ширину для div */
   border-top: 1px  solid  #ff0000;   /* рисуем линию поверх div */
   border-bottom: 1px solid #ff0000;  /* рисуем линию снизу div */
   font-size: 11px;  /* задаем размер шрифта */
   background-color: #b3b3b3;  /* фоновый цвет div */
   padding: 0 0 0 30px; /* отступ ul от края контейнера */
}

По умолчанию элементы списка без стилей располагаются один над другим, поэтому нам нужно изменить их порядок на горизонтальный (рис. 3). Заодно мы сместим список от левого края <div> и зададим фоновый цвет для его элементов.

Код:
div#menunav ul {
   margin: 0px;
   padding: 0px;
}
div#menunav li {
   float: left; /* располагаем список по горизонтали */
   background-color: #ffebc6;  /* задаем фоновый цвет элементов меню */
}
 
(рис. 3) Теперь список расположен горизонтально.
 

Обратите внимание, что границы <div> немедленно смыкаются (хотя это и не заметно в Internet Explorer), так как по рекомендациям W3C плавающие элементы должны иметь возможность свешиваться из содержащих их элементов.

Так как в этом <div> есть только плавающие элементы, получается, что он не имеет высоты из-за отсутствия контента как такового. Чтобы устранить это, удалим маркеры из списка и начнем добавлять стили для ссылок.

Простой способ сделать так, чтобы <div> все же содержал плавающие пункты меню, - это сделать контейнер также плавающим.

Код:
div#menunav {
   width: 100%; /* задаем ширину для div */
   float: left;  /* добавляем список в div */
   border-top: 1px  solid  #ff0000;   /* рисуем линию поверх div */
   border-bottom: 1px solid #ff0000;  /* рисуем линию снизу div */
   font-size: 11px;  /* задаем размер шрифта */
   background-color: #b3b3b3;  /* фоновый цвет div */
   padding: 0 0 0 30px; /* отступ ul от края контейнера */
}
div#menunav ul {
   margin: 0px;
   padding: 0px;
}
div#menunav li {
   float: left; /* располагаем список по горизонтали */
   list-style-type: none;    /* удаляем маркеры */
   background-color: #ffebc6;  /* задаем фоновый цвет элементов меню */
}
div#menunav a {
   text-decoration: none;   /* удаляем подчеркивание ссьиок */
   color: #006699;   /* задаем цвет шрифта*/
}
div#menunav a:hover {
   color: #ff3333;
}

Теперь <div> раскроется и вместит плавающие элементы списка. Шрифт ссылок стал синим, при наведении на них указателя мыши он меняется на красный (рис. 4).

(рис. 4) Мы указали цвет ссылок для пассивного состояния и при наведении указателя мыши.
 

Но при этом у нас отсутствует визуальное разделение элементов меню. Несколько новых правил изменит ситуацию.

Код:
div#menunav {
   width: 100%; /* задаем ширину для div */
   float: left;  /* добавляем список в div */
   border-top: 1px  solid  #ff0000;   /* рисуем линию поверх div */
   border-bottom: 1px solid #ff0000;  /* рисуем линию снизу div */
   font-size: 11px;  /* задаем размер шрифта */
   background-color: #b3b3b3;  /* фоновый цвет div */
   padding: 0 0 0 30px; /* отступ ul от края контейнера */
}
div#menunav ul {
   margin: 0px;
   padding: 0px;
}
div#menunav li {
   float: left;   /* располагаем список по горизонтали */
   list-style-type: none;    /* удаляем маркеры */
   background-color: #ffebc6;   /* задаем фоновый цвет элементов меню */
   border-right: 1px solid #006699;   /* создаем разделительные линии между элементами li */
}
div#menunav li:first-child {
   border-left: 1px solid #006699;  /* первая вертикальная линия в меню */
}
div#menunav a {
   text-decoration: none;   /* удаляем подчеркивание ссылок */
   margin: 0px 10px 0px 10px;  /* создаем пространство с обеих сторон текста пункта меню */
   color: #006699;   /* задаем цвет шрифта */
   background-color: #d3d3d3;   /* ВРЕМЕННО - показать активную область ссылки */
}
div#menunav a:hover {
   color: #ff3333;
}

Результат мы видим на (рис. 5).

 
(рис. 5) Теперь элементы списка четко разделены.
 

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

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

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

Код:
div#menunav {
   width: 100%; /* задаем ширину для div */
   float: left;  /* добавляем список в div */
   border-top: 1px  solid  #ff0000;   /* рисуем линию поверх div */
   border-bottom: 1px solid #ff0000;  /* рисуем линию снизу div */
   font-size: 11px;  /* задаем размер шрифта */
   background-color: #b3b3b3;  /* фоновый цвет div */
   padding: 0 0 0 30px; /* отступ ul от края контейнера */
}
div#menunav ul {
   margin: 0px;
   padding: 0px;
}
div#menunav li {
   float: left;   /* располагаем список по горизонтали */
   list-style-type: none;    /* удаляем маркеры */
   background-color: #ffebc6;   /* задаем фоновый цвет элементов меню */
   border-right: 1px solid #006699;   /* создаем разделительные линии между элементами li */
}
div#menunav li:first-child {
   border-left: 1px solid #006699;  /* первая вертикальная линия в меню */
}
div#menunav a {
   text-decoration: none;   /* удаляем подчеркивание ссылок */
   padding: 0px 10px 0px 10px;  /* создаем пространство с обеих сторон текста пункта меню */
   color: #006699;   /* задаем цвет шрифта */
   background-color: #d3d3d3;   /* ВРЕМЕННО - показать активную область ссылки */
}
div#menunav a:hover {
   color: #ff3333;
}

Теперь ссылки заполняют все пространство ячеек, и мы можем щелкать мышью в любой ее точке (рис. 6).

 
(рис. 6) Теперь элементы меню заполняют всю область ячеек.
 

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

Код:
div#menunav {
   width: 100%; /* задаем ширину для div */
   float: left;  /* добавляем список в div */
   border-top: 1px  solid  #000000;   /* рисуем линию поверх div */
   border-bottom: 1px solid #000000;  /* рисуем линию снизу div */
   font-size: 11px;  /* задаем размер шрифта */
   background-color: #b3b3b3;  /* фоновый цвет div */
   padding: 0 0 0 30px; /* отступ ul от края контейнера */
}
div#menunav ul {
   margin: 0px;
   padding: 0px;
}
div#menunav li {
   float: left;   /* располагаем список по горизонтали */
   list-style-type: none;    /* удаляем маркеры */
   background-color: #ffebc6;   /* задаем фоновый цвет элементов меню */
   border-right: 1px solid #006699;   /* создаем разделительные линии между элементами li */
}
div#menunav li:first-child {
   border-left: 1px solid #006699;  /* первая вертикальная линия в меню */
}
div#menunav a {
   text-decoration: none;   /* удаляем подчеркивание ссылок */
   padding: 0px 10px 0px 10px;  /* создаем пространство с обеих сторон текста пункта меню */
   color: #006699;   /* задаем цвет шрифта */
}
div#menunav a:hover {
   color: #ff3333;
}
div#menunav li:hover {
   background-color: #ffffff;  /* задает фон пунктов списка */
}

Результат виден на (рис. 7).

 
(рис. 7) Теперь фон пунктов меню меняет цвет при наведении на него указателя мыши.
 
внимание!

Сейчас при наведении указателя мыши на пункт меню его фон меняет цвет во всех браузерах, кроме Internet Explorer для Windows.

IE/Win реагирует на псевдокласс :hover только при его добавлении к ссылке, тогда как более совместимые со стандартами браузеры распознают его для любого элемента. Поэтому, несмотря на то, что мы закончили работу над CSS-кодом для этого компонента, нам придется выполнить еще пару действий, чтобы «бедняга» Internet Explorer для Windows отображал первую вертикальную черту и откликался на наведение указателя мыши на пункт меню.

Вначале разберемся с вертикальной чертой. Мы можем решить эту проблему с помощью трюка со звездочкой и дописать CSS, распознаваемый только IE/Win.

До этого момента мы использовали элемент <ul> только для задания левого поля при создании отступа от края <div>. Так как <ul> содержит только плавающие элементы (пункты списка) он так же сомкнут, как и <div> в начале этого упражнения. Добавим временные границы:

Код:
div#menunav {
   width: 100%; /* задаем ширину для div */
   float: left;  /* добавляем список в div */
   border-top: 1px  solid  #ff00000;   /* рисуем линию поверх div */
   border-bottom: 1px solid #ff0000;  /* рисуем линию снизу div */
   font-size: 11px;  /* задаем размер шрифта */
   background-color: #b3b3b3;  /* фоновый цвет div */
   padding: 0 0 0 30px;  /* отступ ul от края контейнера */
}
div#menunav ul {
   margin: 0px;
   padding: 0px;
   border: 1px  solid  #0000000;  /* Добавим временные границы ul */
}
div#menunav li {
   float: left;   /* располагаем список по горизонтали */
   list-style-type: none;    /* удаляем маркеры */
   background-color: #ffebc6;   /* задаем фоновый цвет элементов меню */
   border-right: 1px solid #006699;   /* создаем разделительные линии между элементами li */
}
div#menunav li:first-child {
   border-left: 1px solid #006699;  /* первая вертикальная линия в меню */
}
div#menunav a {
   text-decoration: none;   /* удаляем подчеркивание ссылок */
   padding: 0px 10px 0px 10px;  /* создаем пространство с обеих сторон текста пункта меню */
   color: #006699;   /* задаем цвет шрифта */
}
div#menunav a:hover {
   color: #ff3333;
}
div#menunav li:hover {
   background-color: #ffffff;  /* задает фон пунктов списка */
}

чтобы просмотреть границы <ul> (рис. 8).

 
(рис. 8) Нижняя и верхняя границы <ul> смыкаются.
 

Нам нужно сделать <ul> плавающим, чтобы он вместил элементы списка:

Код:
div#menunav {
   width: 100%; /* задаем ширину для div */
   float: left;  /* добавляем список в div */
   border-top: 1px  solid  #ff00000;   /* рисуем линию поверх div */
   border-bottom: 1px solid #ff0000;  /* рисуем линию снизу div */
   font-size: 11px;  /* задаем размер шрифта */
   background-color: #b3b3b3;  /* фоновый цвет div */
   padding: 0 0 0 30px;  /* отступ ul от края контейнера */
}
div#menunav ul {
   margin: 0px;
   padding: 0px;
   border: 1px  solid  #0000000;  /* Добавим временные границы ul */
}
* html div#menunav ul {
   float: left;  /* заставляет ul вместить все li */
}
div#menunav li {
   float: left;   /* располагаем список по горизонтали */
   list-style-type: none;    /* удаляем маркеры */
   background-color: #ffebc6;   /* задаем фоновый цвет элементов меню */
   border-right: 1px solid #006699;   /* создаем разделительные линии между элементами li */
}
div#menunav li:first-child {
   border-left: 1px solid #006699;  /* первая вертикальная линия в меню */
}
div#menunav a {
   text-decoration: none;   /* удаляем подчеркивание ссылок */
   padding: 0px 10px 0px 10px;  /* создаем пространство с обеих сторон текста пункта меню */
   color: #006699;   /* задаем цвет шрифта */
}
div#menunav a:hover {
   color: #ff3333;
}
div#menunav li:hover {
   background-color: #ffffff;  /* задает фон пунктов списка */
}

В результате наше меню будет выглядеть, как показано на (рис. 9).

 
(рис. 9) Теперь <ul> вмещает в себя все элементы списка.
 

Теперь добавим левую границу для первого пункта меню - удалим временную рамку и добавим чёрную черту слева (обратите внимание, что побочным явлением при этом стало удвоением отступа от края <div>, придется исправить и это).

Код:
div#menunav {
   width: 100%; /* задаем ширину для div */
   float: left;  /* добавляем список в div */
   border-top: 1px  solid  #000000;   /* рисуем линию поверх div */
   border-bottom: 1px solid #000000;  /* рисуем линию снизу div */
   font-size: 11px;  /* задаем размер шрифта */
   background-color: #b3b3b3;  /* фоновый цвет div */
   padding: 0 0 0 30px;  /* отступ ul от края контейнера */
}
div#menunav ul {
   margin: 0px;
   padding: 0px;
}
* html div#menunav ul {
   float: left;  /* заставляет ul вместить все li */
   border-left: 1px solid #000000;  /* добавляет левую вертикальную черту к ul */
   margin-left: 15px;  /* IE удваивает заданное значение */
}
* html div#menunav a {
  display: block;  /* IE 5 и 5.5 принимает заданный отступ */
}
div#menunav li {
   float: left;   /* располагаем список по горизонтали */
   list-style-type: none;    /* удаляем маркеры */
   background-color: #ffebc6;   /* задаем фоновый цвет элементов меню */
   border-right: 1px solid #000000;   /* создаем разделительные линии между элементами li */
}
div#menunav li:first-child {
   border-left: 1px solid #000000;  /* первая вертикальная линия в меню */
}
div#menunav a {
   text-decoration: none;   /* удаляем подчеркивание ссылок */
   padding: 0px 10px 0px 10px;  /* создаем пространство с обеих сторон текста пункта меню */
   color: #006699;   /* задаем цвет шрифта */
}
div#menunav a:hover {
   color: #ff3333;
}
div#menunav li:hover {
   background-color: #ffffff;  /* задает фон пунктов списка */
}

На (рис. 10) мы видим меню в Internet Explorer, осталось только создать эффект изменения фона при наведении указателя мыши.

 
(рис. 10) Левая вертикальная черта появилась, но фон все еще не меняется при наведении указателя.
 
Эффект наведения указателя мыши в Internet Explorer

Эффект наведения указателя мыши в Internet Explorer…

До появления CSS2, добавлять изменение облика при наведении указателя мыши можно было только к ссылкам. Использование псевдокласса :hover в селекторе позволяет задавать шаблон поведения при наведении указателя мыши для разных объектов. Например, вот фрагмент CSS-кода для смены синего фона на красный.

Код:
div#respond {
   background-color: blue;
}
div#respond:hover {
  background-color: red;
}

Это очень просто, но браузер Internet Explorer не поддерживает эффекты наведения указателя для элементов ссылки, отличающихся от <а>.

 
внимание!

К счастью, Питер Недерлоф (Peter Nederlof) создал файл поведения для Internet Explorer, который устраняет этот дефект. Файл называется csshover.htc и загрузить его можно по адресу: http://www.xs4all.nl/~peterned/hovercraft.html.

Вот как можно добавить его к CSS:

Код:
body {
   margin : 0;
   padding : 10px;
   font-family: Verdana, Tahoma, arial, geneva, Helvetica, sans-serif;
   behavior: url(csshover.htc);
   background-color: #ffffff;
}

В данном случае я создал новый каталог CSS в том же каталоге, где располагаются файлы для этого примера, и поместил в него файл csshover.htc. Если вы расположите файл в другом каталоге, придется исправить URL.

С помощью файла csshover.htc, добавленного таким образом, браузер Internet Explorer сможет реагировать на наведение указателя мыши не только на ссылки.

Теперь фон пунктов меню будет меняться во всех браузерах. Наше горизонтальное меню готово. Вот полный код.

Код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">

<title>Горизонтальные компоненты навигации на базе списков</title>

<style>
<!--
body {
   margin : 0;
   padding : 10px;
   font-family: Verdana, Tahoma, arial, geneva, Helvetica, sans-serif;
   behavior: url(csshover.htc);
   background-color: #ffffff;
}
div#menunav {
   width: 100%; /* задаем ширину для div */
   float: left;  /* добавляем список в div */
   border-top: 1px  solid  #000000;   /* рисуем линию поверх div */
   border-bottom: 1px solid #000000;  /* рисуем линию снизу div */
   font-size: 11px;  /* задаем размер шрифта */
   background-color: #b3b3b3;  /* фоновый цвет div */
   padding: 0 0 0 30px;  /* отступ ul от края контейнера */
}
div#menunav ul {
   margin: 0px;
   padding: 0px;
}
* html div#menunav ul {
   float: left;  /* заставляет ul вместить все li */
   border-left: 1px solid #000000;  /* добавляет левую вертикальную черту к ul */
   margin-left: 15px;  /* IE удваивает заданное значение */
}
* html div#menunav a {
  display: block;  /* IE 5 и 5.5 принимает заданный отступ */
}
div#menunav li {
   float: left;   /* располагаем список по горизонтали */
   list-style-type: none;    /* удаляем маркеры */
   background-color: #ffebc6;   /* задаем фоновый цвет элементов меню */
   border-right: 1px solid #000000;   /* создаем разделительные линии между элементами li */
}
div#menunav li:first-child {
   border-left: 1px solid #000000;  /* первая вертикальная линия в меню */
}
div#menunav a {
   text-decoration: none;   /* удаляем подчеркивание ссылок */
   padding: 0px 10px 0px 10px;  /* создаем пространство с обеих сторон текста пункта меню */
   color: #006699;   /* задаем цвет шрифта */
}
div#menunav a:hover {
   color: #ff3333;
}
div#menunav li:hover {
   background-color: #ffffff;  /* задает фон пунктов списка */
}
-->
</style>
</head>

<body>

<div id="menunav">
   <ul>
      <li><a href="#">раздел №1</a></li>
      <li><a href="#">раздел №2</a></li>
      <li><a href="#">раздел №3</a></li>
      <li><a href="#">раздел №4</a></li>
   </ul>
</div>

</body>
</html>
 
внимание!

На следующем уроке… Мы возведем наше горизонтальное меню на следующий уровень - добавим раскрывающиеся меню.

Урок написан по материалам книги Чарльза Уайк-Смита
«Стильный сайт с помощью CSS».
 
Урок № 6: | Дата: 23.09.2007 | Автор: Коровенков Юрий

Обсудить на форуме…

 
Valid XHTML 1.0! Valid CSS!
Как устроены поисковые системы?

Облик поисковиков

Поисковые системы

Индекс поисковой системы

Полнотекстовый поиск

Учет морфологии

Релевантность

Методы регистрации

Индекс цитирования

 
Заголовки разделов текущей страницы…

Оглавление

Вот скромное начало горизонтального меню…

Теперь список расположен горизонтально…

Мы указали цвет ссылок для пассивного состояния и при наведении указателя мыши…

Теперь элементы списка четко разделены…

Теперь элементы меню заполняют всю область ячеек…

Теперь фон пунктов меню меняет цвет при наведении на него указателя мыши…

Нижняя и верхняя границы <ul> смыкаются…

Теперь <ul> вмещает в себя все элементы списка…

Левая вертикальная черта появилась…

Эффект наведения указателя мыши в Internet Explorer…

Наше горизонтальное меню готово…

 
Уроки Web-мастерства

Уроки Web-мастерства

Управление web-проектом

Как более эффективно писать для Сети?

Как сделать сайт максимально удобным?

Особенности структуры текста на Web-сайте

Создание компонентов интерфейса в XHTML

Основные типы CSS-макетов

Раскрывающиеся CSS-меню

Создание многоуровневых раскрывающихся CSS-меню

CSS-методы замены текста изображениями

Прямоугольники с закругленными углами на основе CSS

CSS-методы центрирования web-страницы

CSS-эффекты наведения указателя мыши

CSS-стили для шрифтов и текста

Навигационные CSS-панели на основе списков

Свободное размещение в CSS

Создание эффекта mouseover при помощи CSS

Таблицы для верстки - это не обязательно зло

Внедрение ролика Windows Media на Web-страницу

Добавление Flash на Web-страницу

 

NotPad++ - текстовый редактор…

 

наверх

 
Контактная информация

Пишите:
Звоните: + 7 (916) 597-36-78

SEO-копирайтинг — текст для поисковой оптимизации. Продвижение сайта в поисковых системах. Оптимизация сайта для поисковых машин. Раскрутка сайта в ведущих поисковиках

Copyright (©) 2004— by Yuriy Korovenkov