Форум программистов «Весельчак У»
  *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

  • Рекомендуем проверить настройки временной зоны в вашем профиле (страница "Внешний вид форума", пункт "Часовой пояс:").
  • У нас больше нет рассылок. Если вам приходят письма от наших бывших рассылок mail.ru и subscribe.ru, то знайте, что это не мы рассылаем.
   Начало  
Наши сайты
Помощь Поиск Календарь Почта Войти Регистрация  
 
Страниц: [1]   Вниз
  Печать  
Автор Тема: Меню, возникающее при нажатии на ссылку  (Прочитано 39144 раз)
0 Пользователей и 1 Гость смотрят эту тему.
Сергей Добросклонов
Постоялец

ru
Offline Offline
Пол: Мужской

« : 17-06-2010 10:28 » 

Я имею ввиду меню, как, допустим, у Яндекса:

Чтобы при щелчке на ссылку появлялось что-то вроде контестного меню. Смотрел код сохранённой страницы, ссылка ведёт на страницу, которая как бы подгружается, что ли... В общем, даже не знаю, как это назвать, поэтому в Интернете не смог найти.
« Последнее редактирование: 17-06-2010 17:08 от Sel » Записан
Sla
Команда клуба

ua
Offline Offline
Пол: Мужской

WWW
« Ответ #1 : 17-06-2010 11:25 » 

поиск
"выпадающие меню"
Записан

Мы все учились понемногу... Чему-нибудь и как-нибудь.
Золотая Лань
Молодой специалист

ru
Offline Offline
Пол: Женский

« Ответ #2 : 17-06-2010 11:27 » new

у Яндекса просто JQuery используется, и заранее задан обработчик для этого пункта
Записан
Сергей Добросклонов
Постоялец

ru
Offline Offline
Пол: Мужской

« Ответ #3 : 31-07-2010 09:10 » 

Сделал вот такое меню:

Но вот проблема: меню показывается и скрывается по нажатию на надпись меню. Я хочу чтобы менюшка скрывалась по щелчку в любом месте, то есть за пределами самого меню. Пункты меню - это абзацы, на котоорые подвешены события онКлик, которые размещены в диве. Если на див подвесить онБлур, то онКлик на пунктах меню не срабатывает, так как при потери фокуса с дива сам див исчезает и поэтому онКлик на абзацах не срабатывает. Размещу тут код страницы и цсс файла, если кому не лень, помогите разобраться с этим, буду очень благодарен!
Страница:
Код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Menu</title>
<LINK rel=stylesheet type=text/css href="12.css" media=all>
<script type="text/javascript" language="javascript">
function show_hide(id)
{
if (document.getElementById(id).className=="")
{
document.getElementById(id).className="invisible"
}
else
{
document.getElementById(id).className=""
}
}

function hover_icon_on_user_panel(id)
{
document.getElementById(id).className = 'hover';
}


function not_hover_icon_on_user_panel(id)
{
document.getElementById(id).className = 'not_hover';
}

function funct(parametr)
{
document.getElementById("mood_menu").className = 'invisible';
alert(parametr);
}
</script>
</head>

<body>
                 
<div id='select_mood' onClick=show_hide('mood_menu') title='Изменить состояние'>Menu</div>
<div id='mood_menu' class='invisible'>
<p onClick=funct(1) id='punkt1' class='default' onMouseOver='hover_icon_on_user_panel(this.id)' onMouseOut='not_hover_icon_on_user_panel(this.id)'>Punkt 1</p>
<p onClick=funct(2) id='punkt2' class='default' onMouseOver='hover_icon_on_user_panel(this.id)' onMouseOut='not_hover_icon_on_user_panel(this.id)'>Punkt 2</p>
<p onClick=funct(3) id='punkt3' class='default' onMouseOver='hover_icon_on_user_panel(this.id)' onMouseOut='not_hover_icon_on_user_panel(this.id)'>Punkt 3</p>
<p onClick=funct(4) id='punkt4' class='default' onMouseOver='hover_icon_on_user_panel(this.id)' onMouseOut='not_hover_icon_on_user_panel(this.id)'>Punkt 4</p>
</div>
   
</body>
</html>
Стиль:
Код:
.invisible{
display:none;
}

