הוסטס - פורום אחסון האתרים הגדול בישראל - שאלה

- פורום תיכנות (https://hosts.co.il/forums/forumdisplay.php?f=14)

- - שאלה | HTML - תפריט נפתח בלחיצה. (https://hosts.co.il/forums/showthread.php?t=49679)

שאלה | HTML - תפריט נפתח בלחיצה.

שלום שוב,
רציתי לדעת איך אני עושה משהו כזה:

נגיד ויש לי תפריט, אני רוצה רוצה לעשות שבזמן שילחצו על לינק מסויים, זה יפתח שדה נוסף מתחת לטבלה של הלינק.
(לפני הלחיצה לא יראו כלום) משהו כזה:
http://img244.imageshack.us/img244/1800/beforelq2.gif

ואחרי הלחיצה יופיע עוד שדה:
http://img504.imageshack.us/img504/982/afteriz4.gif

עוד דוגמא:
אם תלחצו על השם משתמש בפורום זה יפתח לך תפריט.

תודה.

הפונקציה

קוד:

 

function showHideTable(menuId){

var obj=document.getElementById(menuId)

obj.style.visibility=(obj.style.visibility=="visible"?"hidden":"visible")

}

שים את זה ב head

קוד:

 

<style>

div.menu

{

position:absolute;

visibility:hidden

}

</style>

ככה אמור להראות התוכן

קוד:

 

<td>

<a href="home.html">Home</a>

</td>

<td onClick="showHideTable('products')">

<a href="products.html">Products</a><br>

<div class="menu" id="products">

<a href="1.html">prod 1</a><br>

<a href="2.html">prod 2</a><br>

<a href="3.html">prod 3</a><br>

</div>

</td>

כתבתי את זה זריז אז אם יש באגים תקן ...

לא מציג לי את הקישורים 1 2 ו 3...

תן קישור איך עשית את זה...

HTML קוד:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>test</title>

<style type="text/css">

<!--

div.menu

{

position:absolute;

visibility:hidden

}

-->

</style>

</head>

<body>

<script language="javascript">

function showHideTable(menuId){

var obj=document.getElementById(menuId)

obj.style.visibility=(obj.style.visibility=="visible"?"hidden":"visible")

}

</script>

<td>

<a href="home.html">Home</a>

</td>

<td onClick="showHideTable('products')">

<a href="products.html">Products</a><br>

<div class="menu" id="products">

<a href="1.html">prod 1</a><br>

<a href="2.html">prod 2</a><br>

<a href="3.html">prod 3</a><br>

</div>

</td>

</body>

</html>

קיצר קח את הקוד ... שפר אותו

קוד:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>test</title>

<script language="javascript">

function showHideTable(menuId){

var obj=document.getElementById(menuId)

obj.style.visibility=(obj.style.visibility=="visible"?"hidden":"visible")

}

</script>

<style type="text/css">

<!--

div.menu

{

position:absolute;

visibility:hidden

}

-->

</style>

</head>

<body>

<table>

<tr>

<td>

<a href="#" onClick="showHideTable('1')">Products</a><br>

<div class="menu" id="1">

<a href="1.html">prod 1</a><br>

<a href="2.html">prod 2</a><br>

<a href="3.html">prod 3</a><br>

</div>

</td>

<td>

<a href="#" onClick="showHideTable('2')">Products</a><br>

<div class="menu" id="2">

<a href="1.html">prod 1</a><br>

<a href="2.html">prod 2</a><br>

<a href="3.html">prod 3</a><br>

</div>

</td>

<td>

<a href="#" onClick="showHideTable('3')">Products</a><br>

<div class="menu" id="3">

<a href="1.html">prod 1</a><br>

<a href="2.html">prod 2</a><br>

<a href="3.html">prod 3</a><br>

</div>

</td>

</tr>

</table>

</body>

</html>