Member Avatar for JackyRock

Hi Friends,
How to create explorer like menu in Html or java script?
eg
+ Game(inside this Cricket and Football)

when click on + sign it become like--

- Game
-Cricket
-Football

Can anybody suggest me, by which command I can do it?


Buy Laptop||External Hard Drive||Portable Hard Drive

Edited by JackyRock because: n/a
  • 4 Contributors
  • 3 Replies
  • 99 Views
  • 1 Month Discussion Span
  • Latest Post Latest Post by Alison Clarke
Member Avatar for parry_kulk

There is no such command for it. You have to use Javascript and CSS to give the tree like look and feel. There are lots of readymade scripts available - both free as well as commercial ones.
Just google with something like "explorer tree in javascript"

Member Avatar for GreenDay2001

Here's just a simpe one. You can tweak it according to your requirement. Like you can add "+" and "-" icons before entries and make the interface cleaner ;). What you need to know is HTML ofcourse plus little JavaScript and HTML DOM.

<script type="text/javascript">
function toggle(obj) {
	var x = obj.getElementsByTagName("ul")[0];
	if( x.style.display == "none" )
		x.style.display = "block";
	else
		x.style.display = "none"; 
}	
</script> 
<body>
<div id="menu">
    <div>
       	<span onclick="toggle(this.parentNode);">Heading 1</span>
        <ul>
            <li>One</li>
            <li>Two</li>
        </ul>
    </div>	
    <div>
       	<span onclick="toggle(this.parentNode);">Heading 1</span>
        <ul>
            <li>Three</li>
            <li>Four</li>
        </ul>
    </div>
</div>

Or like parry_kulk said, you can always search google for premade scripts which are far more stable and well tested.

Edited by GreenDay2001 because: n/a
Member Avatar for Alison Clarke

i given to code u
button code
save as -------- 10.htm ---------
look code
Source(s):
<script type="text/javascript">
<!--
window.onload=show;
function show(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).styl…
}
if (d) {d.style.display='block';}
}
//-->
</script>

<dl id="menu">

<dt onclick="javascript:show();"><a href="#">Menu 1</a></dt>

<dt onclick="javascript:show('smenu2');">Men… 2</dt>
<dd id="smenu2">
<ul>
<li><a href="#">sub-menu 2.1</a></li>
<li><a href="#">sub-menu 2.2</a></li>
<li><a href="#">sub-menu 2.3</a></li>
</ul>
</dd>

<dt onclick="javascript:show('smenu3');">Men… 3</dt>
<dd id="smenu3">
<ul>
<li><a href="#">sub-menu 3.1</a></li>
<li><a href="#">sub-menu 3.1</a></li>
<li><a href="#">sub-menu 3.1</a></li>
<li><a href="#">sub-menu 3.1</a></li>
<li><a href="#">sub-menu 3.1</a></li>
<li><a href="#">sub-menu 3.1</a></li>
</ul>
</dd>

<dt onclick="javascript:show('smenu4');">Men… 4</dt>
<dd id="smenu4">
<ul>
<li><a href="#">sub-menu 4.1</a></li>
<li><a href="#">sub-menu 4.1</a></li>
</ul>
</dd>

</dl>

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.