Форум 3DNews
Вернуться   Форум 3DNews > Программирование > Web-программирование

Ответ Создать новую тему
Опции темы Опции просмотра
Непрочитано 19.12.2005, 16:55   [включить плавающее окно]   #1
Jabberwocky
Мужской Умудрённый
Автор темы
 
Аватар для Jabberwocky
 
Регистрация: 14.12.2003
Адрес: Москва
Как сделать выпадающее меню?

Так вот. Частенько вижу, что на html-страницах есть меню, при наведении мыши на элемент которого сбоку(снизу) появляется симпатишное подменю. Вот как такое сделать. прошу или пример простенького скрипта, чтоб указать идею, или ссылку, где это описано.
__________________
Никогда не существовало и не будет существовать никаких «прикладных наук», есть лишь приложения наук (весьма полезные!) © Л. Пастер
Jabberwocky вне форума  
Конфигурация ПК
Ответить с цитированием
Непрочитано 20.12.2005, 23:13   [включить плавающее окно]   #2
Гхост-цзы
Мужской Умудрённый
 
Аватар для Гхост-цзы
 
Регистрация: 04.06.2004
Цитата (Jabberwocky) »
Так вот. Частенько вижу, что на html-страницах есть меню, при наведении мыши на элемент которого сбоку(снизу) появляется симпатишное подменю. Вот как такое сделать. прошу или пример простенького скрипта, чтоб указать идею, или ссылку, где это описано.
Скрипт шибко простеньким не будет. А идея здесь такая - на странице изначально существуют невидимые div-ы; невидимость их достигается с помощью свойства visibility="hidden". Местоположение на странице подгоняется тем же css. Внутри div-а могут таблицы, либо списки со ссылками, либо и то и другое (таблицам тоже надо будет задать visibility="hidden").
Далее - пишется JS-скрипт, задающий функцию, которая меняет visibility="hidden" на visibility='visible', и наоборот. И наконец, для элемента, при наведении мыши на который должно выпадать меню, для событий onmouseover и onmouseout задаётся вызов указанных функций.
Чтобы не совсем без примеров - вызов указанных функций, например, для картинки в ячейке таблицы будет выглядеть примерно так
document.write('<td><img src="ymg.jpg" onmouseover="roll(id)" onmouseout="exd(id)" width="35" height="52" ></td>');
А сами функции roll() и exd() задаются примерно так
function roll(a){
###################################
###################################
document.getElementById(x).style.visibility='visible';
####################################
}

(здесь под ######### подразумевается некий дополнительный код, например, цикл или сравнение)
__________________
Крылья знаний меня от людей отлучили,
Я увидел, что люди - подобие пыли.
Гхост-цзы вне форума  
Ответить с цитированием
Непрочитано 21.12.2005, 13:28   [включить плавающее окно]   #3
Jabberwocky
Мужской Умудрённый
Автор темы
 
Аватар для Jabberwocky
 
Регистрация: 14.12.2003
Адрес: Москва
Гхост-цзы
Ага. Идею понял. Почти. Непонятно авот что. Эти дополнительные меню раскрываются вторым слоем поверх основного текста, картинок... Именно поверх, не меняя форматирования. Как это так - в два слоя? не понимаю.
__________________
Никогда не существовало и не будет существовать никаких «прикладных наук», есть лишь приложения наук (весьма полезные!) © Л. Пастер
Jabberwocky вне форума  
Конфигурация ПК
Ответить с цитированием
Непрочитано 21.12.2005, 14:48   [включить плавающее окно]   #4
Гхост-цзы
Мужской Умудрённый
 
Аватар для Гхост-цзы
 
Регистрация: 04.06.2004
Цитата (Jabberwocky) »
Непонятно авот что. Эти дополнительные меню раскрываются вторым слоем поверх основного текста, картинок... Именно поверх, не меняя форматирования. Как это так - в два слоя? не понимаю.
С помощью того же css - для дива (либо таблицы) задаём нечто типа:
#16dv {
position:absolute;
top: 25;
left: 40;
width: 900;
height: 412;
}
Поскольку top и left (отступы от верхнего левого угла) заданы жёстко, вёрстка не съезжает.
(Если мне память не изменяет, для элементов, на которые наезжает всплывающее меню, положение также жёстко фиксируется.)
__________________
Крылья знаний меня от людей отлучили,
Я увидел, что люди - подобие пыли.
Гхост-цзы вне форума  
Ответить с цитированием
Ответ Создать новую тему

Опции темы
Опции просмотра

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход


Текущее время: 08:45. Часовой пояс GMT +3.


Powered by vBulletin® Version 3.8.4
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd. Перевод: zCarot
Copyright © 2000-2017 3DNews. All Rights Reserved.
Администрация 3DNews требует соблюдения на форуме правил и законов РФ
Серверы размещены в Hostkey