|
Сергей Добросклонов
|
 |
« : 17-06-2010 10:28 » |
|
Я имею ввиду меню, как, допустим, у Яндекса: Чтобы при щелчке на ссылку появлялось что-то вроде контестного меню. Смотрел код сохранённой страницы, ссылка ведёт на страницу, которая как бы подгружается, что ли... В общем, даже не знаю, как это назвать, поэтому в Интернете не смог найти. |
|
|
|
« Последнее редактирование: 17-06-2010 17:08 от Sel »
|
Записан
|
|
|
|
|
Sla
|
|
« Ответ #1 : 17-06-2010 11:25 » |
|
поиск
"выпадающие меню"
|
|
|
|
|
Записан
|
Мы все учились понемногу... Чему-нибудь и как-нибудь.
|
|
|
Золотая Лань
Молодой специалист
 Offline
Пол: 
|
|
« Ответ #2 : 17-06-2010 11:27 » |
|
у Яндекса просто JQuery используется, и заранее задан обработчик для этого пункта
|
|
|
|
|
Записан
|
|
|
|
|
Сергей Добросклонов
|
|
« Ответ #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
|
|
« Ответ #4 : 31-07-2010 19:45 » |
|
Барин, какие события ты знаешь?
onMouseOver тебе знакомо...
onMouseOut тебе знакомо...
и даже onClick....
какие еще существуют?
И расскажи что ты делаешь в событийных функциях.
Просто мне в лом соединять два кода и отслеживать твои ошибки.
|
|
|
|
|
Записан
|
Мы все учились понемногу... Чему-нибудь и как-нибудь.
|
|
|
|
Сергей Добросклонов
|
|
« Ответ #5 : 01-08-2010 08:54 » |
|
Событий то я много знаю. (Все они Dream Weawer'u известны, стало быть и мне.) Но ни одно из мне не помогло. А файлы исходные я могу на почту скинуть.  Я ж сразу сказал: "Если кому не лень". |
|
|
|
|
Записан
|
|
|
|
|
Sla
|
|
« Ответ #6 : 01-08-2010 14:13 » |
|
Барин, выкладывай сюда, не боись - не покусаем.
|
|
|
|
|
Записан
|
Мы все учились понемногу... Чему-нибудь и как-нибудь.
|
|
|
|
Сергей Добросклонов
|
|
« Ответ #7 : 01-08-2010 18:55 » |
|
Закинул на Народ.
...
|
|
|
« Последнее редактирование: 02-08-2010 14:45 от Алексей1153++ »
|
Записан
|
|
|
|
|
RXL
|
|
« Ответ #8 : 01-08-2010 19:31 » |
|
Барин, лучше не файлопомойками пользоваться, а атачить к посту. там через месяц уже едалят, а тут не удаляем. Вдруг кому-нибудь понадобится...
|
|
|
|
|
Записан
|
... мы преодолеваем эту трудность без синтеза распределенных прототипов. (с) Жуков М.С.
|
|
|
|
Sla
|
|
« Ответ #9 : 02-08-2010 06:17 » |
|
Я хочу чтобы менюшка скрывалась по щелчку в любом месте,
onClick на родительском объекте - в твоем случае - body
|
|
|
|
|
Записан
|
Мы все учились понемногу... Чему-нибудь и как-нибудь.
|
|
|
|
Сергей Добросклонов
|
|
« Ответ #10 : 02-08-2010 12:26 » |
|
onClick на родительском объекте - в твоем случае - body
У меня проскакивала такая мысль, но почему-то я её не пробовал реализовать... Как попробую - отпишусь. Спасибо за помощь! p.s.: Как файл прикреплять я не нашёл, поэтому на Народ скинул. |
|
|
|
|
Записан
|
|
|
|
|
RXL
|
|
« Ответ #11 : 02-08-2010 12:32 » |
|
Барин, то, что внизу тему - это называется форма быстрого ответа. Жмешь там "Предварительный просмотр". Откроется страница: под вводом поста, нажми "Дополнительные опции...". Появится в том числе и форма для вложения.
|
|
|
|
|
Записан
|
... мы преодолеваем эту трудность без синтеза распределенных прототипов. (с) Жуков М.С.
|
|
|
|
Сергей Добросклонов
|
|
« Ответ #12 : 03-08-2010 11:06 » |
|
onClick на родительском объекте - в твоем случае - body
Не получается, так как при нажатии на меню, оно появляется, но этот же щелчок считается сделанным и на body, поэтому меню показывается и скрывается одновременно так, что даже не успеваешь заметить. Зато если просто везде щёлкать (по любому месту на странице), меню появляется и скрывается.... |
|
|
|
|
Записан
|
|
|
|
|
Sla
|
|
« Ответ #13 : 03-08-2010 11:24 » |
|
Барин, все правильно, но для этого ты взведи флаг в глобальной переменной типа boolen
например
var click= false
function onclick() {
if cliick==false {
показать меню
} else {
скрыть меню
}
click = !click;
}
|
|
|
|
|
Записан
|
Мы все учились понемногу... Чему-нибудь и как-нибудь.
|
|
|
|
Сергей Добросклонов
|
|
« Ответ #14 : 11-08-2010 10:51 » |
|
Либо я не так, что делаю, либо способ не рабочий.
Такой вот ещё вопрос: при нажатии на меню какое событие произойдёт раньше: клик на боди или на меню? Вроде должно срабатывать на боди сначала, а потом на меню....
|
|
|
|
|
Записан
|
|
|
|
|
Sla
|
|
« Ответ #15 : 11-08-2010 11:06 » |
|
Вроде должно срабатывать на боди сначала, а потом на меню....
Откуда дровишки? А проверить слабо? |
|
|
|
|
Записан
|
Мы все учились понемногу... Чему-нибудь и как-нибудь.
|
|
|
|
Sla
|
|
« Ответ #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 он встроен, и изучай ... но и с этим можно побороться. |
|
|
|
|
Записан
|
Мы все учились понемногу... Чему-нибудь и как-нибудь.
|
|
|
|
Сергей Добросклонов
|
|
« Ответ #17 : 11-08-2010 20:18 » |
|
Спасибо за советы. Буду пытаться что-нибудь с этим сделать. Хотя так-то это не самая значительная проблема |
|
|
|
|
Записан
|
|
|
|
|
Сергей Добросклонов
|
|
« Ответ #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>
Так же готовый вариант во вложении. Кому не лень, помогите подшаманить |
|
|
|
Записан
|
|
|
|
|
Sla
|
|
« Ответ #19 : 01-07-2011 14:43 » |
|
лень. Но подозреваю, что где-то ты с классами накрутил, не правильно изменил класс при маусаут, а при клике анализируешь на правильный, получаешь неправильный, приводишь к правильному (Ты все понял?) и второй клик у тебя уже правильный
|
|
|
|
|
Записан
|
Мы все учились понемногу... Чему-нибудь и как-нибудь.
|
|
|
|
