Введение: Эта статья шаг за шагом научит вас, как создать очень крутое трехслойное стандартное навигационное меню для раздвижных дверей. Судя по идеям, принципам, шагам и методам, можно сказать, что «все возможно». Я думаю, что после прочтения этой статьи вы сможете создать свое собственное супер красивое стандартное навигационное меню. Это меню не имеет избыточной структуры и способствует динамическому выводу данных. Оно очень удобно для использования в обычных проектах. В этом уроке рассказывается об основных принципах раздвижных дверей. Я думаю, он будет полезен тем друзьям, которые все еще идут по этому пути! Конечно, если есть какие-то ошибки или проблемы, вы можете их обсудить.
Идеальная цель этого навигационного меню —
Давайте шаг за шагом реализуем это идеальное меню!
Я часто вижу, как многие друзья составляют меню на форумах, но, честно говоря, либо структура избыточна, либо у нее есть форма, но нет духа, либо у нее есть дух, но нет внешнего вида. И то, что мы хотим создать сейчас, — это лучшее меню. Независимо от того, новичок вы или ветеран, вы найдете в этом уроке что-то полезное.
Структура идеального меню должна быть чистой, свободной от избыточности и разделенной. Однако по разным причинам в нее будет добавляться много бессмысленных вещей, и в конечном итоге оно будет все дальше и дальше отходить от «чистого». . Поэтому перед составлением меню есть определенные принципы, которые необходимо учитывать на протяжении всего производственного процесса и которым не может помешать никакая внешняя сила.
Структура:
По моему мнению, идеальное стандартное меню должно иметь следующую структуру:
Теперь доступна исходная структура меню. Вы можете видеть, что в нем нет бессмысленных тегов. Каждый тег имеет свою семантику. Давайте посмотрим в браузере. О, это действительно просто. Это просто оригинальный текст, типа меню, которое мы используем для заказа еды в ресторане. Это, вероятно, проще, и перед каждым меню есть что-то. .Маленькая точка! О боже, мы так далеко от нашего прекрасного меню!
Стиль:
Ну, теперь это всего лишь скелет. Давайте немного украсим его и добавим несколько простых стилей. По крайней мере, нам следует удалить маленькие точки и расположить его горизонтально!
Хорошо, давайте добавим немного стиля!
Ну вот, гляди, мы достигли своей маленькой цели.
Теперь, когда скелет на месте, следующий шаг — надеть красивую одежду на каждый пункт меню.
Чтобы выполнить первое требование, нужно сначала иметь красивую пуговицу и нарисовать ее самому. Ой, я не художник, это сложно! Однако не будьте слишком нетерпеливы. Интернет настолько огромен, что в нем есть много чудес. Возможно, кто-то уже сделал что-то хорошее, я просто погуглил и нашел одно. (Слёзы наворачиваются...) Исходный код кнопки: http://bbs.blueidea.com/thread-2860891-1-1.html
С разработанным исходным кодом кнопки сохраняется часть дизайна, и это здорово. Но чтобы сделать это кнопкой с тремя состояниями, нам нужно изменить эту кнопку. Вы видели седьмую цель? Мы собираемся сделать адаптивную кнопку, поэтому нам нужно немного обработать эту кнопку.
Мы показываем эти три кнопки в трех состояниях: когда мышь отведена, после щелчка и когда мышь передвинута вверх. Чтобы сделать меню раздвижной двери, нужно вырезать кнопку посередине. Рисунок слева. расположен слева, а изображение справа. Поместите его на правую сторону. Чтобы адаптироваться к удлинению текста, ширину этого слоя нужно немного растянуть. Однако это изображение имеет очень сложный эффект тени и его нельзя растягивать случайно, иначе эффект не будет таким же. Разрежем его посередине и вытянем левую часть картинки на правую вперед. Как показано на рисунке 2
Рисунок 1.
Итак, сначала мы разрезаем его на шесть частей, как показано на рисунке, а затем объединяем эти шесть изображений вместе. Почему это так? Взгляните на принцип CSS-спрайтов! Я не буду здесь вдаваться в подробности. Вы можете прочитать другую мою статью «Создание покерной карты серии 1 — Технология оптимизации фона изображения CSS-спрайтов».
Рисунок 2
На приведенном выше рисунке первое и второе изображения формируют обычный стиль меню (стиль по умолчанию), третье и четвертое изображения формируют стиль прокрутки, а пятое и шестое изображения формируют стиль пункта меню, на который щелкают мышью.
Мы специально извлекли теневое изображение и превратили его в небольшое фоновое изображение.
Графика, показанная на
рисунке 3,
готова. Теперь давайте добавим это изображение в пункт меню.Для кнопки требуется отображение двух изображений. Все на земле знают, что тег html может содержать только одну картинку (если вы обнаружите, что тег может содержать две картинки, сообщите мне вовремя, и я угощу вас ужином!). ой! Каждый элемент в моей структуре меню имеет ровно два тега: один — li, и в нем есть тег A, который можно использовать для хранения левого и правого изображений. Li используется для удержания изображения слева, а A используется для удержания изображения справа. Я очень восхищаюсь собой, мне могут приходить такие хорошие идеи, и я нахожусь в благодушном баловстве...
Не занимайтесь, о боже мой, если я устанавливаю картины таким образом, как я смогу добиться три состояния прокрутки мыши? Мы все должны знать, что, за исключением проклятого IE6, другие браузеры в настоящее время поддерживают псевдокласс li:hover. Однако для совместимости со всеми основными браузерами (это наша восьмая цель, не забывайте об этом!) этот метод не работает. IE6 может применять псевдокласс hover только к тегу A и игнорировать другие теги!
Поскольку IE6 может применять псевдокласс hover только к тегу A, то, если мы хотим создать адаптивное меню раздвижной двери, нам нужно внести некоторые структурные изменения. Кажется, мы можем добавить только еще один тег к тегу A, поэтому. Структура меню будет выглядеть так. (Примечание. Здесь структура начинает меняться. Хотя я всегда хотел избежать этого, похоже, что этот тег необходимо добавить, чтобы соответствовать требованиям.)
Мы добавили в тег A контейнер диапазона, который включает в себя текстовое содержимое. Теперь есть две метки, на которых могут храниться две картинки. Мы размещаем правое изображение на фоне тега A и выравниваем его по правому краю, а левое изображение помещаем в тег SPAN и выравниваем по левому краю. Это покажет полную форму кнопки.
К счастью, несмотря на добавление дополнительного тега, он не является полностью бессемантическим.
Ладно, наши приготовления почти закончены, пора обновить меню.
Если мы хотим создать меню с адаптивной шириной, мы не можем установить значение ширины меню, поэтому мы не можем установить ширину, а затем сдвинуть ее влево, как мы обычно делаем при создании горизонтального меню с фиксированной шириной. В этом случае, когда ширина каждого пункта меню различна, вам необходимо определить ширину каждого элемента отдельно, тогда вы должны определить идентификатор или КЛАСС для каждого пункта меню, и этот метод не способствует динамическому циклу. вывод фоновой программы.
Нам нужно автоматически расположить каждый пункт меню в строке слева направо, как встроенный элемент. Затем нам нужно, чтобы меню отображалось встроенным. Хорошо, давайте использовать display:inline. Это очень полезные атрибуты: его анализируемое расположение. может удовлетворить наши основные требования: автоматически располагать элементы этикетки слева направо в ряд, при этом ширина каждого элемента может быть разной.
Если использование вышеуказанных атрибутов действительно может удовлетворить наши потребности, текстового содержимого, подобного следующему, не будет.
Хотя этот атрибут может удовлетворить основные потребности нашего проекта, у него есть очень фатальная слабость: он не может устанавливать значения ширины и высоты. Если вы не верите, вы можете попробовать. Он отображается только как высота и ширина текста по умолчанию. Он будет автоматически скрыт после превышения этого значения ширины и высоты. Таким образом, у меня есть фоновое изображение. Чтобы показать эффект этого изображения, нам нужно указать ширину и высоту. Это означает, что мы не можем достичь желаемого эффекта, и это расстраивает! К счастью, есть еще один атрибут: display:inline-block — это то, что нам нужно;
Но... у этого атрибута есть и фатальная слабость: его могут распознать только продвинутые браузеры, такие как FF3. Другие браузеры могут пойти только в обход. Ой-ой! Поэтому как важно унифицировать стандарты браузеров! Похоже, что HACK — это еще и способ облегчить ситуацию, и у нас нет другого выбора, кроме как сделать это.
К счастью, некоторые эксперты уже нашли решение. Пожалуйста, сначала прочтите эти две статьи.
Похожие уроки:
« Два примера применения display:inline-block » (Цинь Гэ)
Мы все понимаем принцип
« Атрибуты встроенных блоков для моделирования совместимости » (И Фэй).
Мы можем создать адаптивное меню на основе методов, представленных в двух статьях выше.Давайте сначала напишем стиль изображения справа, который применяется к тегу дочернего узла A элемента li.
Сначала мы устанавливаем display:inline-block, а затем используем отступ, чтобы увеличить расстояние до его сторон. дайте ему немного места, чтобы заполнить изображение. Обратите внимание, что путь к изображению здесь заменяется вашим собственным путем. Затем установите другие стили, например удаление подчеркиваний, цвет шрифта, размер шрифта и т. д. Установите изображение, которое будет выровнено по правому краю.
Изображение с левой стороны кнопки размещается в элементе SPAN. Выровняйте его изображение по левому краю и установите отступ. поддержите его. Откройте его ширину и высоту.
а затем верните их во встроенный встроенный режим, активируя функцию haslayout в IE.
В приведенном выше коде мы также видим HACK-приложение *padding-bottom: 0; и *padding-top: 0;, которые используются для устранения различных эффектов браузеров, таких как IE и FF. Если не верите, то можете удалить и посмотреть какой эффект будет. Есть проблема с расширением высоты под IE.
Хорошо, теперь пришло время написать эффект при наведении мыши.
Затем следует эффект после щелчка мыши.
ОК, похоже, вы закончили. Проверьте это в разных браузерах. , кажется, можно добиться удовлетворительных результатов. Ниже приведен скриншот:
Рисунок 4.
Версия меню раздвижной двери на чистом CSS в основном готова.