467,077 Members | 1,011 Online
Bytes | Developer Community
Ask Question

Home New Posts Topics Members FAQ

Post your question to a community of 467,077 developers. It's quick & easy.

Query regarding collapsible Menu

Hi,

I am facing a problem for the allignment of the submenus under same line with the menu. Actually after clicking the menus the submenus should come exactly under same line with the menu but it is coming with some space.Can anyone help me in this regard. I am giving the total html code below which contains the javascript too.

Code:-

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
<!--
#foldheader{cursorointer;cursor:hand ; font-weight:bold}


//-->
</style>
<script language="JavaScript1.2">
<!--

//Smart Folding Menu tree- By Dynamic Drive (rewritten 03/03/02)
//For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
//This credit MUST stay intact for use


var ns6=document.getElementById&&!document.all
var ie4=document.all

function checkcontained(e)
{
var iscontained=0
cur=ns6? e.target : event.srcElement
i=0
if (cur.id=="foldheader")
iscontained=1
else
while (ns6&&cur.parentNode||(ie4&&cur.parentNode))
{
if (cur.id=="foldheader"||cur.id=="foldinglist")
{
iscontained=(cur.id=="foldheader")? 1 : 0
break
}
cur=ns6? cur.parentNode : cur.parentNode
}

if (iscontained)
{
var foldercontent=ns6? cur.nextSibling.nextSibling : cur.all.tags("UL")[0]
if (foldercontent.style.display=="none")
{
foldercontent.style.display=""

}
else
{
foldercontent.style.display="none"

}
}
}

if (ie4||ns6)
document.onclick=checkcontained

//-->
</script>
</HEAD>

<BODY>
<font face="Verdana">

<ul>
<li id="foldheader">News</li>
<ul id="foldinglist" style="display:none" style=&{head};>
<li><a href="http://www.cnn.com">CNN</a></li>
<li><a href="http://www.abcnews.com">ABC News</a></li>
<li><a href="http://www.news.bbc.co.uk">BBC News</a></li>
</ul>

<li id="foldheader">Webmaster</li>
<ul id="foldinglist" style="display:none" style=&{head};>
<li><a href="http://www.dynamicdrive.com">Dynamic Drive</a></li>
<li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
<li><a href="http://www.freewarejava.com">Freewarejava.com</a></li>
</ul>

<li id="foldheader">Nested Example</li>
<ul id="foldinglist" style="display:none" style=&{head};>
<li><a href="http://www.dynamicdrive.com">outer 1</a></li>
<li><a href="http://www.dynamicdrive.com">outer 2</a></li>
<li id="foldheader">Nested</li>
<ul id="foldinglist" style="display:none" style=&{head};>
<li><a href="http://www.dynamicdrive.com">nested 1</a></li>
<li><a href="http://www.dynamicdrive.com">nested 2</a></li>
</ul>
<li><a href="http://www.dynamicdrive.com">outer 3</a></li>
<li><a href="http://www.dynamicdrive.com">outer 4</a></li>
</ul>
</ul>

</font>
</BODY>
</HTML>


Thanks in advance.
Jan 17 '08 #1
  • viewed: 1973
Share:
2 Replies
harshmaul
Expert 256MB
hi
add this style
Also you need to validate yout code you've got many IDs all over the place. use classes if there is more than one


Expand|Select|Wrap|Line Numbers
  1. #foldinglist{
  2. margin-left:0px;
  3. }
Jan 28 '08 #2
Thanks Man...It worked now.

Appreciated.

Thanks & Regards,
Mukti

hi
add this style
Also you need to validate yout code you've got many IDs all over the place. use classes if there is more than one


Expand|Select|Wrap|Line Numbers
  1. #foldinglist{
  2. margin-left:0px;
  3. }
Jan 29 '08 #3

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

reply views Thread by madhur | last post: by
7 posts views Thread by David T. Ashley | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.