שלום לכם.
לאחר המלצתו של GreenBerret בקישור פה, החלטתי לנסות ולהשתמש בקוד שהוא הביא בקישור הראשון.
הקוד מבצע תפריט נפתח ע"י CSS וJS (כבר הספקתי לראות שזה נושא די נפוץ בפורומים השונים) וקישור ישיר אליו - http://www.stunicholls.com/menu/tree_frog_vertical.html

אולם נתקלתי קצת בבעיות בהבנת הקוד. עלי לציין שאני חושב שאני יודע JS ו CSS די הצורך, ובכל זאת, הקוד שם די מסובך, ואשמח אם תוכלו לעזור לי להבין אותו צעד אחר צעד.

So let's go, Shell We?

קוד ה JS:

קוד:

 clickMenu = function(menu) {
var getEls = document.getElementById(menu).getElementsByTagName  ("LI");
var getAgn = getEls;
for (var i=0; i<getEls.length; i++) {
getEls[i].onclick=function() {
	for (var x=0; x<getAgn.length; x++) {
	getAgn[x].className=getAgn[x].className.replace("unclick", "");
	getAgn[x].className=getAgn[x].className.replace("click", "unclick");
	}
if ((this.className.indexOf('unclick'))!=-1) {
	this.className=this.className.replace("unclick", "");;
	}
	else {
	this.className+=" click";
	}
}
getEls[i].onmouseover=function() {
	this.className+=" hover";
}
getEls[i].onmouseout=function() {
	this.className=this.className.replace("hover", "");
}
}
} 

קוד הCSS:

קוד:

 #menu {list-style-type:none; padding:0; margin:0; width:125px; position:absolute; top:70px; left:0; border:1px solid #fff; border-width:0 1px 1px; z-index:100;}
#menu ul {list-style-type:none; padding:0; margin:0; width:125px;}
#menu li {float:left; background:#657; position:relative; border-top:1px solid #fff;}
#menu li.sub {background:#d30;}
#menu li, #menu li a {display:block; color:#fff; font-family:arial, sans-serif; font-size:11px; line-height:24px; width:125px; text-decoration:none; cursor:pointer; font-weight:bold; text-indent:5px;}
 
#menu ul,
#menu li.click ul ul,
#menu li.click ul li.hover ul ul {display:none;}
#menu li.hover {color:#ff0; z-index:500;}
#menu li.click {color:#ff0;}
#menu li.click ul {display:block;}
#menu li.click ul li.hover ul, 
#menu li.click ul li.hover ul li.hover ul {display:block; position:absolute; left:110px; top:-1px; border:1px solid #fff; border-width:0 1px 1px;}
#menu li.click ul li.fly {background: #657 url(frog_arrow.gif) no-repeat top right;}
#menu li.click ul li.hover {background:#98a;}
#menu li.click ul li.hover ul li {background:#c60;}
#menu li.click ul li.hover ul li.hover ul li {background:#780; z-index:500;}
#menu li.click ul li.hover ul li.fly {background: #c60 url(frog_arrow.gif) no-repeat top right;}
#menu li.click ul li.hover ul li.hover {z-index:500; background:#fa4;}
#menu li.click ul li.hover ul li.hover a {color:#000;}
#menu li.click ul li.hover ul li.hover ul li.hover {background:#aa0;}
#menu li.click ul li.hover ul li.hover ul li.hover a {color:#fff;} 

ונתחיל מקוד הCSS, ישר בהתחלה:

קוד:

 #menu ul,
#menu li.click ul ul,
#menu li.click ul li.hover ul ul {display:none;}

לא הבנתי את השורות האלו.
אם אני מנחש נכונה - השורות האלו באות להסתיר את כל התפריטים ותת-התפריטים בהתחלה.
אבל למה גם menu ul# מוסתר שם? הרי זהו התפריט הראשי, לא?

אני יודע, נדרש הרבה סבלנות כדי לעזור בכזה קוד ארוך, אבל לדעתי - זוהי העזרה הכי טובה שאפשר להגיש. ככה לפחות אני לומד הכי טוב

המון תודה.

אופס, פתאום אני שם לב שקוד הCSS התהפך לו לצד השני.

אנסה להעלות אותו שוב:

קוד:

 
 
#menu {list-style-type:none; padding:0; margin:0; width:125px; position:absolute; top:70px; left:0; border:1px solid #fff; border-width:0 1px 1px; z-index:100;}
 
#menu ul {list-style-type:none; padding:0; margin:0; width:125px;}
#menu li {float:left; background:#657; position:relative; border-top:1px solid #fff;}
#menu li.sub {background:#d30;}
#menu li, #menu li a {display:block; color:#fff; font-family:arial, sans-serif; font-size:11px; line-height:24px; width:125px; text-decoration:none; cursor:pointer; font-weight:bold; text-indent:5px;}
 
