HTML Menu.

В этой статье будет показано Вам как сделать выпадающее меню на CSS . Преимущества такого меню думаю очевидно. Самое главное из них – это то, что такое меню будет работать при выключенном Java Script в браузере. Благодаря стилям CSS и свойству :hover наше меню оживет. Internet Explorer обрабатывает :hover только для ссылок, поэтому понадобится еще маленькая функция на javascript для имитации :hover для других элементов.

Кроме всего автор использует встроенные шрифты. Начиная с Firefox 3.5, Google Chrome 2, Opera 10 и Safari 3.1 стало возможным использовать в этих браузерах CSS-правило @font-face. На данный момент эти браузеры обрабатывают почти любой шрифт форматов OTF и TTF без необходимости конвертации в защищённый формат EOT. Это существенное отличие от Internet Explorer, который поддерживает использование шрифтов только в формате EOT.

Подробнее смотри о встроенных шрифтах: Embedded OpenType Fonts... На этой странице Вы найдёте достаточно большое количество разнообразных шрифтов.

• Горизонтальное HTML CSS меню.

  • Простой вариант меню.

    • Листинг меню.

  • Красивый вариант меню.

    • Листинг меню.

• Многоуровневое горизонтальное HTML CSS меню №1.

• Многоуровневое горизонтальное HTML CSS меню №2.

• Листинг csshover.htc...

• Вертикальное HTML CSS меню.

  • Простой вариант меню.

  • Красивый вариант меню.

Посмотрите, что получилось.

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

Простой вариант меню.

В этом примере используются шрифт: Gothic Rus.

Исходный код вы можете найти в Zip архиве, файл gorithont_menu.htm. 

Структура дерева меню:

• Домой

• Зодиакальные созвездия

  • Овен

  • Телец

  • Близнецы

  • Рак

  • Лев

  • Дева

  • Весы

  • Скорпион

  • Стрелец

  • Козерог

  • Водолей

  • Рыбы

  • Змееносец

• Рисунки знаков Зодиака

• Шаблоны Photoshop

Красивый вариант меню.

В этом примере используются шрифты: Gothic Rus и Zodiac Figure. Дополнительно для Microsoft Internet Explorer: Webdings и Wingdings, для остальных браузеров разработанный автором шрифт GoodPcSimvol.

Структура дерева меню: аналогичная смотри выше.

Исходный код вы можете найти в Zip архиве, файл gorithont_menu_pic.htm. 

Вертикальное HTML CSS меню.

В этом примере используются шрифты: Береста и Monotype Corsiva. Дополнительно для Microsoft Internet Explorer: Webdings, для остальных браузеров разработанный автором шрифт GoodPcSimvol.

В этом примере используются шрифты: Береста, Monotype Corsiva и Zodiac Pictogram. Дополнительно для Microsoft Internet Explorer: Webdings и Wingdings, для остальных браузеров разработанный автором шрифт GoodPcSimvol.

Комментарии и Пояснения.

To be continue...

АлкоПро - профессионально про алкогольный рынок России.