Рассылка раздела Компьтерные технологии сайта   kursi.nm.ru

"Текущий справочник по WEB-дизайну и раскруту"



Выпадающие меню с помощью CSS

Drop-Down Menus, Horizontal Style

автор: Nick Rigby
перевод: Максим Россомахин

Каждый, кому доводилось создавать выпадающие меню, знаком с тем, какое количество скриптов требуется для этого. Между тем, используя грамотно структурированный HTML-код и несложные CSS-правила, можно создать симпатичное выпадающее меню, которое легко менять и дополнять, и при этом оно будет работать во множестве браузеров, в том числе и в Internet Explorer. И самое главное для вас, любители "чистого" кода - никакого JavaScript! (На самом деле, небольшой скрипт все же необходим, но вовсе не для того, о чём вы подумали.)

Вот пример действующего меню

Создаем меню

Первым и самым важным этапом создания нашего меню является построение его структуры. Лучше всего делать это, используя ненумерованный список, в котором размещены подменю, выступающие как списки в рамках пунктов родительского списка. Звучит заумно? Фактически это очень просто:

<ul>
  <li><a href="#">Home</a></li>
    <li><a href="#">About</a>
    <ul>
        <li><a href="#">History</a></li>
        <li><a href="#">Team</a></li>
        <li><a href="#">Offices</a></li>
    </ul>
  </li>
  <li><a href="#">Services</a>
  <ul>
      <li><a href="#">Web Design</a></li>
      <li><a href="#">Internet Marketing</a></li>
      <li><a href="#">Hosting</a></li>
      <li><a href="#">Domain Names</a></li>
      <li><a href="#">Broadband</a></li>
    </ul>
    </li>
    <li><a href="#">Contact Us</a>
    <ul>
      <li><a href="#">United Kingdom</a></li>
      <li><a href="#">France</a></li>
      <li><a href="#">USA</a></li>
      <li><a href="#">Australia</a></li>
    </ul>
    </li>
</ul>

Вот так: простой HTML код, доступный и легко редактируемый.

Наводим красоту

Взгляните на приведённый выше пример. Вы увидите довольно скучный список элементов. А я обещал вам, что он будет симпатичным! Давайте-ка добавим немного стилей.

Первым делом удалим отступы и маркеры в ненумерованном списке, а затем зададим ширину пунктов меню.

ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
}

Теперь нам надо задать положение элементов списка. К счастью, они по умолчанию будут расположены вертикально, что нам и нужно. Однако, нам необходимо задать значение для position как relative, и всё потому, что нам нужно будет относительно их абсолютно позиционировать подменю.

ul li {
position: relative;
}

Берёмся за подменю. Мы хотим, чтобы каждое подменю появлялось справа от пункта родительского меню в тот момент, когда над этим пунктом находится курсор.

li ul {
position: absolute;
left: 149px;
top: 0;
display: none;
}

Используя атрибуты "left" и "top", мы можем абсолютно позиционировать каждое субменю в рамках пункта меню предка. Вы заметите, что я задал атрибуту "left" значение в 149px (одним пикселем меньше, чем ширина родительского пункта), это позволяет субменю перекрывать главное меню, не создавая при этом двойной границы. (Поймёте, о чём я, чуть позже.)

Нам надо также присвоить атрибуту "display" значение "none", так как мы не хотим видеть подменю при открытии страницы.

Что ж, у нас теперь есть каркас, но он всё ещё выглядит невзрачно. Давайте зададим стили для ссылок.

ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff;
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}

Я применил к ссылкам стили по своему вкусу, но их можно легко поменять на те, что вам нравятся. Важно присвоить атрибуту "display" значение "block", ведь мы хотим, чтобы каждая ссылка занимала всё отведённое для неё место внутри содержащего её элемента списка.

