RSS

Компьютерная терминология    1_9  A  B  C  D  E  F  G  H  I  J  K  L  M  N  O  P  Q  R  S  T  U  V  W  X  Y  Z  .....  A  Б  В  Г  Д  Ж  З  И  К  Л  М  Н  О  П  Р  С  Т  У  Ф  Х  Ц  Ч

Создание универсального выпадающего меню

   


  • Как не оказаться обманутым при работе с SEO-агентствами
  • Ошибки в оптимизации контента
  • Распространенные ошибки оптимизации
  • Ссылки приносящие трафик
  • Юзабилити сайта
  • Оптимизация конверсионного пути
  • Основы внутренней оптимизации сайта
  • Поисковая оптимизация или контекстная реклама
  • Руководство по написанию эффективной статьи
  • Продвижение по НЧ-запросам
  • Мобильные версии сайтов и их продвижение
  • Линкбейтинг


  • Юзабилити интернет-магазина
  • Основы комментирования
  • Оптимизация содержимого тегов title, description, keywords
  • Способы уникализации контента на сайте
  • Борьба с дублями страниц
  • Дизайн и SEO
  • Оптимизация поведенческих факторов ранжирования
  • Покупка домена
  • Web-Designed
  • Webhints
  • Файл настроек .htaccess
  • Настройка robots.txt
Консультация юриста
Ваш регион:
Ваше имя:

Ваш телефон

(можно сотовый)

Ваш вопрос (можно кратко)


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

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

Для примера возьмем обыкновенную html страничку, с несколькими ссылками:

Назовем получившуюся страницу 1.htm

И собственно код скрипта:


Думаю, описание его не требуется, так как это, в принципе не главное :)
Назовем этот скрипт menu.js. После, чтобы его вызвать, следует прописать на будущей странице строку
<SCRIPT language=javascript src="menu.js"></SCRIPT> сразу после тега </HEAD>

Что нужно делать дальше?
Теперь надо бы нам написать слой, внутри него - табличку, которая и будет отображаться при наведении курсора на ссылку, этим и займемся:

Таблица, которая находится внутри слоя (между <DIV></DIV>) изначально невидима за счет параметра VISIBILITY: hidden, и следует заметить, что у каждого такого слоя (их может быть несколько, для отображения нужного из нескольких, при наведении курсора на определенную ссылку) есть свой id. В нашем случае id=msa. Для остальных таблиц слоев писать id=msb, id=msc и т.д. в порядке возрастания по алфавиту. Теперь засовываем этот слой куда-нибудь вниз нашей страницы (лучше сразу перед тегом </>).

Как же отобразить этот слой?
Чтобы отобразить нужный нам слой, следует в ссылке прописать параметр ONMOUSEOVER=P7_autoLayers(0,'msa','Closer'), где 'msa' указывает на id отображаемого слоя.

"Привяжем" к ссылке link1 наш слой:

Теперь при наведении курсора мыши на link1 у нас будет появляться табличка!

А как сделать, чтобы табличка появлялась в нужном месте?
Для этого существуют параметры LEFT и TOP, которые указываются в стиле слоя. LEFT - отступ от левого края страницы, TOP - отступ от верхнего края страницы. Чтобы настроить отображение слоя в нужном месте, надо поэкспериментировать со значениями этих параметров и добиться желаемого эффекта ;) Также есть еще некоторые параметры стиля слоя: WIDTH - ширина слоя, HEIGHT - высота слоя.
Благодаря параметрам LEFT и TOP мы можем строить как горизонтальное, так и вертикальное выпадающее меню! Для этого нам необходимо просто указать нужные значения.

А как сделать, чтобы слой исчезал, когда курсор не на сссылке?
Для этого нам надо прописать новый параметр в ячейках таблицы, "окружающих" наши ссылки. Т.е. следует прописывать параметр
onmouseover=P7_autoLayers(0) в теге <td> ячейки таблицы, которая находится слева/справа/сверху/снизу наших ссылок (за исключением ячейки, где собственно находятся ссылки). В итоге, при наведении курсора на ячейку, в параметрах которой прописано onmouseover=P7_autoLayers(0), слой будет исчезать! Пропишем этот параметр в нужных местах нашей страницы:

Теперь, при наведении курсора на ячейку, где написано "Содержание страницы", слой, независимо какой у него id, будет исчезать!

А как сделать другие слои, чтобы они отображались при наведении курсора на другую ссылку?
Элементарно! А точней, аналогично :) Создаем новый слой с другим id:

И прописываем новый параметр в ссылке:

А если не для всех ссылок нужно подменю?
Тогда, чтобы слой, отображенный при наведении на другую ссылку, не оставался видимым кодга мы наведем курсор на ссылку, для которой подменю не требуется, следует прописать новый параметр скрытия всех слоев в свойствах этой ссылки:

Получившееся меню отлично работает (проверено лично!) в разных браузерах - Internet Explorer, Opera, Mozilla.

Ну вот, в принципе и усе :) Думаю, теперь проблема построения универнсального выпадающего меню отпадет.

seo & website usability   inet   os faq   hardware faq   memory   video   cpu   hdd   mainboard faq   printer & scaner   modem   mobiles   hackzone

Технологии поискового маркетинга
Практика поискового маркетинга
Flash
Тэги
XML
DHTML
PHP
MySQL
WebMail
.NET
VBScript
CGI
Графические форматы Интернета
WEB-сайт шаг за шагом
CMS faq
FRAME faq
CSS faq
SSI faq
RSS faq
WAP faq
Web-Designed
Webhints
Файл настроек .htaccess
Настройка robots.txt

po gonn © 2005 "JULI'S BEEHIVE"