Создание динамического меню навигации при помощи списков и правил CSS
Аннотация: Цель. Научиться применять элементы 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 (не опускайте выпадающий список слишком низко, иначе он станет пропадать при попытке выбрать в нём ссылку).
Зачем нужно было позиционировать элементы списка категорий относительно? Уберите соответствующее правило, и вам всё станет ясно.
Окончательный результат должен быть подобен следующему.
Первым делом следует уточнить, что официально такого термина нет. Вообще же под динамическим меню можно понимать такое меню, содержание которого меняется во время работы пользователя в зависимости от каких-либо внешних обстоятельств.
В данном случае речь идет о предмете, хоть и попадающим под эту расплывчатую формулировку, но более простом и прозаичном. Если меню, как таковому, свойственна динамика (вспомним, что инсталляция программы приводит к изменениям в нем) и имеется даже особо изменчивое меню "Документы", придуманное 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.
Роман Соболенко
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.
Успехов в написании хороших плагинов! Комментарии, вопросы и отзывы всегда приветствуются;)
Слышали ли вы когда либо такое утверждение, что "нельзя сделать динамическое выпадающее меню исключительно на 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" выбирает "
