Pereiti prie turinio

Javascript Vertikalus Menu

vzup

Sukūrė vzup
Tinklalapių kūrimas

 Dalintis Sekėjai 0

Rekomenduojami pranešimai

vzup

vzup 71

Sukurta
Sukurta (redaguota)

Noriu padaryt paprasta vertikalu menu, kad menu turetu submenus. Paspaudus ant vieno menu uzdaro kita menu ir taip, kad nebutu galima visu menu vienu kartu atidaryt, nes taip susidaro labai ilga linija zemyn.

 

Kodas:

 

 

 

<html>
<head>
<script>
function show(id)
{
el = document.getElementById(id);
if (el.style.display == 'none')
{
el.style.display = '';
el = document.getElementById('hd' + id);
} else {
el.style.display = 'none';
el = document.getElementById('hd' + id);
	}
}
</script>
</head>
<body>

<ul>
<li><a id="hd1menu1" onclick="java script:show('menu1');return false;" style="cursor: pointer;">Item1</a></li>
</ul>
<div id="menu1" style="display: none">														
<ul>
<li><a id="hd2menu2" onclick="java script:show('menu2');return false;" style="cursor: pointer;">SubItem1</a></li>
</ul>
<ul>
<div id="menu2" style="display: none">
	<li><a href="#">Link1</a></li>
	<li><a href="#">Link2</a></li>
	<li><a href="#">Link3</a></li>																		
</ul>									
<ul>									
	<li><a id="hd3menu3" onclick="java script:show('menu3');return false;" style="cursor: pointer;">SubItem2</a></li>
</ul>
<ul>
<div id="menu3" style="display: none">
	<li><a href="#">Link4</a></li>
	<li><a href="#">Link5</a></li>
	<li><a href="#">Link6</a></li>																
</ul>																
<ul>
	<li><a id="hd4menu4" onclick="java script:show('menu4');return false;" style="cursor: pointer;">SubItem3</a></li>
</ul>
<ul>
<div id="menu4" style="display: none">	
	<li><a href="#">Link7</a></li>
	<li><a href="#">Link8</a></li>
	<li><a href="#">Link9</a></li>
</ul>
</div>
</ul>
</div>

</body>
</html>

 

 

 

 

Google ieskojau, daug isbandziau visokiu skriptu, sitas atrodo artimiausias ko man reikia. Jau pavargau as su juom. Niekaip paciam neiseina padaryt. Ar labai cia sudetinga pakeist?

Redagavo vzup
Nuoroda į pranešimą
Dalintis kituose puslapiuose
vzup

vzup 71

Atrašyta
  • Autorius
Atrašyta 

<html>
<head>
<script>
function show(id)
{
el = document.getElementById(id);
if (el.style.display == 'none')
{
el.style.display = '';
el = document.getElementById('hd' + id);
} else {
el.style.display = 'none';
el = document.getElementById('hd' + id);
	}
}
</script>
</head>
<body>

<ul>
<li><a id="hd1menu1" onclick="java script:show('menu1');return false;" style="cursor: pointer;">Item1</a></li>
</ul>
<div id="menu1" style="display: none">														
<ul>
<li><a id="hd2menu2" onclick="java script:show('menu2');" onclick="java script:hide('menu3');" onclick="java script:hide('menu4');" style="cursor: pointer;">SubItem1</a></li>
</ul>
<ul>
<div id="menu2" style="display: none">
	<li><a href="#">Link1</a></li>
	<li><a href="#">Link2</a></li>
	<li><a href="#">Link3</a></li>																		
</ul>									
<ul>									
	<li><a id="hd3menu3" onclick="java script:show('menu3');" onclick="java script:hide('menu4');" onclick="java script:hide('menu2');" style="cursor: pointer;">SubItem2</a></li>
</ul>
<ul>
<div id="menu3" style="display: none">
	<li><a href="#">Link4</a></li>
	<li><a href="#">Link5</a></li>
	<li><a href="#">Link6</a></li>																
</ul>																
<ul>
	<li><a id="hd4menu4" onclick="java script:show('menu4');" onclick="java script:hide('menu3');" onclick="java script:hide('menu2');" style="cursor: pointer;">SubItem3</a></li>
