Введение: Эта статья шаг за шагом научит вас, как создать очень крутое стандартное трехслойное меню навигации по раздвижной двери. Судя по идеям, принципам, шагам и методам, можно сказать, что «все возможно». Я думаю, что после прочтения этой статьи вы сможете создать свое собственное супер красивое стандартное навигационное меню. Это меню не имеет избыточной структуры и способствует динамическому выводу данных. Оно очень удобно для использования в обычных проектах. В этом уроке рассказывается об основных принципах раздвижных дверей. Я думаю, он будет полезен тем друзьям, которые все еще идут по этому пути! Конечно, если есть какие-то ошибки или проблемы, вы можете их обсудить. Идеальные цели, которых хочет достичь это навигационное меню: Красиво и индивидуально. Структура понятна, семантика понятна, лишних тегов нет. Производительность, структура и поведение разделены на трех уровнях без какого-либо вмешательства. Способствует выводу данных фоновых программ. Меню имеет три состояния изменения эффектов. Может выделять и записывать нажатые пункты меню. Адаптируемая ширина текста. Когда текстовое содержимое изменяется по длине, кнопка может меняться во времени. Совместим со всеми основными браузерами. Давайте шаг за шагом реализуем это идеальное меню! Структура На мой взгляд, идеальное стандартное меню должно иметь следующую структуру: <div id="nav"> Теперь доступна исходная структура меню. Вы можете видеть, что в нем нет бессмысленных ярлыков. Каждый ярлык имеет свою семантику. Давайте посмотрим в браузере. О, это действительно просто. Это просто оригинальный текст, как, например, меню, которое мы используем для заказа еды в ресторане. Может быть, это проще, и там есть маленькая точка! О боже, мы так далеко от нашего прекрасного меню! Стиль Хорошо, теперь это просто скелет, давайте его немного украсим, добавим несколько простых стилей, хотя бы удалим мелкие точки и расположим горизонтально! Хорошо, давайте добавим немного стиля! *{margin:0;padding:0;}/*Объедините его в один вид, иначе в разных браузерах он будет выглядеть некрасиво*/ Что ж, глядите, мы достигли нашей маленькой цели. Благодаря разработанному исходному коду кнопки можно сохранить часть дизайна. Но чтобы сделать это кнопкой с тремя состояниями, нам нужно изменить эту кнопку. Вы видели седьмую цель? Мы делаем адаптивную кнопку, поэтому нам нужно немного обработать эту кнопку. Мы показываем эти три кнопки в трех состояниях: когда мышь отведена, после щелчка и когда мышь перемещена вверх. Чтобы сделать меню раздвижной двери, нужно вырезать кнопку посередине. Рисунок слева. расположен слева, а изображение справа. Поместите его на правую сторону. Чтобы адаптироваться к удлинению текста, необходимо немного растянуть ширину этого слоя. Однако это изображение имеет очень сложный эффект тени и его нельзя растягивать случайно, иначе эффект не будет таким же. Разрежем его посередине и вытянем левую часть картинки на правую вперед. Поэтому мы сначала разрезаем его на шесть частей, как показано на картинке, а затем объединяем эти шесть картинок вместе. Почему это так? Взгляните на принцип CSS-спрайтов! Я не буду здесь вдаваться в подробности. Вы можете прочитать другую мою статью «Создание покерной карты серии 1 — Технология оптимизации фона изображения CSS-спрайтов». На приведенном выше рисунке первое и второе изображения формируют обычный стиль меню (стиль по умолчанию), третье и четвертое изображения формируют стиль прокрутки, а пятое и шестое изображения формируют стиль пункта меню, на который щелкают мышью. Необходимая графика готова. Далее добавим это изображение в пункт меню. Для кнопки требуется отображение двух изображений. Все на земле знают, что тег html может содержать только одну картинку (если вы обнаружите, что тег может содержать две картинки, сообщите мне вовремя, и я угощу вас ужином!). ой! Каждый элемент в моей структуре меню имеет ровно два тега: один — li, и в нем есть тег A, который можно использовать для хранения левого и правого изображений. Li используется для удержания изображения слева, а A используется для удержания изображения справа. Я действительно восхищаюсь собой, мне приходят в голову такие хорошие идеи, и я так доволен собой... Не занимайтесь, о боже, если я установлю картинки таким образом, как мне добиться трех состояний прокрутки мыши? Мы все должны знать, что, за исключением проклятого IE6, другие браузеры в настоящее время поддерживают псевдокласс li:hover. Однако для совместимости со всеми основными браузерами (это наша восьмая цель, не забывайте об этом!) этот метод не работает. IE6 может применять псевдокласс hover только к тегу A и игнорировать другие теги! Поскольку IE6 может применять псевдокласс hover только к тегу A, то, если мы хотим создать адаптивное меню раздвижной двери, нам нужно внести некоторые структурные изменения. Кажется, мы можем добавить только еще один тег к тегу A, поэтому. Структура меню будет выглядеть так. (Примечание. Здесь структура начинает меняться. Хотя я всегда хотел избежать этого, похоже, что для удовлетворения требований необходимо добавить эту метку.) <li><a href="#none" title="Бинцзифэн"><span>Бинцзифэн</span></a></li> Мы добавили в тег A контейнер диапазона, который включает в себя текстовое содержимое. Теперь есть две метки, на которых могут храниться две картинки. Мы размещаем правое изображение на фоне тега A и выравниваем его по правому краю, а левое изображение помещаем в тег SPAN и выравниваем по левому краю. Это покажет полную форму кнопки. Ладно, наши приготовления почти закончены, пора обновить меню. Если мы хотим создать меню с адаптивной шириной, мы не можем установить значение ширины меню, поэтому мы не можем установить ширину, а затем сместить ее влево, как мы обычно делаем при создании горизонтального меню с фиксированной шириной. В этом случае, когда ширина каждого пункта меню различна, вам необходимо определить ширину каждого элемента отдельно, тогда вы должны определить идентификатор или КЛАСС для каждого пункта меню, и этот метод не способствует динамическому циклу. вывод фоновой программы. Нам нужно автоматически расположить каждый элемент меню в строке слева направо, как встроенный элемент. Затем нам нужно, чтобы меню отображалось встроенным. Хорошо, давайте использовать display:inline. Это очень полезные атрибуты: его анализируемое расположение. может удовлетворить наши основные требования: автоматически располагать элементы этикетки слева направо в ряд, при этом ширина каждого элемента может быть разной. Если использование вышеуказанных атрибутов действительно может удовлетворить наши потребности, текстового содержимого, подобного следующему, не будет. Но... у этого атрибута есть и фатальная слабость: его могут распознать только продвинутые браузеры, такие как FF3. Другие браузеры могут пойти только в обход. Ой-ой! Поэтому как важно унифицировать стандарты браузеров! Кажется, HACK – это еще и способ облегчения, с которым нам приходится иметь дело. К счастью, некоторые эксперты уже нашли решение. Пожалуйста, сначала прочтите эти две статьи. Похожие уроки: Мы все понимаем принцип и можем сделать адаптивное меню на основе методик, представленных в двух статьях выше. Давайте сначала напишем стиль изображения справа, который применяется к тегу дочернего узла A элемента li. li a {display: inline-block; padding-top: 10px; *padding-bottom: 13px; *padding-bottom: 36px; /button.gif) без повтора вправо -36 пикселей; размер шрифта: 12 пикселей; цвет:#fff;} Сначала мы устанавливаем display:inline-block, а затем используем отступы, чтобы расширить его поля, чтобы у него было определенное количество места для заполнения изображения. Обратите внимание, что путь к изображению здесь заменяется вашим собственным путем. Затем установите другие стили, например удаление подчеркиваний, цвет шрифта, размер шрифта и т. д. Установите изображение, которое будет выровнено по правому краю. li a span {display: inline-block; padding-left: 30px; padding-top: 0; padding-bottom: 0; line-height: 36 пикселей; ; фон:url(images/button.gif) без повтора слева вверху; шрифт-вес:жирный;} Изображение в левой части кнопки поместите в элемент SPAN, выровняйте его по левому краю и установите отступы для увеличения его ширины и высоты. li a,li a span{display:inline;cursorointer;} Затем верните их во встроенный режим, активируя функцию haslayout в IE. li a:hover{padding-right:30px;background:url(images/button.gif) без повтора вправо -108px;} Далее идет эффект после щелчка мыши. li a:active{padding-right:30px;background:url(images/button.gif) без повтора вправо -180px;} ок, похоже, все готово. Если посмотреть на это в разных браузерах, кажется, что можно добиться удовлетворительных результатов. Теперь чистая CSS-версия меню раздвижной двери в основном готова.
Я часто вижу, как многие друзья делают меню на форумах, но, честно говоря, они либо структурно избыточны, либо у них есть форма, но нет духа, или у них есть дух, но нет внешнего вида. И то, что мы хотим создать сейчас, — это лучшее меню. Независимо от того, новичок вы или ветеран, вы найдете в этом уроке что-то полезное.
Структура идеального меню должна быть чистой, свободной от избыточности и разделенной, однако по разным причинам в нее будет добавляться много бессмысленных вещей, и в конечном итоге оно будет все дальше и дальше отходить от «чистого». . Поэтому перед составлением меню есть определенные принципы, которые необходимо учитывать на протяжении всего производственного процесса и которым не может помешать никакая внешняя сила.
<ul id="меню">
<li><a href="#none" title="Сад блогов">Сад блогов</a></li>
<li><a href="#none" title="Сообщество">Сообщество</a></li>
<li><a href="#none" title="Главная">Главная</a></li>
<li><a href="#none" title="Новое эссе">Новое эссе</a></li>
<li><a href="#none" title="Контакт">Контакт</a></li>
<li><a href="#none" title="Management">Управление</a></li>
<li><a href="#none" title="Подписаться">Подписаться</a></li>
<li><a href="#none" title="Пик Бинцзи">Пик Бинцзи</a></li>
</ul>
</div>
ul{list-style:none}/*Удалите точки*/
li{float:left;margin-left:10px;}/*Расположите его горизонтально и оставьте небольшой интервал. Не сжимайте меня слишком сильно. */
Теперь, когда скелет на месте, следующий шаг — надеть красивую одежду на каждый пункт меню.
Чтобы выполнить первое требование, нужно сначала иметь красивую пуговицу и нарисовать ее самому. Ой, я не художник, это сложно! Однако не будьте слишком нетерпеливы. Интернет настолько огромен, что есть много чудес. Возможно, кто-то уже сделал что-то хорошее, я просто погуглил и нашел одно. (Слёзы наворачиваются...) Исходный код кнопки: http://bbs.blueidea.com/thread-2860891-1-1.html
Мы специально извлекли теневое изображение и сделали небольшое фоновое изображение.
К счастью, несмотря на добавление дополнительного тега, он не является полностью бессемантическим.
Хотя этот атрибут может удовлетворить основные потребности нашего проекта, у него есть очень фатальная слабость: он не может устанавливать значения ширины и высоты. Если вы не верите, вы можете попробовать. Он отображается только как высота и ширина текста по умолчанию. Он будет автоматически скрыт после превышения этого значения ширины и высоты. Таким образом, у меня есть фоновое изображение. Чтобы показать эффект этого изображения, нам нужно указать ширину и высоту. Это означает, что мы не можем достичь желаемого эффекта, и это расстраивает! К счастью, есть еще один атрибут: display:inline-block — это то, что нам нужно;
«Два примера применения display:inline-block» (Цинь Гэ)
«Атрибут встроенного блока для совместимости с моделированием» (И Фэй)
В приведенном выше коде мы также видим HACK-приложение *padding-bottom: 0; и *padding-top: 0;, которые используются для устранения различных эффектов браузеров, таких как IE и FF. Если не верите, то можете удалить и посмотреть какой эффект будет. Есть проблема с расширением высоты под IE.
Хорошо, теперь пришло время написать эффект при наведении мыши.
li a:hover span{padding-left:30px;background:url(images/button.gif) no-repeat left -72px;font-weight:bold;}
li a:active span{padding-left:30px;background:url(images/button.gif) no-repeat left -144px;font-weight:bold;}