#menu ul,
#menu li.click ul ul,
#menu li.click ul li.hover ul ul {display:none;}
#menu li.hover {color:#ff0; z-index:500;}
#menu li.click {color:#ff0;}
#menu li.click ul {display:block;}
#menu li.click ul li.hover ul, 
#menu li.click ul li.hover ul li.hover ul {display:block; position:absolute; left:110px; top:-1px; border:1px solid #fff; border-width:0 1px 1px;}
#menu li.click ul li.fly {background: #657 url(frog_arrow.gif) no-repeat top right;}
#menu li.click ul li.hover {background:#98a;}
#menu li.click ul li.hover ul li {background:#c60;}
#menu li.click ul li.hover ul li.hover ul li {background:#780; z-index:500;}
#menu li.click ul li.hover ul li.fly {background: #c60 url(frog_arrow.gif) no-repeat top right;}
#menu li.click ul li.hover ul li.hover {z-index:500; background:#fa4;}
#menu li.click ul li.hover ul li.hover a {color:#000;}
#menu li.click ul li.hover ul li.hover ul li.hover {background:#aa0;}
#menu li.click ul li.hover ul li.hover ul li.hover a {color:#fff;}




 
 

איך משתמשים בקוד הזה?
תדביק גם את הקוד ה HTML שצריך בשביל לראות תפריט

אופס, סליחה.טוב, קוד הHTML הוא ממש פשוט:

קוד:

 
 
<ul id="menu">
<li class="sub">Types
<ul>
<li><a href="#nogo">European</a></li>
	...
<li class="fly"><a href="#nogo">American</a>
	<ul>
	 <li><a href="#nogo">South American</a></li>
	 <li class="fly"><a href="#nogo">North American</a>
	 <ul>
	 <li><a href="#nogo">Grey tree frog</a></li>
	 <li><a href="#nogo">Green tree frog</a></li>
	 <li><a href="#nogo">Spring peeper</a></li>
	 </ul>
	 </li>
	</ul>
</li>
<li><a href="#nogo">Japanese</a></li>
<li><a href="#nogo">Chinese</a></li>
</ul>
</li>
<li class="sub">Classifications
<ul>
<li class="fly"><a href="#nogo">Pelodryadinae</a>
	<ul>
	 <li><a href="#nogo">Cyclorana</a></li>
	 <li><a href="#nogo">Litoria</a></li>
	 <li><a href="#nogo">Nyctimystes</a></li>
	</ul>
</li>
<li class="fly"><a href="#nogo7">Phyllomedusinae</a>
	<ul>
	 <li><a href="#nogo">Agalychnis</a></li>
	 ....
</ul>
</li>
<li class="fly"><a href="#nogo">Hemiphractinae</a>
	<ul>
	 <li><a href="#nogo">Cryptobatrachus</a></li>
	 ....
	</ul>
</li>
<li class="fly"><a href="#nogo">Hylinae</a>
	<ul>
	 <li><a href="#nogo">Acris</a></li>
	 ....
</ul>
</li>
<li class="fly"><a href="#nogo9">Rhacophorinae</a>
	<ul>
	 <li><a href="#nogo">Boophis</a></li>
	 ....
</ul>
</li>
<li class="fly"><a href="#nogo">Buergeriinae</a>
	<ul>
	 <li><a href="#nogo">Buergeria</a></li>
	</ul>
</li>
</ul>
</li>
<li class="sub">References
<ul>
<li><a href="#ngoo">Wikipedia</a></li>
<li><a href="#nogo11">Encyclopedia</a></li>
</ul>
</li>
<li class="sub">Links
<ul>
<li><a href="#nogo">Complete treefrog</a></li>
....
</ul>
</li>
</ul>

את הנקודות אני הוספתי, כי היה שם סתם עוד קישורים מיותרים. כמו שאתה יכול לראות, הכל בנוי מרשימות בתוך רשימות.

ד.א. - חסכתי לכם חצי עבודה - נראה לי שאת קוד הJS הצלחתי לפענח. הבעיה שלי בעיקר היא דפקא עם ה CSS (ולחשוב שתמיד שנאתי JS..)

אחרי שהדבקת את הקוד, הבנתי את התשובה לשאלה הראשונה שלך
#menu ul פונה לכל הרשימות הלא-מסודרות (ul) שנמצאות תחת האוביקט עם הID שהוא menu.
לכן זה אומר שכל התת רשימות של התפריט יהיו מוסתרות. יענו כל התתי תפריטים יהיו מוסתרים, ורק התפריט הראשי יהיה מוצג.

יש עוד בעיות בCSS?

אגב, הצעה - אם אתה משתמש ב FF, תוריד תוסף שנקרא FireBug. נורא נוח לדבג ככה CSS (לכל אוביקט אפשר להוסיף ולהוריד מאפיינים ,ON-THE-FLY, קל למצוא אוביקטים וכו')

מצטער, אני עדיין לא מבין...
Menu ul פונה אל הרשימה הראשונה, לא? ז'תומרת, אל התפריט הראשי הראשי? ככה אני יודע... ו menu ul ul זה תת-התפריט שמתחתיו, וכן הלאה.
ואם אתה עושה 'הסתרה' לMenu ul - אתה בעצם מסתיר את התפריט הראשי?
ועוד משהו שאני לא מבין ב3 שורות קוד הללו - menu li.click ul ul#? למה צריך בסוף פעמיים ul? ברגע שכתבת menu li ul - זה כבר תת-התפריט, לא?

ותודה על ההצעה לפלאגין. אני בהחלט אשתמש בו!