Двухуровневое меню CSS и HTML занимает два

Первую часть этой серии из двух частей я закончил выпадающим двухуровневым рабочим меню с использованием CSS и HTML. Тем не менее, мы обнаружили, что не все было так хорошо, когда речь шла, в частности, об Internet Explorer 6. Цель этой части этой серии заключается в том, чтобы закрыть пробелы и убедиться, что наши меню будут работать в Firefox, Opera 9.52 и 9.6. , Safari 3, Internet Explorer 6 и 7, и мы будем уверены, что он работает с Google Chrome. Итак, начнем.

Для меня самый простой способ справиться с подобной ситуацией — перечислить браузеры и версии, которые вы хотите или должны поддерживать, и затем работать сверху вниз. Таким образом, для этой статьи мы будем использовать порядок браузеров, как указано выше. Важно отметить, что как только меню работает в вашем текущем тестовом браузере и вы переходите к следующему, вы не можете просто забыть о предыдущем браузере. Исключая Internet Explorer, на который мы нацеливаемся напрямую, используя условные комментарии, нам, скорее всего, потребуется внести изменения, которые могут повлиять на браузеры, которые уже прошли тест, поэтому мы должны вернуться и подтвердить, что все по-прежнему в порядке. во всех протестированных браузерах.

С учетом сказанного давайте откроем файлы dropdown.html и flyout.html в Firefox. Неудивительно, что, как мы видели в предыдущей статье, Firefox отображает наше меню именно так, как и ожидалось. Нет, это было достаточно просто, затем Opera 9.52. Откройте те же два файла. Опять без сюрпризов, давайте откроем эти файлы в последней версии Opera, Opera 9.6. Все по-прежнему, как и ожидалось, на Safari. Тем не менее, все, как и ожидалось, не разрабатывается для Интернета просто и легко.

Далее наш старый любимый Internet Explorer. Тестирование нескольких версий IE на одной машине было проблемой, с которой разработчики сталкивались в течение долгого времени. Evolt.orgнекоторое время назад создал кладбище браузеров, чтобы хранить копии всех старых версий браузеров, а также имел версию, которую можно было устанавливать рядом на одном компьютере. По большей части они работали хорошо и до сих пор используются многими разработчиками.

Некоторые разработчики используют такие сервисы, как снимки браузера, чтобы сделать снимок экрана своей страницы в различных браузерах на разных платформах, и это определенно имеет место. Однако, когда вы хотите протестировать интерактивные элементы страницы, такие как эти меню, этот тип тестирования просто не подходит. Недавно я обнаружил IE Tester от Core Services. Несмотря на то, что это все еще только в альфа-версии, это уже замечательный инструмент и мой инструмент тестирования, когда дело доходит до IE.

Если у вас еще нет копии IETester, зайдите на сайт IETester и загрузите последнюю версиюбесплатно, прежде чем продолжить. После завершения загрузки продолжайте и установите свою копию. Идеальной средой для запуска IETester является Windows Vista или Windows XP с установленным IE7. После того, как вы установили IETester, запустите приложение. Вам будет представлен следующий экран:

Затем нам нужно открыть вкладку с нашей первой версией IE, в которой мы хотим протестировать наше меню. Здесь я буду работать от наивысшего к низшему. Идите вперед и нажмите стрелку вниз на кнопке «Новая вкладка» и выберите IE 8 beta 2.

Теперь здесь мы сталкиваемся с одной из недостающих функций в IETester, которая заключается в возможности открыть локальный файл в текущей вкладке. Таким образом, чтобы сделать это, откройте другой браузер и откройте выпадающий и всплывающий HTML-файлы в двух отдельных вкладках. Затем скопируйте расположение выпадающего меню из адресной строки, вставьте его в адресную строку вкладки IE8 и нажмите ввод. Затем откройте еще одну вкладку IE8, скопируйте расположение всплывающего меню из браузера и вставьте его в новую вкладку.

Протестируйте оба из них, и вы должны обнаружить, что меню все еще выглядят и функционируют отлично в IE8. Следующий шаг — IE7. Закройте две текущие вкладки и откройте две вкладки IE 7. Снова скопируйте и вставьте расположение обоих файлов меню в новые вкладки IE7 и проверьте, все ли меню выглядят и ведут себя, как ожидалось.

Здесь я нахожу еще одну возможную ошибку в IETester. Пожалуйста, подтвердите в комментариях, если вы испытываете то же самое, так как на моем компьютере установлен IE7, попытка использовать вкладки IE7 внутри IETester не работает. Если я вставляю местоположение в адресную строку и нажимаю клавишу ввода, он просто ничего не делает. Я подозреваю, что это может быть связано с настройками безопасности IE7, где, если вы запустите IE7, а затем попытаетесь открыть один из локальных файлов, вы получите следующее сообщение:

