Drzewiaste menu

W niniejszym artykule opiszę projekt drzewiastego menu. Cały kod oraz wszystkie potrzebne pliki są dostępne do pobrania w dziale freebies. Na początek przedstawię przykładowy kod html menu.

<ul id="menu"> 
	<li id="tutorialeid"><a>Tutoriale</a></li> 
	<li id="tutoriale">
		<ul class="menu2"> 
			<li><a href="http://google.pl">Photoshop</a></li>
			<li><a href="http://google.pl">Office</a></li>
			<li><a href="http://google.pl">Flash</a></li>
			<li id="webdesignid"><a>Webdesign</a></li>
			<li id="webdesign">
				<ul class="menu3">
					<li><a href="http://google.pl">HTML</a></li>
					<li><a href="http://google.pl">CSS</a></li>
					<li><a href="http://google.pl">JavaScript</a></li>
					<li><a href="http://google.pl">PHP</a></li>
				</ul></li>
		</ul>
	</li> 
	<li id="artykulyid"><a>Artykuły</a></li> 
	<li id="artykuly">
		<ul class="menu2">
			<li><a href="http://google.pl">Grafika</a></li>
			<li><a href="http://google.pl">Webdesign</a></li>
			<li><a href="http://google.pl">jQuery</a></li>
			<li><a href="http://google.pl">Matematyka</a></li>
			<li><a href="http://google.pl">Photoshop</a></li>
			<li><a href="http://google.pl">Inne</a></li>
		</ul>
	</li>
</ul>

Menu będzie działało na następującej zasadzie: np. po kliknięciu na element li o identyfikatorze tutorialeid rozwinie się podmenu o identyfikatorze tutoriale. Widać zatem, że nazwa tutoriale łączy klikany element listy z odpowiednią podlistą do rozwinięcia. Styl css menu przedstawia poniższy listing

 ul.menu2 {
list-style-type: none;
margin-top: 0px !important;
margin-top: -10px;
}
ul.menu2 li{
list-style-image: url('images/page.gif');
margin: 0;
padding: 0;
}
ul.menu3 {
margin-top: 0px !important;
margin-top: -10px;
}
ul.menu3 li{
list-style-image: url('images/page.gif');
}
#menu{
list-style-type: none;
list-style-image: url('images/folder.gif');
font: 12px Arial, Helvetica, sans-serif;
}
a {
cursor: pointer;
text-decoration: none;
color: black;
}
li#webdesignid 
{ 
list-style-image: url('images/folder.gif');
}
li#tutoriale, li#artykuly, li#webdesign
{
list-style-type: none;
list-style-image: none;
}

Klasy menu2 i menu3 reprezentują poziomy zagnieżdżenia listy. Warto również zwrócić uwagę na obrazki: folder.gif – reprezentuje element nierozwiniętej listy, folder_page.gif – element rozwiniętej listy, natomiast page.gif – zwykły element listy. Oczywiście obrazki te można podmienić na własne. Na zakończenie pozostaje tylko kod JavaScript.

function init()
{
	function toggle(){
		var zmm = this.getAttribute('id'); 
		var lista = zmm.substr(0,zmm.length-2);
		var stylelem=document.getElementById(lista).style; 
		var wysw = document.getElementById(lista+'id').style;
		if (stylelem.display=="none"){ 
		stylelem.display="block"; 
		wysw.listStyleImage='url(images/folder_page.gif)';
		 }
		else{ 
		stylelem.display="none"; 
		wysw.listStyleImage='url(images/folder.gif)';
		 } 
	} 
	 var wszystkie_li = document.getElementsByTagName('li');
	 for(var i=0;i<wszystkie_li.length;i++)
	 {
		if(wszystkie_li[i].getAttribute('id'))
		{
			 if(wszystkie_li[i].getAttribute('id').substring(wszystkie_li[i].getAttribute('id').length-2)=='id')
			 {
				var zm = wszystkie_li[i].getAttribute('id');
				dp_none = wszystkie_li[i].getAttribute('id').substring(0,wszystkie_li[i].getAttribute('id').length-2);
				document.getElementById(dp_none).style.display="none";
				document.getElementById(zm).onclick=toggle;
			 }
		}
	 }
}
window.onload=init;