Итак, выглядит уже получше, хотя пользователи Internet Explorer для Windows могут с вами и не согласиться. К несчастью, IE Win понимает разрывы строк между ссылками в нашем красиво оформленном HTML коде как незаполненное пространство. Из-за этого в IE вы видите, что ссылки не прилегают тесно одна к другой. Однако этот баг IE можно обойти.

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */

Выше мы применили трюк Holly Hack, которые прячет эти правила от всех браузеров, кроме IE Win. Отлично. Обратите внимание, что было добавлено правило height: 1%. К сожалению (опять!), борясь с одной ошибкой, мы выткнулись на другую, для борьбы с которой требуется задать значение для атрибута "height", чтобы ссылки отображались как блочные элементы.

Также обратите внимание, что мы забыли "закрыть" блок меню. Добавим дополнительно нижнюю границу к каждому элементу списка. Итак, вот полный список стилей для ul:

ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
border-bottom: 1px solid #ccc;
}

Все сложилось удачно, и теперь все могут увидеть красивое, но нефункционирующее меню.

Заставим его работать

А теперь - самое веселое. Нам надо сделать так, чтобы подменю появлялись в тот момент, когда курсор находится над элементом списка.

li:hover ul { display: block; }

Вуаля! И вот оно - наше меню - в действии.

"Ё-моё! Работает!" - крикнет кто-то из вас. - "Здорово!"

Хорошо, хорошо, но чёртов IE/Win опять поломал всю красоту - не желает делать то, что ему сказано. Он понимает псевдокласс :hover лишь для тега <a> - так что li:hover, на который у нас завязано появление подменю, ему ни о чём не говорит.

Капелька JavaScript приведет IE в чувство (разрыв строк отмечен символом "»" - Ред.):

startList = function() {
  if (document.all&&document.getElementById) {
    navRoot = document.getElementById("nav");
    for (i=0; i<navRoot.childNodes.length; i++) {
      node = navRoot.childNodes[i];
      if (node.nodeName=="LI") {
        node.onmouseover=function() {
          this.className+=" over";
        }
        node.onmouseout=function() {
          this.className=this.className.replace »
        (" over", "");
        }
    }
    }
  }
}
window.onload=startList;

Огромное спасибо Патрику Гриффитсу и Дану Уэббу (Patrick Griffiths и Dan Webb), рассказавшими об этом трюке в одной из предыдущих статей ALA - Suckerfish Dropdowns. Спасибо, парни!

Итак, правила для hover таковы:

li:hover ul, li.over ul {
display: block;
}

Мы также должны дополнительно связать JavaScript с нашим главным списком, добавив это:

<ul id="nav">

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

Прыжки меню в IE5.01 для Win

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

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

Таинственный баг шестой версии IE:

Работая над статьёй, я обнаружил странный баг, который, как мне кажется, наблюдается лишь в IE6. Для "li a" необходимо задать фон, иначе если выпадающее подменю будет больше (по высоте), чем само родительское меню, то часть ссылок просто исчезнет с экрана ещё до того, как вы сможете кликнуть по ним. Странно! Попробуйте увидеть это сами.

Создайте своё меню

Вот и всё! Не противоречащий стандартам метод создания красивых горизонтально выпадающих меню. Всё, что вам надо сделать - добавить несколько ваших стилей для hover, создав своё меню. Дабы дать толчок вашей фантазии, я добавил еще пару штрихов в к меню. Наслаждайтесь!

Об авторе:

Nick Rigby

Ник Ригби - дизайнер из английского города Ланкастер. Он пропагандирует использование веб-стандартов на своей текущей работе в "Business Serve plc", а также на своём новом сайте, который должен скоро открыться - nickrigby.com. Большинство друзей считает его чокнутым. Но он нормальный.

автор: Nick Rigby
перевод: Максим Россомахин

Источник: webmascon

 


СПРАВОЧНАЯ ИНФОРМАЦИЯ

Гипертекстовая разметка.

Тэги задания структуры документов

<HTML></HTML> Указывает браузеру, что это HTML документ.

