[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: Что-то типа выпадающего меню
Форум PHP программистов > JavaScript
Ded_Mazay
28.10.2009 - 14:30
Может кто-нибудь сказать как сделать, чтобы при нажатии на ссылку или кнопку выпадало, что-то типа меню, и скрывалось, при нажатии на кнопку закрыть? Спасибо заранее.



Спустя 2 дня, 12 часов, 48 минут, 49 секунд (31.10.2009 - 02:19) max_paine написал(а):
Лови:
Вертикальный выезд:
Свернутый текст
<html>
<head>
<script language="JavaScript">
var eypos=-200, ejump=-4;
var typos=-260, tjump=-4;
var delay=2;
function do_menue()
{
if(typos>-260)
{
tjump=-4;
if(typos>=130)
head_fahren();
}
ejump=-ejump;

if(eypos<=-200 || eypos>=20)
menue_fahren();
}
function menue_fahren()
{
if(document.layers) document.menue.top=eypos; else document.all.menue.style.top=eypos;
eypos+=ejump;
if(eypos>-200 && eypos<20)
setTimeout("menue_fahren()", delay);
}
function do_head()
{
if(eypos>-200)
{
ejump=-4;
if(eypos>=20)
menue_fahren();
}
tjump=-tjump;
if(typos<=-260 || typos>=130)
head_fahren();
}
function head_fahren()
{
if(document.layers) document.head.top=typos; else document.all.head.style.top=typos;
typos+=tjump;
if(typos>-260 && typos<130)
setTimeout("head_fahren()", delay);
}
</script>
</head>
<body bgcolor="#EDEDED" text="#000000" link="#000000" topmargin="0" leftmargin="0">
<div style="position:absolute; z-index:2; left:480;">
<TABLE BORDER=0>
<p><input type="button" value="Навигация по разделу"
onClick="javascript:do_menue()">
</p>
</TABLE>
</div>
<div id=menue style="position:absolute; top:-200; left:50; z-index: 2;">
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 COLS=3 width=450>
<TR>
<TD>
<A ONMOUSEOVER="window.status='Здесь должен быть ваш текст' ;return true" HREF="http://www.woweb.ru" target="dummy">[ВАШ ТЕКСТ 1]</a><br>
<A ONMOUSEOVER="window.status='Здесь должен быть ваш текст' ;return true" HREF="http://www.woweb.ru" target="dummy">[ВАШ ТЕКСТ 2]</a><br>
<A ONMOUSEOVER="window.status='Здесь должен быть ваш текст' ;return true" HREF="http://www.woweb.ru" target="dummy">[ВАШ ТЕКСТ 3]</a><br>
<A ONMOUSEOVER="window.status='Здесь должен быть ваш текст' ;return true" HREF="http://www.woweb.ru" target="dummy">[ВАШ ТЕКСТ 4]</a><br>
<A ONMOUSEOVER="window.status='Здесь должен быть ваш текст' ;return true" HREF="http://www.woweb.ru" target="dummy">[ВАШ ТЕКСТ 5]</a><br>
<A ONMOUSEOVER="window.status='Здесь должен быть ваш текст' ;return true" HREF="http://www.woweb.ru" target="dummy">[ВАШ ТЕКСТ 6]</a><br>
<A ONMOUSEOVER="window.status='Здесь должен быть ваш текст' ;return true" HREF="http://www.woweb.ru" target="dummy">[ВАШ ТЕКСТ 7]</a></TD>
</TR>
</TABLE>
</div>
</body>
</html>

Горизонтальный выезд:
Свернутый текст
<html>
<head>

<script language="JavaScript">
var eypos=-200, ejump=-4;
var typos=-260, tjump=-4;
var delay=2;
function do_menue()

{

if(typos>-260)

{

tjump=-4;

if(typos>=130)

head_fahren();

}



ejump=-ejump;

if(eypos<=-200 || eypos>=20)

menue_fahren();

}



function menue_fahren()

{

if(document.layers) document.menue.top=eypos; else document.all.menue.style.top=eypos;

eypos+=ejump;



if(eypos>-200 && eypos<20)

setTimeout("menue_fahren()", delay);

}
function do_head()

{
if(eypos>-200)

{

ejump=-4;

if(eypos>=20)

menue_fahren();

}



tjump=-tjump;

if(typos<=-260 || typos>=130)

head_fahren();

}



function head_fahren()

{

if(document.layers) document.head.top=typos; else document.all.head.style.top=typos;

typos+=tjump;



if(typos>-260 && typos<130)

setTimeout("head_fahren()", delay);

}


</script>


<!-- HEAD END HERE -->




</head>
<body bgcolor="#EDEDED" text="#000000" link="#000000" topmargin="0" leftmargin="0">


<!-- BODY START HERE -->

<div style="position:absolute; z-index:2; left:480;">
<TABLE BORDER=0>

<p><input type="button" value="Навигация по разделу"
onClick="javascript:do_menue()">
</p>


</TABLE>
</div>
<div id=menue style="position:absolute; top:-200; left:50; z-index: 2;">
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 COLS=3 width=450>
<TR>
<TD>
<A ONMOUSEOVER="window.status='Здесь должен быть ваш текст' ;return true" HREF="http://www.woweb.ru" target="dummy">[ВАШ ТЕКСТ 1]</a><br>
<A ONMOUSEOVER="window.status='Здесь должен быть ваш текст' ;return true" HREF="http://www.woweb.ru" target="dummy">[ВАШ ТЕКСТ 2]</a><br>
<A ONMOUSEOVER="window.status='Здесь должен быть ваш текст' ;return true" HREF="http://www.woweb.ru" target="dummy">[ВАШ ТЕКСТ 3]</a><br>
<A ONMOUSEOVER="window.status='Здесь должен быть ваш текст' ;return true" HREF="http://www.woweb.ru" target="dummy">[ВАШ ТЕКСТ 4]</a><br>
<A ONMOUSEOVER="window.status='Здесь должен быть ваш текст' ;return true" HREF="http://www.woweb.ru" target="dummy">[ВАШ ТЕКСТ 5]</a><br>
<A ONMOUSEOVER="window.status='Здесь должен быть ваш текст' ;return true" HREF="http://www.woweb.ru" target="dummy">[ВАШ ТЕКСТ 6]</a><br>
<A ONMOUSEOVER="window.status='Здесь должен быть ваш текст' ;return true" HREF="http://www.woweb.ru" target="dummy">[ВАШ ТЕКСТ 7]</a></TD>
</TR>
</TABLE>
</div>

<!-- BODY END HERE -->



</body>
</html>


Спустя 18 часов, 14 минут, 17 секунд (1.11.2009 - 20:33) Ded_Mazay написал(а):
спасибо=))

Спустя 13 часов, 25 минут, 58 секунд (2.11.2009 - 09:59) Dezigo написал(а):
функция на jquery.
Для проверки стиля он поставлен block или none.

Код
function OpenDiv(id)
{
$(function()
{
 var temp = document.getElementById(id);
 if(temp)
 {      
   if(temp.style.display == "block" )
      {
    $("#"+id).hide("slow");
      }
      else
      {
    $("#"+id).show("slow");
   
      }
 }
});
}


HTML
<img src=''images/test.png' onclick=OpenDiv('NumDivID');>

<div id='NumDivID' style='display:block;'></div>
Быстрый ответ:
Powered by dgreen

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2024 Invision Power Services, Inc.