Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Tree menu indentation

Status
Not open for further replies.
ChrisRChamberlain

ChrisRChamberlain

Programmer
Mar 23, 2000
3,392
GB
The following code provides a tree like menu

What I can't see is how to reduce the indent for the secondary and subsequent levels

code in <Head>

<style>
<!--
#foldheader{cursor:pointer;cursor:hand ; font-weight:bold ;
list-style-image:url(fold.gif)}
#foldinglist{list-style-image:url(list.gif)}
//-->
</style>
<script language=&quot;JavaScript1.2&quot;>
<!--

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

var head=&quot;display:''&quot;
img1=new Image()
img1.src=&quot;fold.gif&quot;
img2=new Image()
img2.src=&quot;open.gif&quot;

var ns6=document.getElementById&&!document.all
var ie4=document.all&&navigator.userAgent.indexOf(&quot;Opera&quot;)==-1

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

if (iscontained){
var foldercontent=ns6? cur.nextSibling.nextSibling : cur.all.tags(&quot;UL&quot;)[0]
if (foldercontent.style.display==&quot;none&quot;){
foldercontent.style.display=&quot;&quot;
cur.style.listStyleImage=&quot;url(open.gif)&quot;
}
else{
foldercontent.style.display=&quot;none&quot;
cur.style.listStyleImage=&quot;url(fold.gif)&quot;
}
}
}

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

//-->
</script>

Code in <body>

<font face=&quot;Verdana&quot;>

<ul>
<li id=&quot;foldheader&quot;>News</li>
<ul id=&quot;foldinglist&quot; style=&quot;display:none&quot; style=&{head};>
<li><a href=&quot; <li><a href=&quot; News</a></li>
<li><a href=&quot; News</a></li>
</ul>

<li id=&quot;foldheader&quot;>Webmaster</li>
<ul id=&quot;foldinglist&quot; style=&quot;display:none&quot; style=&{head};>
<li><a href=&quot; Drive</a></li>
<li><a href=&quot; Kit</a></li>
<li><a href=&quot; </ul>

<li id=&quot;foldheader&quot;>Nested Example</li>
<ul id=&quot;foldinglist&quot; style=&quot;display:none&quot; style=&{head};>
<li><a href=&quot; 1</a></li>
<li><a href=&quot; 2</a></li>
<li id=&quot;foldheader&quot;>Nested</li>
<ul id=&quot;foldinglist&quot; style=&quot;display:none&quot; style=&{head};>
<li><a href=&quot; 1</a></li>
<li><a href=&quot; 2</a></li>
</ul>
<li><a href=&quot; 3</a></li>
<li><a href=&quot; 4</a></li>
</ul>
</ul>

</font>

<p align=&quot;center&quot;><font face=&quot;Arial&quot; size=&quot;-2&quot;>Free DHTML scripts provided by<br>
<a href=&quot; Drive</a></font></p>

<script language=&quot;JavaScript1.2&quot;>
<!--

function get_cookie(Name) {
//Get cookie routine by Shelley Powers
var search = Name + &quot;=&quot;
var returnvalue = &quot;&quot;;
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
// if cookie exists
if (offset != -1) {
offset += search.length
// set index of beginning of value
end = document.cookie.indexOf(&quot;;&quot;, offset);
// set index of end of cookie value
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

var foldercontentarray=new Array()
var c=0

if (ns6){
for (i=0;i<document.getElementsByTagName(&quot;UL&quot;).length;i++){
if (document.getElementsByTagName(&quot;UL&quot;).id==&quot;foldinglist&quot;){
foldercontentarray[c]=document.getElementsByTagName(&quot;UL&quot;)
c++
}
}
}

if (get_cookie(window.location.pathname) != ''){
var openresults=get_cookie(window.location.pathname).split(&quot; &quot;)
for (i=0 ; i < openresults.length ; i++){
if (ns6){
foldercontentarray[openresults].style.display=''
foldercontentarray[openresults].previousSibling.previousSibling.style.listStyleImage=&quot;url(open.gif)&quot;
}
else{
foldinglist[openresults].style.display=''
document.all[foldinglist[openresults].sourceIndex -1].style.listStyleImage=&quot;url(open.gif)&quot;
}
}
}

if (ns6||ie4){
var nodelength=ns6? c-1 : foldinglist.length-1
var nodes=new Array(nodelength)
var openones=''
}

function checkit(){
for (i=0 ; i <= nodelength ; i++){
if ((ns6&&foldercontentarray.style.display=='')||(ie4&&foldinglist.style.display==''))
openones=openones + &quot; &quot; + i
}
document.cookie=window.location.pathname+&quot;=&quot;+openones
}

if (ns6||ie4)
window.onunload=checkit
//-->
</script>

Thanks in advance HTH

Chris [pc2]
 
Sort by date Sort by votes
Hi,

the easiest way I see is simple using CSS.

For the li define either a left margin or a text indent.
example
li.main {margin-left: 10px}
li.secondary {margin-left: 15px}
or
li.main {text-indent: 10px}
li.secondary {text-indent: 15px}

then in the li below just do:
<li class=&quot;main&quot;> and
<li class=&quot;secondary&quot;>

you can also do it for ul,ol etc


I'm not sure which is the &quot;proper&quot; way with margin or ident.



É

endamcg-logo1b.gif

 
Upvote 0 Downvote
where you see a <UL> tag with style=&quot;display:none&quot;, change it to:

style=&quot;margin-left:10px; display:none&quot;

where 10px is the indentation from the left
 
Upvote 0 Downvote
I took a closer look and should have seen this first time.

In the header:
#foldheader{cursor:pointer; cursor:hand; font-weight:bold ;

#foldinglist{list-style-image:url(list.gif)}

Into the above add your left margin or text-indent so you will have something like:

#foldheader{margin-left: 10px; cursor:pointer; cursor:hand; font-weight:bold ;

btw, instead of class they use ID so no need to add class like I said above



É

endamcg-logo1b.gif

 
Upvote 0 Downvote
You can also change the indent with:

<li style=&quot;left:10px; position:relative;&quot;>just a text</li>

You can also add nagative values to move the text to the left site of the screen:

<li style=&quot;left:-10px; position:relative;&quot;>just a text</li>

works also for the margin-left:

<li style=&quot;margin-left:-10px;&quot;>just a text</li>

see also thread215-296019

Hope this helps,
Erik <!-- My sport: Boomerang throwing !!
This year I will participate at the World Championships in Germany. (!! Many Happy Returns !! -->
 
Upvote 0 Downvote
Brilliant!

I'd spent a long time trying to crack this problem with the exactly the same bit of code. And now it's sorted. Result!
 
Upvote 0 Downvote
However...

This technique does'nt seem to work in NS6. Anyone know a way to achieve this in NS6?
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
741
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
593
PeDa
PeDa
javierdlm001
  • Locked
  • Question
How to make a Tree-branching kind of solution to find answers? 1
Replies
1
Views
135
vacunita
vacunita
Krus1972
  • Locked
  • Question
Centering Content Within a Fixed Navigation Menu
Replies
10
Views
222
ChrisHirst
ChrisHirst
AzizKamal
  • Locked
  • Question
center-align menu item text 1
Replies
8
Views
342
vacunita
vacunita

Part and Inventory Search

Sponsor

Back
Top