Динамическая настройка меню. CSS переходы для анимации меню
Не все шаблоны предлагают возможность использования встроенного в них динамического меню, когда при наведении на пункт меню курсора мыши скрытые подменю раскрываются выпадающим списком. Статические меню могут быть, конечно, самодостаточными, при условии, если структура вашего сайта состоит всего из нескольких разделов. Но такое характерно только для сайтов-визиток. Как правило, уважающий себя сайт имеет достаточно разветвленную структуру, что само по себе заставляет прибегать к раскрывающимся меню, поскольку ширина или высота веб-страницы не бесконечны и не смогут разместить все пункты в одну строку (случай горизонтального положения меню) или в один столбец (случай вертикального меню). Кроме того, замечено, что пользователи очень не уважают меню, в которых больше 5-10 пунктов, для них становится утомительным вчитываться в бесконечный перечень пунктов меню сайта, они уходят с него, даже не дойдя до последнего пункта, даже, быть может, как раз того, что искали на вашем сайте. Поэтому необходимость динамического меню очень серьезно мотивирована. Существует специальное расширение, которое инсталлируется в вашу Joomla и позволяет в режиме конструктора вам самим создать и оформить меню по своему усмотрению. Но даже если вам не нужно динамическое меню, вам вполне достаточно статического, или выбранный вами шаблон сайта уже имеет таковое, не спешите игнорировать эту тему. Она в любом случае позволит вам лучше понимать специфику веб-приложений, когда вы сами поработаете в программе Swmenufree.
Com_swmenufree5.2_J1.5Именно так называется плагин, который мы скачиваем отсюда и устанавливаем уже известным нам способом на своем сайте. После установки в меню «Компоненты» выбираем «SwMenuFree» и переходим в панель управления этой программы. Перед нами окно с множеством настроек и вкладками «Параметры модуля», «Размеры и положение», «Цвет и фон», «Шрифты и отступы», «Границы и эффекты». Особо не стоит пугаться обилия настраиваемых параметров, но оговоримся сразу: работа предстоит творческая.
В строке «Имя модуля» мы сразу вводим название меню, которое собираемся создать. Это название важно для системы, а не для нас, поскольку после его создания меню с таким именем вы все равно не увидите в списке меню вашего сайта. Дело в том, что мы не создаем новое меню как таковое, а преобразуем содержимое любого, по выбору, из уже созданных в новый, динамический вариант. Мы для ясности использовали название «Динамическое меню».
В строке «Источник меню» выбираем «Trans Menu», так как этот вариант, из всех трех возможных, самый оптимальный для нашего шаблона. Кто не верит, пусть попробует остальные, чтобы в результате согласиться с нашей версией.
Строка «Источник меню» позволяет нам выбрать из списка то, уже существующее меню сайта, которое мы хотим представить в динамическом виде. Собственно, выбор не велик, ведь у нас пока всего одно меню – Главное, с системным именем mainmenu. Его-то в этом списке и выбираем.
В строке «Родитель» оставляем значение TOP. Это означает, что наше меню не является дочерней веткой, а само выступает в качестве родителя, способного «порождать» другие ветки меню.
Спускаемся в следующий блок настроек – «Параметры таблицы стилей». В строке «Загрузка таблицы» выбираем «Внедрить стиль напрямую в страницу», это позволит нашему меню использовать именно те стили оформления, которые мы сами ему зададим, игнорируя навязываемые шаблоном сайта стили.
В строке «Суффикс класса модуля» ничего не пишем.
Следующий блок «Параметры кэширования» игнорируем.
Блок «Общие параметры модуля». Проставляем флажки так, как показано на рисунке.
Блок «Размещение и доступ». В строке «Размещение модуля» ставим header1 (это положение горизонтального меню предусмотрено для данного шаблона. Кстати, у нас на данный момент там стоит модуль поиска по сайту, поэтому вам нужно будет предварительно переключить его в другую позицию - banner).
Другие настройки в этой вкладке не трогаем, пока у нас на сайте всего одно меню, они не актуальны, и значения, по умолчанию выставленные в них, нас вполне удовлетворяют. Хотя, если вы желаете, чтобы ваше главное меню отображалось не на всех страницах сайта, а только на нескольких, - выберите в блоке «Отображение модуля меню на страницах» нужное.
Переходим в следующую вкладку – «Размеры и положение». Здесь мы сможем настроить высоту, ширину элементов меню и подменю, а также способ расположения на странице.
Блок «Положение и ориентация меню». В строке «Меню - Выравнивание:» ставим left, т.к. выравнивание текста меню по левому краю считается оптимальным. В строке «Меню / Подменю - Ориентация:» выбираем horizontal/down/right (горизонтально-вниз-вправо). Не забываем после каждого внесенного изменения в настройки нажимать кнопку «Просмотр». После чего вы увидите ваше меню в отдельном окне, в котором оно функционирует и выглядит так, как будет выглядеть на странице после сохранения результатов. Полюбовавшись, можно закрыть это окно.
Блок «Размеры элементов меню». Здесь все значения равны нулю, что означает размер элементов меню по размеру содержащегося в нем текста. Это очень удачный для нас вариант, т.к. мы создаем горизонтальное меню, а в нем, в отличие от вертикального, все элементы не должны быть одного размера.
В блоках «Смещения меню верхнего уровня» и «Смещения подменю» можно задать величину смещения элементов меню относительно друг друга. Хотя в этом нет особой объективной необходимости.
Вкладка «Цвет и фон». Здесь начинается самое интересное. Здесь мы должны проявить максимум творческого подхода, оформив все элементы нашего меню в гармонирующие с фоном шаблона сайта цвета. Фон элементов меню можно заливать цветом и изображениями (вспоминаем PowerPoint!). Причем заливка изображением имеет доминирующее значение над заливкой цветом: если вы зальете обоими вариантами, результирующей окажется заливка изображением. Так как у нас нет никаких изображений, блок «Фоновые изображения» пока пропускаем. А в блоке «Цвет фона» начинаем работать. Чуть ниже находится палитра выбора цветов и подсказка, как это сделать: «Выберите цвет на палитре и нажмите кнопку выбор около поля, к которому вы хотите применить выбранный цвет».
Не забываем всякий раз просматривать результат. Какие цвета выбрать, смотрите сами, но все же лучше будет после просмотра в отдельном окне нажать кнопку «Сохранить» и перейти на главную страницу сайта (если вы работаете с сайтом в двух вкладках – главная страница и админпанель – как мы предлагали изначально, то не составит трудности переключиться на соседнюю вкладку браузера), чтобы воочию увидеть соответствие выбранного цвета фону шаблона сайта.
Но мы не можем использовать всех возможностей.
Изменение структуры менюВо-первых, перейдя на главную страницу, мы видим, что у нас два главных меню: одно – новое, над которым мы сейчас работаем, а другое – старое, которое стоит в своей позиции в правой части страницы. Не удивляйтесь, чтобы меню не дублировались, одно из них надо отключить, а именно старое, точнее, отключить модуль его отображения. Идем в «Расширения» - «Модули» и отключаем модуль «Главное меню», щелкнув по зеленой галке в его строке, превратив её в красный круг с белым крестом. Переходим на вкладку, в которой открыта главная страница и видим, осталось одно меню.
Во-вторых, мы не можем настроить оформление подменю, поскольку у нас пока их нет. Поэтому нам нужно перестроить структуру нашего меню так, чтобы основные элементы стали подпунктами.
Для этого идем в меню настройки: «Меню» - «Главное меню». Перед нами список основных элементов меню. Давайте два из них оставим основными, а остальные переведем в разряд подменю. Нам нужно будет последовательно открывать каждое из «приговоренных» к роли подменю основных элементов меню и в строке «Родительский пункт меню» щелкнуть тот элемент, чьим подменю мы делаем данный элемент. На рисунке показан уже результат пяти последовательных выборов для каждого элемента (бывшие основные элементы «Форум», «Галерея», «Загрузка», «Блог категории», «Демонстрация», чьим родительским элементом раньше являлся невидимый пункт «Вверху», стали «детьми» основного пункта «Возможности»).
Чтобы лучше понять механизм этих изменений, рекомендую после каждогоизменения статуса элемента меню и его сохранения выходить на главную страницу, нажимать F5 и смотреть на результат. Двух-трех раз, думаю, будет достаточно. Можно пойти даже далее и еще усложнить меню, например, сделав родителем двух последних элементов подпункт «Загрузка». В результате мы будем иметь трехуровневую иерархию в своем меню.
Количество уровней, которые можно создать подобным образом – не ограничено, но больше трех уровней делать не рекомендуется.
Теперь возвращаемся в панель управления SwMenuFree и донастраиваем оставшиеся элементы подменю, а также цвет шрифта и цвет границ в соответствующих одноименных блоках вкладки «Цвет и фон». Следует пояснить, что цвет меню, подменю и шрифта устанавливается для двух вариантов: вне курсора и когда на подпункт (пункт и его содержимое) наведен курсор мыши. Эти цвета, разумеется, должны различаться.
Вкладка «Шрифты и отступы». Здесь можно выбрать вид шрифта и отступы от границы ячейки меню до текста этой ячейки. Рекомендую здесь ничего не менять, кроме толщины шрифта, поскольку обычное начертание сливается подчас с фоном заливки (в блоке «Плотность шрифта» выбираем bold).
Вкладка «Границы и эффекты». На рисунке указаны наши настройки.
Жмем сохранить. Меню готово. Вам больше не нужно заходить в панель управления SwMenuFree, разве что если вы решите поменять цвет оформления при текущем шаблоне или при смене шаблона сайта, т.к. при этом настройки оформления меню не сохраняются.
Но мы еще не рассмотрели возможность заливки фона рисунком.
Заливка фона меню рисункомЭтот способ сложнее, но возможности оформления дает неограниченные. Для создания изображений мы воспользуемся GIMP (помнится, в 5 занятии мы с его помощью создавали логотип сайта, вернее, пытались создать).
Нам нужно создать прозрачное изображение размером 200 ×200px. «Файл» - «Создать».
Настройки диалогового окна, как на рисунке. Теперь берем инструмент «Прямоугольное выделение» (нажимаем клавишу R) и рисуем на нашем прозрачном изображении рамку выделения шириной пикселей 100 и высотой 25 пикселей. В панели инструменов, в строке «Размер», при перемещении мыши вы видите изменяющиеся цифры высоты и ширины создаваемого выделения, в зависимости от этих значений мы и направляем нашу мышку в ту или иную сторону, пока значения не будут равны 100 и 25 пикселей соответственно. Получившееся выделение мы должны залить темно-коричневым цветом, воспользовавшись инструментом «Плоская заливка» (Shift+B) и выбрав нужный цвет в палитре. Палитра вызывается на экран щелчком по прямоугольнику цвета переднего плана в панели инструментов. (Вообще все кнопки панели обладают подсказками, достаточно задержать курсор на каком-либо значимом элементе панели – тут же выскакивает подсказка).
В палитре нужно щелкнуть курсором в подходящий цвет и согласиться с выбором. После этого щелкаем внутри выделения – и оно заливается выбранным цветом.
Теперь нам нужно выделить полоску толщиной 3 пикселя по нижнему краю нашей заливки. Мы делаем это, как только что выделяли первую область, ориентируясь на цифры в панели инструментов (в строке «Размер»). Если вы уже отпустили курсор, а цифры все не те, скажем, больше или меньше нужных, подводим курсор к границе выделения. Как только он меняет форму, придавливаем левую кнопку мыши и тащим курсор вниз или вверх. Отпустив мышь, видим, что таким образом мы увеличили или уменьшили область выделения. Пробуем еще раз, доведя область выделения до нужных нам размеров. Заливаем её оранжевым цветом.
Теперь делаем слой частично прозрачным: меню «Окна» - «Панели» - «Слои». В появившейся панели видим прямоугольник текущего слоя, выделяем его щелчком и перемещаем ползунок в строке «Непрозрачность» так, чтобы значение стало равным 80. Наша заливка стала немного прозрачной. Теперь из всей этой заливки нам нужно вырезать тонкую полоску высотой 25 пикселей и шириной 3 пикселя. Берем инструмент «Кадрирование» и, как до этого инструментом выделения, охватываем нужный прямоугольник, опять же ориентируясь на размеры в панели. Если промахнулись, исправляем ошибку, так же, как и с выделением, в плане исправления погрешностей это идентичные инструменты. (Для работы с мелкими объектами лучше увеличить масштаб изображения до 200-400%. Выпадающий список с возможными размерами масштаба – в строке состояния окна с изображением, промахнуться трудно.) После того, как нужные размеры достигнуты, щелкаем внутри выделенного прямоугольника и получаем наше первое готовое изображение для кнопки меню. Не удивляйтесь, что оно такое маленькое, браузер повторит его столько раз, сколько нужно для заполнения всей площади кнопки. Сохраняем его в формате.png на Рабочем столе под именем а2.
Создаем еще одно прямоугольное изображение 25 на 3 пикселя, только залитое сплошным коричневым цветом, тем же, что и первое. Сохраняем его под именем a1.png.
Идем в админку сайта, запускаем SwMenuFree. Вкладка «Цвет и фон». Блок «Фоновые изображения». Строка «Меню - фон:», кнопка «Выбор». Нам нужно теперь загрузить наши изображения на сайт. В появившемся окне жмем кнопку «Обзор». Указываем наш рисунок a1.png на Рабочем столе и жмем кнопку Upload. Он загружается в папку на сайте. Чтобы вставить его в качестве фона пункта меню, щелкаем прямо по загруженному на сайт изображению и жмем OK. То же самое, но только в строке «Меню - фон при наведении:» проделываем с изображением a2.png.
Если все сделали правильно, получилось очень оригинальное меню: в спокойном состоянии меню однотонное, а при наведении курсора в нижней части элемента меню появляется оранжевая полоса. Когда быстро ведешь по меню мышкой, эта полоса стремительно пробегает по всему меню.
Контрольные вопросы:Наверняка вы видели на некоторых веб-сайтах динамичные и анимированные меню, которые изменяются при прокрутке вниз. Минимизируя главное меню навигации, вы оставляете больше места для содержания. В этом уроке мы объясним, как вы можете создать меню самостоятельно с помощью HTML5, CSS3 и немного jQuery.
Если вы хотите, чтобы особое внимание фокусировалось на содержании сайта, а также позволяло создавать более крупную и впечатляющую навигацию при первом посещении пользователем веб-сайта, то такого рода меню вам подойдет как нельзя лучше. Вы можете отлично продемонстрировать свой бренд или логотип, и после первоначального ознакомления с сайтом, уменьшить некоторые элементы, что позволит пользователю обратить главное внимание на ваше содержание.
Есть несколько способов это сделать. В этом уроке мы объясним, как создать фиксированное меню во всю ширину страницы, которое изменяется в высоте вместе с логотипом, создавая сведенную к минимуму версию исходного оригинала. При желании, вы также можете заменить логотип на другой вариант, например инициалы или иконку, но имейте в виду, что консистенция очень важна здесь, так чтобы пользователь понимал, как элемент изменился и что его главная цель по-прежнему является навигация по сайту.
Создание базовой структуры в HTML5
Мы начнем с создания основного HTML кода, который нам понадобится. Для начала, мы будем придерживаться очень простой структуры HTML5.
Теперь, когда наш первоначальный HTML код написан, мы добавим код для меню, а также некоторые другие детали для хедера нашего HTML файла.
Как создать анимированное меню | WebDesignMagazine
- Главная
- Статьи
- Это очень клевый сайт!
Крутим вниз и смотрим как изменится меню
Все! Приехали!
В нашем : мы добавили мета-тег для автора, чтобы указать создателя документа, после чего мы включили известный “сброс CSS” от Эрика Мейера, что приведет к сбросу почти каждого элемента в HTML файле, давая вам более понятный и простой документ для работы. И так как мы будем использовать JQuery позже, в последней строке нашего главного элемента мы импортируем его через JQuery CDN.
В нашем теге, мы использовали по умолчанию HTML5 элемента. Наш будет во всю ширину страницы и будет нести ответственность за изменения между большими и малыми версии меню. Мы даем нашему класс с именем “large”, так чтобы мы могли изменить некоторые специфические свойства в CSS, чтобы преврать наше меню в уменьшенную версию. это наш меню-контейнер, который содержит изображение логотипа нашего веб-сайта и простой неупорядоченный список меню с тремя ссылками.
Поскольку у нас здесь нету никакого контента, будет использоваться, чтобы растянуть страницу и заставить действовать прокрутку.
И это все по HTML части. Теперь нам нужно стилизовать элементы при помощи CSS и сделать меню динамичным.
Стилизация меню и страниц
/* Импортируем шрифт Amaranth */ @import url(//fonts.googleapis.com/css?family=Amaranth); /* Основной стиль */ body{ background-color: #ebebeb; } ul{ float: right; } li{ display: inline; float: left;} img.logo{float: left;} /* Размер и центровка меню */ nav{ width: 960px; margin: 0 auto;}
Немного этого CSS сделает наше меню 960px шириной по центру, при организации нашего меню справа и логотипа слева. Мы также импортируем Amaranth шрифт от Google Web Fonts, чтобы использовать его для нашего текста на странице.
Section.stretch{ float: left; height: 1500px; width: 100%; } section.stretch p{ font-family: "Amaranth", sans-serif; font-size: 30px; color: #969696; text-align: center; position: relative; margin-top: 250px; } section.stretch p.bottom{ top: 100%; }
Здесь мы просто заставляем страницу растянуться, чтобы спровоцировать скроллинг (прокрутку), и позиционирование текста для обозначения начала и конца содержания.
Header{ background: #C7C7C7; border-bottom: 1px solid #aaaaaa; float: left; width: 100%; position: fixed; z-index: 10; } header a{ color: #969696; text-decoration: none; font-family: "Amaranth", sans-serif; text-transform: uppercase; font-size: 1em; } header a.active, header a:hover{ color: #3d3d3d; } header li{ margin-right: 30px; } /* Размеры для увеличенного меню */ header.large{ height: 120px; } header.large img{ width: 489px; height: 113px; } header.large li{ margin-top: 45px; }
Здесь мы заканчиваем основную стилизацию нашего заголовка. будет служить нашим меню контейнером. Он будет содержать наш элемент и будет служить элементом, где мы определяем цвет фона, высоту меню, стиль меню ссылок и другое. Он будет адаптироваться к ширине экрана со свойствами ширины: 100% и будет оставаться фиксированными в течение других элементов на веб-сайте. Важно не забуть задать z-индекс, чтобы этот элемент перекрывал остальные части страницы, а также положения:fixed, чтобы сделать div закрепленным вверху, так чтобы он оставался на том же положении, в то время как пользователь прокручивает веб-сайт. Как вы видите, кроме установки стилей для заголовков, мы также устанавливаем некоторые специфические стили для “large” класса, используя header.large. Начальное состояние нашего меню будет большим, и поэтому мы здесь определяем только нужные стили, чтобы оно выглядело, как мы хотим, при первоначальном входе пользователя на страницу.
Динамическое изменение размера меню
Наше меню сделано и стилизовано, но мы все еще хотим поработать над его минимизацией. Для создания этого «состояния», мы будем создавать новый класс для в CSS под названием “small”, который будет ответствен за изменение свойств, которые мы должны модифицировать. Мы уже определили большое меню, так что теперь мы просто должны сделать наше меню короче, наше изображение меньшего пропорционального размера, а (margin top) мы используем в наших элементах
/* Sizes for the smaller menu */ header.small{ height: 50px; } header.small img{ width: 287px; height: 69px; margin-top: -10px; } header.small li{ margin-top: 17px; }
Итак, как вы видите, эти стили практически идентичны тем, которые в большей меню, мы просто изменили класс “large” на “small” и изменили значения, которые мы использовали, на меньшие. Мы используем отрицательные марджин-топ на изображение, чтобы централизовать его в контейнере, так как изображение имеет тонкую тень и выше, чем написание для его приспособления. Теперь у нас есть все необходимые стили, чтобы настроить меню размера изменения, и если вы попытаетесь изменить его в вашем , вы увидите в браузере, что меню станет меньше. Но нам нужно, чтоб оно было динамичным.
Изменение класса меню при помощи jQuery
При всех наших стилях на местах, нам просто нужно добавить немного JavaScript, чтобы переключатся между классами «large» и «small». Так как мы хотим изменить это на основе прокрутки пользователем, мы будем использовать.ScrollTop () функцию в jQuery. Эта функция позволит нам получить или установить позицию прокрутки в пикселях. Положение прокрутки является количеством пикселей, которые уже были прокручены в окне браузера. В этом случае мы просто должны знать сколько пикселей пользователь прокрутил, чтобы мы могли вызвать наш код и переключиться между классами:
$(document).on("scroll",function(){ if($(document).scrollTop()>100){ $("header").removeClass("large").addClass("small"); } else{ $("header").removeClass("small").addClass("large"); } });
Если пользователь прокрутил более 100 пикселей, то тогда будет удален класс «large», который мы создали, и добавлен наш новый класс «small». Таким образом, меню будет изменяться в размере, как мы ранее определили в CSS. Попробуйте, к этому времени оно должно уже работать, но вы могли заметить, что переходы между классами, кажутся очень резкими.
CSS переходы для анимации меню
Для того, чтобы гладко переключаться между классами в нашем меню, мы будем использовать CSS переходы. Просто используйте этот кусок кода рядом с остальной частью вашего CSS.
Header,nav, a, img, li{ transition: all 1s; -moz-transition: all 1s; /* Firefox 4 */ -webkit-transition: all 1s; /* Safari and Chrome */ -o-transition: all 1s; /* Opera */ }
Здесь мы определили переходы для всех свойств CSS для , и
Слышали ли вы когда либо такое утверждение, что "нельзя сделать динамическое выпадающее меню исключительно на CSS для IE"? Уверен, что да. И что, вы-таки верите этому? Правильно, лучше не верьте.
Цель, которой мы хотим достичь в этой статье
Цель данной статьи - сделать выпадающее меню для IE, сделанное исключительно на CSS. Начав с этой постановки, я расширил задачу до того, чтобы заставить работать такое меню в других наиболее известных браузерах (прим. пер.: из комментариев выясняется, что этими браузерами являются Opera 7.x и последние версии Firefox).
Цель, которой мы хотим достичь в этой статье, в принципе более или менее общеобразовательная, т.е. дать общее представление о некоторых "скрытых" и редко используемых особенностях браузеров.
Также особенно любопытные могут в этой статье найти некоторые ухищрения, с помощью которых можно достичь определенных нестандартных результатов. Ну и для разработчиков эта статья может стать поводом для размышления или источником новых идей.
Каким мы представляем уровень читателя.
Вообще-то я думал о том, чтобы пометить эту статью как для "углубленного изучения (advanced)". Но я уверен, что даже не самые опытные разработчики хорошо поймут то, что написано в статье. Короче, читатель просто обязан знать основы CSS и
HTML.
Чем это меню отличается от всех других?
Я долго искал в сети меню, которые были бы сделаны на CSS, но не нашел ни одного решения, которое бы работало без глюков в IE. Однако же я нашел много интересных идей, которые и привели меня к тому результату, который будет здесь описан. Да, мой код тоже не совершенен, но у меня попросту нет времени, чтобы выправить все ошибки. Самое интересное альтернативное решение из всех, что я видел (которые используют CSS), основано на использовании псевдокласса hover для элементов LI. А я-то никогда и не думал, что такое возможно, впрочем, как и не думал о том, что вообще возможно сделать выпадающее меню для IE без скриптов...
Основным отличием между моим и другими меню является то, что мое работает в IE. Все решения, которые я видел, используют элемент LI как основной элемент для псевдокласса:hover, однако Microsoft решила, что этот псевдокласс может быть использован только для
элемента A. Большинство сайтов делают оговорку, что их меню работают только в браузерах Opera 7.x или Mozilla. Но ведь эти браузеры используются только пятью процентами пользователей! Да, такие меню хороши в этих браузерах, но к сожалению не могут быть видны в большинстве самых распространенных браузеров. Сейчас мы исправим это недоразумение.
Что такое меню, сделанное с помощью только CSS?
Это динамическое меню, для создания которого используется только CSS, и не используются скрипты (например, написанные на JavaScript).
Что, не верится?
Давайте рассмотрим код:
<
STYLE type
=
text
/
css id
=
"default"
title
=
"default"
name
=
"default"
>
*::-
moz
-
any
-
link br
,*:-
moz
-
any
-
link br
{
/*a workarround for mozilla*/
display
:
none
;
}
div
#menu * {
cursor
:
pointer
;
/*because IE displays the text cursor
if the link is inactive*/
}
Disabled
{
color
:
red
!
important
;
background
:
none
!
important
;
}
Div
#menu {
background
:
#F5F5DC;
height
:
15px
;
white
-
space
:
nowrap
;
width
:
100
%;
}
Div
#menu .a {
background
:
#F5F5DC;
border
:
1px solid
#F5F5DC;
color
:
#000000;
text
-
decoration
:
none
;
}
Div
#menu .a table {
display
:
block
;
font
:
10px Verdana
,
sans
-
serif
;
white
-
space
:
nowrap
;
}
Div
#menu table, div#menu table a {
display
:
none
;
}
Div
#menu .a:hover, div#menu div.menuitem:hover {
background
:
#7DA6EE;
border
:
1px solid
#000080;
color
:
#0000FF;
margin
-
right
:-
1px
;
/*resolves a problem with Opera
not displaying the right border*/
}
Div
#menu .a:hover table, div#menu div.menuitem:hover table{
background
:
#FFFFFF;
border
:
1px solid
#708090;
display
:
block
;
position
:
absolute
;
white
-
space
:
nowrap
;
}
Div
#menu .a:hover table a, div#menu div.menuitem:hover table a {
border
-
left
:
10px solid
#708090;
border
-
right
:
1px solid white
;
/*resolves a jump problem*/
color
:
#000000;
display
:
block
;
padding
:
1px 12px
;
text
-
decoration
:
none
;
white
-
space
:
nowrap
;
z
-
index
:
1000
;
}
Div
#menu .a:hover table a:hover, div#menu div.menuitem:hover table a:hover {
background
:
#7DA6EE;
border
:
1px solid
#000000;
border
-
left
:
10px solid
#000000;
color
:
#000000;
display
:
block
;
padding
:
0px 12px
;
text
-
decoration
:
none
;
z
-
index
:
1000
;
}
Td
{
border
-
width
:
0px
;
padding
:
0px 0px 0px 0px
;
}
Menuitem
{
float
:
left
;
margin
:
1px 1px 1px 1px
;
padding
:
1px 1px 1px 1px
;
}
Menuitem
* {
padding
:
0px 0px 0px 0px
;
}
#other {
}
#moz{
}
#moz::-moz-cell-content{
height
:
auto
;
visibility
:
visible
;
}
#other::-moz-cell-content{
height
:
1px
;
visibility
:
hidden
;
}
#holder {
width
:
100
%;
}
<
TABLE id
=
holder
>
<
TR
>
<
TD id
=
"other"
>
<
DIV id
=
"menu"
>
<
DIV
class=
"menuitem"
>
<
a
class=
"a"
href
=
"#"
>
File
<
BR
>
<
TABLE
>
<
TR
>
<
TD
><
a href
=
#2>click me
<
TR
>
<
TD
><
a href
=
#3>Save
<
TR
>
<
TD
><
a href
=
#4>Close
<
DIV
class=
"menuitem"
>
<
A
class=
"a"
href
=
"#11"
>
Help
<
BR
>
<
TABLE
>
<
TR
>
<
TD
><
a
class=
"disabled"
>..
<
TR
>
<
TD
><
a href
=
#13>Index
<
TR
>
<
TD
><
a href
=
"#14"
>
About
<
TR
>
<
TD id
=
"moz"
>
Mozilla specific menu
!
<
DIV id
=
"menu"
>
<
DIV
class=
"menuitem"
>
<
a
class=
"a"
href
=
"#"
>
Filezilla
<
TABLE
>
<
TR
>
<
TD
><
a href
=
#2>Open
<
TR
>
<
TD
><
a href
=
#3>Save
<
TR
>
<
TD
><
a href
=
#4>Close
<
DIV
class=
"menuitem"
>
<
A
class=
"a"
href
=
"#11"
>
Helpzilla
<
TABLE
>
<
TR
>
<
TD
><
a
class=
"disabled"
>..
<
TR
>
<
TD
><
a href
=
#13>Index
<
TR
>
<
TD
><
a href
=
"#14"
>
About
<
BR
>
Что происходит, почему все работает?
Сразу оговорюсь, что в этой статье я не буду вас учить использованию CSS. Поэтому сразу переходим к рассмотрению принципа работы меню - к псевдоклассу ":hover". Да, это именно класс. Т.е. селектор может наследовать другой селектор, который включает ":hover". В нашем случае "A:hover TABLE" выбирает "