#flash #drupal #css #navigation
#flash #drupal #css #навигация
Вопрос:
Ссылка на мою фактическую демонстрацию flash:http://nside-elite.techiedesign.net/redbox/flashtest.html
Я создал эту навигацию с помощью Adobe Flash (скрипт AS3), который работает довольно хорошо. Проблема в том, что я использую Drupal для CMS моего сайта. Попытка реализовать эту флэш-навигацию с помощью Drupal сама по себе была бы большой рутиной. Но даже тогда было бы сложно сделать его достаточно гибким, чтобы я мог изменять ссылки по мере необходимости через основные ссылки Drupal.
Один из последних недостатков использования навигации на основе flash (даже если предположить, что я мог бы заставить ее работать) заключается в том, что пауки и боты могут неправильно индексировать сайт, если в моем коде используется много взломов, чтобы визуально заставить его работать.
Теперь я могу провести собственное исследование и написать код с помощью CSS, поскольку в настоящее время я очень хорошо знаком с CSS 2.1 и изучаю базовый CSS3. Одна из проблем, которые я вижу, — это эффект, который я использую при наведении курсора мыши. Я не вижу, как я мог бы заставить металлическую вкладку опускаться при наведении курсора мыши, а также заставить индикатор над ней одновременно исчезать. Причина, по которой я вижу эту проблему, заключается в том, что область с кликом (или «область наведения») на свету находится не прямо поверх фактического изображения, а скорее ниже на довольно много пикселей.
Если бы вы могли хотя бы указать мне правильное направление, это было бы здорово. Спасибо!
Комментарии:
1. Я думаю, что это могло бы быть намного проще, если бы вы добавили jQuery в mix. Чистое CSS-решение было бы довольно злым для imo.
2. Ах да, jQuery, к сожалению, я абсолютно ничего не знаю об этом. Я полагаю, мне, возможно, нужно немного изучить… Я бы хотел изучить его, потому что я видел демонстрации всех удивительных вещей, которые вы можете сделать с его помощью. Хотя это выглядит довольно сложно.
Ответ №1:
Это, конечно, возможно воспроизвести, но не без некоторой хитрости.
Вы можете увидеть рабочий пример здесь:http://jsfiddle.net/u3n5c /
Суть решения проблемы заключается в понимании того, что события :hover будут запускаться, даже если родительский контейнер меньше своего дочернего. Визуально кажется, что строка и вкладка являются отдельными элементами, но в коде они являются типичными li > a.
Комментарии:
1. Однако у меня есть вопрос, есть ли какой-либо способ использовать фоновые изображения для этого метода, который вы используете?
2. Да, вам пришлось бы заменить границы изображениями и учитывать высоту границ. Вкладки были бы лучше только с текстурой и применением закругленных границ и тени с помощью css.
3. У меня все текстуры настроены и прекрасно функционируют. Однако одна проблема, которую я, похоже, не могу обойти, заключается в отправке вкладок «назад». Да, я пытался играть со всеми z-индексами безрезультатно. Я хочу, чтобы тень окна панели (элемента ul) падала «перед» выпадающими вкладками (элементами li). — Еще раз спасибо за помощь!
4. Мой оригинальный fiddle немного обманывает, вместо того, чтобы скрывать вкладки за ul, он регулирует высоту якорей, делая вид, что они скрываются, но они просто изменяют размер. Если вы разместите свой код в jsfiddle, я, возможно, смогу вам помочь.
5. Да, я понял это относительно рано; вот почему сначала я был немного озадачен лучшим способом использования фоновых изображений. Вот ссылка на jsfiddle: jsfiddle.net/YGPJb/19 .