div#mood_menu{
position:absolute;
clear:both;
border: 1px solid #999999;
border-right: 2px solid #999999;
border-bottom: 2px solid #999999;
background-color:#fcfcfc;
width:106px;
padding-left:2px; padding-right:10px; padding-top:2px; padding-bottom:2px;
z-index:5;
}
/*Пункт меню в меню смены состояний*/
#punkt{
background-color: #fcfcfc;
margin:1px;
}
/*Просто ссылка*/
#mood_menu p.default{
font-size:12px; font-family:"Comic Sans MS", Arial, Helvetica, sans-serif; color:#333333;
padding: 2px;
padding-left: 4px;
display: block;
width: 100%;
text-decoration: none;
border: 1px solid #fcfcfc;
cursor:default;
}
/*Подведена мышь*/
#mood_menu p.hover{
font-size:12px; font-family:"Comic Sans MS", Arial, Helvetica, sans-serif; color:#333333;
padding: 2px;
padding-left: 4px;
display: block;
width: 100%;
text-decoration: none;
cursor:default;
background-color:#dfebfa;
border: 1px solid #6eb9cc;
}
/*Отведена мышка*/
#mood_menu p.not_hover{
font-size:12px; font-family:"Comic Sans MS", Arial, Helvetica, sans-serif; color:#333333;
padding: 2px;
padding-left: 4px;
display: block;
width: 100%;
text-decoration: none;
cursor:default;
background-color:#fcfcfc;
border: 1px solid #fcfcfc;
}
Записан
Sla
Команда клуба

ua
Offline Offline
Пол: Мужской

WWW
« Ответ #4 : 31-07-2010 19:45 » 

Барин, какие события ты знаешь?
onMouseOver  тебе знакомо...
onMouseOut тебе знакомо...
и даже onClick....
какие еще существуют?

И расскажи что ты делаешь в событийных функциях.
Просто мне в лом соединять два кода и отслеживать твои ошибки.

Записан

Мы все учились понемногу... Чему-нибудь и как-нибудь.
Сергей Добросклонов
Постоялец

ru
Offline Offline
Пол: Мужской

« Ответ #5 : 01-08-2010 08:54 » 