При нажатии на кнопку ОК откроется новое окно и запустите ваш файл. Поэтому для тестирования IE7 я собираюсь запустить реальный браузер IE7, а не проводить это тестирование внутри IETester. Таким образом, после того, как новое окно открылось и файл загружен, вы можете пойти дальше, открыть новую вкладку и вставить здесь местоположение другого документа. На этот раз IE не будет отображать сообщение об ошибке, а просто отобразит ваш файл.

Если вы посмотрите на раскрывающееся меню в IE7, все выглядит хорошо, и меню работает как положено. К сожалению, этого нельзя сказать о вылетах. Взглянув на это, вы увидите, что для двух пунктов меню, которые содержат всплывающие подсказки, между ним и предыдущим пунктом меню имеется большой интервал, поэтому нам предстоит проделать определенную работу.

Так что же вызывает этот дополнительный отступ 1 px? Ну, как выясняется, когда мы устанавливаем два элемента списка, содержащих всплывающие элементы, в положение: относительный IE7 добавляет отступ в один пиксель в верхней части каждого из них. Таким образом, изменение правила второго уровня следующим образом исправляет это:

#nav li.second-level
{
    position:relative;
    margin-top:-1px;
}

Теперь, единственная проблема, с которой это связано, заключается в том, что если вы теперь просматриваете это в любом из наших других браузеров, наше меню теперь разбито на них, поэтому нам нужно найти способ сказать IE применить верхнее поле -1 пикселя, но иметь другие браузеры игнорируют это. Но нам также нужно сделать еще один шаг, поскольку IE8 правильно его отобразил, мы также не хотим, чтобы IE8 применял этот запас, поэтому на данный момент нам нужно ориентироваться только на IE7. как нам это сделать? IE условные комментарии на помощь.

Внутри вашей папки CSS создайте новый файл и назовите его ie7.css. Все, что нам нужно добавить в этот файл, это следующее:

#nav li.second-level
{
    margin-top:-1px;
}

PS Не забудьте удалить правило верхнего поля из файла flyout.css.

Теперь нам нужно сделать ссылку в нашем файле ie7.css, используя специальные условные комментарии IE. Тогда это основной синтаксис условных комментариев IE:

<!--[if expression]> HTML <![endif]-->

Откройте страницу flyout.html и добавьте следующее после последнего связанного файла CSS:

<!--[if IE 7]>
    <link rel="stylesheet" type="text/css" href="css/ie7.css" media="screen">
<![endif]-->

Обратите внимание, что после начального -,! Не должно быть пробелов. и последнее —. Если вы теперь просматриваете страницу в IE7, она будет отображаться правильно, также обновление страницы в других браузерах покажет, что они теперь снова отображают меню правильно. Условный комментарий довольно понятен, но в основном мы здесь сообщаем IE, что если используемая в настоящее время версия браузера равна 7, тогда загрузите и примените таблицу стилей, если нет, игнорируйте содержимое внутри блока комментария.

Еще одна вещь, которую вы, возможно, заметили, в отличие от других браузеров: когда вы наводите курсор мыши на две всплывающие ссылки и ссылки «свяжитесь с нами», на нем не отображается значок маленькой стрелки, который используется для наведения курсора на ссылку, а вместо этого он остается стрелка, он также не показывает текст заголовка тега привязки. При перемещении по фактическому тексту вы увидите ожидаемый результат. Относительное положение снова бросает нам кривой мяч, давайте исправим это.

Нам нужно убедиться, что и дочерний, и родительский установлены в относительном положении. В настоящее время наш элемент списка установлен на относительный, а дочерние элементы lnk — нет. Итак, возвращаясь к файлу vert_menu.css и добавляя следующее в ссылку #nav li a:, правило #nav li a: посещения, мы должны решить нашу проблему:

#nav li a:link, #nav li a:visited
{
    position:relative;
}

Обновить IE7. Ну, это исправило нашу предыдущую проблему, но ввело новую проблему. Наша последняя ссылка для связи с нами теперь имеет большое верхнее поле, которое мы исправили всего пару шагов назад.

Давайте найдем способ исправить это. Нам нужно принять к сведению следующий фрагмент спецификации CSS 2.1, чтобы найти возможную подсказку:

Положение бокса рассчитывается в соответствии с нормальным потоком (это называется положением в нормальном потоке). Затем поле смещается относительно его нормального положения. Когда блок B относительно позиционирован, позиция следующего блока вычисляется так, как если бы B не был смещен.

( CSS2.1 9.3.1 ).