</ul>
<ul>
<div id="menu4" style="display: none">	
	<li><a href="#">Link7</a></li>
	<li><a href="#">Link8</a></li>
	<li><a href="#">Link9</a></li>
</ul>
</div>
</ul>
</div>

</body>
</html>

 

 

Pasakyk, kad blogai darau. Sita buda ir pats bandziau ir logiskai jis turetu veikt, bet turbut kazka kreivai parasau.

Nuoroda į pranešimą
Dalintis kituose puslapiuose
gedas

gedas 129

Atrašyta
Atrašyta (redaguota) 
<HTML>

<HEAD>

<script language="JavaScript">

var ids=new Array('a1','a2','a3','a4');

function switchid(id){	
hideallids();
showdiv(id);
}

function hideallids(){

for (var i=0;i<ids.length;i++){
	hidediv(ids[i]);
}		  
}

function hidediv(id) {

if (document.getElementById) { 
	document.getElementById(id).style.display = 'none';
}
else {
	if (document.layers) { 
		document.id.display = 'none';
	}
	else { // 
		document.all.id.style.display = 'none';
	}
}
}

function showdiv(id) {


if (document.getElementById) { 
	document.getElementById(id).style.display = 'block';
}
else {
	if (document.layers) { 
		document.id.display = 'block';
	}
	else { 
		document.all.id.style.display = 'block';
	}
}
}
</script>


</HEAD>

<BODY>

<a href="java script:switchid('a1');">show a1</a><br><br>




<div id='a1' style="display:none;">

<li><a href="#">Link1</a></li>
	<li><a href="#">Link2</a></li>
	<li><a href="#">Link3</a></li> <br>

</div>



<a href="java script:switchid('a2');">show a2</a><br><br>



<div id='a2' style="display:none;">

	<li><a href="#">Link1</a></li>
	<li><a href="#">Link2</a></li>
	<li><a href="#">Link3</a></li> <br>

</div>


<a href="java script:switchid('a3');">show a3</a><br><br>




<div id='a3' style="display:none;">

<li><a href="#">Link1</a></li>
	<li><a href="#">Link2</a></li>
	<li><a href="#">Link3</a></li> <br>

</div>


<a href="java script:switchid('a4');">show a4</a><br><br>



<div id='a4' style="display:none;">

<li><a href="#">Link1</a></li>
	<li><a href="#">Link2</a></li>
	<li><a href="#">Link3</a></li> <br>

</div>



</BODY>

</HTML>

Redagavo Gedas
Nuoroda į pranešimą
Dalintis kituose puslapiuose

Prisijunkite prie diskusijos

Jūs galite rašyti dabar, o registruotis vėliau. Jeigu turite paskyrą, prisijunkite dabar, kad rašytumėte iš savo paskyros.

Svečias
Parašykite atsakymą...

×   Įdėta kaip raiškusis tekstas.   Atkurti formatavimą

  Only 75 emoji are allowed.

×   Nuorodos turinys įdėtas automatiškai.   Rodyti kaip įprastą nuorodą

×   Jūsų anksčiau įrašytas turinys buvo atkurtas.   Išvalyti redaktorių

×   You cannot paste images directly. Upload or insert images from URL.

Įkraunama...
×
 Dalintis
Sekėjai 0
Eiti į temų sąrašą

  • Dabar naršo   0 narių

    Nei vienas registruotas narys šiuo metu nežiūri šio puslapio.

  • Prisijunk prie bendruomenės dabar!

    Uždarbis.lt nariai domisi verslo, IT ir asmeninio tobulėjimo temomis, kartu sprendžia problemas, dalinasi žiniomis ir idėjomis, sutinka būsimus verslo partnerius ir dalyvauja gyvuose susitikimuose.

    Užsiregistruok dabar ir galėsi:

    ✔️ Dalyvauti diskusijose;

    ✔️ Kurti naujas temas;

    ✔️ Rašyti atsakymus;

    ✔️ Vertinti kitų žmonių pranešimus;

    ✔️ Susisiekti su bet kuriuo nariu asmeniškai;

    ✔️ Naudotis tamsia dizaino versija;

    ir dar daugiau.

    Registracija trunka ~30 sek. ir yra visiškai nemokama.

  • Naujausios temos

  • Karštos temos

×
×
  • Pasirinkite naujai kuriamo turinio tipą...