Интернет Пресс - программы для Windows и Linux, статьи и материалы о компьютерах, бизнес-предложения.
Главная | Новости | Статьи | Веб-мастеру | Призы и подарки | Архив | RSS-канал | Карта сайта
Написать письмо автору сайта
Поиск
 

Статьи
Интернет
Software
Hardware
Операционные системы
Безопасность
Электронная коммерция
Пресс-релизы
Народные советы, медицина
SEO-поисковое продвижение сайтов
Автомобили
Строительство и недвижимость
Образование, спорт, отдых и туризм
Авторам
Добавить статью

Реклама


 

Интернет

Создание универсального выпадающего меню
 | 13:50:00 , 12 Ноября 2004

Автор: Алексей Сивин , info@mostinfo.net
http://mostinfo.net

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

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

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

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

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


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

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

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

Как же отобразить этот слой?
Чтобы отобразить нужный нам слой, следует в ссылке прописать параметр 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.

Ну вот, в принципе и усе :) Думаю, теперь проблема построения универнсального выпадающего меню отпадет! Если у Вас все же еще остались (или только возникли) какие-либо вопросы по поводу этого меню - пишите мне, отвечу на все вопросы!

Удачи в нелегком деле веб-мастера!

Источник: http://www.izcity.com



Версия для печати Версия для печати

Оценок этой статье - 47. Средний балл - 4.13 Просмотров - 23538

Выставить оценку статье:


Читайте также:

  • Обзор самых популярных онлайн-СМИ
  • Электронные библиотеки
  • Популярность сайта
  • Как подружиться с поисковыми машинами
  • Оптимизация сайта: проблема выбора
  • Программы автоматической регистрации сайта
  • Игровые сайты сети
  • Сравнительный тест эффективности языков программирования для WEB
  • Советы по созданию и раскрутке сайта
  • Как бесплатно сайт построить:
  • Java-апплеты и Gif-анимация
  • WWW - почтой
  • Сокеты и Java
  • Вебсервер в домашних условиях
  • Некоторые секреты IP-протокола
  • Пластиковая карточка, как платежный инструмент
  • Практические советы по использованию DHTML

    Все статьи рубрики Интернет


  •  

    Реклама



    Поиск
     

    Размещение рекламы | Контакты

    Главная | Новости | Статьи | Веб-мастеру | Призы и подарки | Архив | RSS-канал | Карта сайта

    Вверх
    Copyright © 2004 - 2018 г. При перепечатке гиперссылка на «Интернет Пресс» обязательна.

     

    Rambler's Top100