Событий то я много знаю. (Все они Dream Weawer'u  известны, стало быть и мне.) Но ни одно из мне не помогло. А файлы исходные я могу на почту скинуть.  Улыбаюсь Я ж сразу сказал: "Если кому не лень".
Записан
Sla
Команда клуба

ua
Offline Offline
Пол: Мужской

WWW
« Ответ #6 : 01-08-2010 14:13 » 

Барин, выкладывай сюда, не боись - не покусаем.
Записан

Мы все учились понемногу... Чему-нибудь и как-нибудь.
Сергей Добросклонов
Постоялец

ru
Offline Offline
Пол: Мужской

« Ответ #7 : 01-08-2010 18:55 » 

Закинул на Народ.
...

* Menu.rar (1.09 Кб - загружено 905 раз.)
« Последнее редактирование: 02-08-2010 14:45 от Алексей1153++ » Записан
RXL
Технический
Администратор

ru
Offline Offline
Пол: Мужской

WWW
« Ответ #8 : 01-08-2010 19:31 » 

Барин, лучше не файлопомойками пользоваться, а атачить к посту. там через месяц уже едалят, а тут не удаляем. Вдруг кому-нибудь понадобится...
Записан

... мы преодолеваем эту трудность без синтеза распределенных прототипов. (с) Жуков М.С.
Sla
Команда клуба

ua
Offline Offline
Пол: Мужской

WWW
« Ответ #9 : 02-08-2010 06:17 » 

Я хочу чтобы менюшка скрывалась по щелчку в любом месте,

onClick на родительском объекте - в твоем случае - body
Записан

Мы все учились понемногу... Чему-нибудь и как-нибудь.
Сергей Добросклонов
Постоялец

ru
Offline Offline
Пол: Мужской

« Ответ #10 : 02-08-2010 12:26 » 

onClick на родительском объекте - в твоем случае - body
У меня проскакивала такая мысль, но почему-то я её не пробовал реализовать... Как попробую - отпишусь.
Спасибо за помощь! Улыбаюсь
p.s.: Как файл прикреплять я не нашёл, поэтому на Народ скинул. Улыбаюсь
Записан
RXL
Технический
Администратор

ru
Offline Offline
Пол: Мужской

WWW
« Ответ #11 : 02-08-2010 12:32 » 

Барин, то, что внизу тему - это называется форма быстрого ответа. Жмешь там "Предварительный просмотр". Откроется страница: под вводом поста, нажми "Дополнительные опции...". Появится в том числе и форма для вложения.
Записан

... мы преодолеваем эту трудность без синтеза распределенных прототипов. (с) Жуков М.С.
Сергей Добросклонов
Постоялец

ru
Offline Offline
Пол: Мужской

« Ответ #12 : 03-08-2010 11:06 » 

onClick на родительском объекте - в твоем случае - body
Не получается, так как при нажатии на меню, оно появляется, но этот же щелчок считается сделанным и на body, поэтому меню показывается и скрывается одновременно так, что даже не успеваешь заметить. Зато если просто везде щёлкать (по любому месту на странице), меню появляется и скрывается....
Записан
Sla
Команда клуба

ua
Offline Offline
Пол: Мужской

WWW
« Ответ #13 : 03-08-2010 11:24 » 

Барин, все правильно, но для этого ты взведи флаг в глобальной переменной типа boolen
например
var click= false
function onclick() {
  if cliick==false {
     показать меню
  } else {
    скрыть меню
  }
     click = !click;
}
Записан

Мы все учились понемногу... Чему-нибудь и как-нибудь.
Сергей Добросклонов
Постоялец

ru
Offline Offline
Пол: Мужской

« Ответ #14 : 11-08-2010 10:51 » 

Либо я не так, что делаю, либо способ не рабочий.
Такой вот ещё вопрос: при нажатии на меню какое событие произойдёт раньше: клик на боди или на меню? Вроде должно срабатывать на боди сначала, а потом на меню....
Записан
Sla
Команда клуба

ua
Offline Offline
Пол: Мужской

WWW
« Ответ #15 : 11-08-2010 11:06 » 

Вроде должно срабатывать на боди сначала, а потом на меню....
Откуда дровишки?

А проверить слабо?
Записан

Мы все учились понемногу... Чему-нибудь и как-нибудь.
Sla
Команда клуба

ua
Offline Offline
Пол: Мужской

WWW
« Ответ #16 : 11-08-2010 11:30 » 

не понимаю...
ЧТО не работает?
Код:
<body onClick=show_hide('mood_menu')>
                 
<div id='select_mood'  title='Изменить состояние'>Menu</div>
<div id='mood_menu' class='invisible'>
<p onClick=funct(1) id='punkt1' class='default' onMouseOver='hover_icon_on_user_panel(this.id)' onMouseOut='not_hover_icon_on_user_panel(this.id)'>Punkt 1</p>
<p onClick=funct(2) id='punkt2' class='default' onMouseOver='hover_icon_on_user_panel(this.id)' onMouseOut='not_hover_icon_on_user_panel(this.id)'>Punkt 2</p>
<p onClick=funct(3) id='punkt3' class='default' onMouseOver='hover_icon_on_user_panel(this.id)' onMouseOut='not_hover_icon_on_user_panel(this.id)'>Punkt 3</p>
<p onClick=funct(4) id='punkt4' class='default' onMouseOver='hover_icon_on_user_panel(this.id)' onMouseOut='not_hover_icon_on_user_panel(this.id)'>Punkt 4</p>
</div>
   
</body>
работает  в FF. FF распространяет действие событий body на видимую область экрана.
В Ие тоже работает, но не так, как ты  хочешь.
ИЕ принимает события только в пределах body,

Установи себе средства разработчика, впрочем в ИЕ8 он встроен, и изучай ...

но и с этим можно побороться.
Записан

Мы все учились понемногу... Чему-нибудь и как-нибудь.
Сергей Добросклонов
Постоялец

ru
Offline Offline
Пол: Мужской

« Ответ #17 : 11-08-2010 20:18 » 

Спасибо за советы. Буду пытаться что-нибудь с этим сделать. Хотя так-то это не самая значительная проблема Улыбаюсь
Записан
Сергей Добросклонов
Постоялец

ru
Offline Offline
Пол: Мужской

« Ответ #18 : 01-07-2011 14:30 » 

Спустя почти год, я вернулся к проблеме Улыбаюсь
Нет, конечно, я не решал этот вопрос целый год, просто я сделал меню, более-менее приемлемое, но с одним НО, которое всё таки решил подправить сейчас Улыбаюсь
Меню возникает по клику и исчезает по уведению мыши, однако, после выбора пункта меню, хочу, чтобы оно закрывалось, но не могу сделать этого. Промучавшись некоторе время замудрил существующий вариант. Он стал несколько неудобно устроен за счёт нескольких функций скрывания, зато стал ПОЧТИ идеален: меню открывается по клику, закрывается по уведению или после выбора, однако, если оно закрылось по выбору пункта, то потом оно откроется нормально, а если оно закрылось по уведению, то потом открывается только со второго раза.
Может я несколько непонятно объяснил, но вот код:
Код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Меню</title>
<script>
function mark(id)
{
document.getElementById(id).className = 'hover';
}
/*Сделать не выделенным*/
function not_mark(id)
{
document.getElementById(id).className = 'not_hover';
}
/*Показывать если не виден, скрывать если виден*/
function show_hide(id)
{
if (document.getElementById(id).className=="")
{
document.getElementById(id).className="invisible";
}
else
{
document.getElementById(id).className="";
}
}
/*показать элемент, назначив ему определённный класс*/
function show2(id,classN)
{
document.getElementById(id).className=classN;
}
/*Сарятать элемент*/
function hide(id)
{
document.getElementById(id).className='invisible';
}
function hide2(id)
{
if (document.getElementById(id).style.display == 'none')
{
document.getElementById(id).style.display = '';
}
else
{
document.getElementById(id).style.display = 'none';
}
}
/*Из одного элемента вставить текст в другой*/
function move(id,id2)
{
document.getElementById(id).innerHTML = document.getElementById(id2).innerHTML;
}
</script>
<style>
/*Для всех контекстных меню*/
div.context_menu{
position:absolute;
padding-top:4px; padding-bottom:4px; padding-left:3px; padding-right:5px;
border: 1px solid #999999;
border-right: 2px solid #999999;
border-bottom: 2px solid #999999;
background-color:#fcfcfc;
}
/*Стиль пунктов меню*/
div.context_menu div.not_hover{
font-size:12px; color:333333;
text-indent:8px;
height:12px;
cursor:default;
margin-left:2px;
}
div.context_menu div.hover{
font-size:12px; color:333333;
text-indent:8px;
height:12px;
cursor:default;
text-decoration:underline;
padding-left:2px;
}
/*Убрать подчёркивание стрелки*/
img.context_menu_bullet{
float:left;
padding-top:4px;
padding-left:1px;
}
.invisible{
display:none;
}
</style>
</head>
<body>

<div style='float:left;margin-top:54px; margin-left:20px; width:130px; text-align:left; margin-right:15px;color:#000000;'>
<div id='vibor2_menu_place' onClick=show2('vibor2_menu','context_menu') onMouseOut=hide('vibor2_menu')>
<div id='vibor2_menu_current' style='float:left;text-decoration:underline; cursor:default;font-size:11px;'>Выбор 1</div>
<img class='context_menu_bullet' src='bullet_mini_bottom.png'>

<div id='vibor2_menu' onMouseOver=show2('vibor2_menu','context_menu') class='invisible' style='margin-top:10px; margin-left:-14px; width:130px;text-align:left;color:#333333;'>
<div id='vibor2_menu_punkt_1' class='not_hover' onMouseOver='mark(this.id)'  onMouseOut='not_mark(this.id)' onClick=move('vibor2_menu_current','vibor2_menu_punkt_1')>Выбор 1</div>
<div id='vibor2_menu_punkt_2' class='not_hover' onMouseOver='mark(this.id)'  onMouseOut='not_mark(this.id)' onClick=move('vibor2_menu_current','vibor2_menu_punkt_2')>Выбор 2</div>
<div id='vibor2_menu_punkt_3' class='not_hover' onMouseOver='mark(this.id)'  onMouseOut='not_mark(this.id)' onClick=move('vibor2_menu_current','vibor2_menu_punkt_3')>Выбор 3</div>
</div>
</div>

<div style='float:left;margin-top:54px; margin-left:20px; width:130px; text-align:left; margin-right:15px;color:#000000;'>
<div id='vibor_menu_place' onClick=show2('vibor_menu','context_menu'),hide2('vibor_menu') onMouseOut=hide('vibor_menu')>
<div id='vibor_menu_current' style='float:left;text-decoration:underline; cursor:default;font-size:11px;'>Выбор 1</div>
<img class='context_menu_bullet' src='bullet_mini_bottom.png'>

<div id='vibor_menu' onMouseOver=show2('vibor_menu','context_menu') class='invisible' style='margin-top:10px; margin-left:-14px; width:130px;text-align:left;color:#333333;display:none;'>
<div id='vibor_menu_punkt_1' class='not_hover' onMouseOver='mark(this.id)'  onMouseOut='not_mark(this.id)' onClick=move('vibor_menu_current','vibor_menu_punkt_1')>Выбор 1</div>
<div id='vibor_menu_punkt_2' class='not_hover' onMouseOver='mark(this.id)'  onMouseOut='not_mark(this.id)' onClick=move('vibor_menu_current','vibor_menu_punkt_2')>Выбор 2</div>
<div id='vibor_menu_punkt_3' class='not_hover' onMouseOver='mark(this.id)'  onMouseOut='not_mark(this.id)' onClick=move('vibor_menu_current','vibor_menu_punkt_3')>Выбор 3</div>
</div>
</div>

</body>
</html>
Так же готовый вариант во вложении.
Кому не лень, помогите подшаманить Улыбаюсь

* Меню.rar (1.58 Кб - загружено 909 раз.)
Записан
Sla
Команда клуба

ua
Offline Offline
Пол: Мужской

WWW
« Ответ #19 : 01-07-2011 14:43 » 

лень. Но подозреваю, что где-то ты с классами накрутил, не правильно изменил класс при маусаут, а при клике анализируешь на правильный, получаешь неправильный, приводишь к правильному (Ты все понял?) и второй клик у тебя уже правильный
Записан

Мы все учились понемногу... Чему-нибудь и как-нибудь.
Страниц: [1]   Вверх
  Печать  
 

Powered by SMF 1.1.21 | SMF © 2015, Simple Machines