<HEAD></HEAD> Определяет место, где помещается различная информация не отображаемая в теле документа. Здесь же располагается тег названия документа и теги для поисковых машин.

<BODY></BODY> Определяет видимую часть документа.

АТРИБУТЫ:

BGCOLOR Определяет цвет фона для тела документа.

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

Вы меняете фоновый цвет с помощью атрибутов BGCOLOR или BACKGROUND. BACKGROUND Определяет адрес URL, откуда будет браться изображение для подготовки фона к текущему документу.

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

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

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

<TITLE></TITLE> Помещает название документа в оглавление браузера.

<! --> … --> или<COMMENT >…</COMMENT> комментарии

 

ПРИМЕР HTML-документа:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Draft//EN"> (обязательный элемент, описывающий версию HTML)
<HTML>

<HEAD>
<TITLE>Название странички</TITLE>
... другие элементы заголовка
<META http-equiv="Content-Type" content="text/html; charset=windows-1251">
<META NAME="Description" content="ключевые слова через запятую">
<META NAME="Keywords" content=" ключевые слова через запятую ">
<LINK href="внешний файл таблицы стилей" rel=stylesheet type=text/css>
<SCRIPT lanquage="JavaScript" src="файл со скриптами JavaScript">
</SCRIPT>
</HEAD>

<BODY bgcolor=white text=black link=red vlink=maroon alink=fuschia>
... тело документа
</BODY>

</HTML>

   


Учебные страницы


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

Сегодняшнее наполнение отдела таково:

- Номинация: WEB-дизайн. Тренировочная страница по изобразительным и функциональным возможностям CSS.
  До массированного применения CSS.

- Номинация: WEB-дизайн. Тренировочная страница по изобразительным и функциональным возможностям CSS.
   После "массированного" применения CSS.

- Номинация: Windows. Настройки.
Набор: оболочка VC, утилиты, файлы для аварийно-восстановительной дискеты.

- Номинация: Windows...
Скачать zip-файл для аварийно-восстановительной дискеты, 534КВ

- Номинация: Windows. Реестр.
Пример внесения изменений в ключ (параметры и значения) реестра.

- Номинация: WEB-дизайн. Образец простого каркаса WEB-страницы с "жесткой" конструкцией

- Номинация: WEB-дизайн. Образец простого каркаса WEB-страницы с "жесткой" конструкцией-код HTML

- Номинация: WEB-дизайн. Образец простого каркаса WEB-страницы с "мягкой" конструкцией

- Номинация: WEB-дизайн. Образец простого каркаса WEB-страницы с "мягкой" конструкцией-код HTML

- Номинация: WEB-дизайн. Образец фреймового каркаса WEB-страницы (четыре фрейма)

- Номинация: WEB-дизайн. Образец фреймового каркаса WEB-страницы (шесть фреймов)

- Номинация: WEB-дизайн. Образец каркаса сайта с правым расположением меню

- Номинация: Разное.
Сделайте себе электронную визитку.

- Номинация: WEB-дизайн. Вставка и оптимизация Java-скриптов на страницах сайта (вынос кода скрипта за пределы страницы; перемещение java-кода в нижние теги страницы)

  

РАЗНОЕ:

- Номинация: WEB-дизайн. Спецификации.
Структура и содержание портала w3c.org

 

2. Решение сегодняшней задачи  Выпадающие меню с помощью CSS

 

 


ВОПРОСЫ-ОТВЕТЫ :


ВОПРОС :

 

ОТВЕТ :

Вопросы и ответы присылайте на E-mail:
vzlett@yandex.ru

 




 


kursi.nm.ru
Ответственный за выпуск - Александр Ольховский

 

Заходите на наш сайт
Раздел Компьютерные технологии находится в стадии становления; в него будут постоянно добавляться новые статьи (наших и сторонних авторов), справочная информация по вэб-дизайну, материалы для скачивания.


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

E-mail:
vzlett@yandex.ru


Hosted by uCoz