Первое, о чем мы могли бы подумать, даже не читая спецификацию, это дать классу contact us link класс и применить к нему верхнее поле в -1 пиксель. На самом деле, вместо создания нового идентификатора или класса, мы можем просто применить к нему существующий класс второго уровня, и проблема будет решена. Однако есть ли лучший способ? Или это только одна из тех ошибок IE, к которой нужно применить обходной путь?

Еще одна вещь, которая делает эту кроличью нору еще глубже, если вы посмотрите на всплывающие меню, у них теперь есть та же проблема, что и у связи с нами. Что еще хуже, если вы попытаетесь перейти от одного пункта всплывающего меню к другому, и вы не будете достаточно быстры, вылет исчезнет! К счастью, есть простой способ исправить все это. Удалите все из файла ie7.css и просто добавьте следующее:

#nav li
{
    margin-top:-1px;
}

Это учитывает поля во всех наших элементах списка, но проблема с навигацией во всплывающих окнах остается. Добавьте следующее в файл ie7.css:

#nav li.second-level a, #nav li.second-level li
{
    position:relative;
}

Обновите IE7 и все должно быть хорошо, иногда простейшие решения дают наибольший эффект.

ПРИМЕЧАНИЕ. Даже это, кажется, решает все проблемы, кажется, есть одна новая проблема, связанная с поднятием его головы, и это то, что вы не можете получить всплывающую ссылку «Веб-приложение». Я считаю, что это потому, что мы используем меню изолированно и что при использовании вместе с другим контентом на странице эта проблема исчезнет. Но чтобы убедиться, вы можете просто добавить следующее в правило #nav, #nav ul в файле vert_menu.css

#nav, #nav ul
{
    padding-bottom:.6em;
}

Итак, наконец, мы можем перейти к последнему браузеру, который нам нужно поддерживать, нашему старому другу IE6, который, мы надеемся, скоро сможет положить конец. Для этого мы вернемся к IETester. Открыв IETester, откройте две вкладки IE6, скопируйте и вставьте расположение двух файлов в две отдельные вкладки. Не выглядит плохо, но выглядит обманчиво. Куда делись выпадение и вылет?

Для IE6 не существует простого решения CSS, чтобы решить эту проблему, и нам нужно добавить немного JavaScript, чтобы IE чихнул эти меню за нас. Сначала был Suckerfish, а затем появился Сын Suckerfish. Однако я люблю jQuery и был чрезвычайно рад видеть плагин Superfish jQuery. Это то, что мы будем использовать в этой статье, чтобы заставить IE6 подыгрывать. Давайте начнем.

Загрузите Superfish с этого места:
http://users.tpg.com.au/j_birch/plugins/superfish/#download

После загрузки распакуйте файл. Создайте новую папку в вашей текущей структуре сайта с именем js и скопируйте файл superfish.js в этот каталог. Вам также понадобится jQuery, поэтому скопируйте файл jQuery в новую папку js.

Теперь нам нужно связать наши два файла JavaScript, но мы снова будем использовать условные комментарии, чтобы они применялись только к IE6, поскольку ни один из браузеров или версия не нуждаются в этом. Добавьте следующее в файл dropdown.html внутри заголовка и после таблиц стилей.

<!--[if IE 6]>
    <script src="js/jquery-1.2.6.min.js" type="text/javascript"></script>
     <script src="js/superfish.js" type="text/javascript"></script>
<![endif]-->

Теперь вернитесь в IETester и нажмите опцию Refresh Complete (без кэша).

Идите и попробуйте выпадающее меню на вкладке IE6. Хм, все еще не работает. Не беспокойтесь, мы просто не вызвали функцию, и нам нужно сделать небольшое редактирование наших CSS-файлов. Давайте сначала разберемся с CSS.

Откройте файл dropdown.css и измените строку:

#nav li:hover ul, #nav li:focus ul

#nav li:hover ul, #nav li:focus ul, #nav li.sfHover ul, #nav li.sfHover ul

Класс sfHover, также известный как Suckerfish, — это класс, который будет динамически добавляться в элементы списка с помощью JavaScript. Осталось только вызвать функцию Superfish для элементов списка. Теперь создайте новый файл js внутри папки js с именем ie6menufix.js и свяжите его со страницей внутри условных комментариев следующим образом:

<script src="js/ie6menufix.js" type="text/javascript"></script>

ПРИМЕЧАНИЕ. Возможно, вы добавили код, который мы будем добавлять в этот файл, в заголовок вашего HTML-документа, но я предпочитаю держать вещи отдельно. Добавьте следующее в ваш новый файл js:

$(document).ready(function() {
    $('ul#nav').superfish();    
});

Продолжай и обновляй как раньше. Эврика, это работает, но, увы, теперь мы должны разобраться с ошибками CSS в IE6, но прежде чем мы это сделаем, давайте также заставим работать. Прежде всего, добавьте точно такие же сценарии с условными комментариями в файл flyout.html. Затем откройте flyout.css и измените строку:

#nav li:hover ul, #nav li:focus ul

#nav li:hover ul, #nav li:focus ul, #nav li.sfHover ul, #nav li.sfHover ul

Сделайте обновление все, без кеша, как раньше здесь, и это работает! Все, что осталось, — это решить специфичные для IE6 проблемы CSS, разве это не веб-разработка?

Давайте сначала разберемся с проблемой с наименьшим количеством проблем, на этот раз — с полетом. В вашей папке CSS создайте новый файл с именем ie6.css. Затем в условные комментарии IE6 файла flyout.html добавьте следующее, прежде чем какой-либо из JavaScript включит:

<link rel="stylesheet" type="text/css" href="css/ie6.css" media="screen">

Ваш условный комментарий для dropdown.html должен выглядеть следующим образом:

<!--[if IE 6]>
    <link rel="stylesheet" type="text/css" href="css/ie6.css" media="screen">
    <script src="js/jquery-1.2.6.min.js" type="text/javascript"></script>
    <script src="js/superfish.js" type="text/javascript"></script>
    <script src="js/ie6menufix.js" type="text/javascript"></script>
<![endif]-->

Теперь нам нужно добавить CSS в этот новый файл. Добавьте следующее в файл ie6.css:

#nav li
{
    margin-top:-1px;
}

Задача решена! Теперь о нашем выпадающем меню, которое до сих пор дало нам наименьшее количество проблем, но теперь, похоже, представляет собой самую большую проблему. О да, вы можете закрыть вкладку IE6 для всплывающей подсказки.

Добавление следующего в ваш файл ie6.css решает некоторые из наших проблем:

#nav li ul li
{
    float:none;
    border-top:1px solid #fff;
    height:1%;
}

Но вводит что-то новое:

Итак, пространство между элементами списка больше не является слишком большим, но выпадающие элементы не растягиваются вправо от окна браузера. Теперь то, что мы хотим. Самый простой способ исправить это — дать нашим элементам списка явную ширину, поэтому добавьте в файл ie6.css следующее:

#nav li ul li
{
    float:none;
    border-top:1px solid #fff;
    height:1%;
    width:175px;
}

Теперь давайте позаботимся о верхней границе, которая все еще слишком велика. Теперь у IE6 есть хорошо известный недостаток, который добавляет дополнительные 3 пикселя к элементам. Хм, ладно, значит, добавление следующего должно исправить наше меню:

#nav li ul li
{
    float:none;
    margin-top:-3px;
    border-top:1px solid #fff;
    height:1%;
    width:175px;
}

И задумал это! Теперь у нас есть двухуровневое выпадающее и всплывающее меню, которые будут работать в IE 6+, Opera 9.5+, Firefox 2+, а также Safari 3+ с небольшой помощью jQuery и плагина Superfish.

Отвечая на вопросы пользователей

После записи первой части этой серии я получил несколько вопросов от пользователя по имени Джуди. Я обещал ей, что я отвечу на ее вопросы в этой статье, и по большей части вышеупомянутые должны ответить на них, но еще один вопрос, который у нее был, включает немного больше.

Спросила она:

«Однако я хотел бы знать, как выполнять те подменю, которые вы видите на некоторых сайтах, где подменю открывается непосредственно под главной ссылкой, обычно мелкими шрифтами, и также проходит горизонтально. Обычно начинается с левой стороны и проходит под ссылки, я надеюсь, вы знаете, о чем я говорю. Если у вас есть время, можете ли вы дать нам некоторые подсказки по этому поводу или направить нас на другие соответствующие веб-сайты? »

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

Сначала я сделал копию текущего файла dropdown.html, назвав его dropdown_alt.html, а также сохранил копию dropdown.css как dropdown_alt.css. Для dropdown_alt.css я изменил правило #nav li ul li следующим образом:

#nav li ul li
{
    float:none;
    float:left;
    border-top:1px solid #fff;
}

Загрузка нового HTML-файла в Firefox создает эффект, которого она добивалась. Он также работает в Opera 9.5+, Safari 3+ и IE 6+. Я надеюсь, что это отвечает на все ваши вопросы, Джуди. Однако, если у вас или у кого-либо еще возникнут дополнительные вопросы или возникнут какие-либо проблемы, пожалуйста, дайте мне знать, комментируя эту статью.

Двухуровневое меню CSS и HTML занимает два

Отвечая на вопросы пользователей

Категории

Последние статьи

Рефакторинг Hudson God Class

Альтернативы синтаксиса Java лямбда

Morphia и MongoDB: развивающиеся структуры документов

OpenShift Express: развертывание приложения Java EE (с поддержкой AS7)

Интеграция jqGrid, REST, AJAX и Spring MVC