Forum PHP.pl > [js][html][php] Rozwijane menu

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [js][html][php] Rozwijane menu

Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript

seba15290

11.02.2008, 12:35:37

Witam,
Mam takie rozwijane menu:

[HTML] pobierz, plaintext 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>RSDS	</title>
<style type="text/css" media="screen">@import "includes/layout.css";</style>
</head>	 
		<script>
ID=setTimeout("ukryj()", 0);
function ukryj() {
div = document.getElementById("lista");
div.style.visibility = "hidden";
}
function pokaz() {
div = document.getElementById("lista");
div.style.visibility = "visible";
}
</script>
 
<body onload="javascript: ukryj()">
 
	<table border="0"  id="Menu" align="center" cellpadding="0" cellspacing="0" width="750" align="center"><tr><td height="35" style="background-image: url(img/tlo.gif);">
	<a href="index.php">Strona administracyjna</a></td>
 
	<td style="background-image: url(img/tlo.gif);"><a href="../../index.html">Strona główna</a></td>
 
	<td style="background-image: url(img/tlo.gif);"><a href="view_users.php">Użytkownicy</a></td>
 
	<td style="background-image: url(img/tlo.gif);"><a href="alfabetyczny_spis.php">Edytuj biogramy</a></td>
 
	<td style="background-image: url(img/tlo.gif);"><a href="#" onMouseOver="javascript:pokaz();" onMouseOut="javascript:ukryj();">Dodaj>></a></td></tr></table>
 
<div onMouseOver="javascript:pokaz(); width: 250" onMouseOut="javascript:ukryj();" id="lista">
<table border="0">
<tr><td style="background-image: url(img/tlo.gif);">>><a href="wstaw_nowego.php">Dodaj biogram</a></td></tr>
<tr><td style="background-image: url(img/tlo.gif);">>><a href="nowy_kraj.php">Dodaj kraj</a></td></tr>
<tr><td style="background-image: url(img/tlo.gif);">>><a href="nowy_stopien.php">Dodaj stopień naukowy</a></td></tr>
<tr><td style="background-image: url(img/tlo.gif);">>><a href="dodaj_grant.php">Dodaj nowy grant</a></td></tr>
<tr><td style="background-image: url(img/tlo.gif);">>><a href="dodaj_dziedzine.php">Dodaj dziedzinę naukową</a></td></tr>
<tr><td style="background-image: url(img/tlo.gif);">>><a href="dodaj_zainteresowanie.php">Nowe zainteresowanie</a>
</td></tr></table>
</div>
</body>
</html>
[HTML] pobierz, plaintext

Teraz gdy najeżdżam na "dodaj>>" lista rozwija się ale nie pod tym napisem. Nie wiem jak zrobić aby lista rozwijała się właśnie pod tym przyciskiem.

barthpl

11.02.2008, 13:18:10

spróbuj tak pod FF i IE działa - przynajmniej u mnie

[HTML] pobierz, plaintext 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>RSDS </title>
<style type="text/css" media="screen">@import "includes/layout.css";</style>
</head>
<script>
ID=setTimeout("ukryj()", 0);
function ukryj() {
div = document.getElementById("lista");
div.style.visibility = "hidden";
}
function pokaz() {
div = document.getElementById("lista");
div.style.visibility = "visible";
}
</script>
 
<body onload="javascript: ukryj()">
 
<table border="0" id="Menu" align="center" cellpadding="0" cellspacing="0" width="750" align="center">
<tr>
	<td height="35" style="background-image: url(img/tlo.gif);">
		<a href="index.php">Strona administracyjna</a></td>
 
	<td style="background-image: url(img/tlo.gif);"><a href="../../index.html">Strona główna</a></td>
 
	<td style="background-image: url(img/tlo.gif);"><a href="view_users.php">Użytkownicy</a></td>
 
	<td style="background-image: url(img/tlo.gif);"><a href="alfabetyczny_spis.php">Edytuj biogramy</a></td>
 
	<td style="overflow: hidden; background-image: url(img/tlo.gif);">
		<a style="display: block" href="#" onMouseOver="javascript:pokaz();" onMouseOut="javascript:ukryj();">Dodaj>></a>
 
		<div style="width: 200px; position: absolute; z-index: 12; clear: both;" onMouseOver="javascript:pokaz(); width: 250" onMouseOut="javascript:ukryj();" id="lista">
		<table border="0">
			<tr><td style="background-image: url(img/tlo.gif);">>><a href="wstaw_nowego.php">Dodaj biogram</a></td></tr>
			<tr><td style="background-image: url(img/tlo.gif);">>><a href="nowy_kraj.php">Dodaj kraj</a></td></tr>
			<tr><td style="background-image: url(img/tlo.gif);">>><a href="nowy_stopien.php">Dodaj stopień naukowy</a></td></tr>
			<tr><td style="background-image: url(img/tlo.gif);">>><a href="dodaj_grant.php">Dodaj nowy grant</a></td></tr>
			<tr><td style="background-image: url(img/tlo.gif);">>><a href="dodaj_dziedzine.php">Dodaj dziedzinę naukową</a></td></tr>
			<tr><td style="background-image: url(img/tlo.gif);">>><a href="dodaj_zainteresowanie.php">Nowe zainteresowanie</a></td></tr>
		</table>
		</div>
	</td>
</tr>
</table>
</div>
</body>
</html>
[HTML] pobierz, plaintext

proponuje to jednak zrobić inaczej niż na tabelkach div lub ul jest do tego zdecydowanie lepsze

seba15290

11.02.2008, 15:09:05

dzięki, działa

vokiel

11.02.2008, 15:23:23

A czyż nie lepiej będzie ustawić ten div na ukryty na starcie ale w css / ew w stylach?

[HTML] pobierz, plaintext 
// nie dawac nic w body onload
<body>
//...
<div style="display: hidden; width: 200px; position: absolute; z-index: 12; clear: both;" onMouseOver="javascript:pokaz(); width: 250" onMouseOut="javascript:ukryj();" id="lista">
[HTML] pobierz, plaintext

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.