Аннотация: Цель. Научиться применять элементы HTML (списки и гиперссылки), а также свойства CSS (модель отображения, псевдоклассы гиперссылок) для формирования системы навигации на веб-странице.
Разместить на странице меню с набором гиперссылок - одна из важных задач в практике веб-дизайнера. Чтобы не утомлять внимание пользователя просмотром всего набора, ссылки обычно группируют по категориям, и в основное меню включают только категории. Только при выборе категории должны отобразиться соответствующие ссылки (или подкатегории).
Как правило, такие динамические меню принято создавать средствами языка Javascript, позволяющего совершать любой сложности манипуляции с элементами веб-страницы. Однако, существует и решение на CSS - довольно простое и красивое, хотя и не любую фантазию дизайнера выполняющее. Рассмотрим его пошагово.
- Популярные блюда
- Итальянская кухня
- Закуски
- Закуски
- Сласти
- Фрукты
- Подарки к празднику
- Юбилеи
- Малышам
- День рождения
- Поздравляем!!!
- Выбор по цене
- Меньше 1000 руб
- От 1000 до 1500 руб
- От 1500 до 2000 руб
- От 2000 до 3000 руб
- Дорого
- Фрукты и Овощи
- Сухофрукты и Орехи
- Корзины фруктов
- Горы фруктов
- Здоровая пища
- Без пестицидов
- Цветы
- Живые цветы
- Садовые цветы
- "Говорящие" цветы
- Корпоративные подарки
Названия ссылок и категорий придумайте самостоятельно. Важно, чтобы атрибут id внешнего списка имел значение MainMenu - далее ему будет назначен особый стиль по этому идентификатору).
#MainMenu > li { float: left; list-style-type: none; }
Отслеживайте изменения, происходящие с отображением документа, разделив окно редактора на представление исходного кода и конструктора. После применения указанного стилевого правила пункты внешнего списка (li ) расположились горизонтально (за счёт обтекания):
Рис.
7.1.
#MainMenu li:hover ul { display:block; }
Сохраните разрабатываемый документ, откройте его в браузере и убедитесь, что меню работает правильно.
- Назначьте якорям любого уровня вложенности в меню (правило #MainMenu a ) желаемый цвет (color ), гарнитуру (font ), а также уберите подчёркивание (text-decoration ).
- Назначьте элементам списка категорий (правило #MainMenu > li ) фоновый цвет (background ), внутренний отступ (padding ) и рамку справа (border-right ).
- Назначьте элементам вложенного списка ссылок (правило #MainMenu li li ) такой же фоновый цвет, как и в списке категорий, а также небольшой отступ и рамку снизу. Кроме того, уберите маркировку списка (list-style-type ).
- Уберите у списка ссылок (правило #MainMenu li ul ) поля и отступы (margin и padding ).
Небольшой проблемой является то, что некоторые элементы списка категорий увеличиваются в ширину при наведении на них указателя. Это является следствием того, что ширина элемента списка определяется шириной всего содержимого - включая вложенный список. Однако если выбросить вложенный список из нормального потока и позиционировать его абсолютно, то его ширина более не будет влиять на ширину родительского элемента. Поэтому укажите для списка ссылок абсолютное позиционирование, а для элементов списка категорий - относительное. Проверьте в браузере. Затем уточните положение вложенного списка относительно его контейнера путём задания значения свойств left и top (не опускайте выпадающий список слишком низко, иначе он станет пропадать при попытке выбрать в нём ссылку).
Зачем нужно было позиционировать элементы списка категорий относительно? Уберите соответствующее правило, и вам всё станет ясно.
Окончательный результат должен быть подобен следующему.
Liked:
26
Did not like: 12
В этой статье я покажу как написать простой плагин на jQuery, который будет строить из обычной HTML-разметки симпатичное динамическое меню. Первое, с чего мы начнём, - определимся, что именно будет делать плагин и какова наша цель. Итак:
Теперь определим, какие файлы нужно создать, чтобы проверить работу рассматриваемого примера. Вот они:
2. jquery.dynamenu.js - код плагина, помещенный в отдельный файл.
3. dynamenu.css - стиль нашего меню. Сюда помещаем весь CSS
Эти файлы с работающим меню можно будет найти в архиве, приложенном к статье. В конце статьи приведена живая демонстрация работы нашего меню. Обратите внимание, что в демонстрации вызов плагина размещен там же, где и сам код плагина. Это связано лишь с тем, что используемый нами механизм живых демо требует размещения JavaScript-кода в отдельном фрейме.
Начинаем писать плагин. Поехали!
1. Готовим HTML разметку страницыЗададим самую простую разметку для нашего меню. Пусть это будут несколько пунктов меню для нашего будущего сайта:
Новости сайта Уроки Photoshop Кисти для Photoshop Красивые шрифты
Тут всё просто - 4 div-элемента, у каждого задан класс dynamenu для того, чтобы потом передать его в качестве селектора нашему будущему плагину. Внутри каждого div-а гиперссылка с названием пункта меню.
2. Задаём CSS-стилиЧтобы стилизовать наше меню, используем всего два CSS-стиля. С их помощью мы сделаем фон каждого пункта меню серым, ширину меню в 300 пикселей с внешними и внутренними отступами по 5 пикселей, а все ссылки меню - чёрного цвета:
a.mlink { color:#000; text-decoration:none; } .dynamenu { background-color: #aaaaaa; width:300px; margin:5px; padding:5px; font-family: "Tahoma"; font-size: 9pt; }
3. Пишем "каркас" плагинаПервым делом, зададим каркас нашего плагина. Этот каркас частично взят с официального сайта jQuery и содержит так называемые "Best Practices" (лучшие практики и приемы - от разработчиков языка jQuery). В общем случае подобный каркас применим практически ко всем плагинам jQuery. Если Вы запомните и поймете, как функционирует этот каркас, то потом будете писать плагины на "раз-два". Выглядит он следующим образом:
(function($) { // список методов нашего плагина var methods = { init: function(options) { // сюда можно помещать инициализацию плагина. в нашем случае // для простоты здесь ничего не будет }, sliding: function () { // метод sliding нашего плагина будет непосредственно строить меню } }; // "регистрируем" наш плагин в пространстве имен jQuery. $.fn.dynamenu = function(method) { // здесь вызываем нужный метод внутри плагина } })(jQuery);
Ничего сложного в каркасе, как видите, нет. Зато он несёт в себе полезную информацию. Первый важный момент, который нужно понять в каркасе - мы собираем все методы, добавляемые к нашему плагину (init, sliding) в один объект - methods. Это позволяет не забивать пространство имен $.fn лишними функциями. Правильное указание пространства имен нашего плагина - очень важная часть процесса разработки плагинов как такового. Использование пространства имен гарантирует, что наш плагин с минимальной долей вероятности будет переписан другими плагинами или кодом, расположенными на одной и той же HTML-странице. Пространство имен также делает жизнь проще, т.к. помогает лучше следить за методами, событиями и данными.
Всегда используйте сокрытие методов внутри плагина, например в объекте methods. Помимо того, что это хороший стиль программирования, данный приём поможет вам избежать конфликтов с другими сторонними библиотеками и плагинами, а также позволит не засорять пространство имен jQuery
Следующий момент, на который стоит обратить внимание - конструктор нашего плагина. Это строка $.fn.dynamenu = function (method) {...}. Как видим, конструктор принимает один параметр - method . В качестве значения для параметра мы будем передавать строку, содержащую имя метода внутри объекта methods, который мы собираемся вызвать. Давайте заполним конструктор следующим кодом:
$.fn.dynamenu = function(method) { if (methods) { methods.init.apply(this, arguments); return methods[ method ].apply(this, Array.prototype.slice.call(arguments, 1)); } else { $.error("Метод" + method + " не существует!"); } }
Разберем, что мы сделали. Сначала мы проверяем, есть ли метод с именем, переданным в параметре конструктора, в объекте methods нашего плагина. Если метод есть, то мы вызываем сначала метод init - для инициализации нашего плагина, а затем вызываем тот метод, имя которого передали в параметре конструктора, причем передаем ему все оставшиеся аргументы. Если же метода с таким именем нет, то мы выдадим ошибку и плагин прекратит свою работу.
На данном этапе уже многое сделано! Уже теперь мы можем обращаться к нашему плагину и вызывать его методы, хоть и никакой полезной работы они пока не выполняют,. Я рекомендую поместить код нашего плагина в отдельный файл и назвать его jquery.dynamenu.js . Размещение кода плагина в отдельном файле является логичным - ведь плагин должен быть по своей сути универсальным и давать нам и другим разработчикам подключать его в готовом виде к своему сайту.
Теперь, когда наш каркас наполнен кодом, способным вызывать внутренние методы плагина, пора нарастить "мясо", то есть написать код, который будет непосредственно превращать наши div-блоки в красивое динамическое меню. Приступим...
4. Пишем код, создающий динамическое меню на jQueryВесь полезный код нашего плагина будет размещён в функции sliding , которая является внутренним методом плагина и находится в объекте methods . Давайте кратко опишем последовательность действий по превращению статичной разметки с нашими div-блоками в динамическое меню на jQuery:
Вот, собственно, и вся логика. А теперь посмотрим, как это реализовать:
return this.each(function() { $(this).css({"opacity":"0.4"}); $(this).hover(function() { $("a.mlink", this).css({"font-weight":"bold"}); $(this).animate({ opacity:1, "margin-left":"+=5" }, 100, "linear"); }, function() { $("a.mlink", this).css({"font-weight":"normal"}); $(this).animate({ opacity:0.4, "margin-left":"-=5" }, 100, "linear"); }); });
На всякий случай, поясню, что происходит. Итак, в самой первой строчке мы видим оператор . Он делает следующее: пробегает по переданному в функцию sliding набору элементов (т.е. все наши div-блоки) и выполняет код, размещенный внутри. После такого пробега по элементам мы возвращаем (оператор return) результат выполнения операций для каждого элемента набора, опять же, в виде набора. Таким образом наша функция sliding возвращает набор div-блоков, переданных на "вход" функции, только обработанный и уже превращенный в динамическое меню. Этим реализуется важная концепция jQuery - возможность использования нашего плагина в цепочке вызовов. Чтобы лучше понять, что такое цепочка вызовов, приведу пример:
$(".myelm").dynamenu("sliding").css({"border" : "1px solid red"});
В приведенном выше куске кода мы видим, что такое цепочка вызовов: сначала мы выбираем все элементы на странице с классом myelm, затем используем наш плагин dynamenu и затем снова по цепочке применяем уже стандартный метод jQuery css() для изменения стиля элементов. Если бы мы не возвращали из метода конструкцию return this.each(function() { ... }) , то использовать метод css() в "цепочке" уже бы не смогли.
Используйте возврат оператора this.each() для того, чтобы поддерживать принцип "цепочки" в ваших плагинах и делать их более универсальными.
Едем дальше, внутри оператора each(), где мы пробегаем по всем нашим div-блокам идет как раз начальная установка свойства "прозрачность" (opacity) элемента в 0.4. пункта. Максимальное значение opacity - это 1 (100%), поэтому мы делаем "прозрачность" в 40%. После этого мы ставим два обработчика на "наведение" (hover) мыши и "уход" мыши из области div-блока. В первом обработчике мы устанавливаем название пункта меню полужирным шрифтом и используем метод animate(), чтобы добиться "полной непрозрачности" пункта меню, а также делаем сдвиг вправо на 5 пикселей. В обработчике "ухода" мыши мы просто возвращаем элемент в начальное состояние - меняем снова шрифт на обычный (normal) и делаем сдвиг влево снова на 5 пикселей.
На этом всё! Наш плагин готов к использованию. Хоть, он и простой, но может хорошо пригодиться для создания динамического меню на сайте. Ниже по тексту - демонстрация работы нашего плагина. Для того, чтобы увидеть результат работы плагина, перейдите на вкладку Result.
Успехов в написании хороших плагинов! Комментарии, вопросы и отзывы всегда приветствуются;)
Первым делом следует уточнить, что официально такого термина нет. Вообще же под динамическим меню можно понимать такое меню, содержание которого меняется во время работы пользователя в зависимости от каких-либо внешних обстоятельств.
В данном случае речь идет о предмете, хоть и попадающим под эту расплывчатую формулировку, но более простом и прозаичном. Если меню, как таковому, свойственна динамика (вспомним, что инсталляция программы приводит к изменениям в нем) и имеется даже особо изменчивое меню "Документы", придуманное Microsoft, то я предлагаю поговорить о том, как организовать меню, содержащее именно ваши данные и изменяемое вами в процессе работы.
Выпустив Windows 95, компания Microsoft предприняла попытку перенести акцент с системно-программистских вещиц вроде "файлов" на понятные любому деловому человеку "документы". Для этого была усилена взаимосвязь между типами файлов и настойчиво предложено открывать их двойным щелчком мышки непосредственно по значку документа, а не из запущенного предварительно приложения. Что же, это не новинка и, в принципе, вещь более удобная, чем лазание по дискам в окне "Открыть".
Как приманку компания поставила в меню пункт "Документы", призванный обеспечить ускоренный доступ к последним из открывавшихся файлов. Критике это нововведение уже подвергалось, напомню лишь основные претензии: плохо справляется система с выставлением в меню именно открывавшихся последними документов, меню замусорено, документы не упорядочены и их нельзя структурировать тематически, наконец, они просто не все представлены.
Я раз десять пробовал модернизировать меню "Документы", но особо путного ничего не получилось. Могу предложить другой вариант. Представьте себе, что в системном меню на первом его уровне имеется один или несколько пунктов, открывающих доступ к системе подменю, соответствующей принятому вами разбиению документов на группы (по теме, времени, типу и т.п.), причем в подменю содержатся все находящиеся в вашем распоряжении файлы документов, их состав обновляется по мере создания или удаления, они переводятся из одного меню в другое, автоматически следуя за перемещениями файлов на диске.
Нормальный вариант быстрого доступа, просмотра и поиска документов? Тогда учтите, что реализуется такое динамическое меню проще простого. Надо лишь поместить в соответствующую главному меню директорию на диске ваши рабочие директории. Именно директории с живыми файлами, а не ярлыки. Сделайте это, и вы сразу получите доступ через меню к каждому из хранящихся там документов.
Но чтобы все выглядело тик-так, придется еще повозиться. Надо использовать длинные имена, тогда ваше пользовательское меню с документами получит человеческий вид. Это потребует от вас отказаться от милых сердцу DOS"овских каракатиц наподобие Docs, Doc1 и т.п. Ничего, надо привыкать называть вещи своими именами и забыть про восьмибуквенные подпольные клички.
Над именами придется подумать. Как я уже говорил, количество вложенных директорий не должно превышать 3, ну максимум 4 уровней. Их названия не следует делать слишком пространными, как и имена содержащихся в них документов. Иначе ваше меню будет гулять по экрану сначала слева направо, потом загибаться обратно и снова вперед. Замучаетесь гонять мышку. Избегайте дублирования слов. Если директория и, соответственно, подменю называются "Договоры", то не надо входящие в него документы называть "Договор №139-45 от...". Совершенно очевидно, что это договор, раз он лежит в папке с договорами. Старайтесь также с помощью нескольких слов, отведенных судьбой (или шириной экрана, если вам так больше нравится) на описание документа, отразить его содержание. Номер и дата - сведения прекрасные, но навряд ли вы с ходу вспомните, о чем был этот документ.
Ценой дополнительных усилий можно добиться согласования внутри цепочки, образуемой названиями подменю и конечного документа, падежей, спряжений и прочей нечисти. Глазу приятнее и менее утомительно для вас читать на экране прилично построенные фразы, а не общаться с компьютером на ломаном русском, как с представителем иностранного юридического лица. Например, если документ описывается выражением "Договор за 1996 год об аренде склада на ж.д. станции", то можно составить следующую цепочку меню: "Договор" - "за 1996 год" - "об аренде" - "склада на ж.д. станции". Быть может, кого-то покоробит название файла "склада на ж.д. станции", но с учетом выстраивающейся перед ним цепочки из названий директорий все получается правильно.
У организованного таким способом динамического пользовательского меню есть и недостатки. Во-первых, система не всегда обновляет меню сразу после попадания туда нового файла (удаления имеющегося). Видимо, где-то в лабиринтах многопоточности и многозадачности застревает команда о необходимости освежить меню. Немного неприятно, но случается не так уж часто, а после загрузки машины меню уж точно будет соответствовать тому, что записано на диске. (Это не значит, что я призываю каждый раз в подобных случаях перегружать машину, обычно можно обойтись перечитыванием директории в "Проводнике" по клавише .) Во-вторых, нехорошо хранить свои рабочие файлы внутри директории Windows. Придется вытащить оттуда папку "Главное меню" и следить за ней, как положено беспокоиться о сохранности пользовательской информации - делать резервные копии, очищать от мусора и т.д. Третья неприятность носит психологический характер - первое время уж очень непривычно видеть свои рабочие директории не внутри корневого оглавления диска, а где-то в "Главном меню". Но это проходит - привыкаешь.
Скрытые элементы меню
Еще один способ упростить содержание меню и, следовательно, повысить эффективность его использования - спрятать его часть на время нормальной работы.
В меню Windows 95 полным-полно вещей, которыми при нормальной работе пользоваться не приходится. К ним относятся ярлыки от программ деинсталляции приложений, различные файлы Readme и прочая текстовая информация от производителей, программы регистрации и формы для отправки по электронной почте. Сюда же можно зачислить и утилиты служебного плана, которыми вы пользуетесь только тогда, когда софт начинает хныкать или вести себя подозрительно. Для выполнения ежедневных процедур компьютерной гигиены удобнее всего (и достаточно) прибегнуть к услугам утилиты автоматического выполнения System Agent из комплекта Plus, вместо того чтобы запускать сканирование диска и дефрагментацию вручную. А раз так, то и постоянно держать эти программы в меню нет резона.
Однако не стоит и удалять из меню все, что в данный момент показалось лишним. Например, многие приложения при деинсталляции обращаются как раз к ярлыку Uninstall в меню, а не к самой программе. Бог им судья, но если ярлык удалить, то потом не получится чикнуть обычным путем приложение. Существует к тому же простой и безболезненный способ упростить меню, ничего оттуда не выбрасывая.
В Windows 95, как и в DOS, есть понятие скрытых файлов и директорий. При обычной работе вы не видите их на экране, так как система не показывает те файлы и каталоги, у которых установлен флажок "Скрытый". Флажок этот взводится и сбрасывается в окне свойств файла. Чтобы увидеть такие объекты, надо в "Проводнике" зайти через меню в "Вид"/"Параметры" и включить режим "Отображать все файлы".
Попробуйте сделать так. Ничего не удаляя, соберите в системном меню такую структуру вложенных уровней и пунктов, которая устроит вас при повседневной работе. Всю остальную начинку сделайте скрытой, размечая как отдельные ярлыки и файлы, так и целые директории и устанавливая у них соответствующий атрибут. Делать это лучше в режиме отображения всех типов файлов. Закончив упражнения, переключите режим отображения на нормальный, при котором скрытые файлы не видны, и посмотрите на результаты своего труда.
Если меню стало проще и удобнее, значит вам удалось внести в интерфейс Windows 95 еще одну полезнейшую настройку. Когда же придется заняться ковырянием в системных неполадках (а такое, увы, случается нередко), просто включите в "Проводнике" отображение всех файлов и получите в свое распоряжение полный набор элементов меню.
В принципе, аналогичный подход можно использовать в отношении рабочего стола, содержимое которого связано с папкой C:\Windows\Рабочий стол. Однако для десктопа система хранит не только ярлыки, но и порядок их размещения (он сокрыт в недрах реестра конфигурации), поэтому при переключениях режима отображения у меня на машине система собирала значки в алфавитном порядке. Что меня, естественно, не устроило. Проблему создания нескольких раскладок рабочего стола можно решить, но лучше уже другим путем.
Возможности обустройства меню и рабочего стола в Windows 95 (в отличие от сегодняшней беседы) на описанном далеко не заканчиваются. Новые подходы к оптимизации рабочего места может найти любой пользователь, если выкроит время для экспериментов и попробует несколько нетрадиционно применить стандартные и общеизвестные системные средства из арсенала Microsoft.
Роман Соболенко
Слышали ли вы когда либо такое утверждение, что "нельзя сделать динамическое выпадающее меню исключительно на 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" выбирает "